/* =================================================================
   Gold Calculator USA — shared theme (matches the new home page)
   Loaded AFTER style.css. Remaps colours/fonts and restyles header,
   page heads, live board, calculator cards and footer.
   ================================================================= */
:root{
  --cream:#faf8f3; --gold-wash:#f4f1e8; --gold-pale:#e4dfd0; --surface:#fff; --surface-2:#f4f1e8;
  --line:#e4dfd0; --line-soft:#ece7d8;
  --gold:#a8791a; --gold-light:#d9b25a; --bronze:#8a6212; --bronze-dark:#6f4f0e;
  --bronze-deep:#14203a; --ink-head:#14203a; --ink:#14203a;
  --text:#14203a; --text-2:#3b4660; --muted:#5d6882; --muted-light:#8089a0;
  --up:#1b8a5f; --live:#1b8a5f; --live-line:#e4dfd0; --live-soft:#f4f1e8;
  --down:#d6453d;
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:Fraunces,Georgia,serif; --serif:Fraunces,Georgia,serif; --num:Fraunces,Georgia,serif;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 3px rgba(20,32,58,.06); --shadow-lg:0 1px 3px rgba(20,32,58,.06);
}
html{background:var(--cream)}
body{background:var(--cream);color:var(--text);font-family:var(--sans)}
h1,h2,h3{font-family:var(--display);color:var(--ink-head)}
.wrap{max-width:none;padding-left:clamp(12px,2.5vw,32px);padding-right:clamp(12px,2.5vw,32px)}

/* ---------- header ---------- */
.site-head{position:relative;background:#fff;border-top:0;border-bottom:6px solid var(--gold);box-shadow:none}
.head-inner{min-height:60px}
.brand-mark svg{width:26px;height:26px}
.brand{gap:8px}
.brand-name{font:700 20px Fraunces,Georgia,serif;letter-spacing:0;color:var(--ink-head)}
.brand-name i{font-style:normal;color:var(--gold)}
.brand-sub{display:none !important}
.primary-nav a,.primary-nav .sub-toggle{color:var(--muted);font-weight:500}
.primary-nav a:hover,.primary-nav .sub-toggle:hover{color:var(--gold);background:none}
.primary-nav a[aria-current="page"],.primary-nav .sub-toggle.is-active{color:var(--gold);font-weight:700;background:none;box-shadow:none}
@media (min-width:980px){
  .primary-nav a,.primary-nav .sub-toggle{font-size:14px}
  .primary-nav a:hover,.primary-nav .has-sub:focus-within>.sub-toggle,.primary-nav .sub-toggle:hover{background:none;color:var(--gold)}
  .primary-nav a[aria-current="page"]{background:none;box-shadow:none}
}
.nav-toggle{border-color:var(--line);background:#fff}
.nav-toggle-bars i{background:var(--ink-head)}

/* ---------- page head: centred heading + description ---------- */
.page-head,.hero{background:none;text-align:center;padding:30px 0 10px;border:0}
.page-head h1,.hero h1{font:700 clamp(30px,5vw,50px)/1.12 Fraunces,Georgia,serif;color:var(--ink-head);letter-spacing:0;margin:8px 0 12px}
.hero h1::after{display:none}
.page-head p,.hero p{color:var(--muted);max-width:70ch;margin:0 auto}
.crumbs{justify-content:center;text-transform:none;letter-spacing:0;font-size:13px}

/* ---------- live rate board ---------- */
.board{margin-top:0;border-radius:14px;box-shadow:0 1px 3px rgba(20,32,58,.06)}
.board-head{background:none;border:0;padding:18px 22px 0;text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted)}
.board-head strong{font:700 16px Manrope,sans-serif;letter-spacing:0;color:var(--ink-head)}
.status{background:none;border:0;padding:0;color:var(--muted);font-weight:500}
.status.live{color:var(--live)}
.head-updated{background:none;border:0;padding:0;color:var(--muted);font-weight:500;font-size:12px;letter-spacing:0}
.board-main{padding:10px 22px 16px}
.spot-label{text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);font-weight:500}
.spot-price{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(30px,5vw,40px);color:var(--ink-head);letter-spacing:0}
.spot-price .unit{font-family:Manrope,sans-serif;font-size:13px}
.spot-change{background:none !important;border:0;padding:0;font:700 14px Manrope,sans-serif}
.spot-change .since{text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);font-weight:500}
.metric{background:var(--gold-wash);border:0;border-radius:9px}
.metric span{text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted);font-weight:500}
.metric b{font-family:Manrope,sans-serif;color:var(--ink-head)}
.rail{background:none;border-top:1px solid var(--line)}
.rail-head{padding:14px 22px 0;text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted)}
.rail-toggle button{font:600 12px Manrope,sans-serif;text-transform:none;letter-spacing:0;background:var(--gold-wash);border:1px solid var(--line);border-radius:8px;padding:6px 12px;min-height:0;color:var(--muted)}
.rail-toggle button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff}
.rail-track{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px;padding:12px 22px 18px}
.hallmark{text-align:left;background:var(--gold-wash);border:1px solid transparent;border-radius:9px;padding:8px 12px;min-width:0}
.hallmark:hover{transform:none;box-shadow:none}
.hallmark.pop{border-color:var(--gold);background:var(--gold-wash);box-shadow:none}
.hallmark .k{display:block;background:none;color:var(--muted);padding:0;margin:0;border-radius:0;font:500 12px Manrope,sans-serif;letter-spacing:0}
.hallmark.pop .k{background:none;color:var(--gold);font-weight:700}
.hallmark .v{font:700 16px Manrope,sans-serif;color:var(--ink-head)}
.hallmark .f{font:500 11px Manrope,sans-serif;letter-spacing:0;color:var(--muted)}
.board-foot{background:none;border-top:1px solid var(--line);color:var(--muted);font:500 12px Manrope,sans-serif;letter-spacing:0}
@media (max-width:420px){.rail-track{padding:12px 14px 16px;gap:6px}.hallmark{padding:8px}.hallmark .v{font-size:14px}}

/* ---------- calculator + cards: thick gold line at start and end ---------- */
.calc{border:1px solid var(--line);border-top:6px solid var(--gold);border-bottom:6px solid var(--gold);border-radius:14px;box-shadow:0 1px 3px rgba(20,32,58,.06)}
.chart-card,.card{border-radius:14px;border-color:var(--line)}
h2.h-display{font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:0}
h2.h-display::after{display:none}
.eyebrow,.input-group-title{letter-spacing:.04em}
input,select,textarea{font-family:Manrope,sans-serif;background-color:#f4f1e8;border-color:var(--line);border-radius:9px;color:var(--ink-head)}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.calc-tab[aria-selected="true"],.range-tabs button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---------- footer: light, centred, readable ---------- */
.site-foot{background:#fff;color:var(--muted);border-top:6px solid var(--gold);margin-top:40px;padding:36px 0 0}
.foot-center .foot-brand{justify-content:center}
.foot-brand .brand-name{font:700 20px Fraunces,Georgia,serif;color:var(--ink-head)}
.foot-desc{color:var(--muted);font-size:14px}
.foot-cols{text-align:center;border-top:1px solid var(--line)}
.foot-cols h3{font:700 13px Manrope,sans-serif;color:var(--ink-head);letter-spacing:.04em}
.foot-cols a{color:var(--muted)}
.foot-cols a:hover{color:var(--gold)}
.foot-note,.foot-note.foot-credit{color:var(--muted);font-size:13px !important}
.foot-credit a{color:var(--ink-head)}
.foot-copy{color:var(--muted);font:500 13px Manrope,sans-serif;letter-spacing:0}

/* phones: stacked tables must not keep their 480px desktop minimum (caused sideways scrolling) */
@media (max-width:700px){table.data{min-width:0}}
/* byline: keep the text flowing instead of becoming a row of flex items that overflow on phones */
.byline{display:block;padding:12px 16px;margin:20px 0}

/* cards that run edge-to-edge on phones: match the (now narrower) page gutter */
@media (max-width:639px){
  .calc,.chart-card{margin-left:calc(-1 * clamp(12px,2.5vw,32px));margin-right:calc(-1 * clamp(12px,2.5vw,32px))}
}
/* rate strip: let the cells share the row instead of leaving an empty box when there are 4 */
@media (min-width:620px){.headline-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}

/* footer link row (Home · About Us · Privacy Policy · Terms of Use · Disclaimer) */
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:22px 0 16px;padding:16px 0;border-top:1px solid var(--line)}
.foot-nav a{color:var(--muted);font-size:14px;font-weight:500}
.foot-nav a:hover{color:var(--gold);text-decoration:none}

/* table headers: use the body font, not the serif heading font */
table.data thead th,table.data th{font-family:Manrope,system-ui,sans-serif}

/* header dropdowns: grouped, simple */
.primary-nav .sub .sub-label{font:700 11px Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-light);padding:10px 12px 4px;border:0}
.primary-nav .sub .sub-label:first-child{padding-top:6px}
.primary-nav .sub .sub-rule{height:1px;background:var(--line);margin:6px 8px;border:0;padding:0}
@media (min-width:980px){
  .primary-nav .sub{min-width:260px;padding:6px;max-height:80vh;overflow-y:auto}
  .primary-nav .sub a{display:block;padding:8px 12px;border-radius:7px;font-size:14px;white-space:nowrap}
  .primary-nav .sub a:hover{background:var(--gold-wash);color:var(--gold)}
  .primary-nav .sub a[aria-current="page"]{color:var(--gold);font-weight:700;background:none}
}
@media (max-width:979px){
  .primary-nav .sub .sub-label{padding:10px 2px 2px}
  .primary-nav .sub .sub-rule{margin:6px 0}
}