/* ============================================================
   US palette override — applied site-wide on /us/
   Replaces UK rust (#d94e1f) with US flag red (#c8202e)
   Stats: paper-warm (#f5f2ec) instead of rust
   ============================================================ */
:root {
  --rust: #c8202e;
  --rust-bright: #e63b48;
  --rust-deep: #8a1620;
  --era-2026: #c8202e;
}

/* Override hardcoded rust references in homepage hero */
.home-hero-tag {
  background: #c8202e !important;
  border-color: #c8202e !important;
  color: #fff !important;
}
.home-hero h1 .accent { color: #c8202e !important; }
.home-cta-stacked-primary {
  background: #c8202e !important;
  border-color: #c8202e !important;
  color: #fff !important;
}
.home-cta-stacked-primary:hover { background: #8a1620 !important; }
.home-hero-search-input:focus { border-color: #c8202e !important; }

/* Stat numbers: paper-warm cream instead of rust */
.home-stat-num { color: #f5f2ec !important; }

/* Locale toggle active state on US pages: stays red (since US is active here) */
.locale-toggle .locale-opt.active {
  background: #c8202e !important;
  color: #fff !important;
}

/* US verification banner — keep red theme */
.us-banner {
  background: linear-gradient(180deg, #1a0707 0%, #14080c 100%) !important;
  border-top-color: rgba(200, 32, 46, 0.4) !important;
  border-bottom-color: rgba(200, 32, 46, 0.4) !important;
}
.us-banner-tag, .us-banner h3 + p a, .us-banner p a { color: #c8202e !important; }
.us-banner h3 + p a:hover, .us-banner p a:hover { color: #e63b48 !important; }

/* Verification banner on lineage/category pages */
.us-verify-banner { background: #1a0707 !important; border-bottom-color: rgba(200, 32, 46, 0.45) !important; }
.us-verify-banner-tag { color: #c8202e !important; }
.us-verify-banner-msg a { color: #c8202e !important; }
.us-verify-banner-msg a:hover { color: #e63b48 !important; }

/* Disclaimer modal accent */
.rr-disclaimer-modal { border-top-color: #c8202e !important; }
.rr-disclaimer-tag { color: #c8202e !important; }
.rr-disclaimer-modal a { color: #c8202e !important; }
.rr-disclaimer-modal a:hover { color: #8a1620 !important; }
.rr-disclaimer-btn:hover { background: #c8202e !important; }
.rr-disclaimer-btn:focus-visible { outline-color: #c8202e !important; }

/* Generic hardcoded rust references on lineage/category pages */
[style*="border-left:3px solid #d94e1f"] { border-left-color: #c8202e !important; }
[style*="color:#d94e1f"] { color: #c8202e !important; }
[style*="color: #d94e1f"] { color: #c8202e !important; }

/* About page methodology callout */
.us-banner h3 { color: #fff !important; }

/* === RR v31 polish === */

/* --- Remove rogue orange highlight on Gear (and any) nav link
       This kills :focus, :active, :visited orange that was leaking through. --- */
.masthead-center .nav a,
.nav-mobile-panel > a {
  color: var(--paper-bright, #f4f4f4) !important;
}
.masthead-center .nav a:visited,
.masthead-center .nav a:focus,
.masthead-center .nav a:active,
.nav-mobile-panel > a:visited,
.nav-mobile-panel > a:focus,
.nav-mobile-panel > a:active {
  color: var(--paper-bright, #f4f4f4) !important;
  outline: none;
}
.masthead-center .nav a:hover,
.nav-mobile-panel > a:hover {
  color: #d94e1f !important;
}

/* --- Flag hero background on every hero variant (UK or US) --- */
.hero,
.home-hero,
.cmp-hero,
.about-hero,
.cat-hero {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.92)),
    url('../assets/hero-flag-us.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
}
.hero::before {
  display: none;
}

/* Pages with no hero section get a flag banner via body padding-top.
   Gear and Disclosure use <main class="gear-page"> / <main class="disclosure-page">.
   We add a flag banner div before <main> via the script. */
.flag-banner {
  padding: 64px 32px 48px;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.92)),
    url('../assets/hero-flag-us.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  color: var(--paper-bright, #f4f4f4);
  border-bottom: 1px solid #2a2a2a;
}
.flag-banner-inner {
  max-width: 1480px;
  margin: 0 auto;
}
.flag-banner h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 0.95;
  margin: 0;
  text-transform: none;
}
.flag-banner h1 em {
  font-style: normal;
  color: #d94e1f;
  display: block;
  margin-top: 8px;
}
.flag-banner .crumb {
  margin-bottom: 20px;
}

/* === /RR v31 polish === */

/* === RR v32 polish === */

/* --- Bigger, better-spaced nav --- */
.masthead-center .nav {
  gap: 36px !important;
  align-items: center;
}
.masthead-center .nav a {
  font-family: 'Oswald', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color 0.15s ease;
}

/* --- Locale toggle: bigger pill with SVG flag images --- */
.masthead-right .locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.6);
}
.masthead-right .locale-toggle .locale-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.masthead-right .locale-toggle .locale-opt:hover {
  color: #ccc;
}
.masthead-right .locale-toggle .locale-opt.active {
  background: rgba(40, 40, 40, 0.9);
  color: #fff;
}
.locale-flag-svg {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

/* --- Install app button: outline only (per user request) --- */
.install-app-btn {
  background: transparent !important;
  border: 1px solid rgba(245, 242, 236, 0.4) !important;
  color: #f5f2ec !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
  box-shadow: none !important;
}
.install-app-btn:hover {
  border-color: rgba(245, 242, 236, 0.8) !important;
  background: rgba(245, 242, 236, 0.05) !important;
}
.install-app-btn:active {
  background: rgba(245, 242, 236, 0.1) !important;
}
.install-app-btn svg {
  width: 16px;
  height: 16px;
}
/* --- Right cluster spacing --- */
.masthead-right {
  gap: 16px !important;
  align-items: center;
}
.masthead-right .social-cluster {
  gap: 12px;
}

/* --- Responsive: keep mobile clean --- */
@media (max-width: 1100px) {
  .masthead-center .nav { gap: 24px !important; }
  .masthead-center .nav a { font-size: 13px !important; letter-spacing: 0.14em !important; }
}
@media (max-width: 900px) {
  .install-app-btn { display: none !important; }
}

/* === /RR v32 polish === */