/* ==========================================================================
   site.css - 4conservative.com's own styles. Loads after app.css and sitekit.css on kit pages and the home page
   (cv_head_assets / sk_css_once), and on the site's own section pages (conservative.theme.php). A section's own
   rules live in assets/conservative/css/<section>.css and load only on its pages.

   1. Tokens (owner decision D13: Union blue and flag red, used sparingly)
   2. Section layout: wrap, header, section bar, breadcrumbs
   3. Components: cards, tiles, tables, notes, sources, related posts
   4. Home: the block below the feed
   5. Footer note, topic-page pointer
   6. Dark mode, keyed on html[data-fs-theme="dark"] (the engine's switch, app.css section 14)
   ========================================================================== */

/* ----------------------------------------------------------- 1. tokens -- */
:root{
  --cv-ink:#14213d; --cv-ink-2:#455068; --cv-ink-3:#6b7590;
  --cv-surface:#ffffff; --cv-surface-2:#f4f6fa; --cv-line:#dfe4ee; --cv-line-2:#c9d1df;
  --cv-blue:#1c3b7c; --cv-blue-soft:#e4eaf6; --cv-red:#a6192e; --cv-red-soft:#f8e4e7;
  --cv-ok:#1b6a45; --cv-ok-soft:#e0f1e7; --cv-warn:#8a5a00; --cv-warn-soft:#fbefd6;
  --cv-radius:8px;
}

/* -------------------------------------------------- 2. section layout -- */
.cv-wrap{ max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.cv-main{ padding-top:18px; padding-bottom:48px; color:var(--cv-ink); display:grid; gap:20px; }
.cv-head{ display:grid; gap:6px; }
.cv-eyebrow{ margin:0; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cv-red); }
.cv-title{ margin:0; font-size:clamp(26px,3.6vw,38px); line-height:1.15; font-weight:700; color:var(--cv-ink); text-wrap:balance; }
.cv-lede{ margin:0; max-width:75ch; font-size:17px; line-height:1.55; color:var(--cv-ink-2); }
.cv-subnav{ background:var(--cv-surface); border-bottom:1px solid var(--cv-line); }
.cv-subnav-in{ display:flex; gap:4px; overflow-x:auto; padding-top:6px; padding-bottom:6px; scrollbar-width:thin; }
.cv-subnav a{ flex:0 0 auto; padding:7px 12px; border-radius:999px; color:var(--cv-ink-2); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.cv-subnav a:hover{ background:var(--cv-surface-2); color:var(--cv-ink); }
.cv-subnav a.is-active{ background:var(--cv-blue); color:#fff; }
.cv-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px; font-size:13px; color:var(--cv-ink-3); }
.cv-crumbs li + li::before{ content:"\203A"; margin-right:8px; color:var(--cv-line-2); }
.cv-crumbs a{ color:var(--cv-ink-2); }

/* ------------------------------------------------------ 3. components -- */
.cv-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items:start; }
.cv-grid > *{ min-width:0; }
.cv-2col{ display:grid; gap:20px; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .cv-2col{ grid-template-columns:minmax(0,1fr); } }
.cv-card{ background:var(--cv-surface); border:1px solid var(--cv-line); border-radius:var(--cv-radius); padding:18px; display:grid; gap:12px; min-width:0; }
.cv-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.cv-card-title{ margin:0; font-size:19px; font-weight:700; color:var(--cv-ink); }
.cv-card-more{ font-size:14px; font-weight:600; color:var(--cv-blue); text-decoration:none; }
.cv-card-more:hover{ text-decoration:underline; }
.cv-note{ margin:0; font-size:13px; color:var(--cv-ink-3); line-height:1.5; }
.cv-empty{ margin:0; color:var(--cv-ink-3); font-size:14.5px; }
.cv-prose{ max-width:75ch; font-size:16px; line-height:1.65; color:var(--cv-ink); }
.cv-prose p{ margin:0 0 12px; }
.cv-prose h2{ font-size:21px; margin:22px 0 8px; }
.cv-prose h3{ font-size:17px; margin:16px 0 6px; }
.cv-prose ul, .cv-prose ol{ margin:0 0 12px; padding-left:22px; }
.cv-prose blockquote{ margin:0 0 12px; padding:10px 16px; border-left:4px solid var(--cv-blue); background:var(--cv-blue-soft); font-family:Georgia, "Times New Roman", serif; }

.cv-tiles{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.cv-tile{ background:var(--cv-surface); border:1px solid var(--cv-line); border-radius:var(--cv-radius); padding:14px 16px; display:grid; gap:4px; align-content:start; }
.cv-tile-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cv-ink-3); }
.cv-tile-value{ font-size:26px; line-height:1.1; font-weight:700; color:var(--cv-ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.cv-tile-sub{ font-size:13.5px; color:var(--cv-ink-2); }

.cv-tablebox{ overflow-x:auto; border:1px solid var(--cv-line); border-radius:var(--cv-radius); background:var(--cv-surface); }
.cv-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.cv-table th, .cv-table td{ text-align:left; vertical-align:top; padding:9px 12px; border-bottom:1px solid var(--cv-line); }
.cv-table thead th{ font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--cv-ink-3); background:var(--cv-surface-2); position:sticky; top:0; }
.cv-table tbody tr:last-child td{ border-bottom:0; }
.cv-table tbody tr:hover td{ background:var(--cv-surface-2); }
.cv-table .n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cv-table a{ color:var(--cv-blue); }

.cv-sources{ margin:0; font-size:13px; color:var(--cv-ink-3); line-height:1.5; }
.cv-sources a{ color:var(--cv-ink-2); }
.cv-pill{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--cv-surface-2); color:var(--cv-ink-2); white-space:nowrap; }
.cv-pill.is-red{ background:var(--cv-red-soft); color:var(--cv-red); }
.cv-pill.is-blue{ background:var(--cv-blue-soft); color:var(--cv-blue); }
.cv-pill.is-ok{ background:var(--cv-ok-soft); color:var(--cv-ok); }
.cv-pill.is-warn{ background:var(--cv-warn-soft); color:var(--cv-warn); }
.cv-btn{ display:inline-block; padding:9px 16px; border-radius:6px; border:1px solid var(--cv-blue); background:var(--cv-blue); color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; cursor:pointer; }
.cv-btn.is-ghost{ background:transparent; color:var(--cv-blue); }
.cv-field{ padding:9px 12px; border:1px solid var(--cv-line-2); border-radius:6px; font-size:15px; background:var(--cv-surface); color:var(--cv-ink); }
.cv-newslink{ margin:0; font-size:14.5px; }
.cv-newslink a{ color:var(--cv-blue); font-weight:600; }

.cv-related{ display:grid; gap:12px; }
.cv-related-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.cv-related-card{ display:grid; gap:6px; align-content:start; padding:14px 16px; background:var(--cv-surface); border:1px solid var(--cv-line); border-radius:var(--cv-radius); text-decoration:none; color:var(--cv-ink); }
.cv-related-card:hover{ border-color:var(--cv-blue); }
.cv-related-card b{ font-size:15.5px; line-height:1.35; }
.cv-related-card span{ font-size:13.5px; color:var(--cv-ink-2); line-height:1.45; }

/* ------------------------------------------------------------ 4. home -- */
.cv-below{ display:grid; gap:18px; grid-template-columns:minmax(0,2fr) minmax(0,1fr); margin:22px 0 8px; }
@media (max-width:900px){ .cv-below{ grid-template-columns:minmax(0,1fr); } }
.cv-below-blog{ display:grid; gap:12px; min-width:0; }
.cv-below-side{ display:grid; gap:12px; align-content:start; min-width:0; }
.cv-debate-card{ display:grid; gap:6px; padding:16px; border:1px solid var(--cv-line); border-left:4px solid var(--cv-red); border-radius:var(--cv-radius); background:var(--cv-surface); color:var(--cv-ink); text-decoration:none; }
.cv-debate-card b{ font-size:16px; line-height:1.35; }
.cv-debate-card span:last-child{ font-size:13.5px; color:var(--cv-ink-2); }
.cv-founders-line{ margin:0; padding:16px; border-radius:var(--cv-radius); background:var(--cv-blue-soft); }
.cv-founders-line blockquote{ margin:0 0 8px; font-family:Georgia, "Times New Roman", serif; font-size:16.5px; line-height:1.5; color:var(--cv-ink); }
.cv-founders-line figcaption{ font-size:13px; color:var(--cv-ink-2); }

/* ------------------------------------------------- 5. footer, pointer -- */
.cv-ft-note{ margin:0; font-size:13.5px; line-height:1.55; opacity:.85; }
.cv-ft-note a{ text-decoration:underline; }
.cv-intopic{ margin:6px 0 0; font-size:15px; }
.cv-intopic a{ font-weight:700; color:var(--cv-blue); }

/* -------------------------------------------------------- 6. dark mode -- */
html[data-fs-theme="dark"]{
  --cv-ink:var(--fs-heading, #dde5ef); --cv-ink-2:var(--fs-ink-2, #b4bfcd); --cv-ink-3:var(--fs-ink-3, #8fa2b8);
  --cv-surface:var(--fs-surface, #161d26); --cv-surface-2:var(--fs-surface-2, #1d2631); --cv-line:#2a3646; --cv-line-2:#3a4860;
  --cv-blue:#8fb0ec; --cv-blue-soft:#1b2944; --cv-red:#f08391; --cv-red-soft:#3a1c23;
  --cv-ok:#72d3a1; --cv-ok-soft:#15301f; --cv-warn:#f0c46b; --cv-warn-soft:#36290f;
}
html[data-fs-theme="dark"] .cv-subnav a.is-active, html[data-fs-theme="dark"] .cv-btn{ color:#0d1424; }
.cv-list-plain{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14.5px; }
.cv-list-plain a{ color:var(--cv-blue); }
.cv-pager{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 18px; }
.cv-pager a, .cv-pager span{ padding:6px 11px; border:1px solid var(--cv-line); border-radius:6px; font-size:14px; text-decoration:none; color:var(--cv-blue); background:var(--cv-surface); }
.cv-pager span{ background:var(--cv-blue); border-color:var(--cv-blue); color:#fff; }
