/*
Theme Name: Fresh Update News
Theme URI: https://freshupdatenews.com
Author: Myers Group
Description: Premium, fast, mobile-first news publishing theme for Fresh Update News — covering Liberia, Africa, and the world. Google Discover and Google News ready.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: fresh-update-news
*/

/* =========================================================
   DESIGN TOKENS
   Base identity: Navy / Red / Gray / White, Fraunces + IBM Plex Sans,
   gold used sparingly as a signature accent (stamp motif, badges).
   ========================================================= */
:root {
  /* Color */
  --color-navy: #0B1E3D;
  --color-navy-ink: #071429;
  --color-red: #C81E2C;
  --color-gold: #C99A3C;
  --color-white: #FFFFFF;
  --color-paper: #F7F6F3;
  --color-gray-100: #F1F1EF;
  --color-gray-300: #D8D8D4;
  --color-gray-600: #6B6E76;
  --color-ink: #1B1D22;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono-label: 'IBM Plex Sans', sans-serif;

  --step-caption: 0.75rem;
  --step-body: 1rem;
  --step-lede: 1.125rem;
  --step-h3: 1.375rem;
  --step-h2: 1.9rem;
  --step-h1: 2.75rem;
  --step-hero: 3.5rem;

  /* Layout */
  --radius-badge: 2px;
  --radius-card: 4px;
  --container-max: 1240px;
  --gutter: 24px;

  /* Motion */
  --ease-standard: cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  body.dark-mode {
    --color-paper: #10131A;
    --color-white: #171B24;
    --color-ink: #EDEEF0;
    --color-gray-100: #1B2029;
    --color-gray-300: #2A3040;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Global responsive-media baseline — this was previously missing entirely.
   Every <img> in the theme inherits this; component-level rules below only
   need to ADD behavior (object-fit, aspect-ratio) on top of it, never
   re-establish basic containment. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}
iframe, embed, object, video {
  max-width: 100%;
}
/* Browsers apply a default 1em 40px margin to <figure> — unreset, this can
   make figure-wrapped images (e.g. the article hero) sit inset with
   inconsistent gaps depending on viewport width. */
figure { margin: 0; }

html, body {
  max-width: 100%;
  overflow-x: hidden; /* defensive: guarantees no horizontal scroll even if
                         a future edit reintroduces an oversized element */
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  margin: 0;
  font-size: var(--step-body);
  line-height: 1.55;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--color-navy-ink);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 600;
}
a { color: inherit; text-decoration: none; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }

/* The "stamp" — signature element: a rotated postmark-style badge used on
   category tags and the breaking-news marker, evoking press/dispatch stamps. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono-label);
  font-weight: 600;
  font-size: var(--step-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-red);
  padding: 4px 10px;
  border-radius: var(--radius-badge);
  border: 1px solid rgba(0,0,0,0.08);
  transform: rotate(-1.2deg);
}
.stamp--gold { background: var(--color-gold); color: var(--color-navy-ink); }
.stamp--navy { background: var(--color-navy); }
.stamp--outline {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
}

@media (max-width: 720px) {
  :root {
    --step-hero: 2.1rem;
    --step-h1: 1.7rem;
    --step-h2: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}