/* fairplay-24.org — BUBBLE POP DERBY · shared site.css (page-unique styles live inline per page) */

/* ---------- fonts (self-host latin + latin-ext; ₹ U+20B9 only in latin-ext, rules/124) ---------- */
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-latin.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(/fonts/bricolage-latinext.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:optional;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latinext.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:optional;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  --ink:#0b1f17; --surface:#ffffff; --paper:#f4f8f5; --paper2:#eaf3ee;
  --green:#0a8f4d; --green-d:#076b3a; --gold:#f5b301; --gold-d:#d99a00;
  --pop:#ff2d7e; --muted:#5a6b62; --line:#d7e5dc; --ink-soft:#28352e;
  --head:"Bricolage",system-ui,-apple-system,Segoe UI,sans-serif;
  --body:"Figtree",system-ui,-apple-system,Segoe UI,sans-serif;
  --wrap:1140px; --r:14px;
}

/* ---------- reset / overflow guard (rules/24, 78, 79) ---------- */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;max-width:100%;background:var(--surface);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.72;overflow-wrap:break-word;-webkit-text-size-adjust:100%}
:where(body *){min-width:0}
img{max-width:100%;height:auto;display:block}
main{max-width:100%;overflow-x:clip}
a{color:var(--green-d)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.1;font-weight:700;margin:0 0 .5em;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(2rem,5.2vw,3rem)}h2{font-size:clamp(1.5rem,3.4vw,2.1rem)}h3{font-size:1.2rem}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- skip link (EXACT form, rules/118 — no inline style) ---------- */
.skip.skip-link{position:absolute;left:0;top:0;background:var(--gold);color:#0b1f17;padding:10px 16px;
  font-family:var(--head);font-weight:700;border-radius:0 0 10px 0;z-index:200;clip:rect(0 0 0 0);clip-path:inset(50%)}
.skip.skip-link:focus{clip:auto;clip-path:none;outline:3px solid var(--pop)}
:focus-visible{outline:3px solid var(--pop);outline-offset:2px}

/* ---------- header + bubble-blast nav ---------- */
.hdr{position:sticky;top:0;z-index:120;width:100%;max-width:100vw;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .bar{display:flex;align-items:center;gap:14px;max-width:var(--wrap);margin-inline:auto;padding:10px 20px}
.hdr .logo img{height:38px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a.navlink{font-family:var(--head);font-weight:600;font-size:.96rem;color:var(--ink);text-decoration:none;
  padding:8px 11px;border-radius:9px;white-space:nowrap}
.nav a.navlink:hover{background:var(--paper2)}
.nav a.navlink[aria-current="page"]{color:var(--green-d);background:var(--paper2)}
.nav .cta-head{margin-left:6px}

/* bubble-blast toggle (mobile) — circular gold POP button (rules/50 pointer-events, rules/58 no JS text) */
.navtoggle{display:none;position:relative;width:48px;height:48px;min-width:48px;border:none;border-radius:50%;
  background:var(--gold);cursor:pointer;place-items:center;box-shadow:0 3px 0 var(--gold-d)}
.navtoggle .bars{position:relative;width:20px;height:14px;pointer-events:none}
.navtoggle .bars span{position:absolute;left:0;width:20px;height:2.6px;background:#0b1f17;border-radius:2px;transition:transform .25s,opacity .2s}
.navtoggle .bars span:nth-child(1){top:0}.navtoggle .bars span:nth-child(2){top:5.7px}.navtoggle .bars span:nth-child(3){top:11.4px}
.navtoggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5.7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)}
/* burst bubbles injected by JS, one-shot, non-idle */
.blast{position:absolute;inset:0;pointer-events:none;z-index:5}
.blast b{position:absolute;top:50%;left:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2);
  border-radius:50%;background:var(--c);opacity:.95;animation:pop .52s ease-out forwards}
@keyframes pop{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

@media(max-width:880px){
  .navtoggle{display:grid}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px 16px;margin:0;
    box-shadow:0 14px 24px rgba(0,0,0,.09);display:none}
  .nav.open{display:flex}
  .nav a.navlink{padding:11px 12px;border-radius:10px;font-size:1.02rem}
  .nav .cta-head{margin:6px 0 0}
}

/* ---------- buttons / CTA (rules: gold+ink or WA-green+ink, contrast >=4.5; container link a:not([class])) ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:700;font-size:1.02rem;
  text-decoration:none;padding:13px 24px;border:none;cursor:pointer;line-height:1;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn-primary{background:var(--gold)!important;color:#0b1f17!important;box-shadow:0 3px 0 var(--gold-d)}
.btn-primary:hover{background:var(--gold-d)!important}
.btn-wa{background:#25D366!important;color:#08351a!important;box-shadow:0 3px 0 #128C4A}
.btn-ghost{background:transparent!important;color:var(--green-d)!important;box-shadow:inset 0 0 0 2px var(--green)}
/* bare container links inside content -> treat as primary destination (rules) */
.cta-box a:not([class]){display:inline-flex;background:var(--gold);color:#0b1f17;font-family:var(--head);
  font-weight:700;padding:12px 22px;text-decoration:none;border-radius:10px}

/* ---------- whatsapp float ---------- */
.wafloat{position:fixed;right:16px;bottom:16px;z-index:130;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:wapulse 2.4s infinite}
.wafloat svg{width:32px;height:32px;fill:#fff}
@keyframes wapulse{0%,100%{box-shadow:0 6px 18px rgba(37,211,102,.35)}50%{box-shadow:0 6px 28px rgba(37,211,102,.7)}}

/* ---------- footer (category labels are <p>/<span>, NOT headings — rules/62) ---------- */
.ft{background:var(--ink);color:#cdddd3;margin-top:60px;padding:46px 0 26px}
.ft .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:28px}
.ft .fcat{font-family:var(--head);font-weight:700;color:#fff;font-size:.98rem;margin:0 0 12px;letter-spacing:.01em}
.ft a{color:#cdddd3;text-decoration:none;display:block;padding:4px 0;font-size:.95rem}
.ft a:hover{color:#fff}
.ft .social a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#12352a;margin:4px 6px 0 0}
.ft .social svg{width:18px;height:18px;fill:#cdddd3}
.ft .partner{display:flex;align-items:center;gap:12px;margin-top:18px}
.ft .partner .plate{background:#fff;border-radius:10px;padding:8px 12px;display:inline-flex}
.ft .partner .plate img{height:30px;width:auto}
.ft .fine{border-top:1px solid #16382c;margin-top:26px;padding-top:18px;font-size:.84rem;color:#9fb3a8}
@media(max-width:760px){.ft .cols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.ft .cols{grid-template-columns:1fr}}

/* ---------- FAQ: bubble-pop details/summary ---------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;font-family:var(--head);font-weight:600;font-size:1.06rem;
  padding:16px 52px 16px 18px;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;
  font-size:1.3rem;line-height:1;transition:transform .22s,background .22s;pointer-events:none}
.faq details[open] summary::after{content:"–";background:var(--pop);transform:translateY(-50%) scale(1.05)}
.faq .ans{padding:0 18px 16px}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- chips / also-search ---------- */
.also-search{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}
.also-search a,.also-search span{font-family:var(--head);font-weight:600;font-size:.86rem;background:var(--paper2);
  color:var(--green-d);padding:7px 13px;border-radius:999px;text-decoration:none}
.also-search a:hover{background:var(--green);color:#fff}

/* ---------- tables (min-width only on wrapped tables — rules/79) ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;position:relative;margin:18px 0}
.tbl-wrap::after{content:"";position:absolute;top:0;right:0;width:26px;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9))}
.tbl-wrap>table{min-width:430px;width:100%;border-collapse:collapse}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 13px;border:1px solid var(--line);text-align:left;font-size:.96rem}
th{background:var(--green-d);color:#fff;font-family:var(--head);font-weight:600}
tr:nth-child(even) td{background:var(--paper)}

/* ---------- seo-box base only. VARIANT layout CSS lives in each page's inline <style>
   (rules/74 — variant classes carry layout; NEVER put .seo-box.<variant> grid/columns/
   flex rules in shared CSS or seoboxcheck's css_for aggregates them onto every page,
   causing a false "columns+grid" collision, rules/63). ---------- */
.seo-box{margin:34px 0}
.seo-box h2{margin-top:0}

/* ---------- related "derby track" block ---------- */
.derby{margin:34px 0;padding:22px;background:var(--paper);border-radius:var(--r);border:1px solid var(--line)}
.derby .fcat{font-family:var(--head);font-weight:700;margin:0 0 14px}
.derby a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);padding:9px 0;border-bottom:1px dashed var(--line)}
.derby a:last-child{border-bottom:none}
.derby a .lane{flex:1;height:8px;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:6px;max-width:120px}
.derby a:hover{color:var(--green-d)}

/* ---------- breadcrumb ---------- */
.crumb{font-size:.86rem;color:var(--muted);padding:14px 0 0}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--green-d)}

/* ---------- decorative pseudo elements: never eat clicks (rules/50) ---------- */
.bubbledeco::before,.bubbledeco::after,[data-deco]::before,[data-deco]::after{pointer-events:none}

/* ---------- utility ---------- */
.eyebrow{font-family:var(--head);font-weight:600;color:var(--green-d);text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;margin-bottom:.5em}
.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}
figure{margin:22px 0}
figure img{border-radius:var(--r)}
.imgph{background:linear-gradient(135deg,var(--paper2),#fff);border:1px dashed var(--line);border-radius:var(--r);display:grid;place-items:center;color:var(--muted);font-family:var(--head);font-size:.9rem}
section{padding:8px 0}