/* ==========================================================================
   Global Site CSS — base + components (template-agnostic)
   The header injects the active palette into :root via inline <style>.
   ========================================================================== */

/* ---------- CSS Variables (base + fallbacks) ---------- */
:root{
  /* Brand (defaults only; header overrides via #theme-vars) */
  --brand-1:#3e92cc;
  --brand-2:#2a628f;
  --brand-3:#13293d;
  --brand-4:#16324f;
  --brand-5:#18435a;

  /* Surfaces derived from brand-3 for a cohesive dark theme */
  --bg:         color-mix(in srgb, var(--brand-3) 88%, black) !important;
  --panel:      color-mix(in srgb, var(--brand-3) 82%, black) !important;
  --panel-line: color-mix(in srgb, var(--brand-3) 60%, white) !important;

  /* Text */
  --text:#eef4fb;
  --text-strong:#ffffff;
  --muted:#b8c6d3;

  /* Links from brand-1 */
  --link:       color-mix(in srgb, var(--brand-1) 85%, white);
  --link-hover: color-mix(in srgb, var(--brand-1) 70%, white);

  /* Layout */
  --container:1080px;
  --radius:14px;
  --space:14px;

  /* Misc */
  --focus: var(--brand-1);

  /* Header tunables (used by theme header/footer) */
  --brand-size:60px;
  --nav-input-bg:         color-mix(in srgb, var(--brand-3) 70%, black);
  --nav-input-text:       #e8eef5;
  --nav-input-placeholder:#8ea2b1;
  --nav-input-border:     rgba(255,255,255,.18);
  --nav-input-border-focus:rgba(255,255,255,.35);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

html, body{
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Minimal default background; template can override */
body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}

main{ flex:1 0 auto; }
.container{ max-width:var(--container); }

/* Links */
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }

/* Headings */
h1,h2,h3,h4,h5,h6{
  color:var(--text-strong);
  margin-top:.75rem;
  margin-bottom:.5rem;
}

/* Text helpers */
.text-muted, .small.text-muted { color:var(--muted) !important; }
.lead{ color:var(--text); opacity:.95; }

/* Focus accessibility */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* Selection */
::selection{
  background:color-mix(in srgb, var(--brand-1) 35%, transparent);
  color:#07131d;
}

/* ---------- Cards / Panels ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  color:var(--text);
}
.card .card-header{ border-bottom:1px solid var(--panel-line); }
.card .card-footer{ border-top:1px solid var(--panel-line); }

.hero-figure{
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius);
}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--brand-1);
  border-color:var(--brand-1);
  color:#07131d;
  font-weight:600;
}
.btn-primary:hover{ filter:brightness(1.08); }

.btn-outline-light{
  color:#ffffff;
  border-color:rgba(255,255,255,.35);
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.1);
}

/* DARK TOGGLE FIX (Stripe mode etc.) */
.btn-check + .btn.btn-outline-light{
  background:transparent;
  color:#ffffff;
  border-color:rgba(255,255,255,.35);
}
.btn-check:checked + .btn.btn-outline-light,
.btn.btn-outline-light.active{
  background:var(--brand-1) !important;
  border-color:var(--brand-1) !important;
  color:#07131d !important;
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-1) 30%, transparent);
}

/* Share buttons (compact) */
.btn-share{
  --size:34px;
  width:var(--size);
  height:var(--size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--panel-line);
  background:transparent;
  color:#e9f3fb;
}
.btn-share:hover{
  background:rgba(255,255,255,.08);
  text-decoration:none;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
.form-check-input{
  background:color-mix(in srgb, var(--brand-3) 82%, black);
  border:1px solid color-mix(in srgb, var(--brand-3) 55%, white);
  color:var(--text);
}
.form-control:focus,
.form-select:focus{
  border-color:var(--brand-1);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-1) 30%, transparent);
}
.form-check-input:checked{
  background-color:var(--brand-1);
  border-color:var(--brand-1);
}
input::placeholder,
textarea::placeholder{
  color:#9fb3c8;
}

/* ---------- Badges ---------- */
.badge-paid{
  background:linear-gradient(90deg,#f9d423,#ff4e50);
  color:#1a1300;
}
.badge-vip{
  background:var(--link-hover);
  color:#082032;
}

/* ---------- Comments ---------- */
.cmts-root > .cmt { margin-bottom:.6rem; }
.cmts-children{
  margin-top:.6rem;
  border-left:2px solid rgba(255,255,255,.12);
  padding-left:.75rem;
}
.cmt .badge{ vertical-align:middle; }
.cmt .cmt-meta{
  color:var(--muted);
  font-size:.875rem;
}

/* ---------- Widgets / Sidebar base ---------- */
.widget{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  padding:12px;
}
.widget-title{
  font-weight:700;
  margin-bottom:.5rem;
}
.widget .list-unstyled > li + li{ margin-top:.35rem; }
.widget .count{ color:var(--muted); }

/* ---------- Pagination ---------- */
.pagination .page-link{
  background:color-mix(in srgb, var(--brand-3) 82%, black);
  border:1px solid color-mix(in srgb, var(--brand-3) 55%, white);
  color:#e9f3fb;
}
.pagination .page-item.active .page-link{
  background:var(--brand-2);
  border-color:var(--brand-2);
}
.pagination .page-link:hover{
  background:color-mix(in srgb, var(--brand-3) 70%, black);
}

/* ---------- Alerts ---------- */
.alert{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
}
.alert-warning{
  background:rgba(255,193,7,.12);
  color:#ffe08a;
  border-color:rgba(255,193,7,.25);
}
.alert-info{
  background:rgba(13,110,253,.12);
  color:#a9c9ff;
  border-color:rgba(13,110,253,.25);
}
.alert-danger{
  background:rgba(220,53,69,.14);
  color:#ffc0c8;
  border-color:rgba(220,53,69,.28);
}

/* ---------- Tables ---------- */
.table{
  color:var(--text);
  --bs-table-bg: var(--panel);
  --bs-table-striped-bg: color-mix(in srgb, var(--brand-3) 82%, black);
  --bs-table-striped-color: var(--text);
  --bs-table-border-color: var(--panel-line);
}

/* ---------- Images / Gallery ---------- */
.figure, figure{ margin:0; }
figure.card{ padding:10px; }
figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}
figcaption{
  color:var(--muted);
  font-size:.85rem;
  margin-top:.35rem;
}

/* ---------- Ad Slots ---------- */
.ad-slot{
  width:100%;
  min-height:90px;
  background:color-mix(in srgb, var(--brand-3) 82%, black);
  border:1px dashed color-mix(in srgb, var(--brand-3) 55%, white);
  border-radius:10px;
  color:var(--muted);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Utilities ---------- */
.rounded-lg{ border-radius:var(--radius) !important; }
.shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.25); }
.border-panel{ border:1px solid var(--panel-line); }
.text-strong{ color:var(--text-strong) !important; }
.text-muted-2{ color:#a6b8c8 !important; }
.w-100{ width:100% !important; }

/* Spacing helpers (minimal custom set) */
.mt-1{ margin-top:.25rem !important; }
.mt-2{ margin-top:.5rem !important; }
.mt-3{ margin-top:1rem !important; }
.mt-4{ margin-top:1.5rem !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.mb-4{ margin-bottom:1.5rem !important; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1040;
  background:color-mix(in srgb, var(--brand-3) 82%, black);
  color:var(--text);
  border-top:1px solid rgba(255,255,255,.1);
  padding:12px 0;
}
.cookie-banner .btn{ margin-left:.5rem; }
.cookie-banner.cookie-hidden { display:none !important; }

/* ---------- Code blocks inside posts ---------- */
.post-body pre{
  background:color-mix(in srgb, var(--brand-3) 82%, black);
  border:1px solid color-mix(in srgb, var(--brand-3) 55%, white);
  color:#e8f1f8;
  padding:12px;
  border-radius:10px;
  overflow:auto;
}
.post-body code{ color:#e1f0ff; }

/* ---------- Share row ---------- */
.share-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.share-row .label{
  color:var(--muted);
  font-size:.9rem;
}

/* ---------- Related posts card tweaks ---------- */
.related .card{ transition:transform .15s ease; }
.related .card:hover{ transform:translateY(-2px); }

/* ---------- Brand image (header/footer use) ---------- */
.brand-logo{
  width:var(--brand-size);
  height:var(--brand-size);
  object-fit:cover;
  border-radius:8px;
  display:inline-block;
}

/* ---------- High Contrast Preference ---------- */
@media (prefers-contrast: more){
  :root{
    --muted:#d4dee7;
    --panel-line: color-mix(in srgb, var(--brand-3) 50%, white);
    --link: color-mix(in srgb, var(--brand-1) 65%, white);
  }
  .border-panel{ border-color:var(--panel-line); }
  .pagination .page-link{ border-color:var(--brand-2); }
}

/* ---------- Print basics ---------- */
@media print{
  .navbar,
  .footer,
  .btn,
  .share-row,
  .ad-slot{ display:none !important; }

  body{
    background:#fff;
    color:#000;
  }
  .card{
    border-color:#ccc !important;
    background:#fff !important;
    color:#000 !important;
  }
}