/* Sticky Header widget — positioning + the two .ckh colour schemes (home /
   default). Owned by the component: registered in widgets-loader.php, declared
   via get_style_depends() in sticky-header-widget.php, so it loads exactly where
   the widget renders (the header template = site-wide).
   Companion: inc/header.php (dark/light body class). */

/* Sticky header: apply at the location level so Elementor container
   overflow doesn't break position:sticky on the inner widget. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Prevent any ancestor from clipping the sticky header */
body,
.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
  overflow: visible !important;
}

/* ---------------------------------------------------------------------------
   Sticky header — two schemes:
     • Home (body.home): translucent dark backdrop + white text + light logo,
       blur-in on menu open (the floating overlay look).
     • Everywhere else: solid light bar + dark text + dark logo + light drawer.
   Structural rules (positioning, panel slide, scroll lock) are shared; only the
   colour/backdrop scheme branches on body.home. Custom-property overrides use
   !important to beat the widget's id-scoped vars.
--------------------------------------------------------------------------- */

/* ---- Shared structure (both schemes) ---- */
.ckh {
  position: relative;
  background: transparent !important; /* visual backdrop moved to ::before */
}
/* Backdrop on a pseudo so any blur does NOT make .ckh a containing block for
   position:fixed descendants (the mobile panel). When the drawer opens the
   pseudo extends downward to cover the drawer area — one continuous plane,
   no seam. Colour/blur are set per-scheme below. */
.ckh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition:
    bottom 0.28s ease,
    background 0.28s ease,
    -webkit-backdrop-filter 0.28s ease,
    backdrop-filter 0.28s ease;
}
.ckh.is-open::before {
  bottom: -100lvh; /* extend backdrop over the full drawer (large-viewport height) */
}
/* Mobile panel: transparent vessel (::before provides the backdrop). Replaces
   the widget's horizontal slide with a vertical fade+slide so the text flows in
   the same direction as the expanding backdrop. */
@media (max-width: 767px) {
  .ckh .ckh-mobile-panel {
    top: var(--ckh-h) !important;
    background: transparent !important;
    transform: translateY(-32px) !important;
    opacity: 0;
    pointer-events: none; /* invisible panel must not block page clicks */
    transition:
      transform 0.28s ease,
      opacity 0.28s ease !important;
  }
  .ckh.is-open .ckh-mobile-panel {
    transform: translateY(0) !important;
    opacity: 1;
    pointer-events: auto;
  }
  /* Chronicle mobile filter bar is an Elementor sticky at z-index:99999. The
     header widget's own z-index is trapped inside .elementor-location-header,
     which is the real root-level stacking context (z-index:999). So to put the
     open drawer above the filter bar we must raise the LOCATION wrapper, not the
     widget. Only while the drawer is open; the backdrop then covers the bar. */
  body.ckh-drawer-open .elementor-location-header {
    z-index: 100000;
  }
}

/* ---- HOME scheme: translucent dark + white text + light logo + blur ---- */
body.home .ckh {
  --ckh-col: #ffffff !important; /* link / logo text */
}
body.home .ckh::before {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
/* "Transparent at top" (widget toggle → .ckh--transparent-top): the backdrop is
   fully clear while at the top of the page and the translucent plane fades in
   once scrolled (is-scrolled toggled at scrollY > 0 by the header script). The
   open drawer also forces the backdrop on, so the menu is never see-through. */
body.home .ckh--transparent-top::before {
  background: rgba(0, 0, 0, 0);
}
body.home .ckh--transparent-top.is-scrolled::before,
body.home .ckh--transparent-top.is-open::before {
  background: rgba(0, 0, 0, 0.35);
}
/* Blur only while the menu is open. */
body.home .ckh.is-open::before {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
/* No light/dark logo swap needed: the lockup is an inlined SVG filled with
   `currentColor`, so it already follows --ckh-col on the dark bar. */
/* Keep white text readable over light sections behind the translucent bar. */
body.home .ckh .ckh-link {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
body.home .ckh .ckh-logo svg {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

/* ---- DEFAULT scheme (all non-home pages): solid light + dark text ---- */
body:not(.home) .ckh {
  --ckh-col: #111111 !important; /* link / logo text */
}
/* No bottom edge — separation from the page comes from the widget's
   shadow-on-scroll (.ckh--shadow-scroll.is-scrolled), so the bar reads flat
   while at the top and lifts once scrolled. */
body:not(.home) .ckh::before {
  background: #fafafa;
}
/* Default (light-bg) logo shows; no swap needed — this is the widget default,
   so we only need to make sure the home swap doesn't leak here. */
/* Lock page scroll while the drawer is open. The header's JS sets
   body.style.overflow=hidden, but the sticky-header `body { overflow: visible
   !important }` rule above beats inline styles — so re-assert the lock here with
   higher specificity (body:has(...)) only while the drawer is open. */
body:has(.ckh.is-open) {
  overflow: hidden !important;
}

/* Home page only: header OVERLAYS the content (floats over the hero) instead of
   reserving space. The negative margin equals the header height, pulling the
   first section up under the sticky bar. All other pages keep the reserved
   layout. Driven by --ckh-h (set on :root by the header widget, with a mobile
   override) so it tracks the configured desktop/mobile heights automatically.
   The 64px fallback applies only if the header widget isn't present. */
body.home .elementor-location-header {
  margin-bottom: calc(-1 * var(--ckh-h, 64px));
}

/* Content width: the bar itself stays full-bleed (backdrop/edge span the
   viewport) but its contents align to the same 1600px boxed width every other
   component uses (shop 621, home 675, single product 2281).
   Centred with flex on the bar rather than `margin-inline:auto` on the inner:
   the widget's own id-scoped rule (#uid .ckh-inner) sets `margin:0 !important`,
   and an ID beats any class selector we can write here, so auto margins are
   unwinnable. max-width is safe — the widget never sets it. */
.ckh {
  display: flex;
  justify-content: center;
}
.ckh .ckh-inner {
  flex: 1 1 auto;
  max-width: 1600px;
}

/* ---------------------------------------------------------------------------
   Typography: match the reference site's nav size.
   Desktop nav links use font-size:var(--ckh-fs) (widget control, default 12px).
   Reference nav is 10px, so override the unit. The mobile-panel links use the
   same var (mobile type matches desktop); the logo (fixed 17px) doesn't and is
   unaffected; the nav-group / right-zone gaps (calc(--ckh-fs * 2)) tighten
   slightly to suit. */
.ckh { --ckh-fs: 10px !important; }