/* ══════════════════════════════════════════════════════════════════════════
   Aqua5Bot — PLAYGROUND SKIN for the blog, the articles and the privacy page.
   Loaded last in <head> on each of those pages, so it wins the cascade over
   the daisyUI CDN theme and the per-page inline <style> blocks. No markup in
   those pages is restructured; this only re-dresses them to match / and /app.
   Palette matches the rest of the site (data/designanslogo*.jpg).
   ══════════════════════════════════════════════════════════════════════════ */

:root,[data-theme="night"]{
  /* daisyUI base, retoned from night to daylight (OKLCH triplets) */
  --b1:100% 0 0;        --b2:97.5% 0.008 240;  --b3:94% 0.014 240;
  --bc:32% 0.09 268;
  --n:94% 0.014 240;    --nc:32% 0.09 268;
  --p:70% 0.17 45;      --pc:100% 0 0;
  --s:64% 0.15 265;     --sc:100% 0 0;
  --a:82% 0.15 95;      --ac:32% 0.09 268;
  --rounded-btn:999px;  --rounded-box:22px;

  --navy:#123a86; --ink:#13327a; --ink-2:#3d5a91; --ink-3:#5b74ad; --ink-4:#8ba4cc;
  --line:#dceaff; --line-2:#cfe3ff;
  --orange:#ff8a2b; --orange-d:#d95f10;
  --azure:#2e7ff5;  --azure-d:#1a56c4;
  --pink:#ff5fa2;   --pink-d:#d63a7d;
  --grass:#7ac943;  --grass-d:#4f9c22;
  --sunny:#ffd23f;  --sunny-d:#e0a400;
  --grape:#9b72f5;  --grape-d:#6f45cc;
}

/* ── type: the blog pages force Courier site-wide, so answer it in kind ───── */
*,::before,::after,input,textarea,select,button{
  font-family:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif!important}
h1,h2,h3,h4,.nav-label,.chip,.neon-static,.nav-card,.navbar a{
  font-family:'Fredoka','Nunito',sans-serif!important}

/* ── the sky the rest of the site sits on ────────────────────────────────── */
html{scroll-behavior:smooth}
/* short pages (privacy, single articles) otherwise left the grass footer floating
   mid-screen with dead space under it — pin it to the bottom instead */
body{background:transparent!important;color:var(--ink-2);
  min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > footer{flex:none}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:linear-gradient(180deg,#9adcff 0%,#c3e9ff 26%,#eaf7ff 58%,#fff 100%)}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(70px 28px at 10% 14%,#fff,transparent 70%),
    radial-gradient(92px 34px at 76% 8%,#fff,transparent 70%),
    radial-gradient(60px 24px at 40% 52%,#fff,transparent 70%),
    radial-gradient(80px 30px at 92% 40%,#fff,transparent 70%),
    radial-gradient(66px 26px at 22% 78%,#fff,transparent 70%)}

/* ── NAVBAR → the HUD bar ────────────────────────────────────────────────── */
.navbar{
  background:#fff!important;backdrop-filter:none!important;
  border:4px solid var(--navy)!important;border-radius:999px!important;
  box-shadow:0 6px 0 var(--navy),0 14px 24px rgba(19,50,122,.18);
  max-width:1120px;margin:14px auto 0;padding:8px 10px 8px 14px;min-height:60px}
.navbar .btn-ghost{background:transparent!important;border:0!important}
.navbar .font-bold{color:var(--navy)!important;font-size:19px;font-weight:600!important}
.navbar a{text-transform:none!important;letter-spacing:0!important}

/* ── BUTTONS → press-down toys ───────────────────────────────────────────── */
.neon-static{
  background:var(--orange)!important;color:#fff!important;
  border:3px solid var(--orange-d)!important;border-radius:999px!important;
  box-shadow:0 5px 0 var(--orange-d)!important;
  padding:12px 22px!important;font-size:13px!important;font-weight:600!important;
  letter-spacing:.02em!important;text-transform:none!important;
  transition:transform .1s ease,box-shadow .1s ease,filter .15s ease!important}
.neon-static:hover{filter:brightness(1.07);background:var(--orange)!important;color:#fff!important;
  box-shadow:0 5px 0 var(--orange-d)!important}
.neon-static:active{transform:translateY(4px);box-shadow:0 1px 0 var(--orange-d)!important}

/* ── BRAND WORDMARK ──────────────────────────────────────────────────────── */
.gradient-text{
  background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;color:var(--navy)!important;font-weight:600!important}

/* ── SIDEBAR: article list ───────────────────────────────────────────────── */
.nav-label{color:var(--ink-3)!important;font-weight:900!important;letter-spacing:.14em!important}
.nav-card{
  background:#fff!important;color:var(--ink-2)!important;
  border:2.5px solid var(--line-2)!important;border-radius:16px!important;
  box-shadow:0 3px 0 var(--line-2);padding:11px 13px!important;
  font-size:12.5px!important;font-weight:500!important;letter-spacing:.01em!important;
  transition:transform .14s ease,background .14s ease,border-color .14s ease!important}
.nav-card:hover{background:#eef6ff!important;color:var(--navy)!important;
  border-color:#a9cdff!important;box-shadow:0 3px 0 #a9cdff!important;transform:translateY(-2px)}
.nav-card .dot{width:10px!important;height:10px!important;border:2px solid #fff;
  box-shadow:0 0 0 1.5px rgba(19,50,122,.15)}
/* the current article is marked with an inline background in the markup */
.nav-card[style]{background:var(--orange)!important;color:#fff!important;
  border-color:var(--orange-d)!important;box-shadow:0 3px 0 var(--orange-d)!important}

/* ── ARTICLE CARDS ───────────────────────────────────────────────────────── */
.post{
  background:#fff!important;border:3px solid var(--line-2)!important;border-left-width:9px!important;
  border-radius:22px!important;padding:24px 26px!important;
  box-shadow:0 5px 0 var(--line-2),0 14px 26px rgba(19,50,122,.10)!important;
  scroll-margin-top:96px}
.post h2{color:var(--navy)!important;font-size:1.5rem!important;font-weight:600!important}
/* a heading carrying a strategy accent keeps it — `.post h2` would otherwise
   outrank the bare `.t-*` classes on specificity and flatten them all to navy */
.post h2.t-rules{color:var(--grape-d)!important}
.post h2.t-const{color:var(--orange-d)!important}
.post h2.t-simple{color:var(--grass-d)!important}
.post h2.t-btc{color:#c25f00!important}
.post p{color:var(--ink-2)!important;font-weight:600;line-height:1.7!important;font-size:15px}
.post ul{color:var(--ink-2)!important}
.post li{color:var(--ink-2)!important;font-weight:600;line-height:1.65!important}
.post b,.post strong{color:var(--navy)!important;font-weight:800}

.a-rules  {border-left-color:var(--grape)!important}
.a-const  {border-left-color:var(--orange)!important}
.a-plain  {border-left-color:var(--azure)!important}
.a-emerald{border-left-color:var(--grass)!important}

/* ── CHIPS → pastel pills ────────────────────────────────────────────────── */
.chip{border-radius:999px!important;padding:4px 11px!important;font-size:10px!important;
  font-weight:800!important;border:2px solid transparent}
.c-rules {background:#f0e9ff!important;color:var(--grape-d)!important;border-color:#dcccff!important}
.c-const {background:#fff0e4!important;color:var(--orange-d)!important;border-color:#ffd6bb!important}
.c-simple{background:#e8f8dc!important;color:var(--grass-d)!important;border-color:#c6ecab!important}
.c-date  {background:#eef5ff!important;color:var(--ink-3)!important;border-color:#d8e8ff!important}

/* inline emphasis colours, darkened for a white ground */
.t-rules {color:var(--grape-d)!important}
.t-const {color:var(--orange-d)!important}
.t-simple{color:var(--grass-d)!important}
.t-btc   {color:#c25f00!important}

/* ── page furniture ──────────────────────────────────────────────────────── */
h1{color:var(--navy)!important}
.text-base-content\/30,.text-base-content\/40,.text-base-content\/50,.text-base-content\/60{
  color:var(--ink-3)!important}
a[style*="#ffc98a"]{color:var(--orange-d)!important}
main{position:relative;z-index:1}

/* ── FOOTER → the grass strip ────────────────────────────────────────────── */
footer{
  background:linear-gradient(180deg,#8fd94f,#63b52c)!important;
  border-top:0!important;color:#2c5c12!important;margin-top:56px;position:relative;z-index:1}
footer p{color:#2c5c12!important;font-weight:700}
footer a{color:var(--navy)!important;font-weight:900}

/* ── chunky scrollbars, same as the app ──────────────────────────────────── */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#eef5ff;border-radius:999px}
*::-webkit-scrollbar-thumb{background:#a9cdff;border-radius:999px;border:2px solid #eef5ff;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--azure);background-clip:content-box}

@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

@media(max-width:900px){
  .navbar{margin:10px 12px 0;border-radius:28px!important}
  .post{padding:20px 18px!important;border-left-width:8px!important}
}
