/* Header — Theme Builder global header (top bar + logo/nav).
   Companion CSS for the global-header template. Scoped to .eos-header-nav /
   .et-l--header; colors come from the Divi modules, not from here. */

/* ── Nav link spacing — 52px between items (Divi ships 22px) ──
   Divi pads each <li> 11px per side and pulls the <ul> out by the same amount;
   both are widened together so the last link still lands on the row edge. */
.et-l--header .eos-header-nav .et_pb_menu__menu > nav > ul > li {
  padding-left: 1.625rem;
  padding-right: 1.625rem;
}
.et-l--header .eos-header-nav .et_pb_menu__menu > nav > ul {
  margin-left: -1.625rem;
  margin-right: -1.625rem;
}

/* ── Logo — drop Divi's 30px logo gutter so the 221px logo renders at 221px ── */
.et-l--header .eos-header-nav .et_pb_menu__logo {
  margin-right: 0 !important;
}

/* ≤1132px — nav switches to the hamburger early (Divi's own switch is
   980; five items + a logo run out of room first). Scoped to
   .eos-header-nav so the footer is untouched. */
@media (min-width: 981px) and (max-width: 1132px) {
  .eos-header-nav .et-menu { display: none !important; }
  .eos-header-nav .et_mobile_nav_menu { display: block !important; }
}

/* ≤1095px — hide the top-bar address text (the map pin stays); Divi's
   own visibility handles ≤980. */
@media (min-width: 981px) and (max-width: 1095px) {
  .hdr-address { display: none !important; }
}

/* ── Top bar ≤401px — narrow the phone/pin icon boxes ──
   The mobile frame is 402px and its two 63px boxes + the request button fill
   it exactly, so 375–401px phones overflow. Below that width both boxes drop
   to 48px. !important + the extra class beat Divi's own !important sizing. */
@media (max-width: 401px) {
  .et-l--header .et_pb_section .et_pb_icon {
    width: 3rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* # Accessibility Fixes */
/* ── Focus outlines on the dark nav band ──
   The hamburger and Divi Assistant's dropdown arrow carry no text colour of
   their own, so the style.css outline (currentColor) came out grey or blue on
   the Dark Blue band. Off-white, like the nav links. */
.et-l--header .mobile_menu_bar,
.et-l--header .dropdown-toggle {
  outline-color: var(--off-white) !important;
}

/* The logo link is inline around a block image, so its own outline has no box
   to draw; the ring goes on the image instead. */
.et-l--header .et_pb_menu__logo a:focus-visible img,
.et-l--header .et_pb_menu__logo a.keyboard-navigation-outline img {
  outline: 3px solid var(--off-white);
  outline-offset: 5px;
}

/* # Accessibility Fixes */
/* ── Keep focus clear of the sticky header ──
   The header stays fixed at the top (156px tall; 106px from 1132px down), so
   Shift+Tab and #anchor links could scroll an item up underneath it.
   scroll-padding reserves the header's height whenever the page scrolls to one. */
html {
  scroll-padding-top: 10.5rem;
}
@media (max-width: 1132px) {
  html { scroll-padding-top: 7.5rem; }
}