/*
 * pf_bl_archive.css
 * PatsFans 2026 — Blog Archive Article Template
 * Used by entry.php for legacy author article pages.
 * Deploy to: cdn.patsfans.com/site/css/pf_bl_archive.css
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --pf-navy:          #002244;
    --pf-gold:          #c8a84b;
    --pf-gold-dark:     #a8883b;
    --pf-gold-pale:     #faf6ec;
    --pf-gold-border:   #e5d48a;
    --pf-red:           #c60c30;
    --pf-red-dark:      #9e0a26;
    --pf-silver-light:  #f4f5f6;
    --pf-silver-border: #dde0e3;
    --pf-font-display:  'Playfair Display', Georgia, serif;
    --pf-font-serif:    'Source Serif 4', Georgia, serif;
    --pf-font-sans:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --pf-radius-sm:     4px;
    --pf-radius-md:     8px;
    --pf-radius-lg:     12px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body { background:#fff; font-family:var(--pf-font-sans); color:#212121; -webkit-font-smoothing:antialiased; }
.pf-article-wrap { max-width:1200px; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.pf-breadcrumb { display:flex; align-items:center; gap:6px; padding:10px 0 12px; flex-wrap:wrap; font-family:var(--pf-font-sans); font-size:12px; color:#666; }
.pf-breadcrumb a { color:var(--pf-navy); text-decoration:none; font-weight:500; }
.pf-breadcrumb a:hover { color:var(--pf-red); }
.pf-breadcrumb-sep { opacity:.35; font-size:10px; }

/* ── Category pill ───────────────────────────────────────────────────────── */
.pf-cat-pill { display:inline-flex; align-items:center; gap:5px; background:var(--pf-red); color:#fff; font-family:var(--pf-font-sans); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:var(--pf-radius-sm); margin-bottom:14px; text-decoration:none; }
.pf-cat-pill:hover { background:var(--pf-red-dark); color:#fff; text-decoration:none; }
.pf-live-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.85); flex-shrink:0; animation:pf-blink 2s infinite; }
@keyframes pf-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Headline ────────────────────────────────────────────────────────────── */
.pf-article-headline { font-family:var(--pf-font-display); font-size:clamp(24px,4vw,34px); font-weight:900; line-height:1.18; letter-spacing:-.4px; color:#212121; margin:0 0 10px; }

/* ── Byline ──────────────────────────────────────────────────────────────── */
.pf-byline { display:flex; align-items:center; justify-content:space-between; padding:12px 0; flex-wrap:wrap; gap:10px; border-top:.5px solid var(--pf-silver-border); border-bottom:.5px solid var(--pf-silver-border); margin-bottom:0; font-family:var(--pf-font-sans); }
.pf-byline-author { display:flex; align-items:center; gap:10px; }
.pf-byline-avatar { width:38px; height:38px; border-radius:50%; border:2px solid var(--pf-red); background:var(--pf-navy); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--pf-gold); flex-shrink:0; overflow:hidden; }
.pf-byline-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-byline-name { font-size:13px; font-weight:600; color:#212121; display:block; text-decoration:none; }
.pf-byline-name:hover { color:var(--pf-red); }
.pf-byline-role { font-size:11px; color:#666; display:block; margin-top:1px; }
.pf-byline-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pf-byline-meta-item { font-size:11px; color:#666; display:flex; align-items:center; gap:4px; text-decoration:none; }
.pf-byline-meta-item:hover { color:var(--pf-navy); }
.pf-byline-meta-sep { color:var(--pf-silver-border); font-size:10px; }

/* ── Follow bar ──────────────────────────────────────────────────────────── */
.pf-follow-bar { background:var(--pf-gold-pale); border:.5px solid var(--pf-gold-border); border-left:3px solid var(--pf-red); border-radius:0 var(--pf-radius-md) var(--pf-radius-md) 0; padding:12px 18px; margin:14px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--pf-font-sans); }
.pf-follow-label { font-size:11px; font-weight:700; color:var(--pf-navy); text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.pf-follow-btns { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.pf-btn { display:inline-flex; align-items:center; gap:6px; border-radius:var(--pf-radius-sm); padding:6px 13px; font-family:var(--pf-font-sans); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap; transition:all .15s; line-height:1; }
.pf-btn-gnews { background:#fff; border:1px solid var(--pf-silver-border); color:#1a73e8; }
.pf-btn-gnews:hover { border-color:#1a73e8; color:#1a73e8; text-decoration:none; }
.pf-btn-newsletter { background:var(--pf-navy); border:1px solid var(--pf-navy); color:var(--pf-gold); }
.pf-btn-newsletter:hover { opacity:.88; color:var(--pf-gold); text-decoration:none; }

/* ── Article body ────────────────────────────────────────────────────────── */
#pfarticle { font-size:17px; line-height:1.78; color:#111; }
#pfarticle p { font-family:var(--pf-font-serif); font-size:17px; font-weight:400; line-height:1.78; color:#111; margin-bottom:1.1em; }
#pfarticle h2 { font-family:var(--pf-font-display); font-size:24px; font-weight:700; line-height:1.25; margin:1.6em 0 .6em; color:#212121; padding-bottom:8px; border-bottom:1.5px solid var(--pf-silver-border); position:relative; }
#pfarticle h2::after { content:''; position:absolute; bottom:-1.5px; left:0; width:36px; height:1.5px; background:var(--pf-gold); }
#pfarticle h3 { font-family:var(--pf-font-display); font-size:20px; font-weight:700; line-height:1.3; margin:1.4em 0 .5em; color:#212121; padding-bottom:7px; border-bottom:1px solid var(--pf-silver-border); position:relative; }
#pfarticle h3::after { content:''; position:absolute; bottom:-1px; left:0; width:28px; height:1px; background:var(--pf-gold); }
#pfarticle h4 { font-family:var(--pf-font-sans); font-size:17px; font-weight:700; line-height:1.35; margin:1.3em 0 .4em; color:#212121; padding-left:12px; border-left:3px solid var(--pf-red); }
#pfarticle strong { font-weight:600; }
#pfarticle a { color:var(--pf-navy); }
#pfarticle a:hover { color:var(--pf-red); }
#pfarticle blockquote { border-left:4px solid var(--pf-gold); padding:12px 20px; margin:24px 0; background:var(--pf-gold-pale); border-radius:0 var(--pf-radius-md) var(--pf-radius-md) 0; font-style:italic; font-size:16px; line-height:1.6; }
#pfarticle img { max-width:100%; height:auto; border-radius:var(--pf-radius-md); margin:8px 0; }
#pfarticle ul, #pfarticle ol { margin-left:15px !important; padding-left:5px !important; }
#pfarticle li { display:list-item !important; margin-bottom:15px !important; font-family:var(--pf-font-serif); font-size:17px; line-height:1.65; }

/* ── Archive notice ──────────────────────────────────────────────────────── */
.pf-entry-archive-notice { display:flex; align-items:flex-start; gap:10px; background:var(--pf-gold-pale); border:.5px solid var(--pf-gold-border); border-left:3px solid var(--pf-gold); border-radius:0 6px 6px 0; padding:12px 16px; margin:28px 0 24px; font-family:var(--pf-font-sans); font-size:13px; line-height:1.55; color:#555; }
.pf-entry-archive-icon { flex-shrink:0; margin-top:2px; color:var(--pf-gold-dark); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:768px) {
    .pf-follow-bar { flex-direction:column; align-items:flex-start; }
    .pf-byline { flex-direction:column; align-items:flex-start; }
}

/* ── Lede figure (first article image, extracted from [caption] shortcode) ── */
.pf-lede-figure {
    margin: 0 0 24px;
    padding: 0;
    display: block;
    width: 100%;
}
.pf-lede-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--pf-radius-md);
}
.pf-lede-caption {
    display: block;
    font-family: var(--pf-font-sans);
    font-size: 12px;
    color: #888;
    padding: 6px 2px 0;
    line-height: 1.5;
    font-style: italic;
}

/* ── Article figures (processed [caption] shortcodes) ───────────────────── */
.pf-article-figure {
    margin: 0 0 1.4em;
    display: block;
    width: 100%;
}
.pf-article-figure img {
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: var(--pf-radius-md);
}
.pf-article-figcaption {
    font-family: var(--pf-font-sans);
    font-size: 12px;
    color: #888;
    padding: 6px 2px 0;
    line-height: 1.5;
    font-style: italic;
}

/* Drop-cap: first-letter of the first <p> AFTER a figure ───────────────── */
/* The figure sits outside #pfarticle's first-of-type scope, so we          */
/* explicitly target the next sibling p via JS class added below.           */
#pfarticle p.pf-dropcap::first-letter {
    font-family: var(--pf-font-display);
    font-size: 58px;
    font-weight: 900;
    float: left;
    line-height: 0.85;
    padding-right: 8px;
    padding-top: 6px;
    color: var(--pf-gold);
}