/* ================================================================
   informational-theme.css
   Shared stylesheet for Broken Systems informational pages (charts,
   graphs, cited evidence — as opposed to opinion/commentary posts,
   which use opinion-theme.css instead).

   Every informational page links to this file instead of carrying
   its own copy of these rules inline. To change something across
   ALL informational 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 (e.g. ai_policy.html's
   .example-prompt box) stays in that page's own inline <style> block
   instead of here.
   ================================================================ */

/* ============================================================
   INFORMATIONAL PAGE THEME — light / blue, used on pages with
   charts, graphs, and cited evidence rather than commentary.
   Distinct from the dark red "blogpost-theme" used on opinion
   posts (see index.html). Structure carried over from the
   original ClimateChange.xhtml, re-typeset in the site's
   Playfair Display / Source Serif Pro / Libre Franklin fonts
   so informational pages still feel like part of the same
   site as the blog posts.
   ============================================================ */
:root {
    --info-blue-dark: #003366;
    --info-blue-mid: #005599;
    --info-blue: #0066cc;
    --link-blue: #0653c4;
    --paper: #f9f9f9;
    --ink: #2a2a2a;
    --alert-red: #c41e3a;
}

/* Overrides a rule set in styleSP.css/styleSL.css/styleDL.css.
   NOTE: those three files split their rules 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 (.myheader vs. everything else here), 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; }

/* Site nav — identical to index.html's site-nav */
.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: #d4af37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}

/* Informational content area */
.info-page {
    background: var(--paper);
    color: var(--ink);
}

.info-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 40px 70px;
    font-family: 'Source Serif Pro', serif;
    font-size: 18px;
    line-height: 1.65;
}

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

.info-page h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 44px;
    line-height: 1.15;
    color: var(--info-blue-dark);
    border-bottom: 3px solid var(--info-blue-dark);
    padding-bottom: 14px;
    margin: 0 0 30px;
}

.info-page h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--info-blue-mid);
    border-left: 5px solid var(--info-blue-mid);
    padding-left: 16px;
    margin: 44px 0 18px;
}

.info-page h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--info-blue);
    margin: 28px 0 12px;
}

.info-page p { margin: 0 0 18px; }

.info-page strong { color: var(--info-blue-dark); }

/* Body links — standard bold blue, per site style preference */
.info-page a {
    color: var(--link-blue);
    font-weight: 700;
    text-decoration: underline;
}

.info-page a:hover { color: var(--info-blue-dark); }

.info-page ul, .info-page ol { margin: 0 0 18px; padding-left: 28px; }
.info-page li { margin-bottom: 8px; }

.intro {
    background: #e6f2ff;
    border-left: 5px solid var(--info-blue);
    padding: 22px 26px;
    margin: 24px 0;
}

.key-fact {
    background: #fff3cd;
    border: 2px solid #ff9800;
    border-radius: 6px;
    padding: 20px 24px;
    margin: 24px 0;
}

.evidence-box {
    background: #e8f5e9;
    border-left: 5px solid #4caf50;
    padding: 20px 24px;
    margin: 20px 0;
}

.simple-logic {
    background: #f3e5f5;
    border-left: 5px solid #9c27b0;
    padding: 20px 24px;
    margin: 20px 0;
}

.figure {
    margin: 32px 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #ddd;
    text-align: center;
}

.figure img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

.caption {
    margin-top: 12px;
    font-family: 'Libre Franklin', sans-serif;
    font-style: italic;
    font-size: 15px;
    color: #555;
    text-align: left;
}

.source {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin-top: 6px;
}

.conclusion {
    background: #ffebee;
    border: 3px solid #c62828;
    border-radius: 6px;
    padding: 28px 30px;
    margin: 36px 0;
}

.conclusion h2 {
    border-left: none;
    padding-left: 0;
    margin-top: 0;
    color: #c62828;
}

.center-emphasis {
    text-align: center;
    font-size: 1.1em;
}

/* Subject-specific sources footer — only links cogent to this
   page's subject, not the full site-wide list. That lives on
   all-posts.html now. */
.page-sources-footer {
    background: #0d0d0d;
    color: var(--paper);
    border-top: 3px solid var(--info-blue);
}

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

.page-sources-head {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--paper);
    margin-bottom: 8px;
}

.page-sources-note {
    font-family: 'Source Serif Pro', serif;
    font-size: 15px;
    color: #b8b8b8;
    margin-bottom: 24px;
}

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

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

.page-sources-list a {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #cfe4ff;
    text-decoration: none;
}

.page-sources-list a:hover { color: var(--info-blue); }

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

/* 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 {
    text-align: center;
    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(--info-blue-dark);
    text-decoration: none;
    padding: 14px 36px;
    border: 3px solid var(--info-blue);
    border-radius: 6px;
    background: #e6f2ff;
}

.home-link a:hover {
    background: var(--info-blue);
    color: #fff;
}

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

.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;
}

@media (max-width: 768px) {
    .site-nav .nav-inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.5rem; }
    .info-container { padding: 35px 20px 50px; }
    .info-page h1 { font-size: 32px; }
    .info-page h2 { font-size: 22px; }
    .page-sources-inner { padding: 35px 20px 15px; }
    .page-sources-list { grid-template-columns: 1fr; }
}
