/* NewsTriggers — Canadian Signal Broadsheet Theme */
/* Applied via data-publication="newstriggers" on <html> */
/*
 * Identity: maple flag red as a disciplined accent — kickers, rules, wordmark —
 * on warm newsprint paper, with a deep ink footer. Signature motif is the
 * "flag bar": slim red/white/red banding borrowed from the Canadian flag,
 * used under the masthead and atop the footer. Sharp broadsheet edges; the
 * typography carries the voice, not decoration.
 */

:root {
  --brand-hue: 25;   /* maple red drives primaries + warm tinted neutrals */
  --accent-hue: 262; /* ink navy for footer / secondary surfaces */

  /* Typography */
  --font-headline: 'Fraunces', 'Georgia', serif;
  --font-body: 'Source Serif 4', 'Georgia', serif;
  --font-ui: 'Archivo', system-ui, sans-serif;

  /* Broadsheet geometry — sharp edges, hairline rules */
  --radius-card: 0px;
  --radius-button: 2px;
  --radius-image: 0px;
  --card-border-width: 1px;
  --card-shadow: none;
  --card-padding: var(--space-5);

  --hero-aspect: 2/1;
  --hero-overlay: linear-gradient(to top, oklch(15% 0.03 var(--accent-hue) / 0.85), oklch(15% 0.03 var(--accent-hue) / 0.25) 60%, transparent);

  --nav-style: rule;

  --divider-style: solid;
  --divider-thick: 3px;

  --surface-base: oklch(97.8% 0.007 25);   /* warm newsprint */
  --footer-bg: oklch(18% 0.035 var(--accent-hue)); /* deep ink navy */

  /* Flag red — strong enough for AA on paper at bold small sizes */
  --primary-light: oklch(58% 0.19 25);
  --primary:       oklch(51% 0.21 25);
  --primary-dark:  oklch(42% 0.19 25);
}

/* ─── Masthead ───────────────────────────────────────────────────────────── */

[data-publication="newstriggers"] .masthead-plate {
  padding-block: var(--space-4);
}

[data-publication="newstriggers"] .masthead-wordmark {
  color: var(--primary-dark);
  letter-spacing: -0.015em;
}

[data-publication="newstriggers"] .masthead-kicker {
  color: var(--neutral-500);
}

/* The flag bar: red / paper / red banding beneath the masthead plate */
[data-publication="newstriggers"] .flag-bar {
  height: 3px;
  border-top: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  background: var(--surface-base);
}

/* Section nav: red active rule, red hover rule */
[data-publication="newstriggers"] .section-nav a[aria-current="page"],
[data-publication="newstriggers"] .section-nav a[class*="border-b-2"] {
  border-bottom-color: var(--primary) !important;
  color: var(--primary-dark);
}

[data-publication="newstriggers"] .section-nav a:hover {
  color: var(--primary-dark);
}

/* ─── Section labels & headers ───────────────────────────────────────────── */

/* Kickers: red, bold, tracked, with a square maple bullet */
[data-publication="newstriggers"] .category-label {
  color: var(--primary);
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
}

[data-publication="newstriggers"] .category-label::before {
  content: '\25A0'; /* black square */
  font-size: 0.6em;
  vertical-align: 0.25em;
  margin-right: 0.45em;
}

[data-publication="newstriggers"] .category-label:hover {
  color: var(--primary-dark);
}

/* Section header rules: ink line with a red over-rule */
[data-publication="newstriggers"] .section-divider,
[data-publication="newstriggers"] .section-header-rule {
  border-top: 1px solid var(--neutral-300);
  position: relative;
}

[data-publication="newstriggers"] .section-divider::before,
[data-publication="newstriggers"] .section-header-rule::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--primary);
}

/* ─── Cards & links ──────────────────────────────────────────────────────── */

[data-publication="newstriggers"] .article-card {
  transition: background-color var(--duration-fast) ease;
}

[data-publication="newstriggers"] .article-card:hover {
  background-color: oklch(96% 0.008 25);
}

[data-publication="newstriggers"] .article-card h2 > a:hover,
[data-publication="newstriggers"] .article-card h3 > a:hover,
[data-publication="newstriggers"] .article-card h4 > a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
}

/* Featured rail hero title gets the red underline on hover too */
[data-publication="newstriggers"] a.font-headline:hover {
  color: var(--primary-dark);
}

/* ─── Article page ───────────────────────────────────────────────────────── */

/* Drop cap in flag red */
[data-publication="newstriggers"] .article-body > p:first-of-type::first-letter {
  font-family: var(--font-headline);
  float: left;
  font-size: 4.2em;
  line-height: 0.8;
  padding-right: 0.08em;
  margin-top: 0.06em;
  font-weight: 900;
  color: var(--primary);
}

/* Article headline weight */
[data-publication="newstriggers"] .article-headline {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ─── Breaking ticker ────────────────────────────────────────────────────── */

[data-publication="newstriggers"] .breaking-ticker {
  background: var(--primary);
  color: white;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

/* Flag bar echo above the footer */
[data-publication="newstriggers"] .site-footer::before {
  content: '';
  display: block;
  height: 3px;
  border-top: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  background: transparent;
}

[data-publication="newstriggers"] .site-footer h4 {
  color: oklch(78% 0.09 25);
}

[data-publication="newstriggers"] .site-footer a:hover {
  color: oklch(80% 0.11 25);
}

/* ─── Buttons & focus ────────────────────────────────────────────────────── */

[data-publication="newstriggers"] .btn,
[data-publication="newstriggers"] a[class*='btn-primary'] {
  border-radius: var(--radius-button);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-publication="newstriggers"] * {
    transition-duration: 0.01ms !important;
  }
}