/* ============================================
   ListingPrep — shared brand chrome (Étape B, palier 1).

   Tokens + components reusable across ALL pages (5 new public-identity
   pages + 4 existing tool pages). Loaded AFTER /css/style.css and BEFORE
   each page's feature CSS, so feature CSS keeps last-write override on
   anything it explicitly addresses.

   Strict scope:
   • The brand mark (teal square + check SVG) inside .site-header__brand.
   • A global multi-column footer (.site-footer-global) carrying the legal
     coverage (Tools / Legal / Contact + affiliate disclosure + copyright).
   • One new token: --color-brand (teal #1E4D52, continuity with the PDF
     Maker engine's branding.colorPrimary default).

   Strict NON-scope:
   • Does NOT redeclare body font-family — the new public-identity pages
     load Schibsted Grotesk + JetBrains Mono in their own <head> and
     override font-family there; the tools stay on system fonts.
   • Does NOT redeclare --color-primary (the navy used by tool chrome).
     The bleu/teal seam is acknowledged transition debt for a later
     global tool restyle, NOT a permanent state.
   • Does NOT override .site-footer (the legacy single-paragraph footer
     rule in style.css). The 4 tools + 5 new pages will switch their
     <footer> markup to .site-footer-global; the old .site-footer rule
     becomes orphan-but-harmless until a cleanup pass.
   ============================================ */

:root {
  /* Brand teal — locked at #1E4D52 for continuity with the PDF Maker's
     jsPDF engine default colorPrimary. Used by the brand mark + accent
     CTAs / links on the new public-identity pages. */
  --color-brand: #1E4D52;
}

/* ============= Brand mark (teal square + check SVG) ============= */
/* Sits BEFORE the wordmark text inside every .site-header__brand link.
   aria-hidden on the wrapping <span> because the link text "ListingPrep"
   carries the accessible label by itself.

   We promote .site-header__brand to inline-flex so the mark + text align
   on the optical centerline regardless of the wordmark's font. The
   existing style.css rule on .site-header__brand sets font-family /
   font-weight / font-size / color — those carry over via the cascade,
   we only add layout properties here (no override). */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-brand);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 1px 2px rgba(29, 27, 22, 0.06);
}
.brand-mark svg { display: block; }

/* Wordmark wrapper — wraps "Listing" + <span>Prep</span> into ONE flex
   item so the inline-flex `gap` from .site-header__brand only applies
   ONCE (between the mark and the wordmark), not also between "Listing"
   and the highlighted "Prep" span. Without this wrap the flex container
   treats the bare "Listing" text node as a 2nd anonymous flex item and
   gaps it from <span>Prep</span> — producing visible "Listing Prep" with
   a space (the micro-bug Geoffrey caught in /thanks/ footer).

   Inside .brand-wordmark the content flows in normal inline mode, so
   "Listing" and the inner highlighted <span>Prep</span> render flush as
   "ListingPrep". Higher specificity (class+class = 0,2,0) than the
   blanket .site-header__brand span color rule (element+class = 0,1,1)
   in style.css AND legal.css, so the wordmark stays in default text
   color while the inner <span>Prep</span> still inherits the brand
   highlight (navy on tools via style.css, teal on legal/home via the
   per-page override). */
.site-header__brand .brand-wordmark {
  color: var(--color-text);
}

/* ============= Global footer (multi-column) =============
   Replaces the legacy single-paragraph .site-footer on all pages, tools
   included. Carries Tools / Legal / Contact columns + affiliate
   disclosure + copyright. Same .site-header__brand inside its top-left
   cell so the brand mark + wordmark appear identical to the header.

   The <h6> labels use JetBrains Mono with a graceful fallback chain
   (ui-monospace, monospace) — on the tools the webfont isn't loaded so
   the system mono font kicks in; on the new public-identity pages where
   JetBrains Mono is fetched, it takes precedence. Same approach for any
   future mono accent. */
.site-footer-global {
  border-top: 1px solid var(--color-border);
  padding: 3.5rem 1rem 2.5rem;
  background: var(--color-surface);
  margin-top: 3rem;
}
.site-footer-global__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.site-footer-global__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.25rem;
}

.site-footer-global__brand {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
/* Inside the footer the brand link inherits font-family from .site-header__brand
   (style.css → Georgia on tools, Schibsted on new pages once they override). */
.site-footer-global__brand .site-header__brand {
  font-size: 1.05rem;
}
.site-footer-global__tagline {
  color: var(--color-text-muted);
  font-size: .9rem;
  max-width: 32ch;
  line-height: 1.55;
  margin: 0;
}

.site-footer-global__col {
  display: flex;
  flex-direction: column;
}
.site-footer-global__col h6 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  font-weight: 500;
}
.site-footer-global__col a {
  color: var(--color-text);
  font-size: .9rem;
  padding: .3rem 0;
  text-decoration: none;
  transition: color .15s;
}
.site-footer-global__col a:hover {
  color: var(--color-brand);
}

.site-footer-global__bottom {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer-global__disclosure {
  color: var(--color-text-muted);
  font-size: .8rem;
  max-width: 62ch;
  line-height: 1.5;
  margin: 0;
}
.site-footer-global__meta {
  color: var(--color-text-muted);
  font-size: .8rem;
}
/* É5a — opérateur du site, placé près du copyright. FR uniquement
   (« Un service opéré par ListingPrep » via common.footer.operated_by) ;
   EN = chaîne vide → :empty match → display:none → zéro pixel rendu côté
   EN sur les 3 outils. Pattern strict identique au .drive-operated-by
   d'É1 (cf. css/style.css). Authoring : aucun whitespace dans le <p></p>
   en HTML source. */
.site-footer-global__operated-by {
  color: var(--color-text-muted);
  font-size: .8rem;
  font-style: italic;
  margin: .25rem 0 0;
}
.site-footer-global__operated-by:empty {
  display: none;
}

/* Responsive collapse — same breakpoint family as the existing tool
   chrome (style.css mobile tweaks at 540px / 760px). 760px collapses to
   2 columns, 480px collapses to 1 column for the brand block + stacked
   nav columns. */
@media (max-width: 760px) {
  .site-footer-global__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .site-footer-global__top {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}
