/* ==========================================================================
   HBM Kadence base layer — KIT-OWNED (HBM WP Kit 1.0.0)

   Mechanics only: accessibility scaffolding, drawer/nav/mega-menu behavior,
   the iOS-Safari scroll-blur fix, reveal animations, reduced-motion, and
   screenshot mode. Everything brand-specific is a CSS custom property with a
   neutral default — override the --hbm-* vars in the client stylesheet
   (style.css), never edit this file inside a client theme. Fix bugs upstream
   in website-starter-kit/wp-build/kadence-child-starter/ first.

   Pairs with assets/js/base.js — see the data-attribute contract there.
   Mobile breakpoint is fixed at 820px (matches ALC/PNP and the static kit);
   custom properties can't drive media queries, so if this ever changes it
   changes here and in base.js together.
   ========================================================================== */

:root {
  /* Nav (scrolled state) */
  --hbm-nav-bg-scrolled: rgba(0, 0, 0, 0.4);
  --hbm-nav-bg-scrolled-mobile: rgba(0, 0, 0, 0.32);
  --hbm-nav-blur: saturate(180%) blur(28px);
  --hbm-nav-border-scrolled: 1px solid rgba(255, 255, 255, 0.15);
  --hbm-nav-shadow-scrolled: 0 10px 30px rgba(0, 0, 0, 0.45);
  /* Mobile CTA bar */
  --hbm-cta-bar-height: 48px;
  /* Drawer */
  --hbm-drawer-bg: #000;
  --hbm-drawer-z: 95;
  --hbm-submenu-max: 800px;
  /* Focus ring */
  --hbm-focus-ring: 3px solid currentColor;
  /* Motion */
  --hbm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Accessibility scaffolding ─────────────────────────────────────────── */

/* Skip link: first element inside <body> (header.php renders it). Neither ALC
   nor PNP shipped one — every kit build does. */
.hbm-skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  padding: 12px 20px;
  background: #000;
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  border-radius: 4px;
  transition: top 0.15s var(--hbm-ease);
}
.hbm-skip-link:focus {
  top: 12px;
  outline: var(--hbm-focus-ring);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Every interactive element gets a visible keyboard focus state, sitewide. */
a:focus-visible,
button:focus-visible,
[data-hbm-drawer-toggle]:focus-visible {
  outline: var(--hbm-focus-ring);
  outline-offset: 2px;
}

/* ── Scroll lock while the drawer is open (class, not inline style) ─────── */
html.hbm-drawer-open,
html.hbm-drawer-open body {
  overflow: hidden;
}

/* ── Sticky nav + scroll-blur (the iOS Safari fix, field-tested on ALC) ── */
[data-hbm-nav] {
  /* `will-change` alone gives iOS Safari the compositing-layer hint needed
     for backdrop-filter to render on a fixed element — do NOT add
     `transform: translateZ(0)`, which conflicts with backdrop-filter on
     iOS Safari and forces the background to render solid. */
  will-change: background-color, backdrop-filter, -webkit-backdrop-filter;
  transition: background-color 0.35s var(--hbm-ease),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  /* Blur belongs to the scrolled state only. */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* Desktop: backdrop-filter blur works beautifully here. */
[data-hbm-nav].is-scrolled {
  background-color: var(--hbm-nav-bg-scrolled);
  -webkit-backdrop-filter: var(--hbm-nav-blur);
          backdrop-filter: var(--hbm-nav-blur);
  border-bottom: var(--hbm-nav-border-scrolled);
  box-shadow: var(--hbm-nav-shadow-scrolled);
}
/* Mobile: iOS Safari has a documented bug where `backdrop-filter` on a
   `position: fixed` element with a non-zero `top` renders the background
   fully opaque. Drop the blur on mobile and lean on a heavier translucent
   overlay — the state change stays obvious and works in every mobile browser. */
@media (max-width: 820px) {
  [data-hbm-nav].is-scrolled {
    background-color: var(--hbm-nav-bg-scrolled-mobile);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* ── Mobile CTA bar (call + quote pinned above the nav) ─────────────────── */
/* Mechanics only: fixed positioning + making room. Colors/typography are the
   client's. base.js adds .hbm-has-cta-bar to <html> when the bar exists. */
[data-hbm-cta-bar] {
  display: none;
}
@media (max-width: 820px) {
  [data-hbm-cta-bar] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 115;
    height: var(--hbm-cta-bar-height);
  }
  [data-hbm-cta-bar] a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 100%;
    box-sizing: border-box;
    line-height: 1;
    text-decoration: none;
  }
  /* Make room: shift the nav and the document content down by the bar height. */
  html.hbm-has-cta-bar body {
    padding-top: var(--hbm-cta-bar-height);
  }
  html.hbm-has-cta-bar [data-hbm-nav] {
    top: var(--hbm-cta-bar-height);
  }
}

/* ── Mobile drawer mechanics ────────────────────────────────────────────── */
[data-hbm-drawer] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--hbm-drawer-z);
  background: var(--hbm-drawer-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Variant: slide (default) — drawer slides down from the top (ALC pattern). */
[data-hbm-drawer],
[data-hbm-drawer="slide"] {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s var(--hbm-ease), visibility 0s linear 0.35s;
}
[data-hbm-drawer].is-open,
[data-hbm-drawer="slide"].is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s var(--hbm-ease), visibility 0s linear 0s;
}
/* Variant: fade — full-screen overlay fade (PNP pattern). */
[data-hbm-drawer="fade"] {
  transform: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s var(--hbm-ease), visibility 0s linear 0.4s;
}
[data-hbm-drawer="fade"].is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.4s var(--hbm-ease), visibility 0s linear 0s;
}
/* The drawer never renders on desktop; the toggle never renders on desktop. */
@media (min-width: 821px) {
  [data-hbm-drawer] { display: none; }
  [data-hbm-drawer-toggle] { display: none; }
}

/* ── Drawer submenu accordions ──────────────────────────────────────────── */
[data-hbm-submenu] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--hbm-ease);
}
[data-hbm-submenu].is-open {
  max-height: var(--hbm-submenu-max);
}

/* ── Desktop mega menu mechanics (open on hover AND keyboard focus) ─────── */
[data-hbm-mega] {
  position: relative;
  display: inline-flex;
  align-items: center;
}
[data-hbm-mega] > .mega-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease,
              transform 0.25s var(--hbm-ease),
              visibility 0s linear 0.25s;
  z-index: 105;
}
[data-hbm-mega]:hover > .mega-panel,
[data-hbm-mega]:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease,
              transform 0.25s var(--hbm-ease),
              visibility 0s linear 0s;
}
/* Invisible hover bridge — keeps the panel open while the cursor crosses
   the gap between the trigger and the panel. */
[data-hbm-mega]::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

/* ── Reveal on scroll (gated on .js-anim so no-JS users see everything) ── */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--hbm-ease), transform 0.7s var(--hbm-ease);
  transition-delay: calc(var(--reveal-i, 0) * 60ms); /* stagger within grids */
  will-change: opacity, transform;
}
.js-anim .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion: kill every animation this layer introduces ─────────── */
@media (prefers-reduced-motion: reduce) {
  [data-hbm-nav],
  [data-hbm-drawer],
  [data-hbm-submenu],
  [data-hbm-mega] > .mega-panel,
  .js-anim .reveal,
  .js-anim .reveal.in {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }
  [data-hbm-drawer]:not(.is-open) { opacity: 1; transform: translateY(-100%); }
  [data-hbm-drawer="fade"]:not(.is-open) { transform: none; opacity: 0; }
}

/* ── Screenshot mode (?shot) — pairs with screenshot.sh ────────────────── */
.shot-mode .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.shot-mode .hero,
.shot-mode .page-hero {
  animation: none !important;
  min-height: 0 !important;
  padding-top: 180px;
}
.shot-mode [data-hbm-nav] {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
.shot-mode [data-hbm-drawer],
.shot-mode [data-hbm-mega] > .mega-panel {
  display: none !important;
}