/*
 * License page header. Figma: desktop bar 2:20, open dropdown 244:18 + 244:110, mobile bar 259:10865.
 * Absolutely positioned over the hero (the hero background starts at the top of the page).
 * Desktop >= 1024px; below that the mobile bar (design 390px) is used. 1024 is a derived breakpoint.
 */

.lpl-header {
  position: absolute;
  top: 9px;                       /* mobile 259:10865 */
  left: 0;
  right: 0;
  z-index: 100;
  font-family: var(--lpl-font);
}

/* The glass fill lives on ::before so that the dropdown (its own backdrop-filter) is not nested in a backdrop root. */
.lpl-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 14px, var(--lpl-container));
  height: 72px;
  margin-inline: auto;
  padding: 8px 16px;
  border-radius: 11px;            /* mobile 259:10865 */
}
.lpl-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--lpl-glass);
  -webkit-backdrop-filter: blur(2.25px);
  backdrop-filter: blur(2.25px);
}
.lpl-header__bar > * { position: relative; }

.lpl-header__logo { display: block; flex: none; width: 89px; height: 50px; }
.lpl-header__logo img { display: block; width: 89px; height: 50px; }

/* ---- nav list (desktop) ----------------------------------------------------------------- */
.lpl-nav__list {
  display: flex;
  align-items: center;
  gap: 60px;                      /* 2:71 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.lpl-nav__item { position: relative; display: flex; align-items: center; gap: 8px; }
.lpl-nav__link,
.lpl-nav__toggle {
  font-family: var(--lpl-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #fff;
  white-space: nowrap;
}
.lpl-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                       /* 2:73 */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lpl-nav__toggle--caret { gap: 0; }
.lpl-nav__link:hover { color: #fff; opacity: 0.8; }
.lpl-nav__chev {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
  transform: rotate(90deg);       /* 2:75: right chevron turned down */
  transition: transform 0.2s ease;
}
.lpl-nav__item.is-open > .lpl-nav__toggle .lpl-nav__chev,
.lpl-nav__item.is-open > .lpl-nav__toggle--caret .lpl-nav__chev { transform: rotate(-90deg); }   /* 244:73: points up */

/* ---- dropdown (244:110) ------------------------------------------------------------------ */
.lpl-nav__sub {
  position: absolute;
  top: calc(100% + 25px);         /* item bottom -> bar bottom: bar 72, item 22 centred = 25px (was 29px: a 4px gap showed the hero between bar and list) */
  left: -21px;                    /* 244:110 x=1108 vs item x=1129 */
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 17px;
  width: max-content;
  min-width: 161px;
  padding: 18px 23px;
  margin: 0;
  list-style: none;
  border-radius: 0 0 22px 22px;
  /* VQA: the bare 6% glass let the white hero title show through behind white links (unreadable); a deep-violet tint keeps the glass look */
  background: linear-gradient(rgba(36, 12, 70, 0.74), rgba(36, 12, 70, 0.74)), var(--lpl-glass);
  -webkit-backdrop-filter: blur(12.2px);
  backdrop-filter: blur(12.2px);
}
.lpl-nav__item--lang .lpl-nav__sub { left: auto; right: -16px; min-width: 0; }
.lpl-nav__item.is-open > .lpl-nav__sub { display: flex; }
.lpl-nav__sub-item { display: flex; align-items: center; }
.lpl-nav__sub-link {
  font-family: var(--lpl-font);
  font-weight: 500;
  font-size: 12px;
  line-height: 22px;
  color: #fff;
  white-space: nowrap;
}
.lpl-nav__sub-link:hover { color: #fff; opacity: 0.8; }

/* open state: the bar loses its bottom-right radius (244:18: rounded-bl/tl/tr only) - only for the language list, which
   hangs flush under the bar's right edge; the other dropdown sits mid-bar and must not square the corner (VQA) */
.lpl-header:has(.lpl-nav__item--lang.is-open) .lpl-header__bar { border-bottom-right-radius: 0; }

/* ---- mobile controls (259:10928) ----------------------------------------------------------- */
.lpl-header__mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;                      /* width 74 = 20 + 28 + 26 */
}
.lpl-header__phone { display: block; width: 20px; height: 29px; border-bottom: 1px solid rgba(255, 255, 255, 0); }
.lpl-header__phone img { display: block; width: 20px; height: 28px; }
.lpl-header__burger {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lpl-header__burger img { position: absolute; left: 0; top: 0; display: block; width: 28px; height: 28px; transition: opacity 0.15s ease; }
.lpl-header__burger .lpl-header__burger-close { height: 26.79px; top: 0; opacity: 0; }   /* 290:10492 (28 x 26.79) */
.lpl-header.is-menu-open .lpl-header__burger-open { opacity: 0; }
.lpl-header.is-menu-open .lpl-header__burger-close { opacity: 1; }
.lpl-nav__chev--accent { display: none; }

/* ---- below 1024: mobile bar; open state = full-height glass sheet (290:96) ---------------------- */
@media (max-width: 1023.98px) {
  .lpl-nav { display: none; }
  .lpl-header__logo { margin-block: -1px; }

  .lpl-header.is-menu-open .lpl-header__bar {
    position: fixed;
    top: 8px;
    left: 6px;
    right: 8px;
    width: auto;
    height: calc(100dvh - 17px);                 /* 631 @ 648 */
    margin: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: 66px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 11px;
  }
  .lpl-header.is-menu-open .lpl-header__bar::before {
    background: rgba(20, 6, 44, 0.8);              /* VQA: was rgba(0,0,0,.3) - the hero CTA glowed through behind the links */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .lpl-header.is-menu-open .lpl-header__logo { order: 1; }
  .lpl-header.is-menu-open .lpl-header__mobile { order: 2; }
  .lpl-header.is-menu-open .lpl-nav {
    order: 3;
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    padding-bottom: 16px;
  }
  .lpl-nav__list {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 11.57vh, 75px);               /* 75px @ 648 viewport height (290:79) */
  }
  .lpl-nav__item { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .lpl-nav__link,
  .lpl-nav__toggle { font-size: 16px; font-weight: 600; line-height: 22px; }
  .lpl-nav__link:hover { opacity: 1; }

  /* language switcher = yellow button (290:87) */
  .lpl-nav__item--lang > .lpl-nav__toggle {
    width: 98px;
    height: 51px;
    gap: 8px;
    border-radius: var(--lpl-r-btn);
    background: var(--lpl-yellow);
  }
  .lpl-nav__item--lang > .lpl-nav__toggle .lpl-nav__link { color: var(--lpl-purple-btn-text); }
  .lpl-nav__item--lang > .lpl-nav__toggle .lpl-nav__chev:not(.lpl-nav__chev--accent) { display: none; }
  .lpl-nav__item--lang > .lpl-nav__toggle .lpl-nav__chev--accent { display: block; }

  /* sub lists open inline (not drawn in the design) */
  .lpl-nav__sub {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    padding: 14px 0 0;
    gap: 12px;
    align-items: center;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lpl-nav__sub-link { font-size: 14px; font-weight: 500; }
  .lpl-nav__item--lang .lpl-nav__sub { right: auto; }
  .lpl-header .lpl-header__bar,
  .lpl-header:has(.lpl-nav__item--lang.is-open) .lpl-header__bar { border-bottom-right-radius: 11px; }
}
body.lpl-menu-open { overflow: hidden; }

/* ---- desktop (>= 1024) ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .lpl-header { top: 38px; }                      /* 2:20 */
  .lpl-header__bar { width: min(100% - 2 * var(--lpl-gutter), var(--lpl-container)); border-radius: var(--lpl-r-nav); }
  .lpl-header__mobile { display: none; }
  .lpl-nav { display: block; }
}
/* tighten the 60px rhythm only when the 1360 container is squeezed */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .lpl-nav__list { gap: 36px; }
}