/* Microsite Blueprint — "Navy/Gold Data" theme.
   First built for goldbullionpricechart.com (2026-09-23), emulating the visual
   system of the reference site the user chose (navy frame, inset panels, gold
   accents, Playfair Display + Inter). Rebuilt clean: no code, copy or assets
   from the reference.

   Load order: style.css (style-comparison.css) -> price-chart.css ->
   price-tools.css -> THIS FILE. It only overrides tokens and adds the theme's
   own components; it forks nothing.

   EVERY text/background pair below was computed with the WCAG formula at
   Gate 3 (03-structure.md §3), not eyeballed. Two of the reference palette's
   own colours fail and are NOT used for text:
     gold #C9A84C on white = 2.29:1   -> small gold text on light uses #7A5A1E (6.35)
     red  #E74C3C on navy  = 3.73:1   -> "down" on dark uses #FF7A6B (5.59)          */

:root{
  --navy:#1A2B45; --navy-dark:#111D2E; --navy-light:#223259;
  --gold:#C9A84C; --gold-light:#E0C07A; --gold-dark:#A07830; --gold-ink:#7A5A1E;
  --steel:#8BA3C1; --steel-light:#B8CCDF;
  --ink:#1A2B45; --ink-soft:#3A4E65;
  --line:#DDE4ED; --bg:#FFFFFF; --bg-alt:#F4F7FA;
  --brand:#1A2B45; --teal:#1A2B45;
  --radius:10px; --radius-lg:16px; --max:1160px;
  --shadow:0 4px 24px rgba(26,43,69,.10);
  --font-head:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* chart + tools tokens */
  --pc-line:#A07830; --pc-fill:rgba(201,168,76,.14); --pc-grid:#E6EAF0;
  --pc-up:#1E8449; --pc-down:#C0392B;
  --pt-accent:#1A2B45;
}

/* ------------------------------------------------------------- frame ---- */
body{background:var(--navy-dark);color:var(--ink-soft);font-size:17px;line-height:1.7}
main{padding:24px 16px 8px}
.panel{max-width:var(--max);margin:0 auto 24px;background:var(--bg);border-radius:var(--radius-lg);
  padding:48px 0;box-shadow:var(--shadow);overflow:hidden}
.panel--alt{background:var(--bg-alt)}
.panel .wrap{max-width:none;padding:0 clamp(18px,4vw,48px)}
.panel--article .wrap{max-width:860px;margin:0 auto}
h1,h2,h3{font-family:var(--font-head);color:var(--navy);font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.2rem)}
h2{font-size:clamp(1.55rem,3vw,1.95rem)}
h3{font-size:1.2rem;font-weight:700}
a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold-ink)}
strong{color:var(--navy)}

/* ------------------------------------------------------------ header ---- */
.site-header{background:var(--navy-dark);border-bottom:1px solid rgba(255,255,255,.10)}
.nav__logo{font-family:var(--font-body);font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.nav__logo .accent{color:var(--gold)}
.nav__links a,.nav__grouptoggle{font-family:var(--font-body)}
.nav__sub{background:var(--navy-dark)}
.announce{background:var(--gold);color:var(--navy-dark);text-align:center;font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;margin:0 auto;max-width:var(--max);
  border-radius:0 0 var(--radius) var(--radius)}

/* --------------------------------------------------------- eyebrows ---- */
.eyebrow{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin:2.4em 0 .2em}
.eyebrow + h2{margin-top:.1em}
.byline{font-size:.88rem;color:var(--ink-soft);border-left:3px solid var(--gold);padding-left:12px;margin:0 0 1.4em}

/* -------------------------------------------------------- hero panel ---- */
.hero{background:var(--navy);color:#fff;padding:56px 0 48px;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}
.hero .wrap{text-align:center}
.hero .eyebrow{color:var(--gold);margin-top:0}
.hero h1{color:#fff;margin:.1em 0 .35em}
.hero h1 .accent,.hero h2 .accent{color:var(--gold)}
.hero__lede{color:var(--steel-light);max-width:62ch;margin:0 auto 1.8em;font-size:1.05rem}
.price-card{max-width:440px;margin:0 auto 28px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:18px}
.price-card__pill{display:inline-block;background:rgba(46,204,113,.14);color:#6FE3A4;border:1px solid rgba(46,204,113,.35);
  border-radius:999px;padding:3px 12px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.price-card__label{color:var(--steel-light);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin:.8em 0 .5em}
.price-card__inner{background:#fff;border-radius:var(--radius);padding:18px 16px}
.price-card .pc-price{font-family:var(--font-head);color:var(--navy);font-size:clamp(2.4rem,7vw,3.4rem);margin:0}
.price-card .pc-price__unit{font-family:var(--font-body)}
.price-card .pc-change{margin:.3em 0 .2em;font-size:.95rem}
.price-card .pc-stamp{color:var(--ink-soft)}
.hero .cta-row{justify-content:center}
.btn{border-radius:var(--radius);font-family:var(--font-body)}
.btn--gold{background:var(--gold);color:var(--navy-dark)}
.btn--gold:hover{background:var(--gold-light);color:var(--navy-dark)}
.btn--ghost{background:transparent;color:#fff;border-color:var(--gold)}
.btn--ghost:hover{background:rgba(201,168,76,.14);color:#fff}
.hero-chart{background:#fff;border-radius:var(--radius-lg);margin:0 auto;max-width:980px;padding:6px 0 0;text-align:left}
.hero-chart .pc-section{padding:22px 0 18px}
.hero-chart h2{font-size:1.35rem;margin-top:0}

/* ------------------------------------------------------- trust strip ---- */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;list-style:none;margin:0;padding:18px 16px;
  font-size:.86rem;font-weight:600;color:var(--navy)}
.trust li::before{content:"✓";color:var(--gold-dark);font-weight:800;margin-right:7px}

/* --------------------------------------------------------- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:1.4em 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;
  box-shadow:0 2px 10px rgba(26,43,69,.05);text-decoration:none;display:block;color:var(--ink-soft)}
a.card:hover{border-color:var(--gold);transform:translateY(-1px)}
.card__label{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .3em}
.card__value{font-family:var(--font-head);font-size:1.6rem;font-weight:800;color:var(--navy);margin:0;line-height:1.2}
.card__sub{font-size:.8rem;color:var(--ink-soft);margin:.3em 0 0}

/* Stat tiles & table inherit chart tokens; lift them onto the panel */
.pc-stats{border-radius:var(--radius)}
.pc-hero{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:22px 0 18px;margin:0 0 1.6em}
.pc-hero .wrap{padding:0 20px}
.pc-hero .pc-price{font-family:var(--font-head);color:var(--navy)}
.pc-tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.pc-tab:hover{border-color:var(--gold)}
.pc-card{border-radius:var(--radius)}

/* ---------------------------------------------- partner (sponsored) ---- */
.partner{background:var(--navy);border:1px solid var(--gold);border-radius:var(--radius-lg);color:#fff;
  padding:30px clamp(18px,4vw,40px);margin:2.2em 0;text-align:center}
.partner__eyebrow{color:var(--gold);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .4em}
.partner__heading{color:#fff;font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 .5em}
.partner__body{color:var(--steel-light);max-width:60ch;margin:0 auto 1.2em}
.partner .affiliate-cta{font-size:1rem}
.partner__disclosure{color:var(--steel);font-size:.8rem;margin:1.1em auto 0;max-width:60ch}
.partner__disclosure a{color:var(--steel-light)}
.partner--compact{padding:22px clamp(16px,3vw,32px)}
.partner--compact .partner__heading{font-size:1.25rem}

/* ---------------------------------------------------------- bridge ---- */
.pt-bridge{border-left:4px solid var(--steel);background:var(--bg-alt)}

/* ------------------------------------------------------------- FAQ ---- */
.faq-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:14px 18px;margin:0 0 12px}
.faq-card h3{font-size:1.05rem;margin:0 0 .35em;font-family:var(--font-head)}
.faq-card p{margin:0;font-size:.96rem}

/* ------------------------------------------------------ steps (4) ---- */
.steps{counter-reset:step;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.steps li{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 16px;position:relative}
.steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--gold);color:var(--navy-dark);font-weight:800;margin-bottom:8px}

/* ------------------------------------------------------ guides hub ---- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.guides h3{font-family:var(--font-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .5em}
.guides ul{list-style:none;margin:0;padding:0}
.guides li{margin:0 0 6px}
.guides a{text-decoration:none;font-weight:600}

/* ----------------------------------------------------------- tables ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0}
.pt-table,.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap thead th{background:var(--bg-alt)}

/* ----------------------------------------------------------- misc ---- */
.disclosure-banner{max-width:var(--max);margin:0 auto 24px;background:#FFF8E8;border:1px solid var(--gold);border-radius:var(--radius)}
.disclosure-banner p{margin:0}
.toc{border-radius:var(--radius);border-left:4px solid var(--gold)}
blockquote{margin:1.4em 0;padding:14px 20px;background:var(--bg-alt);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0}
blockquote p{margin:0}
.site-footer{background:var(--navy-dark)}
.footer-grid{grid-template-columns:repeat(5,1fr)}
.footer-grid h4{color:var(--gold);font-family:var(--font-body);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.exit-popup__card h2{font-family:var(--font-head);color:var(--navy)}
.exit-popup__disclosure{font-size:.8rem;color:var(--ink-soft);margin:0 0 14px}

@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  main{padding:14px 10px 4px}
  .panel{padding:32px 0;border-radius:var(--radius)}
  .panel .wrap{padding:0 16px}
  .hero{padding:40px 0 32px}
  .announce{font-size:.7rem;letter-spacing:.05em}
  .footer-grid{grid-template-columns:1fr}
  .partner .affiliate-cta{display:flex;justify-content:center;white-space:normal}
}

/* ---------------------------------------------- fixes from browser QA ----
   Each of these passed every static check and was caught only by opening the
   page (goldbullionpricechart Gate 5, 2026-09-23). */
/* 1. Footer disclosure link inherited the navy link colour on the navy footer:
      invisible. Same class of bug as silvervaluechart's nav buttons. */
.footer-disclaimer a{color:#CDD6E5;text-decoration-color:var(--gold)}
.footer-disclaimer a:hover{color:#fff}
/* 2. The hero's centring leaked into the chart component's own .wrap. */
.hero .hero-chart .wrap{text-align:left}
.hero .hero-chart h2{text-align:left}
/* 3. price-chart.css sets .pc-stat__value{color} AFTER .is-up/.is-down at equal
      specificity, so a −7.81% tile rendered in plain ink. Scope the direction. */
.pc-stat__value.is-up{color:var(--pc-up)}
.pc-stat__value.is-down{color:var(--pc-down)}
/* 4. Plain nav links sat higher than the dropdown buttons (desktop only; the
      mobile drawer stays left-aligned). */
@media (min-width:901px){
  .nav__links{align-items:center}
  .nav__links a,.nav__grouptoggle{padding:.55em .9em;font-size:.92rem;line-height:1.3}
}
@media (max-width:900px){
  .nav__links{align-items:stretch}
  .nav__sub{background:transparent}
}
/* 6. The unit label under a hero price inherited the serif price font. */
.pc-hero .pc-price__unit,.price-card .pc-price__unit{font-family:var(--font-body);font-weight:500}
/* 5. Step badge sat inline with the step title and broke its wrap. */
.steps li::before{display:flex;margin-bottom:10px}

/* Homepage hero: sponsored BUY button row, with its disclosure beside it
   ([[live-data-sites]]: the disclosure travels with the CTA). */
.hero-buy{margin-top:4px}
.hero-buy .affiliate-cta{min-width:260px;justify-content:center;letter-spacing:.06em;font-weight:800}
.hero__sponsored{color:var(--steel);font-size:.78rem;margin:.6em auto 0;max-width:60ch}
.hero__sponsored a{color:var(--steel-light)}