/* =========================================================================
   The notice strip
   =========================================================================
   Sits above the header, so it must not fight it. The header is z-index 60 and
   sticky; the strip scrolls away with the page rather than pinning, because two
   fixed bars on a phone is most of the screen gone.

   Four templates share one shell. Everything below the shell is a repaint —
   colour, weight, motion — so a new template is a class and a case, never a
   new layout.
   -------------------------------------------------------------------- */
.ns{position:relative;z-index:61;}
/* Kept deliberately short. This sits above a sticky header on a phone, and
   every pixel it takes is a pixel of the page nobody asked for. 32px is a
   readable line at 13px with room either side and nothing more. */
.ns-item{position:relative;display:flex;align-items:center;gap:9px;
  min-height:32px;padding:0 40px 0 14px;overflow:hidden;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:13px;line-height:1.35;letter-spacing:.002em;}
.ns-item + .ns-item{border-top:1px solid rgba(255,255,255,.14);}
.ns-item[hidden]{display:none;}

/* --- the shared pieces ------------------------------------------------ */
.ns-icon{flex-shrink:0;opacity:.9;}
.ns-tag{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.2);white-space:nowrap;}
.ns-msg{font-weight:500;color:rgba(255,255,255,.96);}
/* Was a filled chip in a monospace face. Plain text in the same family as the
   message reads faster and costs no height — the gold is enough to separate
   it, and tabular numerals stop the figure jittering as it counts down. */
.ns-count{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;color:var(--gold-l);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
/* A text button. The filled pill was the tallest thing in the bar and made a
   40px-high strip out of a 13px line; as text it costs nothing vertically and
   still reads as the action, because it is the only underlined gold thing
   here. */
.ns-go{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  font-weight:700;color:var(--gold-l);white-space:nowrap;padding:2px 0;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(255,199,104,.5);
  transition:color .14s,text-decoration-color .14s;}
.ns-go:hover{color:#fff;text-decoration-color:#fff;}
.ns-go:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px;}

/* --- controls --------------------------------------------------------- */
/* z-index above the ticker's fade. Both are positioned, the fade is a ::after
   and therefore paints last, and it hid the controls completely — the pause
   button was still clickable (the fade has pointer-events:none) but invisible,
   which is worse than not having one: WCAG 2.2.2 asks for a control the reader
   can find, not one they can only hit by accident. */
.ns-x,.ns-pause{position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:0;border-radius:var(--r-pill);
  color:inherit;font-size:9.5px;cursor:pointer;opacity:.7;transition:opacity .15s,background .15s;}
.ns-x:hover,.ns-pause:hover{opacity:1;background:rgba(255,255,255,.28);}
.ns-x:focus-visible,.ns-pause:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px;}
.ns-x{right:10px;}
.ns-pause{right:36px;}
.ns-item:not(:has(.ns-x)) .ns-pause{right:12px;}

/* --- template: ticker -------------------------------------------------
   Two identical runs side by side, translated by exactly half the track, so
   the loop has no seam. Duration is set per element by the script from the
   real content width — a fixed duration makes a short notice crawl and a long
   one sprint. */
.ns-ticker{padding-right:66px;}
/* flex:0 0 auto, NOT flex:1. With flex:1 the track shrinks below max-content
   to fit its parent, and the keyframe's translateX(-50%) then resolves against
   that shrunken *layout* width rather than the content width — measured, it
   moved 687px where the content needed 1723px, so it crawled at 45px/s instead
   of the 115px/s the duration implied AND the loop never lined up with the end
   of the first run. The track must be allowed to be as wide as its content. */
.ns-track{display:flex;flex:0 0 auto;width:max-content;
  animation:ns-scroll var(--ns-dur,34s) linear infinite;}
.ns-run{display:flex;align-items:center;gap:9px;padding-right:52px;white-space:nowrap;}
/* Between items in a shared lane. A diamond rather than a pipe: at 13px a pipe
   reads as part of the sentence it follows. */
.ns-sep{flex-shrink:0;width:5px;height:5px;margin:0 13px;transform:rotate(45deg);
  background:var(--gold-l);opacity:.75;}
@keyframes ns-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ns-ticker:hover .ns-track,
.ns-ticker:focus-within .ns-track,
.ns-ticker.is-paused .ns-track{animation-play-state:paused;}

/* The track scrolls past the pause and dismiss buttons, and text showing
   through them looked like a collision. A short fade in the bar's own colour
   lets the message disappear cleanly instead of colliding with the controls.
   Pointer-events off so it never eats a click meant for the buttons. */
.ns-ticker::after{content:'';position:absolute;z-index:1;top:0;bottom:0;right:0;width:110px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(10,79,168,0) 0%,#0A4FA8 55%);}

/* --- template: banner ------------------------------------------------- */
.ns-static{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  justify-content:center;flex:1;min-width:0;padding:6px 0;}
.ns-banner{background:var(--pri);color:#fff;}
/* The ticker is the moving template, and movement is the point of the strip,
   so it gets the richer ground rather than the flat one — a notice should not
   have to choose between scrolling and looking like it matters. */
.ns-ticker{background:linear-gradient(90deg,var(--pri-d),var(--pri) 55%,#0A4FA8);color:#fff;}

/* --- template: urgent ------------------------------------------------- */
.ns-urgent{background:var(--bad);color:#fff;font-weight:600;}
.ns-urgent .ns-tag{background:rgba(0,0,0,.26);}
.ns-urgent .ns-go{background:#fff;color:var(--bad);}
.ns-urgent .ns-go:hover{background:#FFECEC;}

/* --- template: countdown ---------------------------------------------- */
.ns-countdown{background:linear-gradient(90deg,var(--pri-d),var(--pri) 55%,#0A4FA8);color:#fff;}

/* --- responsive -------------------------------------------------------
   Below 760 the banner and countdown stop centring and start wrapping: a
   centred three-part line on a phone breaks into ragged islands. The ticker
   keeps scrolling — that is what it is for on a narrow screen. */
@media(max-width:760px){
  .ns-item{font-size:12.5px;min-height:30px;padding:0 36px 0 12px;}
  .ns-static{justify-content:flex-start;gap:8px;padding:5px 0;}
  .ns-tag{font-size:9.5px;padding:2px 6px;}
  .ns-go{font-size:12px;}
  .ns-count{font-size:11.5px;}
  .ns-x,.ns-pause{width:20px;height:20px;font-size:9px;}
  .ns-x{right:8px;} .ns-pause{right:32px;}
  .ns-ticker{padding-right:58px;}
}
@media(max-width:420px){
  /* The label is the first thing to go: the message carries the meaning. */
  .ns-static .ns-tag{display:none;}
}

/* --- motion ------------------------------------------------------------
   Reduced motion gets no scroll at all. The track becomes a normal wrapping
   line and the duplicate run is removed, so nothing is read twice. */
@media(prefers-reduced-motion:reduce){
  .ns-track{animation:none;width:auto;flex-wrap:wrap;}
  .ns-run[aria-hidden="true"]{display:none;}
  .ns-run{white-space:normal;padding-right:0;}
  .ns-ticker{padding-right:40px;}
  .ns-pause{display:none;}
  .ns-go{transition:none;}
  .ns-go:hover{transform:none;}
}

/* =========================================================================
   The analytics consent bar
   =========================================================================
   Sits at the foot, above the WhatsApp launcher (z 45) but below the header
   (60) and the mobile menu (55) — it must never cover navigation, because a
   reader who wants to ignore it has to be able to get on with using the site.

   Not a modal. No backdrop, no dim, no trap: the page stays usable while it
   is on screen, which is the whole difference between asking and demanding.
   -------------------------------------------------------------------- */
.cb{position:fixed;left:0;right:0;bottom:0;z-index:52;
  background:rgba(1,25,60,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 34px -18px rgba(0,0,0,.6);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;}
.cb[hidden]{display:none;}
.cb-in{max-width:var(--wrap,1400px);margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:20px;}
.cb-msg{display:flex;align-items:flex-start;gap:10px;margin:0;flex:1;min-width:0;
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.9);}
.cb-msg i{color:var(--gold-l);font-size:14px;margin-top:2px;flex-shrink:0;}
.cb-msg strong{color:#fff;}
.cb-msg a{color:var(--gold-l);text-decoration:underline;text-underline-offset:2px;}
.cb-msg a:hover{color:#fff;}
.cb-act{display:flex;gap:9px;flex-shrink:0;}
/* Both choices the same size and the same prominence. A "reject" made smaller
   or greyer than "accept" is a dark pattern wearing a consent bar's clothes. */
.cb-btn{min-height:36px;padding:0 18px;border-radius:var(--r-pill);cursor:pointer;
  font-size:13px;font-weight:700;white-space:nowrap;border:1.5px solid transparent;
  transition:background .15s,border-color .15s,color .15s;}
.cb-no{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.cb-no:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.cb-yes{background:var(--gold);color:#3A2600;}
.cb-yes:hover{background:var(--gold-l);}
.cb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}

@media(max-width:700px){
  .cb-in{flex-direction:column;align-items:stretch;gap:11px;padding:12px 16px;}
  .cb-msg{font-size:12.5px;}
  .cb-act{justify-content:stretch;}
  .cb-btn{flex:1;justify-content:center;min-height:42px;}
}
/* The WhatsApp launcher would otherwise sit on top of the bar. */
body:has(#consent-bar:not([hidden])) .wa{bottom:calc(96px + env(safe-area-inset-bottom, 0px));}
@media(max-width:900px){
  body:has(#consent-bar:not([hidden])) .wa{bottom:calc(150px + env(safe-area-inset-bottom, 0px));}
}