/* ==========================================================================
   P6 — shared/components.css
   Rules for partials that render under MORE THAN ONE layout. Every rule below
   is class-scoped, so linking this file into extra layouts is harmless.

   Required links (see the per-section notes for exactly why):
     layouts/retail.html.erb         — site switcher + LinkedIn pixel
     layouts/retail_product.html.erb — site switcher + LinkedIn pixel
     layouts/private_label.html.erb  — site switcher + LinkedIn pixel
     layouts/gateway.html.erb        — LinkedIn pixel
     layouts/un_agency.html.erb      — LinkedIn pixel
     layouts/clueless_book.html.erb  — LinkedIn pixel
     layouts/offers.html.erb         — LinkedIn pixel
     layouts/legal.html.erb          — LinkedIn pixel
   ========================================================================== */

/* ===== Cross-site header switcher (app/views/shared/_site_switcher.html.erb)
   Rendered from retail/partials/_header (layouts: retail, retail_product) and
   private_label/partials/_header (layout: private_label).
   Lifted verbatim from the partial's <style> block.
   ========================================================================= */
.site-switcher { background: #002247; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-switcher-inner { max-width: 80rem; margin: 0 auto; padding: 0.4rem 1.5rem; display: flex; align-items: center; gap: 0.25rem 1rem; flex-wrap: wrap; font-size: 0.8125rem; }
.site-switcher-label { color: rgba(255,255,255,0.4); }
.site-switcher-link { display: inline-flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.65); text-decoration: none; padding: 0.15rem 0.5rem; border-radius: 0.25rem; transition: color 0.15s, background 0.15s; }
.site-switcher-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.site-switcher-link i { font-size: 0.75rem; opacity: 0.8; }

/* ===== LinkedIn <noscript> tracking pixel (app/views/layouts/_linkedin.html.erb)
   The partial is rendered by EIGHT layouts: retail, retail_product,
   private_label, gateway, un_agency, clueless_book, offers, legal.
   The pixel only reaches the DOM for no-JS visitors; if a layout ends up
   without this file linked, the only symptom is a 1x1 image at the foot of the
   page for those visitors.
   ========================================================================= */
.linkedin-noscript-pixel { display: none; }

/* ===== Glossary term card — MOVED (D15, 2026-07-28) =======================
   This note used to say the rule shipped in legacy.css because both call sites
   ran under the `application` layout. Neither statement is true any more: that
   layout is deleted, glossary#index is on `retail_product`, and
   Admin::GlossaryTermsController#preview renders the real public template under
   the same layout. The card is now styled by `.retail-glossary-card` in
   retail/pages.css.
   ========================================================================= */

/* ===== DEAD CODE — no render site in the repo ==============================
   These three partials have no caller. Their inline styles were removed so the
   ratchet baseline can go to zero, and the equivalent rules are parked here.
   Nothing loads them today, and nothing needs to: if any of these partials is
   ever revived, link this file in the reviving layout (or move the rule).
   ========================================================================= */

/* app/views/shared/_browser.html.erb — never rendered; `.screenshot-browser`
   and `.screenshot-browser-controls` have no CSS anywhere in app/assets. */
.screenshot-browser-90 { width: 90%; }

/* app/views/layouts/partials/_cookie_policy.html.erb — never rendered (the
   live banner, if any, is the Termly resource blocker). Bootstrap-era markup. */
.cookie-banner-text { margin-bottom: 5px; }

/* app/views/innate_index/participants/_rating_stats.html.erb — reachable only
   via _friend_ratings, whose sole reference (public_report.html.erb:43) is
   commented out. Would render under the `innate_index` layout. */
.innate-rating-stats-col { padding-left: 50px; }
.innate-rating-stats-col.innate-rating-stats-col-last { padding-left: 60px; padding-right: 0; }


/* ===== Cloudflare Turnstile widget (app/helpers/turnstile_helper.rb) =====
   The helper used to hard-code `style: "margin: 1rem 0;"` on every widget it
   rendered, with one caller passing a tighter override. Both spacings live
   here because the widget renders under every public layout. */
.turnstile-widget { margin: 1rem 0; }
.turnstile-widget--tight { margin: 0.25rem 0; }


/* ===== Layout-less Clueless login (app/views/clueless_book/clueless_login.html.erb)
   That action renders with `layout: false`, so this file is linked from the
   template body rather than a <head>. It is the only page in the app that does
   so — see the comment there. */
.cb-bare-login { padding: 10px; }


/* ===== Body scroll lock while a full-screen overlay is open (audit S14) =====
   Three Stimulus controllers used to set `document.body.style.overflow`
   directly — the same convention violation the inline-style sweep exists to
   remove, just written through the CSSOM instead of an attribute:

     app/javascript/controllers/mobile_menu_panel.js  (retail-mobile-menu +
                                                      un-mobile-menu)
     app/javascript/controllers/offer_modal_controller.js
     app/javascript/private_label/controllers/mobile_menu_controller.js
     app/javascript/private_label/controllers/video_modal_controller.js

   They now toggle this class on <body>. It lives here rather than in a site
   stylesheet because those controllers run under the retail, retail_product,
   un_agency and private_label layouts — every one of which links this file.
   ========================================================================= */
.body-scroll-locked { overflow: hidden; }

/* ── Regional site suggestion banner ──────────────────────────────────────────
   Replaces the GeoIP redirect that used to move European visitors to /en-GB
   without asking (D21, 2026-08-04). Lives here rather than in a site pages.css
   because it renders under every public layout.

   Brand navy so it reads as ours and not as a cookie/consent bar, which
   visitors have learned to dismiss without reading. */
.locale-suggestion {
  background-color: #003366;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.5;
}

.locale-suggestion-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

.locale-suggestion-text {
  margin: 0;
}

.locale-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.locale-suggestion-go {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  background-color: #ffffff;
  color: #003366;
  font-weight: 600;
  text-decoration: none;
}

.locale-suggestion-go:hover,
.locale-suggestion-go:focus {
  background-color: #e6edf5;
}

/* Underlined, not a bare colour change: on a navy ground a colour-only link is
   not distinguishable enough for low-vision readers. */
.locale-suggestion-dismiss {
  color: #ffffff;
  text-decoration: underline;
}

.locale-suggestion-dismiss:hover,
.locale-suggestion-dismiss:focus {
  color: #e6edf5;
}

@media (max-width: 640px) {
  .locale-suggestion-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ===== Flash messages (shared/_flash_messages.html.erb) =====
   Rendered by every PUBLIC layout above its yield. Lives here rather than in
   one site's pages.css because the partial renders under all of them, and
   every public layout already links this file (including `legal`, which loads
   no Tailwind — so these rules must stand alone, no utility classes). */

.site-flash {
  max-width: 68rem;
  margin: 1rem auto 0;
  padding: 0 1.25rem;
}

.site-flash-message {
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.875rem 1.125rem;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.site-flash-alert {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.site-flash-notice {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}