/* News section styles  (/news/ and /news/<slug>/).
   -------------------------------------------------------------------------
   This file is LAYERED ON TOP OF legal.css. The News pages link legal.css
   first (for the design tokens, both themes, the base64 logo, the body /
   container / header / footer shell) and then this file. So this file only
   adds the two things the policy pages don't have:
     1. the FULL top menu (nav links + theme toggle + "Book a demo" + mobile
        burger), matching the homepage — not just the logo + back-link.
     2. a CENTERED article column for individual posts (text stays
        left-aligned; the column itself is centered on the page).
   Values (colors, spacing, easing, radius) are reused from legal.css tokens
   so everything matches the rest of the site in both dark and light themes. */

/* ---------- Full top menu ---------- */
/* legal.css sets .header-inner to space-between (logo | back-link). The News
   header has three groups (logo | nav | actions), so we restore the homepage's
   flex behaviour: nav sits next to the logo, actions pushed to the right. */
.header-inner { justify-content: flex-start; }

.site-nav { display: flex; }
.nav-links { display: flex; align-items: center; gap: var(--s3); margin-left: var(--s2); }
.nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.theme-toggle {
  appearance: none; background: transparent;
  border: 1px solid var(--border); border-radius: 3px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.theme-toggle:hover { border-color: var(--text); color: var(--text); transform: translateY(-1px); }
/* Show sun in dark mode (click -> go light), moon in light mode (click -> go dark). */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* "Book a demo" button — mirrors the homepage solid button, sized small. */
.btn-demo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 3px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--accent); color: #08090b; border: 1px solid var(--accent);
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), opacity 0.2s ease;
}
.btn-demo:hover { text-decoration: none; transform: translateY(-1px); opacity: 0.92; }

.nav-burger {
  display: none; appearance: none; background: transparent;
  border: 1px solid var(--border); border-radius: 3px;
  width: 40px; height: 38px; cursor: pointer; color: var(--text);
  align-items: center; justify-content: center;
}

/* Mobile: collapse the nav links into a dropdown behind the burger. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: var(--s2) var(--s3) var(--s3); margin: 0;
  }
  .nav-open .nav-links a { padding: 12px 4px; border-bottom: 1px solid var(--border); font-size: 16px; }
  .nav-open .nav-links a:last-child { border-bottom: 0; }
}

/* ---------- News landing page (/news/) ---------- */
.news { padding-block: var(--s6) var(--s8); }
.news-inner { max-width: 820px; margin-inline: auto; }
.news-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s2);
}
.news h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--s2); }
.news-sub { color: var(--muted); font-size: 17px; margin: 0 0 var(--s6); max-width: 60ch; }

.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.news-card {
  border: 1px solid var(--border); border-radius: 3px;
  padding: var(--s4);
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.news-card:hover { border-color: var(--text); transform: translateY(-2px); }
.news-card:hover a { text-decoration: none; }
.news-card .card-meta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s1);
}
.news-card h2 { font-size: 21px; line-height: 1.25; margin: 0 0 var(--s2); }
.news-card h2 a { color: var(--text); }
.news-card .card-teaser { color: var(--muted); margin: 0 0 var(--s3); }
.news-card .card-more { font-size: 14px; font-weight: 600; color: var(--link); }

/* ---------- Individual post (/news/<slug>/) ---------- */
/* The centering you asked for: the article column is capped at a readable
   width AND centered on the page (margin-inline: auto). Text inside stays
   left-aligned — only the column is centered, unlike the policy pages where
   it hugs the left edge. */
.post { padding-block: var(--s6) var(--s8); }
.post-inner { max-width: var(--measure); margin-inline: auto; }
.post-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s2);
}
.post h1 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 var(--s2); }
.post-sub { color: var(--muted); font-size: 19px; line-height: 1.5; font-style: italic; margin: 0 0 var(--s4); }
.post-meta { color: var(--muted); font-size: 14.5px; margin: 0 0 var(--s5); }
.post-body p { margin: 0 0 1.1em; }
.post-body h2 { font-size: 22px; margin: var(--s5) 0 var(--s2); }
.post-body ul { margin: 0 0 1.1em; padding-left: 1.4em; }
.post-body li { margin: 0 0 0.5em; }
.post-body strong { font-weight: 650; }
.post-body blockquote {
  margin: var(--s4) 0; padding: 4px 0 4px var(--s3);
  border-left: 3px solid var(--accent); color: var(--text); font-size: 18px;
}

.post-foot {
  margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between;
}
.post-foot a.back { color: var(--muted); font-size: 14.5px; font-weight: 500; }

/* ---------- Full site footer (matches the homepage) ---------- */
/* legal.css gives .site-footer a small single-row footer. The News pages use
   the homepage's richer three-column footer instead, so these rules override
   legal.css (news.css is linked after it). Values copied from index.html.
   NOTE: the homepage markup uses <h3> for the footer column headings, so these
   selectors target h3 (the homepage's own CSS targets h4 — a harmless mismatch
   there; here we match the markup so the headings style correctly). */
.site-footer { border-top: 1px solid var(--border); padding-block: var(--s6) var(--s4); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--s5);
}
.footer-brand .brand { display: inline-flex; align-items: center; color: var(--text); }
.footer-brand .brand:hover { text-decoration: none; }
.logo-footer { height: 22px; width: 252px; }
.footer-brand p { margin-top: var(--s2); color: var(--muted); font-size: 14px; max-width: 24em; }
.footer-contact { margin-top: var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s5); max-width: 30em; }
.footer-contact h3 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s1);
}
.footer-contact p { margin: 0 0 var(--s2); color: var(--muted); font-size: 14px; line-height: 1.7; }
.footer-contact p:last-child { margin-bottom: 0; }
.footer-contact a { color: var(--muted); font-size: 14px; }
.footer-contact a:hover { color: var(--text); text-decoration: none; }
.footer-col h3 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: var(--s2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-top: 10px; }
.footer-col a { color: var(--muted); font-size: 14px; }
.footer-col a:hover { color: var(--text); text-decoration: none; }
.footer-legal {
  margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  font-size: 12.5px; color: var(--faint);
}
.footer-policies { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.footer-policies a { color: var(--muted); }
.footer-policies a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contact { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .news-inner, .post-inner { max-width: none; }
}