/* ==========================================================================
   Navigation Dropdown - Випадаючий список для кнопки "Програми"
   ========================================================================== */

/* ===== КОНТЕЙНЕР З DROPDOWN (LI) ===== */

.header__menu-item--has-dropdown {
  position: relative; /* Для абсолютного позиціонування dropdown відносно кнопки */
}

/* ===== КНОПКА З DROPDOWN ===== */

/* .header__link--dropdown наслідує базові стилі від .header__link з navigation.css */

.header__link--dropdown:focus {
  background: var(--color-primary);
  border: 1px solid var(--color-white);
  color: var(--color-white);
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* ===== СТРІЛКА-ІНДИКАТОР ===== */

.header__link-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  transition: transform 0.25s ease;
}

.header__link--dropdown[aria-expanded="true"] .header__link-arrow {
  transform: rotate(180deg);
}

/* ===== DROPDOWN КОНТЕЙНЕР ===== */

.header__dropdown {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: var(--z-dropdown);
  min-width: 200px;
  white-space: nowrap;
  
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 10px;
  
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0.25s;
}

/* Відкритий стан (через атрибут aria-hidden) */
.header__dropdown[aria-hidden="false"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* ===== СПИСОК ПУНКТІВ ===== */

.header__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__dropdown-list li {
  list-style: none;
}

/* ===== ПОСИЛАННЯ В DROPDOWN ===== */

.header__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--menu-spacing-md) * 0.7);
  color: var(--color-white);
  text-decoration: none;
  font-size: calc(18px * var(--menu-scale));
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
  touch-action: manipulation;
}

.header__dropdown-link:focus {
  background: var(--color-primary);
  border: 1px solid var(--color-white);
  color: var(--color-white);
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .header__dropdown-link:hover {
    background: var(--color-primary);
    border: 1px solid var(--color-white);
    color: var(--color-white);
    text-decoration: none;
  }
}

/* Premium пункт - опціональний спеціальний стиль */
.header__dropdown-link--premium {
  /* Можна додати спеціальний стиль для Premium, наразі така ж як інші */
}

/* ===== АДАПТИВНІСТЬ - МОБІЛЬНІ ===== */

@media (width <= 767px) {
  
  .header__dropdown-link {
    /* Мінімальна висота для touch targets */
    min-height: 40px;
    padding: 8px 12px;
  }
}

/* ===== iOS Safari ФІКСИ ===== */

@supports (-webkit-touch-callout: none) {
  .header__dropdown {
    -webkit-overflow-scrolling: touch;
  }

  /* iOS Safari: покращена видимість на мобільній при dropdown відкритому */
  @media (width <= 767px) {
    .header__dropdown[aria-hidden="false"] {
      /* Гарантуємо що dropdown видимий над іншим контентом на iOS */
      position: absolute;
      z-index: 1002;
      
      /* Коректна робота з high zoom level на iOS Safari */
      -webkit-user-select: none;
      user-select: none;
    }
  }
}

/* ===== МОБІЛЬНІ - FIX ДЛЯ OVERFLOW CLIPPING ===== */

/* Коли dropdown відкритий на мобільній, тимчасово вимикаємо overflow обрізання */
@media (width <= 767px) {
  body.programs-dropdown-open .mobile-nav-container {
    overflow: visible;
  }

  body.programs-dropdown-open .mobile-nav-container .header__nav {
    overflow: visible;
  }

  body.programs-dropdown-open .mobile-nav-container .header__menu {
    overflow: visible;
  }
}