/*
Theme Name: AurumPress
Description: Minimalist luxury editorial theme for gold prices, jewelry, watches, and investment content. Live multi-country gold pricing powered by gold-price-web's own Postgres pipeline.
Author: gold-price-web
Version: 1.0.0
Text Domain: aurumpress
*/

/* ---------------------------------------------------------------------
 * Self-hosted fonts (OFL-licensed Inter + Playfair Display variable
 * fonts, downloaded directly from Google Fonts' own CDN — no third-party
 * request at page-load time, faster and more private than a CDN <link>).
 * --------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("assets/fonts/PlayfairDisplay-Variable.woff2") format("woff2");
}

/* Design tokens (colors, typography scale, spacing, radius, shadows,
 * motion, breakpoints, icons — light + dark mode) live in
 * assets/css/tokens.css, enqueued before this file. Every --ink / --gold
 * / etc. name below is a legacy alias defined there onto the semantic
 * --color-*/--text-*/--space-* tokens; see tokens.css for the full
 * system and docs/design-system.md for usage guidance. */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  /* Explicit, not inherited: WordPress's own theme.json-generated global
     styles set a literal (non-dark-aware) color on body, which can win
     the cascade over this theme's own dark-mode-aware body color rule
     depending on enqueue order. Headings set their own color so they
     never silently inherit that flat value in dark mode. */
  color: var(--color-text-primary);
}

a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: var(--color-text-primary); }
img { max-width: 100%; display: block; }

/* Visible keyboard focus everywhere — accessibility AA requirement. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: var(--border-focus-width) solid var(--gold-ink);
  outline-offset: var(--border-focus-offset);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--color-text-primary);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.search-form { display: flex; gap: var(--space-2-5); justify-content: center; flex-wrap: wrap; }
.search-form .search-field {
  padding: var(--space-3) var(--space-4); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-body-sm); min-width: 240px;
  background: var(--white); color: var(--color-text-primary);
}
.search-form .search-submit {
  padding: var(--space-3) var(--space-5); border: none; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--color-interactive-text); font-weight: 600; cursor: pointer;
}

.aur-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--space-5);
}
.aur-narrow { max-width: var(--content-w); margin: 0 auto; }

.aur-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--gold-ink);
  margin-bottom: var(--space-3-5);
}
.aur-eyebrow::before { content: ""; width: var(--space-4-5); height: var(--border-width-hairline); background: var(--gold); display: inline-block; }

.aur-section { padding: var(--space-14) 0; }
.aur-section-alt { background: var(--bg-light); }
.aur-section-head { max-width: 620px; margin: 0 auto var(--space-10); text-align: center; }
.aur-section-head h2 { font-size: var(--text-h2); }
.aur-section-head p { color: var(--ink-soft); font-size: var(--text-body); }

/* ---------- Buttons ---------- */
.aur-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-body-sm);
  border: var(--border-width-hairline) solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  font-family: var(--font-body);
}
.aur-btn:hover { transform: translateY(-1px); }
.aur-btn-primary { background: var(--gold); color: var(--color-interactive-text); transition: background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.aur-btn-primary:hover { background: var(--color-interactive-hover); box-shadow: var(--shadow); }
.aur-btn-secondary { border-color: var(--color-text-primary); color: var(--color-text-primary); background: var(--white); }
.aur-btn-secondary:hover { border-color: var(--gold); }

/* ---------- Scroll reveal (assets/js/main.js toggles .is-visible) ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Top promo bar ---------- */
/* Fixed dark background (NOT var(--color-text-primary)) — same bug class as the hero:
   --color-text-primary flips to a light color in dark mode (it means
   "text color", not literally "ink-black"), which would turn this
   background light while .aur-promo-text stayed a hardcoded light color
   — light-on-light.
   Caught by a real Lighthouse accessibility run (color-contrast: 0). */
.aur-promo-bar { background: var(--color-surface-inverse-fixed); color: var(--color-text-inverse-fixed); font-size: var(--text-small); }
.aur-promo-inner { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-2) var(--space-5); flex-wrap: wrap; text-align: center; position: relative; }
.aur-promo-text { color: var(--color-text-inverse-fixed-secondary); }
.aur-promo-cta { background: var(--gold); color: var(--color-interactive-text); font-weight: 700; padding: var(--space-1) var(--space-3-5); border-radius: var(--radius-pill); font-size: var(--text-caption); white-space: nowrap; }
.aur-promo-close {
  background: transparent; border: none; color: var(--color-text-inverse-fixed-muted); font-size: var(--text-h5); line-height: 1;
  cursor: pointer; padding: 0 var(--space-1); position: absolute; inset-inline-end: var(--space-3-5); top: 50%; transform: translateY(-50%);
}
.aur-promo-close:hover { color: var(--color-text-inverse-fixed); }
.aur-promo-bar.is-hidden { display: none; }
@media (max-width: 640px) { .aur-promo-close { position: static; transform: none; } }

/* ---------- Language switcher ---------- */
.aur-lang-switch { display: flex; border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.aur-lang-btn { background: transparent; border: none; padding: var(--space-2) var(--space-3); font-size: var(--text-caption); font-weight: 600; color: var(--ink-soft); cursor: pointer; font-family: var(--font-body); }
.aur-lang-btn.is-active { background: var(--gold); color: var(--color-interactive-text); }
.aur-lang-btn:not(.is-active):hover { color: var(--color-text-primary); }
.aur-lang-btn:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.aur-lang-btn:disabled:hover { color: var(--color-text-disabled); }

/* ---------- Header ---------- */
/* Sticky header: solid by default (every page except the front page has
   no hero underneath it, so there's nothing for "transparent" to sit on
   — starting transparent there would just be illegible dark-on-white
   text for a frame or two). On the front page specifically (body.aur-has-
   hero), it starts fully transparent over the dark hero with light text,
   then crossfades to this same solid state once assets/js/main.js adds
   .is-scrolled past a small scroll threshold. No blur/backdrop-filter —
   a soft opacity + color transition reads as premium; a frosted-glass
   panel reads as an app chrome, which this explicitly is not. */
/* .aur-topbar (promo bar + header together) is the fixed overlay — NOT
   .aur-header alone, which is why the promo bar sits above the header
   inside it rather than the two colliding at the same fixed position.
   Every page except the front page needs its content pushed down by this
   stack's rendered height to avoid sitting underneath it; the front
   page's hero deliberately does NOT get that (see .aur-hero's own
   padding-top instead) since it wants to extend up behind the
   transparent header. assets/js/main.js measures the stack's actual
   height (the promo bar can wrap to multiple lines, or be dismissed) and
   writes it into --header-height, so this isn't a guessed constant. */
.aur-topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 30;
}
body:not(.aur-has-hero) { padding-top: var(--header-height); }

.aur-header {
  border-bottom: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-bg);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.aur-header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; gap: var(--space-4); }
.aur-logo {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h5); color: var(--color-text-primary);
  transition: color var(--duration-base) var(--ease-standard);
}
.aur-logo span { color: var(--gold-ink); }

body.aur-has-hero .aur-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-logo,
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-logo span,
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-nav a,
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-nav-toggle,
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-icon-btn,
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-lang-btn {
  color: var(--color-text-inverse-fixed);
}
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-nav-toggle,
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-icon-btn {
  background: transparent;
  border-color: var(--color-border-inverse-fixed-subtle);
}
body.aur-has-hero .aur-header:not(.is-scrolled) .aur-lang-switch {
  border-color: var(--color-border-inverse-fixed-subtle);
}

.aur-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--color-text-primary);
  cursor: pointer;
}
.aur-header-actions { display: flex; align-items: center; gap: var(--space-2-5); }
.aur-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--color-text-primary);
  cursor: pointer;
}
.aur-icon-btn:hover { border-color: var(--gold); }

.aur-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--white);
  border-bottom: var(--border-width-hairline) solid var(--line);
  padding: var(--space-3) var(--space-5) var(--space-5);
  flex-direction: column;
  gap: var(--space-1);
}
.aur-nav.is-open { display: flex; }
.aur-nav a { display: block; padding: var(--space-2-5) var(--space-1); font-weight: 500; color: var(--ink-soft); }
.aur-nav a:hover { color: var(--color-text-primary); }

@media (min-width: 900px) {
  .aur-nav-toggle { display: none; }
  .aur-nav {
    display: flex;
    position: static;
    flex-direction: row;
    border: none;
    padding: 0;
    background: transparent;
    gap: var(--space-6);
  }
}

/* ---------- Hero ---------- */
.aur-hero {
  position: relative;
  padding: calc(var(--space-16) + var(--header-height)) 0 var(--space-12);
  text-align: center;
  overflow: hidden;
  /* Fixed white, NOT var(--white) — the hero's dark gradient background is
     the same in light and dark mode, but --white itself flips to near-black
     in dark mode (it means "page background", not literally white), which
     made this text nearly invisible against the hero. See the
     --color-*-inverse-fixed tokens in tokens.css. */
  color: var(--color-text-inverse-fixed);
  background:
    radial-gradient(60% 90% at 15% 0%, var(--gradient-glow-strong), transparent 60%),
    radial-gradient(70% 90% at 90% 10%, var(--gradient-glow-soft), transparent 55%),
    linear-gradient(160deg, var(--gradient-hero-stop-1) 0%, var(--gradient-hero-stop-2) 55%, var(--gradient-hero-stop-3) 100%);
}
.aur-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, var(--texture-inverse-fixed-overlay) 0 2px, transparent 2px 6px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.aur-hero > * { position: relative; z-index: 1; }
.aur-hero .aur-eyebrow { color: var(--gold); }
.aur-hero .aur-eyebrow::before { background: var(--gold); }
.aur-hero h1 { font-size: var(--text-hero); max-width: 780px; margin: 0 auto var(--space-4-5); color: var(--color-text-inverse-fixed); }
.aur-hero-sub { max-width: 600px; margin: 0 auto var(--space-8); color: var(--color-text-inverse-fixed-secondary); font-size: var(--text-body); }
.aur-hero-ctas { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-11); }
.aur-hero .aur-btn-secondary { background: transparent; border-color: var(--color-border-inverse-fixed-strong); color: var(--color-text-inverse-fixed); }
.aur-hero .aur-btn-secondary:hover { border-color: var(--gold); }

/* ---------- Live price widget ---------- */
.aur-widget {
  background: var(--card);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7);
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow);
  color: var(--color-text-primary);
  text-align: left;
}
.aur-widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4-5); flex-wrap: wrap; gap: var(--space-2); }
.aur-widget-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h6); }
.aur-widget-change { font-size: var(--text-small); font-weight: 700; padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-pill); }
.aur-widget-change.up { background: var(--color-success-bg); color: var(--color-success-text); }
.aur-widget-change.down { background: var(--color-danger-bg); color: var(--color-danger-text); }
.aur-widget-change.flat { background: var(--bg-light); color: var(--ink-soft); }
.aur-widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2-5); }
.aur-widget-karat { text-align: center; padding: var(--space-3) var(--space-1); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm); }
.aur-widget-karat .k { font-size: var(--text-caption); color: var(--ink-soft); font-weight: 600; }
.aur-widget-karat .v { font-family: var(--font-heading); font-size: var(--text-body); font-weight: 700; margin-top: var(--space-1); }
.aur-widget-updated { text-align: center; font-size: var(--text-caption); color: var(--ink-soft); margin-top: var(--space-4); }

/* Stock-ticker marquee: .aur-ticker-track holds TWO copies of the same
   item list side by side (the second marked aria-hidden — a screen
   reader only needs the list once) and animates left by exactly 50% of
   its own width, i.e. exactly one full list, so the loop point is
   invisible. Paused on hover/focus so it's readable and doesn't fight a
   keyboard user tabbing through the chip links; frozen entirely by the
   theme's existing global prefers-reduced-motion override. */
.aur-ticker-wrap { overflow: hidden; padding-bottom: var(--space-1-5); margin-top: var(--space-8); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.aur-ticker-track {
  display: flex;
  width: max-content;
  animation: aur-ticker-scroll 32s linear infinite;
}
.aur-ticker-wrap:hover .aur-ticker-track,
.aur-ticker-wrap:focus-within .aur-ticker-track {
  animation-play-state: paused;
}
@keyframes aur-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.aur-ticker { display: flex; gap: var(--space-3); padding: var(--space-1) var(--space-5); }
.aur-chip {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-bg-inverse-fixed-subtle-2);
  border: var(--border-width-hairline) solid var(--color-border-inverse-fixed-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  white-space: nowrap;
  color: var(--color-text-inverse-fixed); /* fixed — sits on the always-dark hero background in both modes */
}
.aur-chip .flag { font-size: var(--text-body); }
.aur-chip .amt { font-weight: 700; font-family: var(--font-heading); }
.aur-chip .cur { color: var(--color-text-inverse-fixed-secondary); font-size: var(--text-caption); }

/* ---------- Pillars ---------- */
.aur-pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 780px) { .aur-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.aur-pillar { text-align: center; padding: 0 var(--space-2); }
.aur-pillar-mark {
  width: 46px; height: 46px; margin: 0 auto var(--space-4);
  border: var(--border-width-hairline) solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-ink); font-family: var(--font-heading); font-size: var(--text-h6);
}
.aur-pillar h3 { font-size: var(--text-h6); margin-bottom: var(--space-2); }
.aur-pillar p { color: var(--ink-soft); font-size: var(--text-body-sm); margin: 0; }

/* ---------- Category chips ---------- */
.aur-categories { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.aur-cat-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4-5); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-primary); background: var(--white);
  transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.aur-cat-chip:hover { border-color: var(--gold); transform: translateY(-1px); color: var(--color-text-primary); }

/* ---------- Card grids ---------- */
.aur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4-5); }
.aur-card {
  background: var(--card);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease);
}
.aur-card:hover { background: var(--color-surface-hover); box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--color-border-hover-accent); }
.aur-country-card { display: flex; flex-direction: column; gap: var(--space-2); }
.aur-country-card .flag { font-size: var(--text-h3); }
.aur-country-card .name { font-weight: 600; font-size: var(--text-body); }
.aur-country-card .price { font-family: var(--font-heading); font-size: var(--text-h6); color: var(--gold-ink); }
.aur-country-card .cta { font-size: var(--text-small); font-weight: 600; margin-top: var(--space-1); }
.aur-country-card .cta::after { content: " \2192"; }
.aur-country-card.is-disabled { opacity: 0.6; cursor: default; }
.aur-country-card.is-disabled:hover { transform: none; box-shadow: none; border-color: var(--line); }
.aur-country-card.is-disabled .cta { margin-top: var(--space-2); }
.aur-country-card.is-disabled .cta::after { content: ""; }

/* ---------- App promotion banner ---------- */
.aur-app-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  margin-bottom: var(--space-14);
}
@media (min-width: 900px) {
  .aur-app-promo { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}
.aur-app-promo-badge { margin-bottom: var(--space-5); }
.aur-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: aur-live-pulse 2s var(--ease-standard) infinite;
}
@keyframes aur-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.aur-app-promo-copy h2 { font-size: var(--text-h2); margin-bottom: var(--space-4); }
.aur-app-promo-copy > p { color: var(--ink-soft); font-size: var(--text-body); max-width: 46ch; margin: 0 0 var(--space-8); }
.aur-app-promo-stats {
  display: flex; gap: var(--space-6);
  padding-block: var(--space-6);
  margin-bottom: var(--space-8);
  border-block: var(--border-width-hairline) solid var(--line);
}
.aur-app-promo-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.aur-app-promo-stat strong { font-family: var(--font-heading); font-size: var(--text-h4); color: var(--color-text-primary); }
.aur-app-promo-stat span { font-size: var(--text-caption); color: var(--ink-soft); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.aur-app-promo-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(60% 80% at 20% 10%, var(--gradient-glow-soft), transparent 60%),
    linear-gradient(160deg, var(--gradient-hero-stop-1) 0%, var(--gradient-hero-stop-2) 55%, var(--gradient-hero-stop-3) 100%);
}
.aur-app-promo-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.aur-app-promo-chip {
  position: absolute;
  inset-inline-start: var(--space-5);
  bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  max-width: calc(100% - var(--space-10));
}
.aur-app-promo-chip-icon {
  flex: none;
  width: var(--space-8); height: var(--space-8);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--color-interactive-text);
}
.aur-app-promo-chip .k { display: block; font-size: var(--text-caption); color: var(--ink-soft); }
.aur-app-promo-chip .v { display: block; font-family: var(--font-heading); font-size: var(--text-h6); color: var(--color-text-primary); }

.aur-app-countries-head { text-align: center; margin-bottom: var(--space-8); }
.aur-app-countries-head h3 { font-size: var(--text-h3); }

/* ---------- Articles ---------- */
.aur-news-card { display: flex; flex-direction: column; gap: var(--space-1); padding: 0; overflow: hidden; }
.aur-news-card .thumb { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--bg-light); }
.aur-news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); }
.aur-news-card:hover .thumb img { transform: scale(1.06); }
.aur-news-card .body { padding: var(--space-4-5) var(--space-5) var(--space-5); }
.aur-news-meta { display: flex; gap: var(--space-2-5); align-items: center; font-size: var(--text-caption); color: var(--ink-soft); margin-bottom: var(--space-2); flex-wrap: wrap; }
.aur-news-meta .cat { color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.aur-news-card h3 { font-size: var(--text-h6); margin: 0 0 var(--space-2); }
.aur-news-card p { color: var(--ink-soft); font-size: var(--text-body-sm); margin: 0; }

.aur-insight-feature { display: grid; grid-template-columns: 1fr; gap: var(--space-7); margin-bottom: var(--space-8); }
@media (min-width: 860px) { .aur-insight-feature { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.aur-insight-feature .thumb { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--bg-light); }
.aur-insight-feature .thumb img { width: 100%; height: 100%; object-fit: cover; }
.aur-insight-feature h3 { font-size: var(--text-h3); }

.aur-empty-state {
  text-align: center; color: var(--ink-soft);
  border: var(--border-width-hairline) dashed var(--line); border-radius: var(--radius);
  padding: var(--space-11) var(--space-5);
}

/* ---------- Gold Analysis Today (static, see inc/analysis.php) ---------- */
.aur-analysis-card {
  background: var(--card);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.aur-analysis-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.aur-analysis-updated { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-caption); color: var(--ink-soft); }
.aur-analysis-card h2 { font-size: var(--text-h3); margin-bottom: var(--space-5); }
.aur-analysis-body { color: var(--color-text-secondary); font-size: var(--text-body); }
.aur-analysis-body p { margin: 0 0 1.2em; }
.aur-analysis-body p:last-child { margin-bottom: 0; }
.aur-analysis-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-weight: 600; }

/* Small layout utilities — for the rare one-off spacing/alignment need in
   a template file that doesn't warrant its own named component class.
   Still tokens only; never a substitute for a real component class when
   a pattern repeats more than once or twice. */
.aur-text-center { text-align: center; }
.aur-mt-6 { margin-top: var(--space-6); }
.aur-mb-7 { margin-bottom: var(--space-7); }
.aur-lead { color: var(--ink-soft); font-size: var(--text-body); }

/* ---------- Newsletter ---------- */
.aur-newsletter {
  text-align: center;
  background: var(--color-text-primary);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--space-14) var(--space-6);
  max-width: 720px;
  margin: 0 auto;
}
.aur-newsletter h2 { color: var(--white); }
.aur-newsletter p { color: var(--color-text-on-contrast-muted); margin-bottom: var(--space-6); }
.aur-newsletter-form { display: flex; gap: var(--space-2-5); max-width: 420px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.aur-newsletter-form input[type="email"] {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4-5);
  border-radius: var(--radius-pill);
  border: var(--border-width-hairline) solid var(--color-border-on-contrast);
  background: var(--color-bg-on-contrast-subtle);
  color: var(--white);
  font-size: var(--text-body-sm);
  font-family: var(--font-body);
}
.aur-newsletter-form input[type="email"]::placeholder { color: var(--color-text-on-contrast-muted); }
.aur-newsletter-note { font-size: var(--text-small); color: var(--color-text-on-contrast-muted); margin-top: var(--space-3-5); }
.aur-newsletter-status { margin-top: var(--space-3-5); font-size: var(--text-body-sm); min-height: 1.2em; }

/* ---------- Single / page ---------- */
.aur-article { max-width: var(--content-w); margin: 0 auto; padding: var(--space-12) var(--space-5) var(--space-20); }
.aur-back-link { display: inline-block; margin-bottom: var(--space-5); color: var(--ink-soft); font-size: var(--text-body-sm); }
.aur-article h1 { font-size: var(--text-h1); }
.aur-article-thumb { border-radius: var(--radius); overflow: hidden; margin: var(--space-6) 0; aspect-ratio: 16/9; }
.aur-article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aur-article-body { font-size: var(--text-h6); margin-top: var(--space-5); }
.aur-article-body p { margin: 0 0 1.2em; }
.aur-article-body img { border-radius: var(--radius); margin: 1.5em 0; }
.aur-article-body h2 { font-size: var(--text-h3); margin-top: 1.4em; }

/* Native accordion for FAQ — zero custom JS, fully keyboard/AT-accessible. */
.aur-faq-item {
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  overflow: hidden;
  background: var(--card);
}
.aur-faq-item summary {
  cursor: pointer;
  padding: var(--space-4-5) var(--space-5);
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.aur-faq-item summary::-webkit-details-marker { display: none; }
.aur-faq-item summary::after { content: "+"; color: var(--gold-ink); font-size: var(--text-h5); }
.aur-faq-item[open] summary::after { content: "\2212"; }
.aur-faq-item .aur-faq-body { padding: 0 var(--space-5) var(--space-5); color: var(--ink-soft); }

.aur-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 780px) { .aur-contact-grid { grid-template-columns: 1fr 1fr; } }
.aur-form-field { margin-bottom: var(--space-4); }
.aur-form-field label { display: block; font-size: var(--text-body-sm); font-weight: 600; margin-bottom: var(--space-1-5); }
.aur-form-field input, .aur-form-field textarea {
  width: 100%; padding: var(--space-3) var(--space-3-5); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-body-sm); background: var(--white); color: var(--color-text-primary);
}

/* ---------- Footer ---------- */
/* Dark editorial footer — a fixed surface (--color-surface-inverse-fixed
   family, see tokens.css), not theme-mode-aware: it's the same considered
   dark at the foot of every page regardless of the visitor's light/dark
   preference, the same way the hero and promo bar are. */
.aur-footer { border-top: var(--border-width-hairline) solid var(--color-footer-border); padding: var(--space-14) 0 var(--space-7); background: var(--color-footer-bg); color: var(--color-footer-text); }
.aur-footer .aur-logo { color: var(--color-footer-text); }
.aur-footer .aur-logo span { color: var(--gold); }
.aur-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-8); }
@media (min-width: 780px) { .aur-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.aur-footer-tagline { color: var(--color-footer-muted); font-size: var(--text-body-sm); max-width: 320px; margin-top: var(--space-3); }
.aur-footer-col h3 { font-size: var(--text-body-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-4); font-family: var(--font-body); font-weight: 600; color: var(--color-footer-text); }
.aur-footer-col a { display: block; font-size: var(--text-body-sm); color: var(--color-footer-muted); margin-bottom: var(--space-3); transition: color var(--duration-fast) var(--ease-standard); }
.aur-footer-col a:hover { color: var(--gold); }
.aur-footer-bottom {
  border-top: var(--border-width-hairline) solid var(--color-footer-border);
  padding-top: var(--space-4-5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-small); color: var(--color-footer-muted);
}

/* ---------- Counter animation target ---------- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---------- Icons ---------- */
.aur-icon { display: inline-block; flex: none; color: var(--icon-color); vertical-align: -0.15em; }
.aur-icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.aur-icon-md { width: var(--icon-size-md); height: var(--icon-size-md); }
.aur-icon-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }
.aur-icon-xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }
.aur-icon-muted { color: var(--icon-color-muted); }
.aur-icon-accent { color: var(--icon-color-accent); }
/* Sun/moon pair inside .aur-dark-toggle: CSS shows the icon for the
   action the button performs (moon = "switch to dark" while in light
   mode, sun = "switch to light" while in dark mode), no JS needed. */
.aur-dark-toggle .aur-icon-sun { display: none; }
:root[data-theme="dark"] .aur-dark-toggle .aur-icon-sun { display: inline-block; }
:root[data-theme="dark"] .aur-dark-toggle .aur-icon-moon { display: none; }

/* =========================================================================
 * Component foundation — every rule below consumes tokens only. These are
 * the base building blocks (badges, alerts, pagination, breadcrumbs,
 * tables, form controls) any future page/template composes with, per the
 * Phase 2 design-system brief. See docs/design-system.md for usage.
 * ========================================================================= */

/* ---------- Badges ---------- */
.aur-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: var(--leading-tight);
  white-space: nowrap;
  background: var(--color-bg-subtle);
  color: var(--ink-soft);
  border: var(--border-width-hairline) solid var(--color-border);
}
.aur-badge-gold    { background: var(--gold-100); color: var(--color-text-accent); border-color: var(--gold-300); }
.aur-badge-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.aur-badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.aur-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border-color: var(--color-danger-border); }
.aur-badge-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border-color: var(--color-info-border); }

/* ---------- Alerts ---------- */
.aur-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width-hairline) solid var(--color-border);
  border-inline-start-width: var(--border-width-heavy);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-size: var(--text-body-sm);
}
.aur-alert .aur-alert-icon { flex: none; width: var(--icon-size-md); height: var(--icon-size-md); color: var(--icon-color); }
.aur-alert .aur-alert-title { font-weight: 700; margin-bottom: var(--space-1); }
.aur-alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.aur-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.aur-alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }
.aur-alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info-text); }

/* ---------- Pagination ---------- */
.aur-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.aur-pagination li { display: contents; }
.aur-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--space-8); height: var(--space-8);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body-sm); font-weight: 600;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.aur-page-link:hover { border-color: var(--gold); color: var(--color-text-primary); }
.aur-page-link.is-current { background: var(--gold); border-color: var(--gold); color: var(--color-interactive-text); }
.aur-page-link[aria-disabled="true"] { color: var(--color-disabled-text); border-color: var(--color-disabled-border); background: var(--color-disabled-bg); pointer-events: none; }

/* the_posts_pagination()'s own markup (archive/category/author/search/
   index templates) renders WordPress core's default classes, not
   .aur-pagination/.aur-page-link — styled here to the same visual
   language rather than duplicating a second pagination component. */
.aur-pagination-wrap { margin-top: var(--space-10); text-align: center; }
.aur-pagination-wrap .nav-links { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.aur-pagination-wrap .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--space-8); height: var(--space-8);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body-sm); font-weight: 600;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.aur-pagination-wrap .page-numbers:hover { border-color: var(--gold); }
.aur-pagination-wrap .page-numbers.current { background: var(--gold); border-color: var(--gold); color: var(--color-interactive-text); }
.aur-pagination-wrap .page-numbers.dots { border-color: transparent; background: transparent; }

/* ---------- Breadcrumbs ---------- */
.aur-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-small); color: var(--ink-soft); margin-bottom: var(--space-6); list-style: none; padding: 0; }
.aur-breadcrumbs li { display: flex; align-items: center; gap: var(--space-1); }
.aur-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--color-border-strong); opacity: 0.4; margin-inline-start: var(--space-1); }
.aur-breadcrumbs a { color: var(--ink-soft); }
.aur-breadcrumbs a:hover { color: var(--gold-ink); }
.aur-breadcrumbs [aria-current="page"] { color: var(--color-text-primary); font-weight: 600; }

/* ---------- Tables ---------- */
/* Financial-terminal feel: sticky header so a long price table stays
   legible while scrolling, thin hairline separators (never heavy grid
   lines), a quiet hover row, and tabular numerals so price columns align
   like a real ledger rather than jittering per row. */
.aur-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 32rem; border-radius: var(--radius-md); border: var(--border-width-hairline) solid var(--color-border); }
.aur-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.aur-table caption { text-align: start; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--color-text-primary); }
.aur-table th, .aur-table td { padding: var(--space-4); text-align: start; border-bottom: var(--border-width-hairline) solid var(--color-border); }
.aur-table th {
  position: sticky; top: 0; z-index: 1;
  font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase;
  font-size: var(--text-caption); letter-spacing: var(--tracking-wider);
  background: var(--color-bg-subtle);
  border-bottom-width: var(--border-width-thick);
}
.aur-table tbody tr:last-child td { border-bottom: none; }
.aur-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.aur-table tbody tr:hover { background: var(--color-bg-subtle); }
.aur-table td[data-numeric], .aur-table th[data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Form controls: select, checkbox, radio ---------- */
.aur-form-field select {
  width: 100%;
  padding: var(--space-3) var(--space-3-5);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  background: var(--white);
  color: var(--color-text-primary);
  cursor: pointer;
}
.aur-checkbox, .aur-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}
.aur-checkbox input, .aur-radio input {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  accent-color: var(--gold-700);
  cursor: pointer;
}
.aur-form-hint { font-size: var(--text-caption); color: var(--ink-soft); margin-top: var(--space-1); }
.aur-form-error { font-size: var(--text-caption); color: var(--color-danger-text); margin-top: var(--space-1); }
.aur-form-field.has-error input,
.aur-form-field.has-error textarea,
.aur-form-field.has-error select { border-color: var(--color-danger-border); }