/* ==========================================================================
   THE ORANGE BRAND LAYER — tokens and chrome, for every Orange whitelabel.
   ==========================================================================

   ONE FILE, TWO STOREFRONTS. `orange` and `orange-zen` are two whitelabels of
   the same operator, so they are one brand and this is its only definition
   (`SiteDef.brandCss` names it for both). Before this the header, footer and
   page-title band were declared EIGHT times between them — each partner's FAQ
   export and landing export carried its own copy under generated names
   (`zen-faq-2`, `zen-landing-2`, `orange-faq-2`, `orange-landing-2` …) and the
   shared chrome components picked one set per page through a `design` prop.
   They agreed only because they had been hand-aligned rule by rule, which is
   how orange came to have a white bar where zen's is transparent, no nav
   dividers where zen has them, and 10 buttons with their label 6px off-centre.

   THE VALUES ARE ORANGE-ZEN'S, verbatim (owner: "orange zen is well balanced ..
   those become the branding styles for orange"). Zen's are the calibrated ones:
   they were read off the live site's computed styles at 1280px rather than
   taken from the export — the transparent bar, the `#ccc` item dividers, the
   ~8px nav gap.

   LOADED ON EVERY PAGE, CHECKOUT INCLUDED. That is why nothing here is a global
   element rule: a checkout renders through `SiteShell` with the main
   storefront's stylesheet stack, and a `body`/`a`/`h1` rule from a design export
   would restyle the payment form. The design's own base rules live in
   `base.css`, which only a ported design page loads. Everything below is either
   a token or a `.site-*` / `.page-hero` chrome class, and those exist nowhere
   else.

   Structure is NOT here either — the bar, its rows, the mobile panel, the
   footer row and the language dropdown are `src/styles/foundation/nav.css`,
   shared with the main storefront. This file is colour, border and type.
   ========================================================================== */

:root {
  --color-primary: #ff7900;
  --color-primary-alt: #f16e00;

  /* TYPE. Without these a page routed through SiteShell (checkout, contact)
     rendered in the theme's Poppins while this brand's own landing and FAQ
     rendered in Helvneue55 — two typefaces on one site. The faces are declared
     once in public/assets/css/fonts.css. */
  --font-body: "Helvneue55", Arial, sans-serif;
  --font-heading: var(--font-body);
  /* Helvneue55 ships ONE 400 face, so the theme's 600 semibold would be
     synthesised into a faux bold. Live asks for 500 and never loads the bold
     face at all. */
  --weight-bold: 500;
  --weight-medium: 500;

  /* This brand's canvas is 1140px, not the theme's 1170/1200 — measured on the
     live site's own header and section rows. */
  --header-max: 71.25rem;

  /* The header mark, 140px. Measured on live orange AND live orange-zen, on
     the landing and the FAQ: 140x24.3 from a 167x29 file, every time. Ours sat
     at the main theme's 160px fallback. Read by the foundation on a design page
     and by `css/components/header.css` on the checkout, so one value covers
     both. The footer mark is already live's 140px. */
  --header-logo-width: 8.75rem;

  /* The brand's own greys, so the chrome below states each one once. */
  --brand-ink: #212529;
  --brand-ink-muted: #5e5e5e;
  --brand-rule: #ddd;
  --brand-divider: #ccc;
  --brand-pill: #e2e6ea;
  --brand-pill-hover: #d1d5d8;
  --brand-ground: #f6f9fa;
  --footer-bg: #000;
  --footer-fg: #fff;
}

/* --- The bar ---------------------------------------------------------------
   TRANSPARENT on purpose: measured on live at 1280px the header's background is
   rgba(0,0,0,0) and the page's own ground shows through. The orange export said
   #fff, which is why that partner's bar read white against zen's grey. */
.site-header {
  border-bottom: 1px solid var(--brand-rule);
  font-size: 0.9em;
}

/* Each nav item carries a vertical rule — the dividers between
   "Buy eSIM! | FAQ | Reviews | Contact Us" — and the items sit ~8px apart
   (Bootstrap `list-inline-item`), not the foundation's 2rem default. */
.site-header__nav ul {
  gap: 0.5rem;
}

.site-header__nav > ul > li {
  border-inline-end: 1px solid var(--brand-divider);
}

.site-header__nav > ul > li:last-child {
  border-inline-end: 0;
}

.site-header__nav a {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 1.2em;
  color: var(--brand-ink-muted);
  border-bottom: 3px solid transparent;
}

/* The current page and a hovered link get the same treatment, so the design's
   two class names collapse into one rule keyed off `aria-current` — the markup
   already had to emit that for screen readers. */
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
  color: var(--brand-ink);
  border-bottom-color: var(--color-primary);
}

/* The grey pill the contact icons and the language switcher sit in. */
.site-header__pill {
  background: var(--brand-pill);
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  color: var(--brand-ink);
  line-height: 1.5;
}

.site-header__pill:hover {
  background: var(--brand-pill-hover);
  color: var(--brand-ink);
}

.site-header__lang-menu a {
  color: var(--brand-ink);
}

/* --- The page-title band ---------------------------------------------------
   Drawn by the FAQ and by every partner CMS page. Its width is the
   foundation's `.container--site`; this is its colour and its measure. */
.page-hero {
  background: #000;
  padding: 2.5em 0;
}

.page-hero__title {
  margin: 0;
  font-size: 2.2em;
  font-weight: 700;
  color: var(--color-primary);
}

/* --- The footer ------------------------------------------------------------
   One definition for every page including the CHECKOUT, which is the reason
   this file loads through `SiteShell` too. A whitelabel checkout used to wear
   the SimOptions footer because the brand's ground lived in a design sheet that
   a payment page never loads; a `--flow` variant was added to patch that, and
   is now unnecessary. */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--brand-rule);
  font-size: 0.9em;
  padding-block: 1rem;
}

.site-footer__text {
  text-align: center;
  font-size: 0.9em;
}

/* White links keep their colour on hover — the footer's ground is black, and a
   link that inherits the design's orange hover disappears into it. */
.site-footer a,
.site-footer a:hover {
  color: var(--footer-fg);
  font-weight: normal;
}