/**
 * The site footer (markup: src/web/site-footer.ts SITE_FOOTER_HTML; every public page but the terminal carries it).
 * Self-contained so it looks the same on every page whatever the page's own stylesheet does: its own colour tokens
 * (the brand's Holo Glass values, as on the home page: dark default, light, the OS setting when no theme is set,
 * high contrast), its own type and spacing from /assets/atlas-tokens.css, logical properties (Arabic mirrors without
 * overrides). Phones: one column. Wide screens: brand | links | social | language, then the risk line and copyright.
 */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/brand/fonts/instrument-sans-latin-var.woff2?v=2ee17598a9') format('woff2');
}

/* ------------------------------------------------------------------ tokens: dark (default) */
.cd-sfoot {
  --sf-bg: #07090D;
  --sf-surface: #0F131B;
  --sf-line: #1F2533;
  --sf-line-2: #283042;
  --sf-ink: #F2F4F8;
  --sf-ink-2: #C3C9D4;
  --sf-muted: #8C95A6;
  --sf-glass: rgba(255,255,255,.045);
  --sf-focus: #7FFFD4;
  color-scheme: dark;
}
/* ------------------------------------------------------------------ tokens: light */
:root[data-theme="light"] .cd-sfoot {
  --sf-bg: #F7F8FB; --sf-surface: #FFFFFF; --sf-line: #E3E7EF; --sf-line-2: #D5DBE6;
  --sf-ink: #0E1320; --sf-ink-2: #394154; --sf-muted: #5C6578; --sf-glass: rgba(14,19,32,.03); --sf-focus: #0FA37F;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cd-sfoot {
    --sf-bg: #F7F8FB; --sf-surface: #FFFFFF; --sf-line: #E3E7EF; --sf-line-2: #D5DBE6;
    --sf-ink: #0E1320; --sf-ink-2: #394154; --sf-muted: #5C6578; --sf-glass: rgba(14,19,32,.03); --sf-focus: #0FA37F;
    color-scheme: light;
  }
}
/* ------------------------------------------------------------------ tokens: high contrast (theme.js forces dark) */
:root[data-contrast="high"] .cd-sfoot {
  --sf-bg: #000000; --sf-surface: #0A0C10; --sf-line: #6B7690; --sf-line-2: #9AA3B8;
  --sf-ink: #FFFFFF; --sf-ink-2: #E6EAF2; --sf-muted: #C2C9D6; --sf-glass: rgba(255,255,255,.10); --sf-focus: #FFE08F;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ layout */
.cd-sfoot {
  box-sizing: border-box;
  width: 100%;
  padding: 40px 0 36px;
  border-top: 1px solid var(--sf-line);
  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: 'Instrument Sans', var(--a-script, ui-sans-serif), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--a-fs-lg);
  font-weight: var(--a-fw-regular);
  line-height: var(--a-lh-body);
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.cd-sfoot *, .cd-sfoot *::before, .cd-sfoot *::after { box-sizing: border-box; }
.cd-sfoot-in {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--a-sp-6);
  display: grid; gap: var(--a-sp-7); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 720px) { .cd-sfoot-in { padding: 0 var(--a-sp-8); } }
@media (min-width: 820px) {
  .cd-sfoot-in { grid-template-columns: 1fr auto auto auto; }
  .cd-sfoot-risk, .cd-sfoot-copy { grid-column: 1 / -1; }
}
.cd-sfoot p { margin: 0; letter-spacing: normal; line-height: inherit; }
.cd-sfoot svg { display: block; max-width: 100%; }

.cd-sfoot-brand { display: grid; gap: var(--a-sp-4); justify-items: start; }
.cd-sfoot-home { display: inline-flex; align-items: center; gap: var(--a-sp-5); color: var(--sf-ink); text-decoration: none; }
.cd-sfoot-home:hover { color: var(--sf-ink); text-decoration: none; }
.cd-sfoot-mark { display: block; width: 30px; height: 30px; max-width: none; }
.cd-sfoot-mark-l { display: none; border-radius: var(--a-r-md); }
:root[data-theme="light"] .cd-sfoot-mark-d { display: none; }
:root[data-theme="light"] .cd-sfoot-mark-l { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cd-sfoot-mark-d { display: none; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cd-sfoot-mark-l { display: block; }
}
.cd-sfoot-name { font-size: var(--a-fs-lg); font-weight: var(--a-fw-semibold); line-height: 1; letter-spacing: -.025em; }
.cd-sfoot-tag { font-size: var(--a-fs-md); color: var(--sf-muted); }

.cd-sfoot-links { display: flex; gap: var(--a-sp-7); flex-wrap: wrap; }
.cd-sfoot-links a { color: var(--sf-ink-2); text-decoration: none; font-size: var(--a-fs-md); font-weight: var(--a-fw-regular); }
.cd-sfoot-links a:hover { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Phones (sweep 2026-10-19 S15): the wrapping row left one link alone on a second line, every link 20px tall.
   An even two-column grid (any link count, any language) with 44px touch targets instead. */
@media (max-width: 560px) {
  .cd-sfoot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--a-sp-6); }
  .cd-sfoot-links a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
}

.cd-sfoot-social { display: flex; gap: var(--a-sp-5); }
.cd-sfoot-ic {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--a-r-md);
  color: var(--sf-ink-2); background: transparent; border: 1px solid var(--sf-line); text-decoration: none;
}
.cd-sfoot-ic:hover { color: var(--sf-ink); border-color: var(--sf-line-2); background: var(--sf-glass); text-decoration: none; }
@media (max-width: 440px) { .cd-sfoot-ic { width: 34px; height: 34px; } }

.cd-sfoot a:focus-visible { outline: var(--a-ring-w, 2px) solid var(--sf-focus); outline-offset: var(--a-ring-off, 2px); }

.cd-sfoot-risk { font-size: var(--a-fs-sm); color: var(--sf-muted); max-width: 60em; }
.cd-sfoot-copy { font-size: var(--a-fs-md); color: var(--sf-muted); }

/* The language picker (/assets/cd-langpick.js + .css) in the footer's own tokens. */
.cd-sfoot-lang .cd-langpick { color: var(--sf-muted); font-size: var(--a-fs-md); font-weight: var(--a-fw-regular); margin: 0; }
.cd-sfoot-lang .cd-langpick label { font-size: var(--a-fs-md); font-weight: var(--a-fw-regular); color: inherit; margin: 0; }
/* pinned whole: the auth and account pages style every <select> of theirs as a full-width form field */
.cd-sfoot-lang .cd-langpick select {
  appearance: auto; -webkit-appearance: auto; background-image: none; box-shadow: none; transition: none;
  width: auto; max-width: 220px; height: auto; min-height: 0; margin: 0; padding: var(--a-sp-2) var(--a-sp-4);
  font: inherit; font-size: var(--a-fs-md); font-weight: var(--a-fw-regular); line-height: normal;
  color: var(--sf-ink); background-color: var(--sf-surface); border: 1px solid var(--sf-line-2); border-radius: var(--a-r-md); cursor: pointer;
}
.cd-sfoot-lang .cd-langpick select:hover { border-color: var(--sf-muted); }
.cd-sfoot-lang .cd-langpick select:focus { outline: none; border-color: var(--sf-line-2); }
.cd-sfoot-lang .cd-langpick select:focus-visible { outline: var(--a-ring-w, 2px) solid var(--sf-focus); outline-offset: var(--a-ring-off, 2px); }

@media print {
  .cd-sfoot { padding: var(--a-sp-6) 0 0; background: none; }
  .cd-sfoot-brand, .cd-sfoot-links, .cd-sfoot-social, .cd-sfoot-lang { display: none; }
}