/* ============================================================
   ANNOUNCE BAR — kwizzbit/announce-bar
   Thin sitewide strip above the nav. Light coral band with
   NEW badge, offer copy and a text CTA link.

   ABOUT PAGE (body.page-id-115): the light strip read oddly
   sitting directly above the blood-orange hero, so it switches
   to a dark ink band with white copy. See the scoped block at
   the end of this file.

   MODES PAGE (body.page-id-97): used to carry the same dark ink
   band, matching the old coral mic-photo hero. The hero backdrop
   is cream now (modes.css/modes.js), so Modes reverted to the
   sitewide light strip — no scoped override left for it here
   (2026-08-12, user's call).
   ============================================================ */
/* ── PINNED AT THE TOP, AT ALL TIMES (Kev's call, 2026-07-15) ──────
   The strip is position:sticky, not fixed: it keeps its place in the
   page flow (so nothing needs artificial padding to compensate, and
   pages without the bar — the no-chrome ones — are untouched), and it
   pins itself to the viewport top the moment scrolling would carry it
   away. body{overflow-x:clip} in base.css was chosen precisely so
   viewport-sticky keeps working — see the comment there.

   Sticky can't travel beyond its PARENT box, and WP wraps the bar +
   site-header together in a ~127px <header class="wp-block-template-
   part"> — inside which the bar could only stick for 88px of scroll.
   So that wrapper is dissolved below (display:contents, the same
   trick base.css already uses on the cookie-modal's wrapper), which
   lifts the bar's sticky range to the full-height .wp-site-blocks.

   z-index 800: above all page content, below the mobile-menu backdrop
   (900), the floating burger (950) and the page loader. The desktop
   Get-started CTA (500) and the burger never overlap it spatially —
   both hold positions BELOW the bar now (see nav.css). */
.announce-bar {
  position: sticky;
  /* 0 for visitors. For LOGGED-IN views WP fixes its grey admin
     toolbar across the viewport top (32px desktop / 46px mobile) and
     publishes its height as this core variable — without the offset
     the pinned strip slides up BEHIND the toolbar and looks like it
     "isn't fixing" (exactly how it first presented on a logged-in
     desktop). Visitors never have the var, so they get top:0. */
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 800;
  background: #FCE9E7;
  border-bottom: 1px solid rgba(255, 54, 35, 0.12);
  padding-block: 0.5rem;
  /* Glass ramp discipline (same lesson as the burger circle): the
     backdrop-filter idles at ZERO strength and rides the same
     transition as the fill, so the saturate() can never arrive ahead
     of the translucency and flash-boost whatever sits behind. */
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    -webkit-backdrop-filter 0.3s ease;
}

/* Once content is actually scrolling beneath the pinned strip
   (.kwb-nav-floating = scrolling under way, the same flag that fades
   the burger's circle in), the solid band turns to liquid glass —
   one material language across all the floating chrome. High-alpha
   wash of the strip's own pink + strong blur keeps the offer copy
   and CTA fully legible over anything that passes underneath. At the
   top of the page nothing is beneath it, so it rests solid. */
.kwb-nav-floating .announce-bar {
  /* 0.88 fill: enough see-through for the frosted texture to read,
     opaque enough that content underneath is a whisper, not a voice
     (0.78 first cut felt "a bit too much" on device — user call). */
  background: rgba(252, 233, 231, 0.88);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

@media (prefers-reduced-motion: reduce) {
  .announce-bar { transition: none; }
}

/* Dissolve the header template-part wrapper (see the note above).
   header. + [class] beats base.css's `.wp-block-template-part[class]
   {display:block}` (0,2,1 vs 0,2,0). Scoped to <header> so the footer
   part keeps its box. The wrapper carried no other styling (verified:
   only the base.css display/margin rule targets it). */
header.wp-block-template-part[class] {
  display: contents;
}

/* With a permanent strip overlaying the top of the viewport, in-page
   anchor jumps (FAQ rail, future #links) must land BELOW it, not
   under it. Scoped with :has so pages without a bar are untouched. */
html:has(.announce-bar) {
  scroll-padding-top: calc(var(--kwb-announce-h, 2.4375rem) + 12px);
}
.announce-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding-inline: var(--wp--custom--layout--gutter);
  flex-wrap: wrap;
}
/* Slides — on desktop they're just inline groups sitting on one line.
   On mobile they become stacked, crossfading panes (see media query). */
.announce-bar__slide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
/* Badge */
.announce-bar__badge {
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--ink);
  color: #fff;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: 0;
  flex-shrink: 0;
  line-height: 1;
}
/* Copy */
.announce-bar__copy {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.2;
}
.announce-bar__copy strong {
  font-weight: 700;
}
/* "Are we mad?" — separate item so it can be dropped on mobile */
.announce-bar__prompt {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.2;
}
/* CTA link */
.announce-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--coral);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.announce-bar__cta:hover {
  text-decoration-color: var(--wp--preset--color--coral);
}
/* Looping "beckon" on the arrow — nudges right, settles, pauses, repeats — to
   draw the eye to the offer. Transform-only (composited, no jitter). */
.announce-bar__cta svg {
  animation: ab-cta-beckon 1.6s ease-in-out infinite;
  will-change: transform;
}
.announce-bar__cta:hover svg { animation-play-state: paused; } /* hold still while being clicked */
@keyframes ab-cta-beckon {
  0%, 65%, 100% { transform: translateX(0); }
  32%           { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-bar__cta svg { animation: none; }
}
/* ============================================================
   MOBILE — crossfade rotator
   The two slides stack in the same spot and fade one after the
   other on a loop:
     Slide A:  [NEW]  3 months of Game-show for £60.
     Slide B:  Are we mad?  Yes, get offer →
   ============================================================ */
@media (max-width: 600px) {
  .announce-bar__inner {
    position: relative;
    display: block;
    /* Reserve one line's height so the absolute slides have a stage */
    min-height: 1.35rem;
  }
  .announce-bar__slide {
    position: absolute;
    inset: 0;
    /* gap a touch tighter on the small stage */
    gap: 0.5rem;
    will-change: opacity;
  }
  .announce-bar__slide--a {
    animation: ab-rotate-a 7s ease-in-out infinite;
  }
  .announce-bar__slide--b {
    animation: ab-rotate-b 7s ease-in-out infinite;
  }

  /* Slide A: visible first half, then fades out for slide B */
  @keyframes ab-rotate-a {
    0%   { opacity: 1; pointer-events: auto; }
    42%  { opacity: 1; }
    50%  { opacity: 0; pointer-events: none; }
    92%  { opacity: 0; }
    100% { opacity: 1; pointer-events: auto; }
  }
  /* Slide B: hidden first half, fades in for the second half.
     pointer-events gated so the CTA is only tappable while visible. */
  @keyframes ab-rotate-b {
    0%   { opacity: 0; pointer-events: none; }
    42%  { opacity: 0; }
    50%  { opacity: 1; pointer-events: auto; }
    92%  { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
  }

  /* Reduced motion — no fade loop. Fall back to a static inline flow
     (both slides shown, wrapping naturally) so nothing is hidden. */
  @media (prefers-reduced-motion: reduce) {
    .announce-bar__inner {
      position: static;
      display: flex;
      flex-wrap: wrap;
      min-height: 0;
    }
    .announce-bar__slide {
      position: static;
      inset: auto;
      animation: none;
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* ============================================================
   ABOUT PAGE — dark variant (body.page-id-115)
   Deep ink band + white copy so the strip doesn't clash sitting
   above the About hero's blood-orange. Scoped by body id, so the
   sitewide light bar is untouched everywhere else. First pass —
   easy to retune (band colour, badge, CTA) from here.
   ============================================================ */
body.page-id-115 .announce-bar {
  background: var(--wp--preset--color--ink);          /* #1D0B09 */
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* Copy + prompt → white */
body.page-id-115 .announce-bar__copy,
body.page-id-115 .announce-bar__copy strong,
body.page-id-115 .announce-bar__prompt {
  color: #fff;
}
/* NEW badge: flip to a coral accent (the ink badge would vanish on the ink band) */
body.page-id-115 .announce-bar__badge {
  background: var(--wp--preset--color--coral);        /* #FF3623 */
  color: #fff;
}
/* CTA → light coral so it pops off the ink band, with a matching hover underline */
body.page-id-115 .announce-bar__cta {
  color: #FF6F5F;
}
body.page-id-115 .announce-bar__cta:hover {
  text-decoration-color: #FF6F5F;
}

/* ── Glass-on-scroll for the DARK variant (About only now) ──────────
   The about solid-ink rule above is (0,2,1) and outranks the sitewide
   glass rule (0,2,0), so without this the dark strip would stay solid
   while scrolled. Same translucency step as the pink band, in the ink;
   the blur comes from the sitewide glass rule (this page rule never
   declares backdrop-filter, so it cascades through untouched). (0,3,1)
   beats the solid variant. Modes dropped out of this selector when it
   reverted to the sitewide light strip — the plain glass rule elsewhere
   in this file already covers it correctly. */
.kwb-nav-floating body.page-id-115 .announce-bar {
  /* Same "thicker glass" step as the pink band (0.80 → 0.90; the ink
     runs a touch more opaque than the pink for text contrast). */
  background: rgba(29, 11, 9, 0.90);
}