/* Responsive header (static, no JS)
 * ≥ 1511px: full nav visible (logo-to-nav gap is comfortably > 15px)
 * 600–1510px: logo + hamburger + phone CTA inline; full nav hidden until hamburger clicked
 * ≤ 599px: logo + hamburger only; phone CTA hidden from header, accessible via dropdown
 *
 * Toggle is CSS-only via a hidden checkbox + <label> wrapping the hamburger.
 */

#nav-toggle { position: absolute; left: -9999px; opacity: 0; }

.av-burger-link { cursor: pointer; display: inline-flex; align-items: center; }

/* Avia hides the burger menu by default at desktop. */
ul.av-main-nav > li.av-burger-menu-main { display: none; }

@media (max-width: 1510px) {
  /* Force flex layout so phone + hamburger vertically center inline.
   * The parent <nav> is absolutely positioned at full header height;
   * we make the <ul> fill that height so align-items:center can work. */
  nav.main_menu .av-main-nav-wrap { height: 100%; }
  ul.av-main-nav {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }

  /* Hide regular nav items; keep phone CTA + hamburger inline. */
  ul.av-main-nav > li.menu-item { display: none; }
  ul.av-main-nav > li.av-menu-button { display: inline-flex; align-items: center; order: 2; }
  ul.av-main-nav > li.av-burger-menu-main {
    display: inline-flex;
    align-items: center;
    order: 1;
    margin-right: 12px;
  }

  /* When the checkbox is checked, drop the full menu down below the header */
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    height: auto;
    background: #000000;
    flex-direction: column;
    padding: 12px 0;
    z-index: 999;
    box-shadow: 0 8px 16px rgba(0,0,0,0.35);
  }
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.menu-item {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  /* Avia sets line-height:100px on desktop nav anchors to center them vertically
   * in the 100px-tall header. In our stacked dropdown that creates huge rows;
   * reset to a normal compact line. */
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.menu-item > a {
    line-height: 1.4 !important;
    height: auto !important;
    padding: 12px 20px !important;
    display: block;
  }
  /* Hide between-items dividers. Avia draws a 1px yellow border-left on
   * .avia-menu-text to separate horizontal menu items; in the stacked dropdown
   * that turns into a vertical bar before each label. */
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.menu-item > a .avia-bullet,
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.menu-item > a .avia-menu-fx {
    display: none;
  }
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.menu-item > a .avia-menu-text {
    border-left: 0 !important;
  }

  /* Keep the hamburger visible in the dropdown (so user can close it) and
   * transform it into an X using Avia's existing av-hamburger--spin.is-active
   * transforms, applied here via the :checked state. */
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.av-burger-menu-main {
    /* Override the dropdown's full-width row treatment for the hamburger */
    position: absolute;
    top: -70px;        /* sit on the header, where it lived before opening */
    right: 24px;
    width: auto;
    padding: 0;
    border: none;
    display: inline-flex;
  }
  #nav-toggle:checked ~ nav.main_menu .av-hamburger--spin .av-hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.14s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  #nav-toggle:checked ~ nav.main_menu .av-hamburger--spin .av-hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;
  }
  #nav-toggle:checked ~ nav.main_menu .av-hamburger--spin .av-hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}

@media (max-width: 599px) {
  /* Smallest screens: hide phone CTA from header. Only logo + hamburger remain. */
  ul.av-main-nav > li.av-menu-button { display: none; }
  /* Still show inside the dropdown when opened */
  #nav-toggle:checked ~ nav.main_menu ul.av-main-nav > li.av-menu-button {
    display: block;
  }
}