/* ============================================================
   AILERON SHIFT — site chrome (Themer header 14 / footer 16)
   Global "Approach Plate" reskin of the Beaver Themer layouts.
   CSS-only: the layouts stay fully editable in Beaver Builder;
   this file just dresses whatever they render.

   Accessibility notes
   - Nav text is bone #f3efe6 on night #06070d ≈ 17:1 (AAA).
   - Magenta #f02070 is used for UNDERLINES and markers only,
     never as the sole text color at small sizes.
   - :focus-visible gets a 2px magenta outline with offset.
   - Hover/current states change more than color (underline).
   ============================================================ */

:root {
  --as-night: #06070d;
  --as-panel: #0b0d16;
  --as-bone: #f3efe6;
  --as-bone-dim: rgba(243, 239, 230, 0.72);
  --as-bone-faint: rgba(243, 239, 230, 0.14);
  --as-route: #f02070;
  /* route deepened for solid fills behind white text — 4.95:1 (WCAG AA);
     hover shade 5.87:1. #f02070 itself is only 4.08:1 against #fff. */
  --as-route-cta: #d81b60;
  --as-route-cta-hover: #c2185b;
  --as-display: "Space Grotesk", "Segoe UI", sans-serif;
  --as-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ============================================================
   HEADER — night glass over every page
   ============================================================ */
header.fl-builder-content-14 {
  background: rgba(6, 7, 13, 0.9) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--as-bone-faint);
}
/* neutralise the layout's own row/column fills (the pale blue) */
header.fl-builder-content-14 .fl-row-content-wrap,
header.fl-builder-content-14 .fl-col-content,
header.fl-builder-content-14 .fl-row-bg-color,
header.fl-builder-content-14 .fl-col-bg-color {
  background: transparent !important;
  background-color: transparent !important;
}

/* wordmark: the navy PNG becomes bone-white on the night field */
header.fl-builder-content-14 .fl-photo-img {
  filter: brightness(0) invert(0.96);
  max-height: 40px;
  width: auto !important;
  transition: max-height 0.25s ease;
}

/* ---------- primary nav ---------- */
header.fl-builder-content-14 .fl-menu ul.menu > li > a {
  font-family: var(--as-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-bone) !important;
  text-decoration: none;
  padding: 0.9em 1.1em;
  position: relative;
  transition: color 0.2s ease;
}
/* magenta route underline — drawn, not just colored */
header.fl-builder-content-14 .fl-menu ul.menu > li > a::after {
  content: "";
  position: absolute;
  left: 1.1em; right: 1.1em; bottom: 0.35em;
  height: 2px;
  background: var(--as-route);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
header.fl-builder-content-14 .fl-menu ul.menu > li > a:hover,
header.fl-builder-content-14 .fl-menu ul.menu > li > a:focus-visible {
  color: #ffffff !important;
}
header.fl-builder-content-14 .fl-menu ul.menu > li > a:hover::after,
header.fl-builder-content-14 .fl-menu ul.menu > li > a:focus-visible::after,
header.fl-builder-content-14 .fl-menu ul.menu > li.current-menu-item > a::after,
header.fl-builder-content-14 .fl-menu ul.menu > li.current_page_item > a::after {
  transform: scaleX(1);
}
/* current page: underline stays + waypoint diamond marker */
header.fl-builder-content-14 .fl-menu ul.menu > li.current-menu-item > a,
header.fl-builder-content-14 .fl-menu ul.menu > li.current_page_item > a {
  color: #ffffff !important;
}
/* visible keyboard focus */
header.fl-builder-content-14 a:focus-visible,
footer.fl-builder-content-16 a:focus-visible,
.wpautoterms-footer a:focus-visible {
  outline: 2px solid var(--as-route);
  outline-offset: 3px;
  border-radius: 0;
}

/* ---------- mobile: hamburger + dropdown ---------- */
header.fl-builder-content-14 .fl-menu-mobile-toggle,
header.fl-builder-content-14 .fl-menu-mobile-toggle .fl-menu-mobile-toggle-label {
  color: var(--as-bone) !important;
  font-family: var(--as-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
header.fl-builder-content-14 .fl-menu-mobile-toggle span {
  background-color: var(--as-bone) !important;
}
header.fl-builder-content-14 .fl-menu-mobile-toggle:focus-visible {
  outline: 2px solid var(--as-route);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  header.fl-builder-content-14 .fl-menu ul.menu {
    background: var(--as-panel) !important;
    border: 1px solid var(--as-bone-faint);
    border-top: none;
  }
  header.fl-builder-content-14 .fl-menu ul.menu > li {
    border-bottom: 1px solid var(--as-bone-faint);
  }
  header.fl-builder-content-14 .fl-menu ul.menu > li:last-child { border-bottom: none; }
  header.fl-builder-content-14 .fl-menu ul.menu > li > a {
    padding: 1.05em 1.3em;
  }
  header.fl-builder-content-14 .fl-menu ul.menu > li > a::after {
    left: 1.3em; right: auto; width: 2.4em; bottom: 0.65em;
  }
}

/* ============================================================
   MOBILE HEADER LAYOUT — one row, no wasted vertical space
   Beaver Builder stacks the two header columns on mobile
   (fl-col-group flex-wrap:wrap, each .fl-col forced to 100%
   width) so the wordmark lands on one line and the hamburger
   drops to a second line beneath it — doubling the header to
   ~136px and pushing the hero down. Keep both on a single row:
   the logo column sizes to its content on the left; the menu
   column takes the remaining width and parks the toggle at the
   right (the menu module already right-aligns its content).
   Result: header ~74px, a full row of viewport reclaimed.
   Uses :first-child / :last-child rather than the DB-generated
   fl-node-* ids so it survives the layout being re-saved.
   ============================================================ */
@media (max-width: 768px) {
  /* pin the bar to the top so nav is always in reach while scrolling.
     sticky (not fixed) keeps it in flow, so no content offset is needed;
     the night-glass background + blur (set on the header above) keep the
     page legible as it slides underneath. z-index clears the hero SVG
     (z 1–2) and the asset-error banner (z 300). */
  header.fl-builder-content-14 {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  header.fl-builder-content-14 .fl-row-content-wrap {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
  header.fl-builder-content-14 .fl-col-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* logo column — only as wide as the wordmark, flush left */
  header.fl-builder-content-14 .fl-col-group > .fl-col:first-child {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 62% !important;
  }
  /* menu column — takes the rest, toggle rides the right edge */
  header.fl-builder-content-14 .fl-col-group > .fl-col:last-child {
    width: auto !important;
    flex: 1 1 auto !important;
  }
  header.fl-builder-content-14 .fl-col-group > .fl-col > .fl-col-content {
    width: 100%;
  }
  /* trim the wordmark a touch on mobile for a tighter bar */
  header.fl-builder-content-14 .fl-photo-img {
    max-height: 34px !important;
  }
}

/* ============================================================
   FOOTER — quiet night band
   ============================================================ */
footer.fl-builder-content-16 {
  background: var(--as-night) !important;
  border-top: 1px solid var(--as-bone-faint);
}
footer.fl-builder-content-16 .fl-row-content-wrap,
footer.fl-builder-content-16 .fl-col-content,
footer.fl-builder-content-16 .fl-row-bg-color,
footer.fl-builder-content-16 .fl-col-bg-color {
  background: transparent !important;
  background-color: transparent !important;
}
footer.fl-builder-content-16 .fl-rich-text,
footer.fl-builder-content-16 .fl-rich-text p {
  font-family: var(--as-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--as-bone-dim) !important;
  line-height: 1.8;
}
footer.fl-builder-content-16 .fl-rich-text a {
  color: var(--as-bone) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--as-route);
  padding-bottom: 0.15em;
}
footer.fl-builder-content-16 .fl-rich-text a:hover { color: var(--as-route) !important; }
footer.fl-builder-content-16 .fl-row-content-wrap {
  padding-top: clamp(1.6rem, 4vh, 2.6rem) !important;
  padding-bottom: clamp(1.2rem, 3vh, 1.8rem) !important;
}

/* ---------- WP AutoTerms strip (renders after .fl-page) ---------- */
.wpautoterms-footer {
  background: var(--as-night);
  margin: 0;
  padding: 0.9rem 1rem 1.4rem;
  text-align: center;
}
.wpautoterms-footer p {
  margin: 0;
  font-family: var(--as-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--as-bone-dim);
}
.wpautoterms-footer a {
  color: var(--as-bone-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--as-bone-faint);
  padding-bottom: 0.12em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wpautoterms-footer a:hover {
  color: var(--as-bone);
  border-color: var(--as-route);
}
.wpautoterms-footer .separator { color: var(--as-bone-faint); padding: 0 0.5em; }

/* reduced motion: no underline/logo transitions */
@media (prefers-reduced-motion: reduce) {
  header.fl-builder-content-14 .fl-menu ul.menu > li > a::after { transition: none; }
  header.fl-builder-content-14 .fl-photo-img { transition: none; }
}

/* ---------- "Site Scan" — the nav's one filled CTA ---------- */
header.fl-builder-content-14 .fl-menu ul.menu > li.as-nav-cta > a {
  background: var(--as-route-cta);
  color: #ffffff !important;
  padding: 0.7em 1.3em;
  margin-left: 0.6em;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
header.fl-builder-content-14 .fl-menu ul.menu > li.as-nav-cta > a::after {
  content: none; /* no underline — the fill IS the emphasis */
}
/* hover darkens instead of dropping opacity — translucency would blend the
   white label toward the header glass and erode its contrast below 4.5:1 */
header.fl-builder-content-14 .fl-menu ul.menu > li.as-nav-cta > a:hover,
header.fl-builder-content-14 .fl-menu ul.menu > li.as-nav-cta > a:focus-visible {
  background: var(--as-route-cta-hover);
  color: #ffffff !important;
}
header.fl-builder-content-14 .fl-menu ul.menu > li.as-nav-cta > a:active { transform: translateY(1px); }
@media (max-width: 768px) {
  header.fl-builder-content-14 .fl-menu ul.menu > li.as-nav-cta > a { margin-left: 0; }
}