/* ============================================================================
   4Action Media — SITE CHROME (shared, DRY)
   Cookie-consent banner + WhatsApp FAB + Accessibility FAB.
   Behaviour mirrors the homepage VERBATIM; here it lives once and is reused by
   every blog page (and could later replace the homepage's inline copy).
   Self-contained: hardcoded brand values (navy/teal) so it does NOT depend on
   any page's CSS-variable names. WCAG 2.2 AA; prefers-reduced-motion honoured.
   Authored by 4Action — no third-party CSS.
   ========================================================================== */

/* Local tokens (scoped, fall back to brand hex if a page already defines them) */
.a4-chrome,
.cookie,
.wa-fab,
.acc-fab{
  --a4c-ink:#0a2540;
  --a4c-ink-soft:#52617a;
  --a4c-line:#cdddf0;
  --a4c-blue:#2D7DD2;
  --a4c-blue-light:#4da8f5;
  --a4c-muted:#9fb3cc;
}

/* ===================== COOKIE CONSENT BANNER ===================== */
.cookie{
  position:fixed; inset-block-end:20px; inset-inline-start:50%;
  transform:translateX(-50%);
  max-width:520px; width:calc(100% - 40px);
  background:rgba(13,30,53,.96);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  padding:18px 22px; z-index:2500;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  transition:transform .5s, opacity .5s;
  font-family:inherit;
}
/* RTL: translateX must flip sign so the banner stays centred */
[dir="rtl"] .cookie{ transform:translateX(50%); }
.cookie.hide{ transform:translateX(-50%) translateY(150px); opacity:0; pointer-events:none; }
[dir="rtl"] .cookie.hide{ transform:translateX(50%) translateY(150px); }
.cookie p{ font-size:13px; color:var(--a4c-muted); flex:1; min-width:200px; line-height:1.5; margin:0; }
.cookie a{ color:var(--a4c-blue-light); text-decoration:underline; }
.cookie .c-btns{ display:flex; gap:10px; }
.cookie .c-btn{
  font:600 13px/1 inherit; padding:9px 18px; border-radius:10px; cursor:pointer;
  border:1px solid transparent;
}
.cookie .c-btn--ghost{ background:transparent; color:#eaf2fb; border-color:rgba(255,255,255,.28); }
.cookie .c-btn--ghost:hover{ background:rgba(255,255,255,.08); }
.cookie .c-btn--primary{ background:var(--a4c-blue); color:#fff; }
.cookie .c-btn--primary:hover{ filter:brightness(1.06); }
.cookie .c-btn:focus-visible{ outline:2px solid var(--a4c-blue-light); outline-offset:2px; }

/* ===================== WHATSAPP FAB ===================== */
.wa-fab{ position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:3000; font-family:inherit; }
.wa-btn{
  width:30px; height:30px; border-radius:50%; background:#25D366; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.5); transition:transform .3s; position:relative;
}
.wa-btn:hover{ transform:scale(1.08); }
.wa-btn svg{ width:17px; height:17px; fill:#fff; }
.wa-btn:focus-visible{ outline:3px solid #0a2540; outline-offset:3px; }
.wa-badge{
  position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%;
  background:#FF3B30; color:#fff; font-size:8px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
[dir="rtl"] .wa-badge{ right:auto; left:-3px; }
.wa-pop{
  position:absolute; bottom:44px; inset-inline-end:0; width:280px; background:#fff;
  border-radius:18px; overflow:hidden; box-shadow:0 16px 50px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.96);
  transform-origin:bottom right; transition:.3s; color:var(--a4c-ink);
}
[dir="rtl"] .wa-pop{ transform-origin:bottom left; }
.wa-fab.open .wa-pop{ opacity:1; visibility:visible; transform:none; }
.wa-head{ background:#075E54; color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.wa-head .av{ width:38px; height:38px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.wa-head .t{ font-size:14px; font-weight:600; }
.wa-head .s{ font-size:11px; opacity:.85; }
.wa-body{ padding:16px; background:#ECE5DD; }
.wa-bubble{ background:#fff; border-radius:10px; padding:11px 13px; font-size:13px; line-height:1.5; color:#222; box-shadow:0 1px 2px rgba(0,0,0,.1); max-width:90%; }
.wa-cta{ display:block; margin:14px 16px 16px; text-align:center; background:#25D366; color:#fff; font-weight:600; font-size:14px; padding:12px; border-radius:10px; cursor:pointer; border:none; width:calc(100% - 32px); }
.wa-cta:focus-visible{ outline:3px solid #075E54; outline-offset:2px; }

/* ===================== ACCESSIBILITY FAB ===================== */
.acc-fab{ position:fixed; inset-block-end:22px; inset-inline-start:22px; z-index:3000; font-family:inherit; }
.acc-btn{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#3a8ee0,#2D7DD2); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(45,125,210,.5); transition:transform .3s;
}
.acc-btn:hover{ transform:scale(1.08); }
.acc-btn svg{ width:32px; height:32px; fill:#fff; }
.acc-btn:focus-visible{ outline:3px solid #0a2540; outline-offset:3px; }
.acc-panel{
  position:absolute; bottom:68px; inset-inline-start:0; width:258px; background:#fff;
  color:var(--a4c-ink); border-radius:18px; padding:16px;
  box-shadow:0 16px 50px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(12px) scale(.96);
  transform-origin:bottom left; transition:.3s;
}
[dir="rtl"] .acc-panel{ transform-origin:bottom right; }
.acc-fab.open .acc-panel{ opacity:1; visibility:visible; transform:none; }
.acc-panel h4{ font-size:15px; margin:0 0 4px; display:flex; align-items:center; gap:8px; color:var(--a4c-ink); }
.acc-panel .acc-tip{ font-size:11px; color:var(--a4c-ink-soft); margin-bottom:12px; }
.acc-size{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.acc-size .lbl{ font-size:13px; color:var(--a4c-ink-soft); flex:1; }
.acc-size button{ width:32px; height:32px; border-radius:8px; border:1px solid var(--a4c-line); background:#fff; cursor:pointer; font-size:16px; font-weight:700; color:var(--a4c-ink); }
.acc-size button:hover{ background:#f0f6fd; border-color:var(--a4c-blue); }
.acc-size button:focus-visible{ outline:2px solid var(--a4c-blue); outline-offset:2px; }
.acc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.acc-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px; border:1px solid var(--a4c-line); border-radius:10px; background:#fff; cursor:pointer; font-size:11px; color:var(--a4c-ink); text-align:center; transition:.2s; }
.acc-item:hover{ border-color:var(--a4c-blue); background:#f4f9fe; }
.acc-item:focus-visible{ outline:2px solid var(--a4c-blue); outline-offset:2px; }
.acc-item.active{ background:rgba(45,125,210,.12); border-color:var(--a4c-blue); color:#1565c0; font-weight:600; }
.acc-item i{ font-size:18px; line-height:1; font-style:normal; }
.acc-foot{ margin-top:12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.acc-reset{ font-size:12px; color:var(--a4c-blue); background:none; border:none; cursor:pointer; font-weight:600; }
.acc-reset:focus-visible{ outline:2px solid var(--a4c-blue); outline-offset:2px; }
.acc-stmt{ font-size:11px; color:var(--a4c-ink-soft); text-decoration:underline; }

/* Accessibility-widget page effects (applied to the page root, not the FAB) */
.acc-links a{ text-decoration:underline !important; }
.acc-readable, .acc-readable *{ font-family:Verdana,Arial,sans-serif !important; letter-spacing:.4px; }

/* ===================== MOBILE: clear the sticky lead bar ===================== */
/* The article lead form is `position:sticky; bottom:0; z-index:90`. The FABs are
   fixed and would sit over it. On small screens we shrink the FABs, tuck them to
   the page edges, and LIFT them above the lead bar so they never cover the
   form's submit / expand control. */
@media (max-width:640px){
  .wa-fab{ inset-block-end:86px; inset-inline-end:12px; }
  .acc-fab{ inset-block-end:86px; inset-inline-start:12px; }
  .wa-btn{ width:25px; height:25px; }
  .wa-btn svg{ width:14px; height:14px; }
  .acc-btn{ width:46px; height:46px; }
  .acc-btn svg{ width:26px; height:26px; }
  /* keep pop-ups inside the viewport on ~360px screens */
  .wa-pop{ width:min(280px,calc(100vw - 24px)); }
  .acc-panel{ width:min(258px,calc(100vw - 24px)); }
  .cookie{ width:calc(100% - 24px); padding:14px 16px; inset-block-end:16px; }
}

/* When the page has NO sticky lead bar (e.g. the blog index), the FABs can sit
   lower again — class added by site-chrome.js when no `.leadbar` is present. */
@media (max-width:640px){
  body.a4-no-leadbar .wa-fab{ inset-block-end:16px; }
  body.a4-no-leadbar .acc-fab{ inset-block-end:16px; }
}

/* When the mobile lead sheet is EXPANDED (a full-width bottom-sheet), tuck the
   FABs away so they can't sit over the sheet's fields or its ✕ close button.
   They return the moment the sheet collapses back to the pinned pill. */
@media (max-width:640px){
  body:has(.leadbar[data-state="open"]) .wa-fab,
  body:has(.leadbar[data-state="open"]) .acc-fab{
    opacity:0; visibility:hidden; pointer-events:none;
  }
}

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion:reduce){
  .cookie, .wa-pop, .acc-panel, .wa-btn, .acc-btn{ transition:none; }
  .wa-btn:hover, .acc-btn:hover{ transform:none; }
}