/* ============================================================
   Shared base + public site styles.
   Loaded by both public and admin layouts.
   Admin-specific styles live in admin.css.
   ============================================================ */
:root {
  /* Backgrounds */
  --bg:       #F7FDF9;   /* Mint White  — page background       */
  --surface:  #EBF8EF;   /* Soft Green  — elevated surface      */
  --border:   #B2DFDB;   /* Teal Tint   — dividers, outlines    */

  /* Brand */
  --primary:   #FF6B6B;  /* Coral       — primary action/link   */
  --secondary: #4DB6AC;  /* Teal        — secondary accent      */
  --accent:    #FFD54F;  /* Golden      — highlight             */

  /* Text */
  --text:   #1B3A2D;   /* Forest      — body text             */
  --muted:  #5D8A78;   /* Sage        — dim / secondary text  */

  /* State */
  --danger: #E53935;   /* destructive / error     */
}

/* ── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; background: var(--bg); }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; color: var(--text); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.875em; background: #f0f0f0; padding: 0.1em 0.3em; border-radius: 3px; }
img { max-width: 100%; height: auto; }

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.45rem 1rem; border-radius: 6px; border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: background 0.15s, opacity 0.15s;
}
.btn:hover { opacity: 0.88; text-decoration: none; }
.btn-primary   { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-secondary { background: #f0f0f0; color: #333; border-color: #ddd; }
.btn-danger    { background: var(--danger);  color: #fff; border-color: var(--danger);  }
.btn-sm        { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn-block     { width: 100%; }
.btn-logout    { background: none; border: none; color: #999; cursor: pointer; font-size: 0.875rem; padding: 0; }
.btn-logout:hover { color: #fff; }

/* ── Public site ──────────────────────────────────── */
.public-body { background: var(--bg); color: var(--text); }
.public-body code { background: var(--surface); color: var(--text); }
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 1rem 2rem; }
.site-nav    { max-width: none; margin: 0 16px; display: flex; align-items: center; gap: 2rem; }
@media (min-width: 768px)  { .site-nav { margin: 0 32px;  } }
@media (min-width: 1024px) { .site-nav { margin: 0 48px;  } }
@media (min-width: 1280px) { .site-nav { margin: 0 128px;  } }
@media (min-width: 1536px) { .site-nav { margin: 0 256px; } }
.nav-logo    { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.nav-links   { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin-left: auto; }
.nav-link    { font-size: 0.9rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s; }
.nav-link:hover { color: var(--text); text-decoration: none; }
.site-main   { max-width: none; margin: 0 16px; padding: 3rem 0; }
@media (min-width: 768px)  { .site-main { margin: 0 32px;  } }
@media (min-width: 1024px) { .site-main { margin: 0 48px;  } }
@media (min-width: 1280px) { .site-main { margin: 0 128px;  } }
@media (min-width: 1536px) { .site-main { margin: 0 256px; } }
.site-footer { text-align: center; padding: 2rem; color: var(--muted); font-size: 0.875rem; border-top: 1px solid var(--border); margin-top: 4rem; }

/* ── Public: generic hero ─────────────────────────── */
.hero          { padding: 4rem 0 2rem; }
.hero-title    { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.hero-subtitle { font-size: 1.25rem; color: var(--muted); margin-bottom: 1.5rem; }
.hero-image    { border-radius: 12px; margin: 1.5rem 0; }
.about, .contact { margin: 2.5rem 0; }
.contact a { font-size: 1rem; }

/* ── Public: articles list ────────────────────────── */
.articles   { margin-top: 3rem; }
.articles h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.article-list { list-style: none; }
.article-list li   { display: flex; justify-content: space-between; align-items: baseline; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.article-list time { color: var(--muted); font-size: 0.875rem; flex-shrink: 0; margin-left: 1rem; }

/* ── Public: prose ────────────────────────────────── */
.prose          { max-width: 720px; }
.article-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.article-header h1 { font-size: 2rem; font-weight: 800; }
.article-date   { color: var(--muted); font-size: 0.875rem; margin-top: 0.5rem; display: block; }
.article-body   { line-height: 1.8; }
.article-body h1,.article-body h2,.article-body h3 { margin: 1.5em 0 0.5em; font-weight: 700; }
.article-body p  { margin-bottom: 1em; }
.article-body ul,.article-body ol { margin: 1em 0 1em 1.5em; }
.article-body li { margin-bottom: 0.25em; }
.article-body blockquote { border-left: 4px solid var(--border); padding-left: 1em; color: var(--muted); margin: 1.5em 0; }
.article-body img { border-radius: 8px; margin: 1em 0; }

/* Code blocks in article / page content (CKEditor output) */
.article-body pre {
  position: relative;
  background: #13151f;
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--secondary);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(77,182,172,.3) transparent;
}
.article-body pre::-webkit-scrollbar { height: 4px; }
.article-body pre::-webkit-scrollbar-thumb { background: rgba(77,182,172,.35); border-radius: 99px; }
.article-body pre code {
  display: block;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: .82rem;
  line-height: 1.7;
  color: #cdd6f4;
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}
.article-body pre[data-language]::before {
  content: attr(data-language);
  display: block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--secondary);
  opacity: .75;
  margin-bottom: .65rem;
}
/* Inline code in article */
.article-body :not(pre) > code {
  background: rgba(77,182,172,.1);
  color: var(--secondary);
  border: 1px solid rgba(77,182,172,.25);
  padding: .12em .4em;
  border-radius: 4px;
  font-size: .84em;
}

/* ── Page splashes — fixed ambient layer on public pages ── */
.page-splashes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ps { position: absolute; }

/* 1 — Large primary mass, top-right */
.ps-1 {
  width: clamp(260px, 30vw, 440px);
  height: clamp(220px, 26vw, 380px);
  background: radial-gradient(ellipse at 45% 45%, var(--primary) 0%, rgba(59,130,246,0.4) 50%, transparent 80%);
  border-radius: 58% 42% 52% 48% / 62% 38% 62% 38%;
  top: -8%; right: -6%;
  opacity: 0.14; filter: blur(18px);
  animation: ps-drift-a 26s ease-in-out infinite;
}

/* 2 — Secondary teardrop, bottom-left */
.ps-2 {
  width: clamp(110px, 12vw, 190px);
  height: clamp(160px, 18vw, 280px);
  background: radial-gradient(ellipse 60% 80% at 42% 35%, rgba(255,255,255,0.4) 0%, transparent 45%),
              radial-gradient(ellipse at 50% 60%, var(--secondary) 0%, rgba(139,92,246,0.4) 55%, transparent 85%);
  border-radius: 50% 50% 55% 45% / 32% 32% 68% 68%;
  bottom: 6%; left: 3%;
  opacity: 0.16; filter: blur(6px); transform: rotate(-14deg);
  animation: ps-drift-b 19s ease-in-out infinite;
}

/* 3 — Medium primary amoeba, upper-left */
.ps-3 {
  width: clamp(130px, 15vw, 220px);
  height: clamp(110px, 12vw, 180px);
  background: radial-gradient(ellipse at 40% 40%, rgba(255,255,255,0.5) 0%, transparent 50%),
              radial-gradient(ellipse at 55% 55%, var(--primary) 0%, transparent 75%);
  border-radius: 44% 56% 38% 62% / 60% 42% 58% 40%;
  top: 14%; left: 1%;
  opacity: 0.13; filter: blur(10px);
  animation: ps-drift-c 22s ease-in-out infinite;
}

/* 4 — Dark smear, lower-right */
.ps-4 {
  width: clamp(180px, 22vw, 320px);
  height: clamp(40px, 5vw, 70px);
  background: radial-gradient(ellipse 60% 100% at 40% 50%, rgba(11,16,32,0.5) 0%, transparent 80%);
  border-radius: 72% 28% 68% 32% / 50% 50% 50% 50%;
  bottom: 18%; right: 4%;
  opacity: 0.07; filter: blur(8px); transform: rotate(-4deg);
}

/* 5 — Accent sweep, bottom-right */
.ps-5 {
  width: clamp(200px, 26vw, 380px);
  height: clamp(120px, 14vw, 200px);
  background: radial-gradient(ellipse at 50% 50%, var(--surface) 0%, rgba(103,232,249,0.4) 55%, transparent 85%);
  border-radius: 65% 35% 48% 52% / 55% 45% 55% 45%;
  bottom: 0; right: 10%;
  opacity: 0.18; filter: blur(22px);
  animation: ps-drift-a 30s ease-in-out infinite reverse;
}

/* 6 — Small primary circle, mid-right */
.ps-6 {
  width: clamp(50px, 6vw, 88px);
  height: clamp(55px, 6.5vw, 94px);
  background: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,0.6) 0%, transparent 50%),
              radial-gradient(ellipse at 55% 55%, var(--primary) 0%, transparent 82%);
  border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%;
  top: 38%; right: 7%;
  opacity: 0.2; filter: blur(3px);
  animation: ps-drift-c 14s ease-in-out infinite reverse;
}

/* 7 — Slim secondary slash, upper center */
.ps-7 {
  width: clamp(140px, 18vw, 260px);
  height: clamp(28px, 3.5vw, 50px);
  background: radial-gradient(ellipse at 35% 50%, rgba(255,255,255,0.4) 0%, transparent 50%),
              radial-gradient(ellipse at 55% 55%, var(--secondary) 0%, transparent 80%);
  border-radius: 80% 20% 78% 22% / 50% 50% 50% 50%;
  top: 12%; left: 28%;
  opacity: 0.13; filter: blur(4px); transform: rotate(-18deg);
}

/* 8 — Accent amorphous, left-center */
.ps-8 {
  width: clamp(100px, 12vw, 180px);
  height: clamp(90px, 11vw, 160px);
  background: radial-gradient(ellipse at 50% 45%, var(--surface) 0%, rgba(103,232,249,0.4) 55%, transparent 85%);
  border-radius: 38% 62% 55% 45% / 50% 40% 60% 50%;
  top: 45%; left: 5%;
  opacity: 0.15; filter: blur(12px);
  animation: ps-drift-b 24s ease-in-out infinite reverse;
}

/* 9 — Small secondary fragment, lower-center */
.ps-9 {
  width: clamp(60px, 7vw, 105px);
  height: clamp(35px, 4vw, 58px);
  background: radial-gradient(ellipse at 45% 45%, var(--secondary) 0%, transparent 82%);
  border-radius: 65% 35% 62% 38% / 50% 58% 42% 50%;
  bottom: 12%; left: 38%;
  opacity: 0.15; filter: blur(2px); transform: rotate(20deg);
}

/* 10 — Large soft primary, top-left bleed */
.ps-10 {
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  background: radial-gradient(ellipse at 60% 60%, var(--primary) 0%, rgba(59,130,246,0.3) 50%, transparent 80%);
  border-radius: 50%;
  top: -10%; left: -8%;
  opacity: 0.1; filter: blur(30px);
  animation: ps-drift-c 28s ease-in-out infinite;
}

@keyframes ps-drift-a {
  0%, 100% { transform: translate(0, 0);        }
  35%       { transform: translate(-18px, 14px); }
  70%       { transform: translate(12px, -10px); }
}
@keyframes ps-drift-b {
  0%, 100% { transform: rotate(-14deg) translate(0, 0);        }
  50%       { transform: rotate(-10deg) translate(10px, -16px); }
}
@keyframes ps-drift-c {
  0%, 100% { transform: translate(0, 0);        }
  50%       { transform: translate(-10px, 12px); }
}

/* Homepage has its own per-section splash layers */
.hp-page .page-splashes { display: none; }