/* Site header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-dark);
}

.site-header__inner {
  box-sizing: content-box;
  max-width: var(--wrapper-max);
  margin-inline: auto;
  padding-inline: 5%;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .site-header__inner { padding-inline: 8%; }
}

.site-header__logo { flex: none; }

.site-header__logo img { width: 8.25rem; }

/* Primary nav — off-canvas panel below 1200px */
.site-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  background: var(--color-dark);
  border-top: 1px solid var(--color-dark-border);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.site-header__nav.is-open { display: block; }

.site-header__menu a {
  display: block;
  padding: 0.875rem var(--space-3);
  border-bottom: 1px solid var(--color-dark-border);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible,
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a,
.site-header__menu .current-menu-ancestor > a,
.site-header__menu .current_page_ancestor > a { color: var(--color-primary); }

/* Mobile: children are collapsed behind a chevron button injected by
   navigation.js. The collapse is gated behind .has-submenu-toggle so that
   without JavaScript there is no button — and the submenu stays open and
   usable rather than being permanently hidden. */
.site-header__menu .sub-menu a {
  padding-left: var(--space-5);
  font-size: 0.8125rem;
  color: var(--color-text-soft);
}

.site-header__menu .menu-item-has-children.has-submenu-toggle {
  position: relative;
}

/* Keep the parent link clear of the button so the tap targets never overlap. */
.site-header__menu .has-submenu-toggle > a {
  padding-right: 3.75rem;
}

.site-header__submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--color-dark-border);
  cursor: pointer;
}

/* Same chevron as the desktop dropdowns, masked so it takes the text colour. */
.site-header__submenu-toggle::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-color: #fff;
  -webkit-mask: url("../icons/chevron-down.svg") no-repeat center / contain;
  mask: url("../icons/chevron-down.svg") no-repeat center / contain;
  transition: transform 0.2s ease;
}

.site-header__submenu-toggle:hover::after,
.site-header__submenu-toggle:focus-visible::after { background-color: var(--color-primary); }

.site-header__submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  background-color: var(--color-primary);
}

.site-header__menu .has-submenu-toggle > .sub-menu { display: none; }

.site-header__menu .has-submenu-toggle.is-submenu-open > .sub-menu { display: block; }

@media (prefers-reduced-motion: reduce) {
  .site-header__submenu-toggle::after { transition: none; }
}

/* "Book a Skip" rendered as a button rather than a plain nav link.
   Matched on the destination path, not the menu-item ID, so it survives the
   item being reordered or deleted and re-added. If the page slug ever
   changes, either update the path here or add a CSS class to the item under
   Appearance → Menus (Screen Options → CSS Classes) and swap the selector.
   Mobile: an inset button inside the panel. Desktop: a pill in the nav row. */
.site-header__menu a[href*="/book-a-skip"],
.site-header__menu .current-menu-item > a[href*="/book-a-skip"],
.site-header__menu .current_page_item > a[href*="/book-a-skip"] {
  margin: 0.75rem var(--space-3);
  padding: 0.875rem var(--space-3);
  background: var(--color-primary);
  border-bottom: 0;
  border-radius: var(--radius);
  color: #fff;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-header__menu a[href*="/book-a-skip"]:hover,
.site-header__menu a[href*="/book-a-skip"]:focus-visible {
  background: var(--color-primary-dark);
  color: #fff;
}

/* Call CTA */
.site-header__call {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.site-header__call:hover,
.site-header__call:focus-visible { transform: translateY(-2px); }

.site-header__call-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
}

.site-header__call-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-header__call-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.site-header__call-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.025em;
  line-height: 1;
  color: #fff;
}

.site-header__call:hover .site-header__call-number,
.site-header__call:focus-visible .site-header__call-number { color: var(--color-primary); }

/* Hamburger */
.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 2px solid var(--color-dark-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible { border-color: var(--color-primary); }

.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle-bars { position: relative; }

.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-header__toggle-bars::before { top: -6px; }

.site-header__toggle-bars::after { top: 6px; }

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 459.98px) {
  .site-header__call-text { display: none; }
}

/* Desktop nav switches in at 1440px rather than 1200px.
   With seven top-level items the row needs ~1160px of content (logo 176 +
   menu 776 + call CTA 177 + gaps), and the header only gets 84% of the
   viewport until the 1216px cap — so 1200px left just 1008px and the nav
   ran into the phone CTA. Measured slack beside the menu: 1400px gives 18px
   (barely past the 16px flex gap), 1440px gives 34px, 1500px+ gives 44px.
   Re-measure if menu items are added or removed. */
@media (min-width: 1440px) {
  .site-header__logo img { width: 11rem; }

  .site-header__nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-header__menu {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .site-header__menu a {
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
  }

  .site-header__menu .current-menu-item > a,
  .site-header__menu .current_page_item > a,
  .site-header__menu .current-menu-ancestor > a,
  .site-header__menu .current_page_ancestor > a { border-bottom-color: var(--color-primary); }

  /* Book a Skip: pill in the nav row — no inset margin, no active underline. */
  .site-header__menu a[href*="/book-a-skip"],
  .site-header__menu .current-menu-item > a[href*="/book-a-skip"],
  .site-header__menu .current_page_item > a[href*="/book-a-skip"] {
    margin: 0;
    padding: 0.625rem 1.25rem;
    border-bottom: 0;
    text-align: center;
  }

  .site-header__menu a[href*="/book-a-skip"]:hover,
  .site-header__menu a[href*="/book-a-skip"]:focus-visible { transform: translateY(-2px); }

  /* Dropdowns — parent items anchor an absolutely positioned submenu. */
  .site-header__menu > li { position: relative; }

  /* Undo the mobile disclosure: desktop opens on hover, so the injected
     button goes away and the submenu must be display:block for the
     opacity/visibility transition to have anything to show. */
  .site-header__submenu-toggle { display: none; }

  .site-header__menu .has-submenu-toggle > a { padding-right: 0; }

  .site-header__menu .has-submenu-toggle > .sub-menu,
  .site-header__menu .has-submenu-toggle.is-submenu-open > .sub-menu { display: block; }

  /* Dropdown indicator — the site chevron, masked so it takes the link colour. */
  .site-header__menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.4375rem;
    vertical-align: -0.0625rem;
    background-color: currentColor;
    -webkit-mask: url("../icons/chevron-down.svg") no-repeat center / contain;
    mask: url("../icons/chevron-down.svg") no-repeat center / contain;
    transition: transform 0.2s ease;
  }

  /* Panel sits clear of the header with a brand accent along the top.
     Animated with opacity/visibility rather than display so it can fade in;
     visibility also keeps the closed panel's links out of the tab order. */
  .site-header__menu .sub-menu {
    position: absolute;
    top: calc(100% + 0.875rem);
    left: -1rem;
    z-index: 120;
    min-width: 15rem;
    padding: 0.5rem;
    background: var(--color-dark-card);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.375rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  /* Long menus split into two columns. The :has() quantity query fires when a
     7th child exists, so it follows the menu automatically — no class needed.
     Multi-column rather than grid so the list flows top-to-bottom down column
     one before column two, which keeps an A–Z list readable. Browsers without
     :has() simply keep the single-column panel. */
  .site-header__menu .sub-menu:has(> li:nth-child(7)) {
    min-width: 27rem;
    columns: 2;
    column-gap: 0.25rem;
  }

  .site-header__menu .sub-menu:has(> li:nth-child(7)) > li {
    break-inside: avoid;
  }

  /* Invisible bridge across the gap — the pointer can travel from the parent
     link to the panel without tripping :hover off on the way. */
  .site-header__menu .sub-menu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 1.125rem;
  }

  .site-header__menu .menu-item-has-children:hover > .sub-menu,
  .site-header__menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .site-header__menu .menu-item-has-children:hover > a::after,
  .site-header__menu .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

  .site-header__menu .sub-menu a {
    position: relative;
    padding: 0.625rem 0.875rem 0.625rem 1.125rem;
    border-bottom: 0;
    border-radius: var(--radius);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--color-text-soft);
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }



  .site-header__menu .sub-menu a:hover,
  .site-header__menu .sub-menu a:focus-visible,
  .site-header__menu .sub-menu .current-menu-item > a {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }



  .site-header__call { margin-left: 0; }

  .site-header__toggle { display: none; }
}

/* Dropdown motion is decorative — hold everything still when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .site-header__menu .sub-menu,
  .site-header__menu .sub-menu a,
  .site-header__menu .sub-menu a::before,
  .site-header__menu .menu-item-has-children > a::after { transition: none; }
}