/* ===========================================================================
   Going Global — house fit
   Loaded LAST, after house.css.

   house.css re-skins the component classes it knows about (header/.hero, .card,
   .btn, inputs). These pages were built on their own navy palette with their own
   class names, so two things are left for this file:

     1. Remap the page's own tokens onto the house palette, so every existing
        rule lands on-brand without editing the rule.
     2. Repair the surfaces that were drawn for a DARK ground and end up
        light-on-light once house.css turns the hero ivory.

   Nothing here invents a new look; it points the old one at the card's colours.
   =========================================================================== */

:root{
  /* ---- the pages' own tokens, remapped -----------------------------------
     --blue was the navy band ground (#002868) carrying white text. Navy is not
     a brand colour, so every one of those bands becomes the card's black bar
     and the white text on it still reads. */
  --blue:#0a0a0a;
  --blue-mid:#6f4d14;      /* small caps + labels; gold-dk is legible on ivory */
  --ink:#0a0a0a;
  --ink-soft:#3d382f;
  --white:#ffffff;
  --base:#fcfbf9;
  --red:#a82818;           /* the flag's brick red, not crimson */
  --red-deep:#7d1c10;
  --rule:rgba(160,112,32,.34);

  /* going-global.html's own set. The names lie — its --amber and --forest are
     both navy — so they are remapped by ROLE, not by name. --cream is a
     near-white GROUND there (and the light text on the dark card), so it must
     stay near-white; pointing it at gold turns the whole page gold. */
  --cream:#fcfbf9;
  --oxblood:#a82818;
  --oxblood-deep:#7d1c10;
  --forest:#0a0a0a;
  --amber:#6f4d14;      /* gold-DK: --amber is text on a light ground here, and
                           gold-mid measures ~2.3:1 on near-white. Gold-mid is an
                           accent; gold-dk is the only gold that carries a word. */
}

/* ---- the ground -----------------------------------------------------------
   house.css sets body to --paper, which is the card ivory #f1ece3. Ivory is a
   PANEL colour: used as a whole page it is what makes an app read brown next to
   the rest of the fleet. Ground goes near-white; the ivory survives on panels. */
body{ background:#fcfbf9 !important; }

/* ---- heroes that house.css turned ivory -----------------------------------
   index / going-global / country-microsite. Their hero children were coloured
   for a navy ground, so on ivory they were white-on-white. */
.hero .sub,
.hero p{ color:var(--ink-soft) !important; }
.hero .sub em{ color:var(--gold-dk,#6f4d14) !important; font-style:italic; }
.hero h1 .r{ color:var(--gold-dk,#6f4d14) !important; }
.hero .counts b,
.hero .stat b{ color:var(--ink) !important; }
.hero .counts span,
.hero .stat span{ color:var(--gold-dk,#6f4d14) !important; }

/* The red radial bloom was drawn to glow against navy; on ivory it reads as a
   pink smear. A soft gold wash does the same job on the light ground. */
.hero .glow{
  background:radial-gradient(circle,rgba(201,162,74,.30),transparent 68%) !important;
}

/* The flag stripe row: a white stripe is invisible on ivory. Black / gold /
   brick red, which is the card's own three-colour run. */
.flagrow .s-w,
.flagrow .stripe-w{ background:var(--ink) !important; }
.flagrow .s-b,
.flagrow .stripe-b{ background:var(--gold,#a07020) !important; }
.flagrow .s-r,
.flagrow .stripe-r{ background:var(--red) !important; }

/* ---- bands that are still dark -------------------------------------------
   .topband (the four tool pages), .gates, .charter-quote and the dark feature
   cards keep a dark ground, so they keep light type — retinted warm above.
   These stay square and hairlined like the rest of the card system. */
.topband,
.gates,
.charter-quote,
.card.feature{ border-radius:0 !important; }
.topband{ border-bottom:3px solid var(--gold,#a07020) !important; }

/* ---- surfaces house.css flattened ----------------------------------------
   house.css paints every .card with the ivory panel, which silently turned the
   dark FEATURE cards light while their type stayed white. They are meant to be
   the black plate, so put the black back rather than bleaching the type. */
.card.feature{
  background:var(--ink) !important;
  border-color:var(--ink) !important;
}
.card.feature .tt,
.card.feature .open{ color:#fff !important; }
.card.feature .ds{ color:#d5cfc3 !important; }
.card.feature .no{ color:var(--gold-mid,#c9a24a) !important; }
.card.feature h3{ color:var(--gold-hi,#f0d0a0) !important; }

/* .topband keeps its dark ground, but house.css's global h1/h2 and .eyebrow
   rules paint ink-on-ink and gold-dk-on-black there. Gold-mid is the gold that
   is legible on black; gold-dk is the one that is legible on ivory. */
.topband h1,
.topband h2,
.topband .stat b{ color:#fff !important; }
.topband p{ color:#e3ddd1 !important; }
.topband .eyebrow,
.topband .stat span,
.gates .n,
.charter-quote b{ color:var(--gold-mid,#c9a24a) !important; }

/* going-global's dark "road" card: same h3 collision. */
.flagcard.road h3{ color:var(--cream,#fcfbf9) !important; }
.flagcard.road .tag{ color:var(--gold-mid,#c9a24a) !important; }

/* The register's faintest column was 3.4:1 on the panel — legible enough to
   look fine and not actually readable. */
.register-body .prev,
.sc .model .c{ color:#6f6759 !important; }

/* ---- square the corners ---------------------------------------------------
   The card system has no rounded corners. house.css squares the classes it
   owns; these are the page-local ones it does not know about. */
.register,.charter-box,.payload,.navcard,.flagcard,
.spec .sc,.specgrid,.model,pre,.howto{ border-radius:0 !important; }

/* ---- focus ---------------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--gold,#a07020) !important; outline-offset:3px; }

/* ---- the last of the gold-on-light ---------------------------------------
   #B7791F is fine as a stroke, a fill or a badge ground, but it measures
   ~3.5:1 as TEXT on the near-white ground. Graphics keep it; words do not. */
.phase .why{ color:#6f4d14 !important; }
.chip.warn{ color:#6f4d14 !important; }
svg text[fill="#B7791F"]{ fill:#6f4d14; }

/* The feature plate is black, so its badge needs the gold that reads on black. */
.card.feature .badge{ color:var(--gold-mid,#c9a24a) !important; border-color:rgba(201,162,74,.5) !important; }

/* The partnership form sits on the deep brick band, where gold-mid lands at
   4.28:1 — just under. Gold highlight is the tier that reads on a dark red. */
.contact .field label,
.charter .field label{ color:var(--gold-hi,#f0d0a0) !important; }

/* ---- app.html's sticky bar ------------------------------------------------
   It is a <header>, so house.css turned it ivory; its brand and tabs were
   still coloured for the navy bar. */
header .brand .b{ color:var(--ink) !important; }
header .tab{ color:var(--ink-soft) !important; }
header .tab.on,
header .tab[aria-current]{ color:var(--gold-dk,#6f4d14) !important; }

/* ---- the warn tone --------------------------------------------------------
   #B7791F measured 3.79:1 both as text on white and as a ground under white
   text — failing in both directions at once. One step darker passes both. */
:root{ --warn:#8a5c10; }

/* .cleared is a translucent green wash that assumed a light parent; the parent
   band is now black, so the wash composited dark under dark-green text. */
.cleared{ background:#eaf3ee !important; }

/* app.html declares .bar twice: the nav bar (.shell > .bar) and a 6px progress
   bar. Only the second sets a background, so the nav bar inherited the progress
   bar's fill — invisible while that fill was pale navy, glaring once it became
   ivory under white type. Scope the nav bar out of it. */
.shell > .bar{
  background:transparent !important;
  height:auto !important;
  border-radius:0 !important;
  overflow:visible !important;
}

/* country-microsite's nav controls are a non-wrapping flex row; on a phone the
   language select plus the CTA ran 138px past the viewport. */
@media (max-width:520px){
  /* .nav is the non-wrapping row; .ctrls is the group inside it. Both need to
     wrap or the brand and the language select fight over the same 390px. */
  .nav{ flex-wrap:wrap; gap:10px; }
  .nav .ctrls{ flex-wrap:wrap; justify-content:flex-end; gap:8px; }
  .nav select{ max-width:100%; }
}