/*
 * content.css — DayAfter content page styles
 *
 * This file is the single source of truth for:
 *   - Page headers (blog listing, roadmap, legal pages)
 *   - Blog post layout (header, body, meta, back link)
 *   - Post listing (blog index, updates index)
 *   - Roadmap page components
 *   - Legal / policy prose (privacy, terms)
 *   - Inline CTA boxes and callouts
 *   - Data tables (used in privacy page)
 *   - Prose link styling (accent colour with underline on hover)
 *
 * Loaded by content pages AFTER base.css + layout.css.
 * Homepage (index.html) does NOT load this file.
 *
 * Breakpoint system (mobile-first, matches layout.css):
 *   base       — 0 to 767px  (phones)
 *   48rem      — 768px+      (tablets, small laptops)
 *
 * Last updated: 2026-04-27
 */


/* ═══════════════════════════════════════════════════════════
   PROSE LINKS
   Content pages use accent-coloured links (unlike the homepage
   which inherits colour). Applied globally within content pages.
   ═══════════════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════════════
   PAGE HEADERS
   Shared top section for listing pages (blog index, updates,
   roadmap) and legal pages. Two variants:
     .page-header   — listing / info pages (roadmap, updates)
     .blog-header   — blog index (identical layout, distinct class)
     .post-header   — individual blog posts (narrower, with back link)
     .policy-header — legal pages (privacy, terms)
   ═══════════════════════════════════════════════════════════ */

/* ── Base header pattern (mobile) ─────────────────────────── */

.page-header,
.blog-header,
.policy-header {
  padding: 3.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
}

.page-header h1,
.blog-header h1,
.policy-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.page-header p,
.blog-header p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.policy-header .effective {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ── Post header (individual blog post) ───────────────────── */

.post-header {
  padding: 3.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
}

.post-back {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.15s;
}
.post-back:hover {
  color: var(--ink);
  text-decoration: none;
}

.post-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.post-meta {
  font-size: 0.875rem;
  color: var(--ink-faint);
}


/* ═══════════════════════════════════════════════════════════
   POST BODY — BLOG PROSE
   Typography for individual blog posts. Also used by the
   blog _template.html.
   ═══════════════════════════════════════════════════════════ */

.post-body {
  padding: 2rem 0 3.5rem;
}

.post-body p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.post-body p:last-child {
  margin-bottom: 0;
}

.post-body h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 3rem 0 0.75rem;
  color: var(--ink);
}
.post-body h2:first-child {
  margin-top: 0;
}

.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-style: italic;
}
.post-body blockquote p {
  color: var(--ink);
}

.post-body code {
  font-size: 0.9375rem;
  background: var(--bg-warm);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════
   POST LIST — BLOG & UPDATES INDEX
   Used by blog/index.html and updates/index.html.
   Each .post-item is an <a> wrapping date + title + excerpt.
   ═══════════════════════════════════════════════════════════ */

.post-list {
  padding: 1.5rem 0 3.5rem;
}

.post-item {
  display: block;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.post-item:first-child {
  padding-top: 0;
}
.post-item:last-child {
  border-bottom: none;
}
.post-item:hover .post-title {
  color: var(--accent);
}

.post-date {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  transition: color 0.15s;
}

.post-excerpt {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   Shown when a listing page has no content yet.
   ═══════════════════════════════════════════════════════════ */

.empty-state {
  padding: 5rem 0;
  text-align: center;
}

.empty-state p {
  font-size: 1rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

.empty-state a {
  color: var(--accent);
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════
   ROADMAP PAGE
   Section groups with icon + title + description rows.
   ═══════════════════════════════════════════════════════════ */

.roadmap-body {
  padding: 2rem 0 3.5rem;
}

.roadmap-section {
  margin-bottom: 3rem;
}
.roadmap-section:last-child {
  margin-bottom: 0;
}

.roadmap-section h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0;
}
.roadmap-item + .roadmap-item {
  border-top: 1px solid var(--border);
}

.roadmap-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--accent);
}

.roadmap-detail {
  flex: 1;
}

.roadmap-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.roadmap-desc {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   LEGAL / POLICY PROSE
   Used by privacy.html and terms.html.
   ═══════════════════════════════════════════════════════════ */

.policy-body {
  padding: 2rem 0 3.5rem;
}

.policy-body h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 3rem 0 0.75rem;
  color: var(--ink);
}
.policy-body h2:first-of-type {
  margin-top: 0;
}

.policy-body p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.policy-body p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════
   POLICY TL;DR BOX
   Accent-tinted summary box at the top of legal pages.
   ═══════════════════════════════════════════════════════════ */

.policy-tldr {
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}

.policy-tldr p {
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.policy-tldr p:last-child {
  margin-bottom: 0;
}

.policy-tldr strong {
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════
   DATA TABLE
   Used in the privacy page for the data-collection table.
   ═══════════════════════════════════════════════════════════ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.875rem;          /* scales to 0.9375rem at 48rem */
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.625rem 0.75rem;   /* scales to 0.75rem 1rem at 48rem */
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  line-height: 1.5;
}

.data-table th {
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: var(--bg-warm);
}

.data-table td:first-child {
  font-weight: 500;
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════
   CTA BOXES
   Inline call-to-action blocks used within blog posts
   and at the bottom of the roadmap.
   ═══════════════════════════════════════════════════════════ */

.cta-box {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2.5rem 0;
  text-align: center;
}

.cta-box p {
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.cta-box a {
  display: inline-block;
  background: var(--accent);
  color: var(--ink-on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
}
.cta-box a:hover {
  background: var(--accent-hover);
  text-decoration: none;
}

/* Roadmap CTA — lighter accent background variant */
.roadmap-cta {
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 3rem;
  text-align: center;
}

.roadmap-cta p {
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.roadmap-cta a {
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (768px+) ───────────────────────────────────── */
@media (min-width: 48rem) {

  /* Page headers get desktop spacing */
  .page-header,
  .blog-header,
  .policy-header {
    padding: 5rem 0 2.5rem;
  }

  .post-header {
    padding: 5rem 0 2.5rem;
  }

  /* Post body scales up */
  .post-body {
    padding: 3rem 0 5rem;
  }
  .post-body p {
    font-size: 1.0625rem;
  }

  /* Post list gets more room */
  .post-list {
    padding: 2.5rem 0 5rem;
  }

  /* Roadmap body scales up */
  .roadmap-body {
    padding: 3rem 0 5rem;
  }

  /* Policy body scales up */
  .policy-body {
    padding: 3rem 0 5rem;
  }

  /* Data table scales up */
  .data-table {
    font-size: 0.9375rem;
  }
  .data-table th,
  .data-table td {
    padding: 0.75rem 1rem;
  }

  /* Footer top can stay horizontal on wider screens */
  .footer-top {
    flex-direction: row;
  }
}