/* Header — Theme Builder global header chrome (top bars + logo/nav).
   Hook classes live on the modules: .hdr-topbar-mobile (section), .hdr-note
   (locations text), .rw-header-nav (menu module). */


/* Desktop vs mobile top bar: both switch with Divi's own "Disable on" settings
   (desktop bar off on tablet/phone; mobile bar off on desktop/tablet-wide/widescreen). */

/* ── Laptop widths (981–1679px): the Figma one-row top bar (locations note + call +
   three buttons) only fits from 1680px. Below that the note moves to its own slim
   strip above the bar (.hdr-banner section, hidden below 981 via Divi "Disable on").
   1680 sits inside Divi's widescreen breakpoint (≥1280), so the switch is CSS. ── */
@media (min-width: 981px) and (max-width: 1679px) {
  .hdr-note { display: none !important; }
}
@media (min-width: 1680px) {
  .hdr-banner { display: none !important; }
}

/* The phone number never breaks across lines */
.hdr-call a { white-space: nowrap; }

/* ── Top-bar call link hover — a 1px line draws in from the left and exits right,
      matching the nav underline below. ── */
.hdr-call a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) right bottom / 0% 1px no-repeat;
  transition: background-size 0.35s cubic-bezier(.22, 1, .36, 1);
}
.hdr-call a:hover,
.hdr-call a:focus-visible { background-position: left bottom; background-size: 100% 1px; }


/* ── Nav — item spacing comes from .rw-nav (css/global/utilities.css).
      981–1439px: logo + six items don't fit side by side (menu text alone is ~672px),
      so the logo centres on its own row and the full menu sits centred underneath
      instead of collapsing to the hamburger. Divi's Menu Style setting isn't responsive,
      hence CSS. ── */
@media (min-width: 981px) and (max-width: 1439px) {
  .rw-header-nav .et_pb_menu_inner_container { display: flex; flex-direction: column; align-items: center; row-gap: 0.75rem; }
  .rw-header-nav .et_pb_menu__logo-wrap { margin: 0 auto !important; }
  .rw-header-nav .et_pb_menu__wrap,
  .rw-header-nav .et_pb_menu__menu,
  .rw-header-nav .et_pb_menu__menu > nav { width: 100%; justify-content: center !important; }
  .rw-header-nav .et_pb_menu__menu > nav > ul { justify-content: center !important; }
  /* LOCATIONS sits near the right edge here: open its dropdown leftwards so the
     (hidden) panel doesn't push a horizontal scrollbar at ~990–1010px */
  .rw-header-nav .et-menu > li:last-child > .sub-menu { left: auto; right: 0; }
}


/* ── Nav hover — a main-red line draws in under the label from the left and exits
      to the right (replaces Divi's 0.7 opacity fade). ::before, because Divi puts the
      dropdown arrow on ::after. The link box is the full menu row height, so the line
      is placed from the vertical centre (just under the 16px text), not the box bottom.
      Dropdown links shift to main red instead. Timing matches css/global/buttons.css. ── */
.rw-header-nav .et-menu > li > a { position: relative; }
.rw-header-nav .et-menu > li > a:hover,
.rw-header-nav .et-menu .sub-menu a:hover { opacity: 1; }
.rw-header-nav .et-menu > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 0.85em);
  height: 2px;
  background: var(--main-red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.rw-header-nav .et-menu > li.menu-item-has-children > a::before { right: 20px; }   /* stop before the dropdown arrow */
.rw-header-nav .et-menu > li > a[href="#"]::before { display: none; }   /* dropdown-only parents (Locations) aren't a destination, so no underline */
.rw-header-nav .et-menu > li:hover > a::before,           /* li, so it stays drawn while the dropdown is open */
.rw-header-nav .et-menu > li > a:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}
.rw-header-nav .et-menu .sub-menu a { transition: color 0.35s cubic-bezier(.22, 1, .36, 1); }
.rw-header-nav .et-menu .sub-menu a:hover { color: var(--main-red) !important; }   /* beats Divi's module text colour */

@media (prefers-reduced-motion: reduce) {
  .rw-header-nav .et-menu > li > a::before,
  .rw-header-nav .et-menu .sub-menu a,
  .hdr-call a { transition: none; }
}


/* ── Top-bar buttons — Figma cells are 172/342/208 wide: 2rem side padding
      (the base .btn-header-* uses 1.25rem). ≥1024 only: at 981–1023 the call link + three
      buttons only fit one row on the base padding; mobile keeps its compact pills. ── */
@media (min-width: 1024px) {
  .et-l--header .btn-header-book,
  .et-l--header .btn-header-app { padding-left: 2rem; padding-right: 2rem; }
}

/* ── Desktop top bar: a 1px rule before the call link, matching the rules between the
      top-bar buttons. Only ≥1680px, where the announcement (.hdr-note) sits inline beside it. ── */
@media (min-width: 1680px) {
  .et-l--header .et_pb_group:has(> .hdr-call) {
    align-self: stretch;
    border-left: 1px solid var(--dark-red);
    padding-left: 2rem;
  }
}

/* ── ≤980px: no left rule on the two red book buttons — the first one's rule sat
      against the screen edge and the second didn't line up with the cream row below
      (design audit 2026-11-06). The cream row keeps its dark dividers. ── */
@media (max-width: 980px) {
  .et-l--header .btn-header-book { border-left-width: 0; }
}


/* ── Keep the header (and its dropdowns) above page content ──
   Page sections create their own stacking contexts and painted over the
   LOCATIONS submenu where it hangs below the header. */
.et-l--header > .et_builder_inner_content { z-index: 100 !important; }