/* Optimal Access — sticky header + accurate menu highlighting.
   Loaded on the front end only. */

/* ---------- sticky header ---------- */
/* Ancestors must not clip, or a pinned header disappears on scroll. */
html,
body,
#page,
#page > .site-content,
.ast-main-header-wrap,
.ast-desktop-header,
#ast-desktop-header,
header.ast-custom-header,
.site-header {
  overflow: visible !important;
}

/* Beaver Themer header (header.ast-custom-header) and classic Astra header. */
body.oa-fixed-header header.ast-custom-header,
body.oa-fixed-header #masthead.site-header,
body.oa-fixed-header .fl-builder-content[data-type="header"] {
  position: fixed !important;
  top: var(--oa-header-top, 0px) !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}
body.oa-fixed-header header.ast-custom-header {
  background-color: #11151b;
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .9);
}

/* anchor targets should not hide under the pinned bar */
html { scroll-behavior: smooth; }
.oa-section[id],
[id^="oa-"] { scroll-margin-top: var(--oa-header-height, 96px); }

/* ---------- site title / tagline ---------- */
/* Colour and size are left to the Customizer — we only make sure the
   tagline sits under the title and stays readable on the dark bar. */
.site-header .site-title a { text-decoration: none; }
.site-header .site-description {
  display: block;
  margin: 2px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}

/* If the branding is real text (not an image), keep it white on the dark bar. */
header.ast-custom-header .fl-heading,
header.ast-custom-header .fl-heading a,
header.ast-custom-header .site-title a,
header.ast-custom-header .site-description {
  color: #ffffff !important;
}

/* ---------- menu highlighting ---------- */
/* neutralise WordPress' blanket "current" state on same-page hash links */
.main-header-menu .oa-hash-link.current-menu-item > a,
.main-header-menu .oa-hash-link.current_page_item > a,
.site-header .oa-hash-link > a,
header.ast-custom-header .oa-hash-link > a,
header.ast-custom-header .oa-hash-link > .fl-has-submenu-container > a,
.site-header .oa-hash-link > .fl-has-submenu-container > a {
  color: inherit;
}
/* the one active item — set by scrollspy or a real page match */
.site-header .oa-menu-active > a,
.site-header .oa-menu-active > .fl-has-submenu-container > a,
header.ast-custom-header .oa-menu-active > a,
header.ast-custom-header .oa-menu-active > .fl-has-submenu-container > a,
.main-header-menu .oa-menu-active > a {
  color: #e05a47 !important;
}

/* ---------- Customizer-driven branding (injected by nav.js) ---------- */
.oa-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}
/* !important: other plugin stylesheets (e.g. the blog plugin's
   `body.oa-blog-page img { height:auto }`) otherwise blow the logo up. */
.oa-brand img {
  display: block;
  height: var(--oa-brand-logo-height, 40px) !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
}
.oa-brand-text { display: block; line-height: 1.15; }
.oa-brand-name {
  display: block;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}
.oa-brand-tagline {
  display: block;
  margin-top: 2px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ---------- Beaver Themer desktop header layout ----------
   v3.9: no absolute positioning. The header row becomes a flex bar so the
   brand takes real space on the left and the menu can never overlap it. */
@media (min-width: 922px) {
  /* Keep the shared header identical on every template. Homepage section CSS
     can otherwise widen this row to the viewport, while archive templates
     retain Beaver's 30px top padding. */
  header.ast-custom-header .header-row > .fl-row-content-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  header.ast-custom-header .fl-row-content {
    position: relative;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    width: calc(100% - 30px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  header.ast-custom-header .oa-brand-slot {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    max-width: 38%;
  }
  header.ast-custom-header .fl-row-content > .fl-col-group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    width: auto !important;
  }
  header.ast-custom-header .fl-row-content > .fl-col-group > .fl-col {
    float: none !important;
  }
  /* This box holds BOTH the menu module and the social-icon module.
     The menu module must grow to fill everything left of the icons —
     otherwise it shrink-wraps and its centred items hug the logo. */
  header.ast-custom-header .header-menu-container {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  header.ast-custom-header .header-menu-container > .fl-module-menu,
  header.ast-custom-header .header-menu-container > .header-menu {
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
  }
  header.ast-custom-header .header-menu-container .fl-module-content,
  header.ast-custom-header .header-menu-container .fl-menu,
  header.ast-custom-header .header-menu-container .fl-menu > nav,
  header.ast-custom-header .header-menu-container nav {
    width: 100% !important;
  }
  header.ast-custom-header .header-menu-container .fl-menu-horizontal,
  header.ast-custom-header .header-menu-container ul.menu {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100% !important;
  }
  header.ast-custom-header .header-icons {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    width: auto !important;
  }
  header.ast-custom-header .oa-brand { width: max-content; max-width: 100%; }
}


/* ---------- one colour for every menu item ---------- */
header.ast-custom-header .fl-menu a,
header.ast-custom-header .menu-item > a,
header.ast-custom-header .menu-item > .fl-has-submenu-container > a,
.site-header .main-header-menu .menu-item > a,
.site-header .menu-item > a,
.site-header .menu-item > .fl-has-submenu-container > a {
  color: #e8ecf1 !important;
}
header.ast-custom-header .menu-item > a:hover,
.site-header .menu-item > a:hover {
  color: #ffffff !important;
}
/* the single item in view (scrollspy) or the real current page */
header.ast-custom-header .oa-menu-active > a,
header.ast-custom-header .oa-menu-active > .fl-has-submenu-container > a,
.site-header .oa-menu-active > a,
.site-header .oa-menu-active > .fl-has-submenu-container > a,
.site-header li.current-menu-item:not(.oa-hash-link) > a,
header.ast-custom-header li.current-menu-item:not(.oa-hash-link) > a {
  color: #e05a47 !important;
}

/* ---------- v3.4/v3.5: mobile header ---------- */
@media (max-width: 921px) {
  body.oa-fixed-header header.ast-custom-header,
  body.oa-fixed-header #masthead.site-header,
  body.oa-fixed-header .fl-builder-content[data-type="header"] {
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* the header's own rows/columns must never be wider than the phone */
  header.ast-custom-header .fl-row-content-wrap,
  header.ast-custom-header .fl-row-content,
  header.ast-custom-header .fl-col-group,
  header.ast-custom-header .fl-col,
  header.ast-custom-header .fl-col-content,
  header.ast-custom-header .fl-module-content,
  #masthead.site-header .ast-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    float: none !important;
  }
  header.ast-custom-header .fl-menu,
  header.ast-custom-header ul.menu {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .oa-brand { gap: 8px; min-width: 0; }
  header.ast-custom-header .oa-brand-slot {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding: 0 !important;
  }
  .oa-brand img { height: var(--oa-brand-logo-height-mobile, 32px); flex: 0 0 auto; }
  .oa-brand-text { min-width: 0; }
  .oa-brand-name { font-size: 17px; overflow-wrap: anywhere; }
  .oa-brand-tagline { font-size: 10px; letter-spacing: .06em; overflow-wrap: anywhere; }
}