/* ==========================================================================
   THE BOUYGUES TELECOM BRAND LAYER — tokens and chrome.
   ==========================================================================

   The same shape the Orange brand layer has (`sites/orange/css/brand.css`), and
   for the same reasons: ONE definition of this whitelabel's header, page-title
   band and footer, named by `SiteDef.brandCss` and loaded on every page the site
   serves — CHECKOUT INCLUDED, which is what keeps a partner's payment page off
   SimOptions' own footer.

   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. Those live in `base.css`,
   which only a ported design page loads.

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

   EVERY VALUE IS MEASURED off bouygues-telecom.simoptions.com at 1400px, not
   read from the export: the bar is transparent there (the export said #fff), the
   nav sits on a 1px #ccc divider per item, the page-title band is a noise +
   pattern + gradient stack, and the marks are 150 / 120 / 160px.
   ========================================================================== */

:root {
  /* PRE-EXISTING, deliberately untouched. The design's action colour is the
     orange below and its link colour the teal after it, so this blue is neither;
     it was set by the port pass "per the design export" and drives the theme's
     buttons on a checkout. Changing it would restyle that payment page on a
     guess, so it is left as found and flagged instead. */
  --color-primary: #009bdb;
  --color-primary-alt: #0089c3;

  /* TYPE. The faces are declared ONCE in public/assets/css/fonts.css, as one
     "Bouygues Read" family with a real weight axis. The design exports declared
     the same three files a second time under four invented family names
     (`BouyguesRead`, `BouyguesReadBold`, `BouyguesReadHeavy`, `BouyguesSpeak`),
     so a weight change meant editing a family name. Weights, not aliases. */
  --font-body: "Bouygues Read", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  /* The display face, for the page-title band and the landing's big headings. */
  --font-display: "Bouygues Speak", var(--font-body);
  --weight-medium: 500;
  --weight-bold: 600;

  /* This brand's canvas is 1140px, and its marks are 150 / 120 / 160px. */
  --header-max: 71.25rem;
  --header-logo-width: 9.375rem;
  /* The SimOptions mark in the header endorsement — 160px on live. */
  --byline-logo-width: 10rem;

  /* The brand's own palette, so each value is stated once. */
  --brand-ink: #25465f;
  --brand-link: #109db9;
  --brand-accent: #ea5b0f;
  --brand-rule: #ddd;
  --brand-divider: #ccc;
  --brand-pill: #e2e6ea;
  --brand-pill-hover: #d1d5d8;
  --brand-pill-ink: #212529;
  --brand-ground: #f9f9f9;
  /* This footer is WHITE, unlike Orange's black one. */
  --footer-bg: #fff;
  --footer-fg: #25465f;

  /* THE DARK BAND — a noise texture over an off-centre watermark over a
     vertical gradient. THREE places draw it: the page-title band below, and the
     landing's "buy now" and "contact" sections. It was an object literal named
     `bouyguesBg`, duplicated verbatim in BOTH `Faq.tsx` and `Landing.tsx` and
     applied as an inline `style` — so the band could not be shared with the
     chrome and a colour change meant editing two TypeScript files. Stated once
     here, referenced by all three. */
  --brand-band:
    url("/assets/sites/bouygues-telecom/img/bouygues/transparent-noise.png"),
    url("/assets/sites/bouygues-telecom/img/bouygues/pattern-dark-logo.svg") no-repeat,
    linear-gradient(#1b3650, #109db9);
  --brand-band-size: auto, 100%, auto;
  --brand-band-position: top left, 280px -240px, top left;
}

/* --- The bar --------------------------------------------------------------
   TRANSPARENT, so the page's own ground shows through — measured, against an
   export that said #fff.

   NOT STICKY. The foundation makes every header sticky, which is right for a
   bar with its own ground; this one has none, so a stuck bar let the page
   scroll THROUGH it. Live measures `position: static` here, and that is what
   this brand gets (owner: "i dont know why you decided to make a sticky
   header"). Orange keeps the foundation's sticky — its bar is opaque. */
.site-header {
  position: static;
  border-bottom: 1px solid var(--brand-rule);
  font-size: 0.9em;
}

/* The items sit shoulder to shoulder with a hairline between them, which is
   this design's nav rhythm rather than Orange's wider gap. */
.site-header__nav ul {
  gap: 0;
}

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

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

/* The submenu's trigger is a `<summary>`, not an `<a>`, so a rule written for
   links alone left "eSIMs" at the bar's 0.9em while every sibling sat at 1.2em
   — measured 12.6px against 15.12px. Both selectors, one declaration. */
.site-header__nav a,
.site-header__nav summary {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 1.2em;
  color: var(--brand-ink);
  border-bottom: 3px solid transparent;
  border-radius: 0.25rem;
}

/* Hovering underlines in the accent and squares the corners; the CURRENT page
   takes the accent as its text colour. Two different states on live, so two
   rules — not one shared with the hover the way Orange's bar does it. */
.site-header__nav a:hover {
  color: var(--brand-ink);
  border-bottom-color: var(--brand-accent);
  border-radius: 0;
}

.site-header__nav a[aria-current="page"] {
  color: var(--brand-accent);
  border-radius: 0;
}

/* The "Brought to you by" endorsement — measured on live at 11.34px, regular
   weight, in the brand ink. Its structure is the foundation's. */
.site-header__byline {
  font-size: 0.709rem;
  font-weight: 400;
  color: var(--brand-ink);
}

/* 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-pill-ink);
  line-height: 1.5;
}

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

/* Both dropdowns' items read at the page's own size, as live draws them (16px);
   without this they inherit the bar's 0.9em and come out at 12.6px. */
.site-header__lang-menu a,
.site-header__submenu-menu a {
  color: var(--brand-ink);
  font-size: 1rem;
}

.site-header__submenu-menu a:hover,
.site-header__lang-menu a:hover {
  color: var(--brand-accent);
}

/* --- The page-title band --------------------------------------------------
   The dark band declared above, plus this design's measure. */
.page-hero {
  padding: 2.5em 0;
  background: var(--brand-band);
  background-size: var(--brand-band-size);
  background-position: var(--brand-band-position);
}

.page-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.2em;
  font-weight: 700;
  color: #fff;
  text-align: start;
}

/* --- The footer -----------------------------------------------------------
   White, unlike Orange's. One definition for every page including the CHECKOUT,
   which is the reason this file loads through `SiteShell` too. */
.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;
}

.site-footer a {
  color: var(--brand-link);
}

.site-footer a:hover {
  color: var(--brand-ink);
}

/* This brand's marks are smaller than the foundation's defaults: 120px for the
   footer logo against 140, and 160px for the payment strip against 220. */
.site-footer__logo img {
  max-width: 7.5rem;
}

.site-footer__pay img {
  max-width: 10rem;
}