/**
 * acf-site-header — interface.pen (site-header / site-header-two).
 *
 * Two visual modes on one markup:
 * - overlay (site-header):      transparent nav, white text, white logo.
 * - solid   (site-header-two):  white nav, dark text, color logo.
 * `.acf-site-header--solid` starts solid; `.acf-site-header--overlay` starts
 * transparent and becomes solid when view.js adds `.is-scrolled`.
 *
 * The header is FIXED and out of flow. Solid pages render an in-flow
 * `.acf-site-header__spacer` (--header-offset) so main starts below it.
 * Overlay pages skip the spacer; acf-hero uses --block-pad-hero-top.
 * view.js slides the topbar + nav up by the topbar height while scrolling,
 * so the cyan topbar appears to scroll away and only the nav row stays pinned.
 */

.acf-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  font-family: var(--font-family-base);
}

/* Prevent background scroll while the mobile drawer is open. */
html.acf-site-header-menu-open {
  overflow: hidden;
}

/* Logged-in admin bar sits above the fixed header. */
.admin-bar .acf-site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .acf-site-header {
    top: 46px;
  }
}

/* Editor preview iframe: behave like a normal block, no fixed overlay. */
.acf-site-header--static {
  position: static;
}

/* In-flow stand-in for the fixed header on solid pages. Height matches
 * topbar + nav. view.js may overwrite --header-offset with a measured px. */
.acf-site-header__spacer {
  height: var(--header-offset);
}

/* ------------------------------------------------------------------ */
/* Topbar — cyan utility links; slides away on scroll (via view.js)    */
/* ------------------------------------------------------------------ */

.acf-site-header__topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: var(--space-xs) var(--block-pad-inline);
  background-color: var(--color-brand-cyan);
}

.acf-site-header__topbar-link {
  color: var(--color-light);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-decoration: underline;
}

.acf-site-header__topbar-link:hover {
  color: var(--color-light);
  text-decoration: underline;
}
/* ------------------------------------------------------------------ */
/* Nav row — transparent in overlay mode, white when solid/scrolled    */
/* ------------------------------------------------------------------ */

.acf-site-header__nav {
  padding: var(--space-sm) var(--block-pad-inline);
  background-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.acf-site-header__container {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-inline: auto;
  justify-content: space-between;
}

/* Solid state = starts solid OR scrolled while in overlay mode. */
.acf-site-header--solid .acf-site-header__nav,
.acf-site-header.is-scrolled .acf-site-header__nav {
  background-color: var(--color-light);
  box-shadow: var(--shadow-nav);
}

/* ------------------------------------------------------------------ */
/* Logo — white version over hero, color version on solid              */
/* ------------------------------------------------------------------ */

.acf-site-header__logo {
  display: block;
  width: 129px;
  flex-shrink: 0;
}

/* Inline SVGs keep their own aspect ratio inside the fixed-width link. */
.acf-site-header__logo .prism-inline-svg {
  height: auto;
}

.acf-site-header__logo-white,
.acf-site-header__logo-color {
  display: block;
}

/* Overlay (not scrolled): white logo visible. */
.acf-site-header__logo-color {
  display: none;
}

/* Solid state: swap to the color logo. */
.acf-site-header--solid .acf-site-header__logo-white,
.acf-site-header.is-scrolled .acf-site-header__logo-white {
  display: none;
}

.acf-site-header--solid .acf-site-header__logo-color,
.acf-site-header.is-scrolled .acf-site-header__logo-color {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Menu — white links over hero, slate links on solid                  */
/* ------------------------------------------------------------------ */

.acf-site-header__menu-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.acf-site-header__menu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-light);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  text-decoration: none;
  transition: color 0.25s ease;
}

/* Overlay (white links over hero): dim to light gray — not cyan. */
.acf-site-header--overlay:not(.is-scrolled) .acf-site-header__menu-link:hover,
.acf-site-header--overlay:not(.is-scrolled) .acf-site-header__menu-link:focus-visible {
  color: var(--color-nav-muted);
}

.acf-site-header--solid .acf-site-header__menu-link,
.acf-site-header.is-scrolled .acf-site-header__menu-link {
  color: var(--color-brand-slate);
}

.acf-site-header--solid .acf-site-header__menu-link:hover,
.acf-site-header--solid .acf-site-header__menu-link:focus-visible,
.acf-site-header.is-scrolled .acf-site-header__menu-link:hover,
.acf-site-header.is-scrolled .acf-site-header__menu-link:focus-visible {
  color: var(--color-brand-cyan);
}

/* Chevron inherits the link color via currentColor. */
.acf-site-header__chevron {
  flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Dropdown submenus — hover + keyboard focus-within                    */
/* ------------------------------------------------------------------ */

.acf-site-header__menu-item--has-children {
  position: relative;
  /*
   * Extend the <li> hit area below the link. The submenu is position:absolute
   * so it does not stretch the item — without this padding, moving the mouse
   * downward leaves the parent and the dropdown closes before it is reachable.
   */
  padding-bottom: var(--space-xs);
  margin-bottom: calc(-1 * var(--space-xs));
}

.acf-site-header__submenu {
  position: absolute;
  /* Flush with the extended <li> bottom — no dead zone between link and panel. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: none;
  min-width: 14rem;
  max-width: 20rem;
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
  background-color: var(--color-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-submenu);
}

/* Wide panel for the services list. */
.acf-site-header__menu-item--has-children:first-child .acf-site-header__submenu {
  min-width: 18rem;
  max-width: 24rem;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
}

.acf-site-header__menu-item--has-children:hover .acf-site-header__submenu,
.acf-site-header__menu-item--has-children:focus-within .acf-site-header__submenu {
  display: block;
}

.acf-site-header__submenu-link {
  display: block;
  padding: var(--space-xs) var(--block-content-gap);
  color: var(--color-brand-slate);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.acf-site-header__submenu-link:hover,
.acf-site-header__submenu-link:focus-visible {
  color: var(--color-brand-cyan);
  background-color: var(--color-brand-cyan-soft);
}

/* ------------------------------------------------------------------ */
/* CTAs — Pencil header buttons are 8px x 20px (tighter than default)  */
/* ------------------------------------------------------------------ */

.acf-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.acf-site-header__cta {
  padding: var(--space-xs) var(--block-content-gap);
  font-size: var(--font-size-base);
}

/*
 * Hide desktop nav CTAs as the header tightens. Nested selector
 * beats .prism-button { display: inline-flex }. The mobile drawer
 * keeps its own Call Now and Submit a Claim buttons.
 */
@media (max-width: 1360px) {
  .acf-site-header__actions .acf-site-header__cta-call {
    display: none;
  }
}

@media (max-width: 1224px) {
  .acf-site-header__actions .acf-site-header__cta-claim {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Retractile "Your Location" panel — location flow only               */
/* Fixed mid-screen right; open by default; collapses to an edge tab.  */
/* ------------------------------------------------------------------ */

.acf-site-header__location-panel {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 99; /* under the fixed header (100) */
}

.acf-site-header__location-card {
  width: 15rem;
  padding: var(--block-content-gap) var(--space-md) var(--space-md);
  background-color: var(--color-light);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-location-card);
}

/* Slide transitions only after JS applied the initial state (no load flash). */
.acf-site-header__location-panel.is-ready .acf-site-header__location-card,
.acf-site-header__location-panel.is-ready .acf-site-header__location-tab {
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Collapsed: card slides off-screen to the right… */
.acf-site-header__location-panel.is-collapsed .acf-site-header__location-card {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}

.acf-site-header__location-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--space-xs);
}

.acf-site-header__location-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-muted-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.acf-site-header__location-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  padding: 0;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-brand-slate);
  cursor: pointer;
}

.acf-site-header__location-toggle:hover {
  border-color: var(--color-brand-cyan);
  color: var(--color-brand-cyan);
}

.acf-site-header__location-name {
  margin: 0 0 var(--space-sm);
  color: var(--color-brand-slate);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.acf-site-header__location-divider {
  margin: 0 0 var(--space-sm);
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* Design shows a plain cyan button (no white outline) at panel width. */
.acf-site-header__location-change {
  width: 100%;
  padding: 0.625rem var(--block-content-gap);
  border-color: transparent;
  font-size: var(--font-size-base);
}

/* …and the reopen tab appears at the screen edge. */
.acf-site-header__location-tab {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%); /* hidden off-screen while open */
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 0.625rem;
  background-color: var(--color-light);
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: var(--shadow-location-card);
  color: var(--color-brand-cyan);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

.acf-site-header__location-panel.is-collapsed .acf-site-header__location-tab {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
}

.acf-site-header__location-tab:hover {
  color: var(--color-brand-navy);
}

@media (max-width: 768px) {
  .acf-site-header__location-card {
    width: 13rem;
    padding: var(--space-sm) 1.125rem var(--block-content-gap);
  }
}

/* ------------------------------------------------------------------ */
/* Mobile menu toggle + full-screen drawer (≤1100px)                   */
/* ------------------------------------------------------------------ */

.acf-site-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-light);
  cursor: pointer;
}

.acf-site-header--solid .acf-site-header__menu-toggle,
.acf-site-header.is-scrolled .acf-site-header__menu-toggle {
  color: var(--color-brand-slate);
}

.acf-site-header__mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  background-color: var(--color-light);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
}

@media (max-width: 1100px) {
  .acf-site-header__mobile-menu {
    display: flex;
  }
}

.acf-site-header.is-mobile-menu-open .acf-site-header__mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0s;
}

.acf-site-header__mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-shrink: 0;
  padding: var(--space-sm) var(--block-pad-inline);
  border-bottom: 1px solid var(--color-border);
}

.acf-site-header__mobile-logo {
  display: block;
  width: 129px;
  flex-shrink: 0;
}

.acf-site-header__mobile-logo .prism-inline-svg {
  height: auto;
}

.acf-site-header__mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-brand-slate);
  cursor: pointer;
}

.acf-site-header__mobile-menu-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.acf-site-header__mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acf-site-header__mobile-item {
  border-bottom: 1px solid var(--color-border);
}

.acf-site-header__mobile-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.acf-site-header__mobile-link {
  flex: 1;
  min-width: 0;
  padding: 1.125rem var(--block-pad-inline);
  color: var(--color-brand-navy);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-decoration: none;
}

.acf-site-header__mobile-accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  margin-right: calc(var(--block-pad-inline) - 0.75rem);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-brand-navy);
  cursor: pointer;
}

.acf-site-header__mobile-chevron {
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.acf-site-header__mobile-item.is-open .acf-site-header__mobile-chevron {
  transform: rotate(180deg);
}

.acf-site-header__mobile-submenu {
  display: grid;
  grid-template-rows: 0fr;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: grid-template-rows 0.35s ease;
}

.acf-site-header__mobile-item.is-open .acf-site-header__mobile-submenu {
  grid-template-rows: 1fr;
}

.acf-site-header__mobile-submenu-inner {
  overflow: hidden;
}

.acf-site-header__mobile-submenu-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem;
}

.acf-site-header__mobile-submenu-link {
  display: block;
  padding: 0.625rem var(--block-pad-inline) 0.625rem calc(var(--block-pad-inline) + var(--space-xs));
  color: var(--color-brand-slate);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
}

.acf-site-header__mobile-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding: var(--space-md) var(--block-pad-inline) var(--block-gap);
}

.acf-site-header__mobile-location-link {
  color: var(--color-brand-cyan);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;
}

.acf-site-header__mobile-location-link:hover {
  color: var(--color-brand-cyan);
  text-decoration: underline;
}

.acf-site-header__mobile-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0.875rem var(--block-content-gap);
  font-size: var(--font-size-base);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Responsive — desktop-first; mobile drawer below 1100px            */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .acf-site-header__menu {
    display: none;
  }

  .acf-site-header__actions {
    display: none;
  }

  .acf-site-header__menu-toggle {
    display: inline-flex;
  }
}

.acf-site-header--static .acf-site-header__menu-toggle,
.acf-site-header--static .acf-site-header__mobile-menu {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .acf-site-header__mobile-menu,
  .acf-site-header__mobile-submenu,
  .acf-site-header__mobile-chevron {
    transition: none;
  }
}

@media (max-width: 768px) {
  .acf-site-header__topbar {
    gap: var(--space-sm);
    padding-inline: var(--block-pad-inline);
  }

  .acf-site-header__nav {
    padding: 0.75rem var(--block-pad-inline);
  }

  .acf-site-header__logo {
    width: 104px;
  }

  .acf-site-header__cta {
    padding: var(--space-xs) 0.875rem;
    font-size: var(--font-size-sm);
  }
}