/* ==========================================================================
   Site CSS (Blog Starter) — THEME-AWARE
   The header injects the active palette into :root:
   --brand-1..--brand-5. This sheet derives all surfaces from those.
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root{
  /* Brand (defaults only; header overrides) */
  --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 */
  /* Fallbacks for browsers w/o color-mix: static sane values. */
  --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 */
  --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;
}

/* Full-page gradient background using brand colors */
body{
  min-height:100dvh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 800px at 20% 10%, color-mix(in srgb, var(--brand-1) 35%, transparent) 0, transparent 60%),
    radial-gradient(900px 700px at 80% 20%,  color-mix(in srgb, var(--brand-2) 30%, transparent) 0, transparent 60%),
    radial-gradient(1000px 700px at 30% 90%, color-mix(in srgb, var(--brand-4) 30%, transparent) 0, transparent 60%),
    linear-gradient(180deg, var(--brand-4) 0%, var(--brand-5) 55%, var(--brand-3) 100%),
    var(--bg);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  background-repeat:no-repeat;
  background-size:cover;
}
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; }

/* ---------- Navbar ---------- */
.navbar{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--brand-3) 78%, black) 0%,
    color-mix(in srgb, var(--brand-3) 68%, black) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar .navbar-brand,
.navbar .nav-link{ color:#f2f7fc !important; }
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover{
  color:#ffffff !important; text-decoration:none;
}
.navbar-toggler{ border-color:var(--brand-2); }

/* Readable search on dark navbar */
.navbar form[role="search"] .form-control{
  background:var(--nav-input-bg);
  color:var(--nav-input-text);
  border:1px solid var(--nav-input-border);
}
.navbar form[role="search"] .form-control::placeholder{ color:var(--nav-input-placeholder); }
.navbar form[role="search"] .form-control:focus{
  background:var(--nav-input-bg);
  color:var(--nav-input-text);
  border-color:var(--nav-input-border-focus);
  box-shadow:0 0 0 .2rem rgba(255,255,255,.07);
}

/* Roomier touch targets */
.navbar-nav .nav-link{ padding-top:.6rem; padding-bottom:.6rem; }

/* Header buttons */
.navbar .btn{ padding:.55rem .9rem; }

/* ---------- Footer ---------- */
.footer{
  margin-top:auto;
  background:color-mix(in srgb, var(--brand-3) 85%, black);
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  padding:16px 0;
  font-size:.95rem;
}
.footer a{ color:#e9f3fb; }
.footer a:hover{ color:#ffffff; text-decoration:underline; }

/* ---------- 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 ---------- */
.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); }

/* Search widget */
.sidebar-search input{ width:100%; }

/* ---------- 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 */
.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) ---------- */
.brand-logo{
  width:var(--brand-size);
  height:var(--brand-size);
  object-fit:cover;
  border-radius:8px;
  display:inline-block;
}

/* ---------- Media Queries ---------- */
@media (max-width: 991.98px){
  .navbar .nav-link{ padding:.5rem .75rem; }
  .footer nav{ gap:1rem; }
  .navbar-collapse .d-flex.gap-2{
    flex-direction:column; gap:.5rem !important; margin-top:.5rem;
  }
  .navbar-collapse .d-flex.gap-2 .btn{ width:100%; }
  .navbar .me-3{ margin-right:0 !important; margin-top:.25rem; }
}

@media (max-width: 575.98px){
  .container{ padding-left:16px; padding-right:16px; }
  .hero-figure{ border-radius:10px; }
  :root{ --brand-size:36px; }
}

/* ---------- 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; }
}
  .sidebar .search-input{ background:#18283a; color:#f2f7fc; border:1px solid #2b4a64; }
  .sidebar .search-input::placeholder{ color:#e8f1f8; opacity:1; }
  .sidebar .search-input:focus{
    background:#18283a; color:#fff; border-color:#3e92cc; box-shadow:0 0 0 .2rem rgba(62,146,204,.15);
  }
  .sidebar .recent-grid{ display:grid; grid-template-columns:1fr; gap:.6rem; }
  .sidebar .recent-item{ display:flex; gap:.6rem; align-items:center; text-decoration:none; }
  .sidebar .thumb{
    width:70px; height:70px; border-radius:10px; flex:0 0 70px;
    object-fit:cover; background:#0f2233; border:1px solid var(--panel-line);
  }
  .sidebar .thumb.skel{ background:linear-gradient(120deg,#0f2233 0,#143048 50%,#0f2233 100%); background-size:200% 100%; animation:sh 1.4s ease-in-out infinite; }
  @keyframes sh{0%{background-position:0% 0}100%{background-position:200% 0}}
  .sidebar .recent-title{ color:var(--text-strong); line-height:1.15; }
  .sidebar .recent-meta{ color:var(--muted); font-size:.85rem; }
  .sidebar .tag-cloud a{
    display:inline-block; margin:.22rem .35rem .22rem 0; padding:.25rem .45rem;
    border-radius:999px; border:1px solid var(--panel-line);
    color:var(--text); text-decoration:none; font-size:.9rem;
  }
  .sidebar .tag-cloud a:hover{ background:rgba(255,255,255,.06); }
/* ===== Site Ticker (safe, namespaced) ===== */
#siteTicker{
  background:#0b1c2a;
  border-bottom:1px solid #16324f;
  color:#e6eef6;
  font-size:14px;
  z-index: 10;
}
#siteTicker .ticker-track{
  position:relative;
  overflow:hidden;
  flex:1 1 auto;
}
#siteTicker .ticker-content{
  display:inline-block;
  white-space:nowrap;
  padding:6px 0;
  animation:ticker-scroll 30s linear infinite;
  will-change: transform;
}
#siteTicker .ticker-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 22px;
}
#siteTicker .ticker-item a{
  color:#e6eef6;
  text-decoration:none;
}
#siteTicker .ticker-item a:hover{ text-decoration:underline; }
#siteTicker .ticker-icon{
  height:16px; width:auto; object-fit:contain; opacity:.9;
}
#siteTicker .ticker-close{
  line-height:1;
  padding:2px 8px;
  border-color:rgba(255,255,255,.25);
}

/* Continuous scroll (content is duplicated once in JS) */
@keyframes ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* Pause on hover (class toggled on wrapper) */
#siteTicker.paused .ticker-content{ animation-play-state:paused; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #siteTicker .ticker-content{ animation:none; }
}