/* ==========================================================================
   theme-extra.css — loads right after theme.css. theme.css is unchanged; this file
   only covers pages and components that theme.css did not reach, using its variables:
   article detail pages (.art-*), the blog (blog.css), the email signup (subscribe.css),
   and the red "Warning" links that carry an inline style (Home, Updates, Weekly Summary).
   ========================================================================== */

/* Article detail pages: same header pattern as episode pages (eyebrow, H1, meta; no band, no pill) */
body .art-hero { background: none; color: var(--text); text-align: left; margin: 0; padding: 36px 0 0; }
body .art-hero-inner { max-width: var(--content); margin: 0 auto; padding: 0 24px; }
body .art-badge {
  display: block; background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 4px;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal);
}
body .art-label { opacity: 1; color: var(--secondary); }
body .art-meta { opacity: 1; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--tertiary); }
body .art-content { max-width: var(--content); margin: 0 auto; padding: 0 24px 64px; }
body .art-content .art-heading { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
body .art-content .art-heading a { color: var(--teal); }
body .art-content .art-heading a:hover { color: var(--blue); }   /* article title: teal, blue on rollover (palette: --teal, --blue) */
body .art-content h2 { font-family: var(--font-heading); color: var(--text); border-bottom-color: var(--border); }
body .art-content li, body .art-content p { color: var(--secondary); }
body .art-content a { color: var(--teal); }
body .art-content a:hover { color: var(--teal-hover); }
body .art-back { color: var(--teal); }
body .art-content blockquote { background: var(--surface); border-left-color: var(--teal); }

/* The disclaimer on every page is the same amber note (theme.css section 13) */
body .art-content p:has(> a.art-warn) {
  margin: 40px 0 0; padding: 14px 16px; background: var(--note-bg); border: 1px solid var(--note-border);
  border-radius: 10px; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.55; color: var(--secondary);
}
body .art-content a.art-warn,
body .hm-body a.warn-link {            /* !important: Home/Updates/Weekly links carry an inline red style */
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: var(--note) !important;
}

/* Blog */
body .blog-hero { border-bottom-color: var(--border); }
body .blog-btn { background: var(--teal); color: var(--teal-ink) !important; }
body .blog-btn:hover { background: var(--teal-hover); }
body .blog-rss { color: var(--teal); border-bottom-color: var(--teal); }
body .blog-more, body .blog-cta a { color: var(--teal); }
body .blog-card { border-bottom-color: var(--border); }
body .blog-card:hover { border-left-color: var(--teal); }
body .blog-card h2 a:hover { color: var(--teal); }
body .blog-card p { color: var(--secondary); }
body .blog-note, body .blog-meta, body .blog-cta { color: var(--tertiary); }

/* Email signup (popup and fallback form) */
body .sub-form input[type=email] { border-color: var(--border); }
body .sub-form input[type=email]:focus { outline-color: var(--teal); }
body .sub-form button { background: var(--teal); color: var(--teal-ink); }
body .sub-form button:hover { background: var(--teal-hover); }
body .sub-form button.sub-cancel { background: transparent; color: var(--secondary); border-color: var(--border); }

/* Buttons inside episode text: theme.css section 7 colours every link in .episode-content teal, which made the
   button label teal on a teal fill. Keep the button colours from theme.css section 6. */
body .episode-content a.btn-blue, body .episode-content a.btn-blue:hover { color: var(--teal-ink); text-decoration: none; }
body .episode-content a.btn-ghost { color: var(--secondary); text-decoration: none; }
body .episode-content a.btn-ghost:hover { color: var(--text); }

/* About page: the "Warning" heading that the Warning links point to has an inline red style */
body #warning { color: var(--note) !important; }

/* Header: logo 14% larger (56 -> 64 px; 48 -> 54 px on phones) and the logo and the menu centred together as one group.
   On a phone the logo and the menu are two rows; both are centred (the menu still scrolls sideways if it is wider than the screen). */
body nav:not(.breadcrumb) > .container-wide { justify-content: center; gap: 4px 40px; }
@media (min-width: 641px) and (max-width: 760px) { body nav:not(.breadcrumb) > .container-wide { gap: 4px 12px; } }   /* narrow tablets: keep logo and menu on one row */
body .nav-logo { height: 64px; }
@media (max-width: 640px) {
  body .nav-logo { height: 54px; }
  body .nav-links { justify-content: safe center; }
}

/* Articles list: article titles are teal and turn blue on rollover or keyboard focus (palette: --teal, --blue) */
body .art-list .post-item h3 { color: var(--teal); }
body .art-list .post-item:hover h3, body .art-list .post-item a:focus-visible h3 { color: var(--blue); }