/* ================================================================
   opinion-theme.css
   Shared stylesheet for Broken Systems opinion/commentary pages
   (the dark "blogpost-theme" — as opposed to informational pages,
   which use informational-theme.css instead).

   Every opinion page links to this file instead of carrying its own
   copy of these rules inline. To change something across ALL opinion
   pages at once (e.g. box colors, the Home button, footer layout),
   edit this file only — no page needs to be touched.

   Anything genuinely specific to a single page stays in that page's
   own inline <style> block instead of here.
   ================================================================ */

/* ============================================================
   BLOG POST THEME — dark / warning-stripe / alert-red
   Used only on blog posts (opinion & commentary pieces), not on
   informational pages with charts/graphs, which keep the light
   styleSP/SL/DL look on their own. Pulled from the original
   index.html design rather than recreated from scratch.
   ============================================================ */
:root {
    --alert-red: #c41e3a;
    --dark-red: #8b1a2d;
    --cream: #f4f1ea;
    --dark-gray: #1a1a1a;
    --medium-gray: #4a4a4a;
    --gold: #d4af37;
}

/* Removes the shared 30px gap below .myheader so the black
   nav bar sits flush against the bottom of the header image.
   NOTE: .myheader's own responsive behavior comes from
   styleSP.css/styleSL.css/styleDL.css, which split by viewport width
   (0-480px / 481-768px / 769px+) via separate <link media="..."> tags
   in each page's <head> — a different mechanism than the single
   internal @media query used below. The two systems don't target the
   same selectors today, so they don't conflict, but if .myheader's
   own breakpoints ever change independently of this file's 768px
   breakpoint, that alignment is not guaranteed and should be
   re-checked. */
.myheader { margin-bottom: 0 !important; }

/* Scope the dark theme to its own wrapper so it doesn't fight
   the .myheader / body rules from styleSP/SL/DL above it. */
.blogpost-theme {
    background: var(--dark-gray);
    color: var(--cream);
    font-family: 'Source Serif Pro', serif;
    line-height: 1.7;
    position: relative;
    overflow: hidden;
}

.warning-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg,
        rgba(196, 30, 58, 0.05), rgba(196, 30, 58, 0.05) 20px,
        transparent 20px, transparent 40px);
    animation: slide 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes slide {
    0% { background-position: 0 0; }
    100% { background-position: 56px 56px; }
}

.alert-border {
    position: relative; top: 0; left: 0; right: 0; height: 8px;
    background: var(--alert-red);
    animation: pulse 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 20px var(--alert-red); }
    50% { opacity: 0.6; box-shadow: 0 0 40px var(--alert-red); }
}

.container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    z-index: 1;
}

.content-section {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(196, 30, 58, 0.3);
    padding: 40px;
    margin-bottom: 30px;
    position: relative;
    animation: fadeUp 0.8s ease-out backwards;
    font-size: 21px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-section::before {
    content: '⚠';
    position: absolute;
    top: -20px; left: 30px;
    font-size: 32px;
    background: var(--dark-gray);
    padding: 0 10px;
    color: var(--alert-red);
}

.blogpost-theme h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--alert-red);
    margin: 36px 0 16px;
    border-bottom: 2px solid rgba(196, 30, 58, 0.3);
    padding-bottom: 12px;
}

.blogpost-theme h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
    margin: 28px 0 12px;
}

.blogpost-theme p {
    font-size: 19px;
    margin-bottom: 18px;
    color: #d4d4d4;
}

.blogpost-theme strong {
    color: var(--cream);
}

.blogpost-theme a { color: var(--gold); text-decoration: underline; }
.blogpost-theme a:hover { color: var(--alert-red); }

.blogpost-theme ul, .blogpost-theme ol {
    margin: 0 0 18px 24px;
    font-size: 19px;
    color: #d4d4d4;
}

.blogpost-theme li { margin-bottom: 10px; }

.date-stamp {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 25px;
    display: block;
}

/* Page title bar — black strip between the site header and
   the nav, holding the page's h1. Keeps the page's identity
   visible above the fold on mobile, where .site-nav's three
   columns stack tall enough to push everything else off
   screen. */
.page-title-bar {
    background: #0d0d0d;
    border-top: 3px solid var(--alert-red);
    padding: 22px 20px;
    text-align: center;
}

.page-title-bar h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(20px, 4.2vw, 32px);
    line-height: 1.25;
    color: var(--cream);
    margin: 0;
}

/* Site nav — full-width black bar below the header image,
   matching the look used across whatisrandom.org. Sits
   outside .blogpost-theme since it's shared site furniture,
   not part of the warning theme. */
.site-nav {
    background: #0d0d0d;
    border-bottom: 2px solid var(--alert-red);
    position: relative;
    z-index: 5;
}

.site-nav .nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.nav-col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.nav-col-head {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--alert-red);
    margin-bottom: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(196, 30, 58, 0.3);
}

.nav-col a {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #b0a8a0;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s;
}

.nav-col a:hover {
    color: var(--alert-red);
}

.nav-col a strong {
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}

/* Related-reading footer — subject-specific links only (the
   "Please read:" list from the source document), not the
   full site-wide list. That lives on all-posts.html now, and
   is reached via the "All Posts and Links" nav item instead
   of an in-page anchor on every page except index.html. */
.page-links-footer {
    background: #000;
    color: var(--cream);
    border-top: 3px solid var(--alert-red);
}

.page-links-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 40px 20px;
}

.page-links-head {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--cream);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--alert-red);
    padding-bottom: 12px;
}

.page-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 2.5rem;
}

.page-links-list li {
    border-bottom: 1px solid #333;
    padding-bottom: 0.6rem;
}

.page-links-list a {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--cream);
    text-decoration: none;
}

.page-links-list a:hover { color: var(--alert-red); }

/* Return-to-home link at the end of the content area — the
   escape hatch for the nav-sync policy (older pages' nav
   columns may go stale; index.html's nav is always kept
   current). */
.home-link {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0 0;
}

.home-link a {
    display: inline-block;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    padding: 14px 36px;
    border: 3px solid var(--gold);
    border-radius: 6px;
    background: rgba(212, 175, 55, 0.1);
}

.home-link a:hover {
    background: var(--gold);
    color: #1a1a1a;
}

/* Creative Commons license line — sits inside the dark
   footer, just above the site credit. */
.footer-base {
    text-align: center;
    padding: 25px 20px 4px;
}

.cc-license-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #555;
}

.cc-license-icon {
    height: 24px;
    width: auto;
    vertical-align: middle;
    opacity: 0.6;
}

.site-credit {
    text-align: center;
    padding: 20px 20px 40px;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
}

/* Restored from the original pre-reformatting opinion-page template.
   Prev/next sequencing (.post-nav) was removed site-wide by design —
   it created ongoing maintenance burden every time post order or
   links changed. .estimated-note remains since imprecise dates are
   still a recurring pattern in not-yet-reformatted legacy pages. */
.estimated-note { font-size: 13px; color: var(--medium-gray); font-style: italic; }

@media (max-width: 768px) {
    .container { padding: 40px 20px 60px; }
    .content-section { padding: 25px; }
    .blogpost-theme h2 { font-size: 24px; }
    .site-nav .nav-inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.5rem; }
    .page-links-list { grid-template-columns: 1fr; }
    .page-links-inner { padding: 35px 20px 20px; }
}
