/*! FreePress main stylesheet
 *
 *  Cascade layer order: tokens < base < layout < components < utilities.
 *  Child theme palette overrides land on :root via inline <style> and beat
 *  the parent's defaults inside the tokens layer.
 */

@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* Tells the browser to render form controls + scrollbars in the matching
       scheme when the user is in dark mode. */
    color-scheme: light dark;

    /* ------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------ */
    --font-deva: "Mukta", system-ui, sans-serif;
    --font-sans: "Inter", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Modular scale, 1.2 ratio */
    --size-12: 0.75rem;
    --size-14: 0.875rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-22: 1.375rem;
    --size-26: 1.625rem;
    --size-32: 2rem;
    --size-40: 2.5rem;
    --size-48: 3rem;

    --lh-tight: 1.2;
    --lh-normal: 1.6;

    /* ------------------------------------------------------------------
       Spacing — 4px base
       ------------------------------------------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* ------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------ */
    --measure: 38rem;            /* article column max  */
    --container-max: 75rem;      /* page container max  */
    --container-pad: var(--space-4);

    /* ------------------------------------------------------------------
       Color — placeholders. Child theme's site-config.php overrides these.
       ------------------------------------------------------------------ */
    --color-fg: #111;
    --color-fg-muted: #555;
    --color-bg: #fff;
    --color-bg-soft: #f6f6f4;
    --color-border: #e2e2dc;
    --color-accent: #b3261e;
    --color-link: #0b5cad;
    --color-link-visited: #6b3fa0;
  }

  /* Dark mode tokens. Applied in two situations:
       1. OS prefers dark AND the reader hasn't forced light via the toggle.
       2. The reader forced dark via the toggle, regardless of OS.
     The manual toggle sets data-theme="light|dark" on <html> (see the inline
     boot script in inc/assets.php + the toggle module in assets/js/main.js);
     no attribute = "auto" = follow the OS. Child theme's colors_dark array and
     the Customizer dark palette mirror these same two selectors so a forced
     theme still uses the per-site colors. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-fg: #e8e8e6;
      --color-fg-muted: #9a9a93;
      --color-bg: #111111;
      --color-bg-soft: #1c1c1a;
      --color-border: #2e2e2a;
      --color-accent: #ff6b62;
      --color-link: #6ab4ff;
      --color-link-visited: #c79bff;
    }
  }
  :root[data-theme="dark"] {
    --color-fg: #e8e8e6;
    --color-fg-muted: #9a9a93;
    --color-bg: #111111;
    --color-bg-soft: #1c1c1a;
    --color-border: #2e2e2a;
    --color-accent: #ff6b62;
    --color-link: #6ab4ff;
    --color-link-visited: #c79bff;
  }

  /* Keep native form controls + scrollbars in sync when a mode is forced.
     (The base :root keeps `light dark` so "auto" still hands the choice to
     the OS.) */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Smooth in-page scrolling (back-to-top button, anchor links). Skipped for
     readers who prefer reduced motion. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    /* Browser uses unicode-range from @font-face to pick Mukta for Devanagari
       glyphs and Inter for Latin glyphs automatically, even within one string. */
    font-family: var(--font-deva), var(--font-sans);
    font-size: var(--size-16);
    line-height: var(--lh-normal);
    color: var(--color-fg);
    background: var(--color-bg);
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-deva), var(--font-sans);
    line-height: var(--lh-tight);
    font-weight: 600;
    margin: 0 0 var(--space-4);
  }
  h1 { font-size: var(--size-40); }
  h2 { font-size: var(--size-32); }
  h3 { font-size: var(--size-26); }
  h4 { font-size: var(--size-22); }
  h5 { font-size: var(--size-18); }
  h6 { font-size: var(--size-16); }

  p { margin: 0 0 var(--space-4); }

  a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  a:visited { color: var(--color-link-visited); }
  a:hover { text-decoration-thickness: 2px; }

  img, video, iframe { max-width: 100%; height: auto; display: block; }
  iframe { aspect-ratio: 16 / 9; }

  button { font: inherit; }

  ::selection { background: var(--color-accent); color: var(--color-bg); }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);

    &:focus {
      left: var(--space-2);
      z-index: 1000;
      padding: var(--space-2) var(--space-3);
      background: var(--color-fg);
      color: var(--color-bg);
      text-decoration: none;
    }
  }
}

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .measure {
    max-width: var(--measure);
    margin-inline: auto;
  }

  /* Stack — vertical rhythm between children */
  .stack > * + * { margin-block-start: var(--space-4); }
  .stack-lg > * + * { margin-block-start: var(--space-8); }
}

@layer components {
  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--color-border);

    /* Front-page masthead is wrapped in an <h1> for document outline; the
       wrapper generates no box so the flex layout is identical to inner pages. */
    & .site-title-heading { display: contents; }

    & .site-title {
      font-weight: 600;
      font-size: var(--size-22);
      color: var(--color-fg);
      text-decoration: none;
      flex: 1;
    }

    /* Custom logo (Appearance → Customize → Site Identity). Replaces the text
       title; the branding wrapper takes the flex space so the theme toggle,
       translate link and hamburger still push to the trailing edge. */
    & .site-branding { flex: 1; }
    & .site-branding .custom-logo {
      display: block;
      max-height: 2.5rem;
      width: auto;
    }
  }

  /* Hamburger + close buttons + theme toggle + translate link.
     Round, accent-colored on focus. */
  .site-menu-toggle, .site-nav__close, .theme-toggle, .site-translate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-fg);
    border-radius: 4px;

    &:hover { background: var(--color-bg-soft); }
    &:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  }

  /* Translate is an <a>, so neutralize the default link underline/visited
     color and keep the glyph centered. Shows at every viewport (no JS needed),
     so it is never hidden by the .no-js or mobile-only rules below. */
  .site-translate {
    line-height: 0;
    text-decoration: none;

    &:visited { color: var(--color-fg); }
    &:hover { color: var(--color-accent); }
  }

  /* No-JS fallback: hide the hamburger entirely so it doesn't confuse users
     whose menu-open click goes nowhere. Menu items show inline below the
     site title via the normal flex-wrap. */
  .no-js .site-menu-toggle,
  .no-js .site-nav__close,
  .no-js .site-nav-backdrop { display: none; }

  /* Theme toggle — three-state (auto / light / dark). The boot script flips
     data-theme on <html>; CSS shows the icon for the current state so the JS
     only has to toggle one attribute. The control depends on JS, so it's
     hidden in the no-JS fallback (avoids a control whose click goes nowhere).
     Sits in the header at every viewport — unlike the hamburger it is not a
     mobile-only control. The site-title's `flex: 1` already pushes the
     toggle (and hamburger) to the trailing edge. */
  .theme-toggle .theme-toggle__icon { display: none; line-height: 0; }
  :root:not([data-theme]) .theme-toggle__icon--auto,
  :root[data-theme="light"] .theme-toggle__icon--light,
  :root[data-theme="dark"] .theme-toggle__icon--dark { display: inline-flex; }

  .no-js .theme-toggle { display: none; }

  /* ----------------------------------------------------------------------
     Tooltips — CSS-only. Any element with [data-tooltip] shows a small bubble
     on hover / keyboard focus. The accessible name still lives in aria-label,
     so this is purely visual. Used by the header controls + back-to-top.
     ---------------------------------------------------------------------- */
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-3px);
    z-index: 1001;
    background: var(--color-fg);
    color: var(--color-bg);
    font-size: var(--size-12);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    padding: 6px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
  }
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* Header controls sit near the right edge — anchor their tooltips to the
     control's right edge so the bubble grows leftward and never clips. */
  .site-header [data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-3px);
  }
  .site-header [data-tooltip]:hover::after,
  .site-header [data-tooltip]:focus-visible::after {
    transform: translateX(0) translateY(0);
  }
  /* Touch devices can't hover; don't let a tapped tooltip linger. */
  @media (hover: none) {
    [data-tooltip]::after { content: none; }
  }

  /* ----------------------------------------------------------------------
     Back-to-top button — fixed, fades in after scrolling (toggled by JS).
     ---------------------------------------------------------------------- */
  .to-top {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;

    &.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    &:hover { filter: brightness(1.08); }
    &:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
  }
  .no-js .to-top { display: none; }

  /* Nav menu — base list styles for both desktop and mobile drawer */
  .site-nav {
    & .menu, & ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-6);
    }
    & a {
      color: var(--color-fg);
      text-decoration: none;
      font-weight: 500;
      text-underline-offset: 4px;

      &:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: 2px;
      }
    }
    /* Highlight the section the reader is currently in. */
    & .current-menu-item > a,
    & .current-menu-ancestor > a,
    & .current_page_item > a { color: var(--color-accent); }
  }

  /* Mobile drawer pattern — only active when JS has booted and viewport is small */
  @media (max-width: 47.99rem) {
    .js .site-nav {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      width: min(80vw, 320px);
      background: var(--color-bg);
      border-inline-start: 1px solid var(--color-border);
      padding: var(--space-12) var(--space-5) var(--space-5);
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 250ms ease-out;
      box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);

      & .menu, & ul {
        flex-direction: column;
        gap: 0;
      }
      & li {
        border-block-end: 1px solid var(--color-border);
      }
      & a {
        display: block;
        padding-block: var(--space-3);
        font-size: var(--size-18);
      }
      & .sub-menu {
        padding-inline-start: var(--space-4);
        border-block-start: 1px solid var(--color-border);
      }
    }

    .js .site-nav__close {
      position: absolute;
      top: var(--space-3);
      right: var(--space-3);
    }

    .js body.has-menu-open .site-nav { transform: translateX(0); }

    .site-nav-backdrop {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms ease-out;
    }
    .js body.has-menu-open .site-nav-backdrop {
      opacity: 1;
      pointer-events: auto;
    }
    body.has-menu-open { overflow: hidden; }
  }

  /* Desktop: hamburger / close / backdrop hidden; nav inline */
  @media (min-width: 48rem) {
    .site-menu-toggle,
    .site-nav__close,
    .site-nav-backdrop { display: none; }
  }

  .site-footer {
    padding-block: var(--space-8);
    margin-block-start: var(--space-12);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-fg-muted);
    font-size: var(--size-14);
  }

  /* 3-column widget grid */
  .site-footer__widgets {
    display: grid;
    gap: var(--space-8);
    margin-block-end: var(--space-6);

    @media (min-width: 48rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .footer-widget {
    margin-block-end: var(--space-4);

    & .footer-widget__title {
      font-size: var(--size-14);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-fg);
      margin-block: 0 var(--space-3);
    }

    & ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    & li { padding-block: 2px; }

    & a {
      color: var(--color-fg-muted);
      text-decoration: none;

      &:hover { color: var(--color-accent); }
    }
  }

  /* Bottom row — copyright on the left, social + footer-nav on the right */
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);

    & .site-copyright { margin: 0; }
  }

  .site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  .footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .footer-nav a {
    color: var(--color-fg-muted);
    text-decoration: none;

    &:hover { color: var(--color-accent); }
  }

  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      color: var(--color-fg-muted);
      text-decoration: none;
      border-radius: 50%;
      transition: color 120ms ease, background 120ms ease;

      &:hover, &:focus-visible {
        color: var(--color-bg);
        background: var(--color-accent);
      }
    }
  }

  /* ----------------------------------------------------------------------
     Section heading (used above the Latest section on the homepage)
     ---------------------------------------------------------------------- */
  .section-heading {
    font-size: var(--size-22);
    border-block-end: 2px solid var(--color-accent);
    padding-block-end: var(--space-2);
    margin-block-end: var(--space-6);
  }

  /* ----------------------------------------------------------------------
     Post card — base
     ---------------------------------------------------------------------- */
  .card {
    display: grid;
    gap: var(--space-3);

    & .card__image img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background: var(--color-bg-soft);
    }

    /* The card grid gap only spaces image vs. body; the text elements inside
       .card__body carry margin:0, so the body needs its own stack rhythm or
       category/title/excerpt/meta collapse onto each other. */
    & .card__body {
      display: grid;
      gap: var(--space-2);
      align-content: start;
    }

    & .card__category {
      display: inline-block;
      font-size: var(--size-12);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--color-accent);
    }

    & .card__title {
      font-size: var(--size-22);
      margin: 0;

      & a {
        color: var(--color-fg);
        text-decoration: none;
      }
      & a:hover { text-decoration: underline; }
    }

    & .card__excerpt {
      color: var(--color-fg-muted);
      font-size: var(--size-16);
      margin: 0;
    }

    & .card__meta {
      color: var(--color-fg-muted);
      font-size: var(--size-14);
      margin: 0;
    }
  }

  /* ----------------------------------------------------------------------
     Card variants
     ---------------------------------------------------------------------- */
  .card--hero {
    & .card__title { font-size: var(--size-32); line-height: var(--lh-tight); }
    & .card__excerpt { font-size: var(--size-18); }

    @media (min-width: 48rem) {
      grid-template-columns: 1.4fr 1fr;
      gap: var(--space-6);
      align-items: center;

      & .card__title { font-size: var(--size-40); }
    }
  }

  .card--lead {
    & .card__title { font-size: var(--size-22); }
  }

  .card--secondary {
    & .card__title { font-size: var(--size-18); }
  }

  .card--latest {
    grid-template-columns: 96px 1fr;
    gap: var(--space-3);
    align-items: start;

    & .card__title { font-size: var(--size-16); }
    & .card__excerpt { display: none; }
    & .card__image img { aspect-ratio: 1 / 1; }
  }

  /* ----------------------------------------------------------------------
     Homepage section layouts
     ---------------------------------------------------------------------- */
  .home-leads {
    display: grid;
    gap: var(--space-6);

    @media (min-width: 48rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .home-secondary {
    display: grid;
    gap: var(--space-6);

    @media (min-width: 36rem) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 60rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .home-latest {
    & .card + .card {
      border-block-start: 1px solid var(--color-border);
      padding-block-start: var(--space-4);
      margin-block-start: var(--space-4);
    }
  }

  /* ----------------------------------------------------------------------
     Article (singular)
     ---------------------------------------------------------------------- */
  .article-header {
    padding-block: var(--space-6) var(--space-4);

    & .article-header__category {
      display: inline-block;
      font-size: var(--size-12);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--color-accent);
      margin-block-end: var(--space-2);
    }

    & .article-header__title {
      font-size: var(--size-32);
      line-height: var(--lh-tight);
      margin-block: 0 var(--space-3);

      @media (min-width: 48rem) {
        font-size: var(--size-40);
      }
    }

    & .article-header__lede {
      font-size: var(--size-18);
      color: var(--color-fg-muted);
      margin-block: 0 var(--space-4);
    }

    & .article-header__meta {
      font-size: var(--size-14);
      color: var(--color-fg-muted);
      margin: 0;

      & .byline { font-weight: 600; color: var(--color-fg); }
    }
  }

  .article-hero {
    margin: var(--space-6) 0;

    & img {
      width: 100%;
      max-height: 70vh;
      object-fit: cover;
    }

    & .article-hero__caption {
      font-size: var(--size-14);
      color: var(--color-fg-muted);
      padding: var(--space-2) var(--container-pad) 0;
      max-width: var(--measure);
      margin-inline: auto;
    }
  }

  .article-body {
    font-size: var(--size-18);

    & h2 { font-size: var(--size-26); margin-block: var(--space-8) var(--space-3); }
    & h3 { font-size: var(--size-22); margin-block: var(--space-6) var(--space-2); }
    & h4 { font-size: var(--size-18); margin-block: var(--space-4) var(--space-2); }

    & p, & ul, & ol, & blockquote { margin-block: 0 var(--space-4); }

    & ul, & ol { padding-inline-start: var(--space-6); }
    & li + li { margin-block-start: var(--space-2); }

    & blockquote {
      border-inline-start: 3px solid var(--color-accent);
      padding-inline-start: var(--space-4);
      color: var(--color-fg-muted);
      font-style: italic;
    }

    & figure { margin: var(--space-6) 0; }
    & figcaption {
      font-size: var(--size-14);
      color: var(--color-fg-muted);
      padding-block-start: var(--space-2);
    }

    & a { text-decoration: underline; }

    & code {
      font-family: var(--font-mono);
      font-size: 0.92em;
      background: var(--color-bg-soft);
      padding: 0.1em 0.3em;
      border-radius: 3px;
    }
    & pre {
      font-family: var(--font-mono);
      background: var(--color-bg-soft);
      padding: var(--space-4);
      overflow-x: auto;
      border-radius: 4px;
      margin-block: 0 var(--space-4);
    }
    & pre code { background: transparent; padding: 0; }
  }

  .article-footer {
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  .article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--size-14);

    & a {
      text-decoration: none;
      color: var(--color-fg-muted);

      &:hover { color: var(--color-accent); }
    }
  }

  /* ----------------------------------------------------------------------
     Share buttons — bar (in-flow, end of article) + rail (sticky desktop)
     ---------------------------------------------------------------------- */
  .article-share__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .article-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--color-bg-soft);
    color: var(--color-fg);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    transition: color 120ms ease, background 120ms ease;

    &:hover, &:focus-visible {
      color: var(--color-bg);
      background: var(--color-accent);
    }
  }

  /* No-JS: hide Copy-link button since clipboard.writeText is unavailable. */
  .no-js .article-share__copy { display: none; }

  /* Bottom bar */
  .article-share--bar {
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-4);
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);

    & .article-share__label {
      font-weight: 700;
      font-size: var(--size-14);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-fg-muted);
    }

    & .article-share__list {
      flex-wrap: wrap;
      gap: var(--space-2);
    }

    & .article-share__btn {
      padding: var(--space-2) var(--space-3);
      border-radius: 999px;
      font-size: var(--size-14);
    }
  }

  /* Hide button text-labels on very narrow viewports — icons only. */
  @media (max-width: 30rem) {
    .article-share--bar .article-share__btn-label {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0);
      white-space: nowrap; border: 0;
    }
    .article-share--bar .article-share__btn {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
    }
  }

  /* Sticky rail — only on wide desktops where the gutter beside the measure
     column has room. Below this breakpoint the rail is hidden and the bottom
     bar is the sole share UI. */
  .article-share--rail { display: none; }

  @media (min-width: 72rem) {
    .article { position: relative; }

    .article-share--rail {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: calc(50% - var(--measure) / 2 - var(--space-6) - 2.5rem);
      width: 2.5rem;
      pointer-events: none;
    }

    .article-share--rail .article-share__list {
      position: sticky;
      top: 5rem;
      flex-direction: column;
      gap: var(--space-2);
      pointer-events: auto;
    }

    .article-share--rail .article-share__btn {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      border-radius: 50%;
      color: var(--color-fg-muted);
    }
  }

  /* Copy-link "copied" feedback state — applied briefly by JS after a
     successful clipboard.writeText. */
  .article-share__btn.is-copied {
    color: var(--color-bg) !important;
    background: var(--color-accent) !important;
  }

  .article-comments {
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-8);
    border-block-start: 1px solid var(--color-border);
  }

  /* ----------------------------------------------------------------------
     Comments (list + form)
     ---------------------------------------------------------------------- */
  .comments-title {
    font-size: var(--size-26);
    margin-block: 0 var(--space-6);
  }

  .comment-list {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;

    & .children {
      list-style: none;
      margin: var(--space-4) 0 0;
      padding-inline-start: var(--space-6);
      border-inline-start: 2px solid var(--color-border);
    }
  }

  .comment {
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);

    &:first-child { border-block-start: none; padding-block-start: 0; }
  }

  .comment-body {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-3);
  }

  .comment-author {
    grid-column: 1;

    & .avatar {
      border-radius: 50%;
      display: block;
      width: 48px;
      height: 48px;
    }

    & .fn {
      font-weight: 600;
      font-style: normal;
      color: var(--color-fg);
    }
    & .says { display: none; }
  }

  .comment-meta {
    grid-column: 2;
    font-size: var(--size-14);
    color: var(--color-fg-muted);
    margin-block-end: var(--space-2);

    & a { color: inherit; text-decoration: none; }
    & a:hover { text-decoration: underline; }
  }

  .comment-content {
    grid-column: 2;

    & p { margin-block: 0 var(--space-2); }
    & p:last-child { margin-block-end: 0; }
  }

  .reply {
    grid-column: 2;
    margin-block-start: var(--space-2);

    & .comment-reply-link {
      font-size: var(--size-14);
      color: var(--color-accent);
      text-decoration: none;
      font-weight: 600;
    }
    & .comment-reply-link:hover { text-decoration: underline; }
  }

  .comment-awaiting-moderation {
    grid-column: 2;
    font-size: var(--size-14);
    font-style: italic;
    color: var(--color-fg-muted);
  }

  /* Comment form ------------------------------------------------------- */
  .comment-respond {
    margin-block-start: var(--space-6);
  }

  #reply-title,
  .comment-reply-title {
    font-size: var(--size-22);
    margin-block: 0 var(--space-3);

    & small { font-size: var(--size-14); font-weight: 400; margin-inline-start: var(--space-2); }
  }

  .comment-form {
    & .logged-in-as,
    & .must-log-in,
    & .comment-notes {
      font-size: var(--size-14);
      color: var(--color-fg-muted);
      margin-block-end: var(--space-4);

      & a { color: var(--color-link); }
    }

    & .comment-form-comment,
    & .comment-form-author,
    & .comment-form-email,
    & .comment-form-url {
      margin-block-end: var(--space-3);
    }

    & label {
      display: block;
      font-weight: 600;
      font-size: var(--size-14);
      margin-block-end: var(--space-2);
    }

    & input[type="text"],
    & input[type="email"],
    & input[type="url"],
    & textarea {
      width: 100%;
      padding: var(--space-3);
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background: var(--color-bg);
      color: var(--color-fg);
      font: inherit;

      &:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
    }

    & textarea { min-height: 8em; resize: vertical; }

    & .form-submit { margin-block-start: var(--space-4); }

    & input[type="submit"],
    & button[type="submit"] {
      display: inline-block;
      padding: var(--space-3) var(--space-5);
      background: var(--color-accent);
      color: #fff;
      border: 0;
      border-radius: 4px;
      cursor: pointer;
      font: inherit;
      font-weight: 600;

      &:hover { filter: brightness(1.1); }
      &:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
    }

    & .comment-form-cookies-consent {
      display: flex;
      gap: var(--space-2);
      align-items: flex-start;
      font-size: var(--size-14);
      color: var(--color-fg-muted);

      & label { font-weight: 400; margin: 0; }
    }
  }

  .no-comments {
    font-size: var(--size-14);
    color: var(--color-fg-muted);
    font-style: italic;
  }

  /* ----------------------------------------------------------------------
     Archive / search / 404 — shared header chrome
     ---------------------------------------------------------------------- */
  .archive-header {
    padding-block: var(--space-6) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-6);

    & .archive-title {
      font-size: var(--size-32);
      margin-block: 0 var(--space-2);

      & span { color: var(--color-accent); }
    }

    & .archive-description, & .archive-meta {
      color: var(--color-fg-muted);
      margin: 0;
    }
  }

  .archive-list {
    display: grid;
    gap: var(--space-6);

    /* Multi-column on wider viewports so an archive of lead cards reads as a
       grid instead of one giant full-width card per row. */
    @media (min-width: 36rem) { grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 60rem) { grid-template-columns: repeat(3, 1fr); }
  }

  /* ----------------------------------------------------------------------
     Pagination — the WP nav.pagination markup from the_posts_pagination()
     ---------------------------------------------------------------------- */
  .pagination, .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-8);
    font-size: var(--size-14);
  }
  .pagination .page-numbers, .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.4em 0.7em;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    text-decoration: none;
    color: var(--color-fg);

    &:hover { background: var(--color-bg-soft); }
    &.current { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
  }

  /* ----------------------------------------------------------------------
     Shortcodes: [tldr] and [faq]
     ---------------------------------------------------------------------- */
  .tldr {
    background: var(--color-bg-soft);
    border-inline-start: 4px solid var(--color-accent);
    padding: var(--space-4) var(--space-5);
    margin-block: var(--space-6);
    border-radius: 4px;

    & .tldr__label {
      font-size: var(--size-12);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin: 0 0 var(--space-2);
    }
    & .tldr__list {
      margin: 0;
      padding-inline-start: var(--space-5);

      & li + li { margin-block-start: var(--space-1); }
    }
  }

  .faq {
    margin-block: var(--space-6);

    & .faq__item {
      border-block-start: 1px solid var(--color-border);

      &:last-child { border-block-end: 1px solid var(--color-border); }
    }
    & .faq__q {
      font-weight: 600;
      cursor: pointer;
      padding: var(--space-3) 0 var(--space-3) 1.5em;
      position: relative;
      list-style: none;

      &::-webkit-details-marker { display: none; }
      &::before {
        content: "+";
        position: absolute;
        left: 0;
        color: var(--color-accent);
        font-weight: 700;
        width: 1em;
      }
    }
    & .faq__item[open] .faq__q::before { content: "−"; }
    & .faq__a {
      padding: 0 0 var(--space-4) 1.5em;
      color: var(--color-fg-muted);
    }
  }

  /* ----------------------------------------------------------------------
     Blocks: freepress/callout
     ---------------------------------------------------------------------- */
  .callout {
    margin-block: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-soft);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: 4px;

    & p { margin: 0; }
  }

  .callout--quote {
    background: transparent;
    border-inline-start: none;
    border-block: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-5) 0;

    & blockquote {
      margin: 0;
      padding: 0;
      border: none;
      font-style: italic;
    }
    & blockquote p {
      font-size: var(--size-26);
      line-height: var(--lh-tight);
      color: var(--color-fg);
      font-style: italic;
      font-weight: 600;
    }
    & figcaption {
      margin-block-start: var(--space-3);
      font-size: var(--size-14);
      color: var(--color-fg-muted);
      font-style: normal;
    }
  }

  /* ----------------------------------------------------------------------
     Blocks: freepress/related-stories
     ---------------------------------------------------------------------- */
  .related-stories {
    margin-block: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-soft);
    border-radius: 4px;

    & .related-stories__label {
      font-size: var(--size-12);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin: 0 0 var(--space-3);
    }

    & .related-stories__list {
      list-style: none;
      margin: 0;
      padding: 0;

      & li + li {
        margin-block-start: var(--space-3);
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--color-border);
      }

      & a {
        display: block;
        text-decoration: none;
        color: var(--color-fg);

        &:hover .related-stories__title { text-decoration: underline; }
      }
    }

    & .related-stories__category {
      display: block;
      font-size: var(--size-12);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-block-end: 2px;
    }

    & .related-stories__title {
      font-size: var(--size-18);
      line-height: var(--lh-tight);
    }
  }
}

@layer utilities {
  .sr-only,
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

/* ====================================================================
   Print stylesheet — outside cascade layers so it wins over Customizer
   and dark-mode :root overrides. Forces ink-friendly black-on-white
   regardless of viewer's OS theme.
   ==================================================================== */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  a { color: #000 !important; }

  /* Hide page chrome */
  .skip-link,
  .site-header,
  .site-footer,
  .site-menu-toggle,
  .site-nav,
  .site-nav-backdrop,
  .article-comments,
  .pagination,
  .nav-links,
  .article-tags,
  .to-top,
  .article-share { display: none !important; }

  /* Reset container padding so we use the full paper width */
  .container, .measure {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  body { font-size: 11pt; line-height: 1.5; }

  /* Article header for paper */
  .article-header__title { font-size: 22pt; }
  .article-header__lede  { font-size: 12pt; }
  .article-header__meta  { font-size: 10pt; color: #444 !important; }
  .article-header__category { color: #000 !important; }

  /* Hero image */
  .article-hero { page-break-inside: avoid; margin-block: 1em; }
  .article-hero img { max-width: 100%; max-height: 3in; }
  .article-hero__caption { font-size: 9pt; color: #444 !important; }

  /* Body */
  .article-body { font-size: 11pt; }
  .article-body h2 { font-size: 14pt; page-break-after: avoid; }
  .article-body h3 { font-size: 12pt; page-break-after: avoid; }
  .article-body h4 { font-size: 11pt; page-break-after: avoid; }
  .article-body p, .article-body li { orphans: 3; widows: 3; }
  .article-body img, .article-body figure {
    page-break-inside: avoid;
    max-width: 100%;
  }
  .article-body figcaption { font-size: 9pt; color: #444 !important; }

  /* Print the URL after external links so paper readers can find sources */
  .article-body a[href]:not([href^="#"]):not([href^="javascript:"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }

  /* Strip decorative backgrounds; use neutral borders */
  .tldr,
  .callout,
  .related-stories,
  .faq,
  .article-body blockquote {
    background: transparent !important;
    border: 1px solid #aaa !important;
    border-radius: 0 !important;
    padding: 0.5em !important;
    page-break-inside: avoid;
    color: #000 !important;
  }
  .tldr__label,
  .related-stories__label { color: #000 !important; }

  /* FAQ — JS opens all <details> on beforeprint; these rules style the
     opened state for paper. */
  .faq__item { page-break-inside: avoid; }
  .faq__q    { padding: 0.25em 0 !important; }
  .faq__q::before { content: "" !important; }
  .faq__a    { padding: 0 0 0.5em 0 !important; color: #000 !important; }

  /* Avoid orphaned headings */
  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
}
