/* wessforum.theme.css — WESS Forum theme.
 * Overrides the --hp-* hyper-parameters (water/teal palette) so the derived
 * --ui-* tokens recolour the whole surface, plus a few wf- layout classes
 * for the Home map, metric strip and the newsletter issue grid. No hardcoded
 * hex except brand accents declared here as variables. */

:root {
    /* Brand hyper-parameters — primary is a deep water teal. */
    --hp-primary-h: 196;
    --hp-primary-s: 80%;
    --hp-primary-l: 36%;

    /* Typography — editorial serif headings + clean sans body. Both loaded in
       the entry HTML from Google Fonts; overriding the --hp-font-* anchors
       re-resolves every derived --ui-font-* token. */
    --hp-font-heading: "Fraunces", "Source Serif 4", Georgia, serif;
    --hp-font-body:    "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hp-weight-heading: 600;
    --hp-weight-body:    400;

    /* Softer, layered elevation. */
    --hp-shadow-intensity: 0.10;

    --wf-accent:       hsl(196 80% 36%);
    --wf-accent-soft:  hsl(196 55% 96%);
    --wf-ink:          var(--ui-gray-900);
    --wf-page-bg:      hsl(200 26% 96%);
}

/* ── Look & feel polish ───────────────────────────────────────────────── */
/* Soft page tint so the white feed / rail cards lift off the surface. */
.ui-pageframe > :not(.ui-pageframe-header):not(.ui-pageframe-footer) { background: var(--wf-page-bg); }

/* Editorial serif on the large titles; small labels stay in the sans body. */
.wf-pagehead h2 { font-family: var(--ui-font-heading); font-weight: 600; letter-spacing: -0.015em; font-size: var(--ui-text-2xl, 1.65rem); }
.wf-feed-head   { font-family: var(--ui-font-heading); font-weight: 600; letter-spacing: -0.01em; font-size: var(--ui-text-lg); }

/* Lift the cards with a soft shadow + rounder corners. */
.wf-feed       { box-shadow: var(--ui-shadow-sm); border-radius: var(--ui-radius-xl, 14px); }
.wf-rail-card  { box-shadow: var(--ui-shadow-sm); }
.wf-row-title  { font-size: var(--ui-text-base); letter-spacing: -0.003em; }
.wf-av         { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* Nav brand in the editorial serif, to match the page headings. */
.ui-pageframe-title { font-family: var(--ui-font-heading); font-weight: 600; letter-spacing: -0.01em; font-size: var(--ui-text-xl); }

/* ── Home ─────────────────────────────────────────────────────────────── */
.wf-home-map {
    width: 100%;
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ui-gray-200);
}

.wf-metric-strip { align-items: center; }

/* ── Newsletter issue grid ────────────────────────────────────────────── */
.wf-issue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ui-space-3);
}

.wf-issue-card { min-height: 200px; }

.wf-issue-published { border-top: 3px solid var(--wf-accent); }

.wf-issue-num {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--wf-accent);
    color: #fff;
    border-radius: var(--ui-radius-md);
    font-weight: 700;
    flex: 0 0 auto;
}
.wf-issue-num-cta { background: var(--ui-gray-400); }

/* ── About hero accent ────────────────────────────────────────────────── */
.wf-about .ui-card-primary { border-left: 4px solid var(--wf-accent); }

/* ── Forum layout: centred shell + vertical feed + context rail ───────── */
.wf-page { max-width: 1120px; margin: 0 auto; padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-6); }

.wf-pagehead {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ui-space-2);
    padding: 0 var(--ui-space-1) var(--ui-space-2);
    border-bottom: 2px solid var(--wf-accent);
    margin-bottom: var(--ui-space-3);
}
.wf-pagehead h2 { margin: 0; font-size: var(--ui-text-xl); color: var(--wf-ink); }
.wf-pagehead .wf-sub { color: var(--ui-gray-500); font-size: var(--ui-text-sm); }

.wf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ui-space-4); align-items: start; }
@media (max-width: 880px) { .wf-grid { grid-template-columns: 1fr; } }
.wf-main { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-3); }
.wf-rail { display: flex; flex-direction: column; gap: var(--ui-space-3); position: sticky; top: var(--ui-space-3); }

/* Feed — the dominant vertical element */
.wf-feed { background: #fff; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg); overflow: hidden; }
.wf-feed-head {
    display: flex; align-items: center; gap: 8px;
    padding: var(--ui-space-3);
    font-weight: 700; color: var(--wf-ink);
    border-bottom: 1px solid var(--ui-gray-200);
    background: var(--ui-gray-50);
}
.wf-feed-head .fa { color: var(--wf-accent); }
.wf-feed-tools { padding: var(--ui-space-2) var(--ui-space-3); border-bottom: 1px solid var(--ui-gray-100); }

.wf-row { display: flex; gap: var(--ui-space-3); padding: var(--ui-space-3); border-bottom: 1px solid var(--ui-gray-100); cursor: pointer; transition: background .12s ease; }
.wf-row:last-child { border-bottom: none; }
.wf-row:hover { background: var(--wf-accent-soft); }
.wf-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--wf-accent); }
.wf-row-body { min-width: 0; flex: 1 1 auto; }
.wf-row-title { font-weight: 600; color: var(--wf-ink); line-height: 1.3; }
.wf-row-meta { font-size: var(--ui-text-xs); color: var(--ui-gray-500); margin-top: 2px; }
.wf-row-excerpt { font-size: var(--ui-text-sm); color: var(--ui-gray-600); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-pin { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--wf-accent); border: 1px solid var(--wf-accent); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }

/* Rail widgets */
.wf-rail-card { background: #fff; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg); padding: var(--ui-space-3); }
.wf-rail-card.wf-rail-accent { border-top: 3px solid var(--wf-accent); }
.wf-rail-title { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ui-gray-500); font-weight: 700; margin-bottom: var(--ui-space-2); display: flex; align-items: center; gap: 6px; }
.wf-rail-title .fa { color: var(--wf-accent); }
.wf-stat { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--ui-gray-100); }
.wf-stat:last-child { border-bottom: none; }
.wf-stat-num { font-weight: 700; font-size: var(--ui-text-lg); color: var(--wf-accent); }
.wf-stat-label { font-size: var(--ui-text-sm); color: var(--ui-gray-600); }
.wf-rail-item { font-size: var(--ui-text-sm); padding: 7px 0; border-bottom: 1px solid var(--ui-gray-100); color: var(--ui-gray-700); }
.wf-rail-item:last-child { border-bottom: none; }
.wf-rail-item .wf-date { color: var(--wf-accent); font-weight: 600; }

/* ── Article reader (full-stage) ──────────────────────────────────────── */
.wf-article-back {
    margin-bottom: var(--ui-space-3);
    background: #fff;
    border: 1px solid var(--ui-gray-300);
    color: var(--ui-gray-700);
}
.wf-article-back:hover { background: var(--wf-accent-soft); color: var(--wf-ink); }
.wf-article { max-width: 760px; margin: 0 auto; }
.wf-article-title {
    font-family: var(--ui-font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: var(--ui-text-3xl, 2rem);
    line-height: 1.15;
    color: var(--wf-ink);
    margin: 0 0 var(--ui-space-2);
}
.wf-article-byline {
    font-family: var(--ui-font-heading);
    font-size: var(--ui-text-lg);
    font-weight: 600;
    color: var(--wf-accent);
    margin: 0 0 var(--ui-space-2);
}
.wf-article-meta {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
    text-transform: capitalize;
    border-bottom: 1px solid var(--ui-gray-200);
    padding-bottom: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
}
.wf-article-body { font-size: var(--ui-text-base); line-height: 1.7; color: var(--ui-gray-800); }
.wf-article-body h2 {
    font-family: var(--ui-font-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: var(--ui-text-xl);
    color: var(--wf-ink);
    margin: var(--ui-space-5) 0 var(--ui-space-2);
}
.wf-article-body h3 {
    font-family: var(--ui-font-heading);
    font-weight: 600;
    font-size: var(--ui-text-lg);
    color: var(--wf-ink);
    margin: var(--ui-space-4) 0 var(--ui-space-2);
}
.wf-article-body p { margin: 0 0 var(--ui-space-3); }
.wf-article-body ul { margin: 0 0 var(--ui-space-3); padding-left: 1.3em; }
.wf-article-body li { margin-bottom: 5px; }
.wf-article-body a { color: var(--wf-accent); text-decoration: underline; }
.wf-article-body hr { border: none; border-top: 1px solid var(--ui-gray-200); margin: var(--ui-space-5) 0; }
.wf-article-body blockquote {
    margin: var(--ui-space-4) 0;
    padding: var(--ui-space-2) var(--ui-space-4);
    border-left: 4px solid var(--wf-accent);
    background: var(--wf-accent-soft);
    font-size: var(--ui-text-lg);
    font-style: italic;
    color: var(--wf-ink);
}
.wf-article-figure { margin: var(--ui-space-4) 0; }
.wf-article-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    display: block;
}
.wf-article-figure figcaption {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
    margin-top: var(--ui-space-2);
    line-height: 1.4;
}

/* ── Tools score / cost bars ──────────────────────────────────────────── */
.wf-scorebar-track {
    flex: 1 1 auto;
    height: 14px;
    background: var(--ui-gray-200);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
.wf-scorebar-fill {
    height: 100%;
    border-radius: var(--ui-radius-sm);
    transition: width 0.3s ease;
}