/*
 * UMG people-site footer (r2666, Oct 28 2026). One footer for every UMG people-facing site.
 * Spec: SPEC.md in this folder.
 *
 * Isolation: every rule sits under .umgf and every custom property is named --umgf-*,
 * so nothing here reaches the host page and the host's own tokens never collide.
 * This file loads no fonts and makes no network request. It uses the host's
 * Literata and Instrument Sans when the host serves them, and system faces otherwise.
 *
 * Theme, in order of strength:
 *   1. data-theme="light" or "dark" on the <footer class="umgf"> itself (always wins).
 *   2. data-theme="light" or "dark" on an ancestor (for example <html>).
 *   3. The visitor's system setting (prefers-color-scheme), when 1 and 2 are absent or "auto".
 * A host that has only a light design sets data-theme="light" on the footer, so a
 * dark-mode phone never gets a dark footer under a light page.
 */

/* ---------- Tokens: light (default) ---------- */
.umgf {
  --umgf-ground: #eae6df;      /* stone, ummah-surface-sunken */
  --umgf-ink: #0f1f17;         /* ummah-ink */
  --umgf-ink-2: #4a6356;       /* ummah-ink-secondary, 5.2:1 on stone */
  --umgf-accent: #166534;      /* forest: star, hover, "you are here" */
  --umgf-focus: #166534;       /* ummah-focus */
  --umgf-rule: #cfc6bb;        /* hairlines, decorative only */
  --umgf-leader: #b8ad9e;      /* dot leaders, decorative only */
  --umgf-star: #166534;        /* ummah-star by day */

  --umgf-font-display: 'Literata', 'Literata Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --umgf-font-ui: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --umgf-tap: 44px;
  --umgf-gutter: 16px;
  --umgf-max: 1200px;
  color-scheme: light;
}

/* A hidden link stays hidden whatever the host's own rules say (r2671 agency switch, static sites). */
.umgf [hidden] { display: none !important; }

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  .umgf:not([data-theme="light"]):not([data-theme="light"] .umgf):not([data-umg-theme="light"] .umgf) {
    --umgf-ground: #0d1525;    /* ummah-surface-raised at night */
    --umgf-ink: #faf8f3;       /* cream */
    --umgf-ink-2: #b8bcbd;     /* cream at 70% composited on the ground, as a solid colour */
    --umgf-accent: #dfa032;    /* gold-bright, the night star and action colour */
    --umgf-focus: #dfa032;
    --umgf-rule: #26304a;
    --umgf-leader: #3a4560;
    --umgf-star: #dfa032;
    color-scheme: dark;
  }
}
.umgf[data-theme="dark"],
[data-theme="dark"] .umgf:not([data-theme="light"]):not([data-theme="auto"]),
[data-umg-theme="dark"] .umgf:not([data-theme="light"]):not([data-theme="auto"]) {
  --umgf-ground: #0d1525;
  --umgf-ink: #faf8f3;
  --umgf-ink-2: #b8bcbd;
  --umgf-accent: #dfa032;
  --umgf-focus: #dfa032;
  --umgf-rule: #26304a;
  --umgf-leader: #3a4560;
  --umgf-star: #dfa032;
  color-scheme: dark;
}

/* ---------- Base and reset (scoped) ---------- */
.umgf,
.umgf *,
.umgf *::before,
.umgf *::after { box-sizing: border-box; }

.umgf [hidden] { display: none !important; }

.umgf {
  display: block;
  margin: 0;
  padding: 0 var(--umgf-gutter);
  background: var(--umgf-ground);
  border-top: 1px solid var(--umgf-rule);
  color: var(--umgf-ink);
  font-family: var(--umgf-font-ui);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
.umgf h2, .umgf h3, .umgf p, .umgf ul, .umgf li { margin: 0; padding: 0; }
.umgf ul { list-style: none; }
.umgf a { color: inherit; text-decoration: none; background: none; }

.umgf-inner { max-width: var(--umgf-max); margin: 0 auto; }

/* ---------- Links: one treatment, 44px tall ---------- */
.umgf-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--umgf-tap);
  min-width: var(--umgf-tap);
  color: var(--umgf-ink);
  font-size: 16px;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms ease, color 120ms ease;
}
.umgf-link:hover { color: var(--umgf-accent); text-decoration-color: currentColor; }

/* Focus: a solid outline that nothing else in this file overrides (defect 14). */
.umgf a:focus-visible {
  outline: 3px solid var(--umgf-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Band 1: the host site ---------- */
.umgf-site {
  display: grid;
  gap: 24px;
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--umgf-rule);
}
.umgf-site-name {
  font-family: var(--umgf-font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.umgf-site-line {
  margin-top: 8px;
  max-width: 34em;
  color: var(--umgf-ink-2);
  font-size: 14px;
  text-wrap: pretty;
}
.umgf-contact { margin-top: 8px; }
.umgf-contact .umgf-link { font-size: 14px; color: var(--umgf-ink-2); }
.umgf-contact .umgf-link:hover { color: var(--umgf-accent); }

.umgf-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}
.umgf-group-title {
  font-family: var(--umgf-font-ui);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--umgf-ink);
  margin-bottom: 4px;
}
.umgf-group .umgf-link { font-size: 14px; color: var(--umgf-ink-2); }
.umgf-group .umgf-link:hover { color: var(--umgf-accent); }

/* ---------- Band 2: the three stacks ---------- */
.umgf-stacks {
  display: grid;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--umgf-rule);
}
.umgf-stack-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--umgf-font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.umgf-mark { flex: none; width: 28px; height: 28px; display: block; }
.umgf-mark-star polygon { fill: var(--umgf-star); }
.umgf-stack-line {
  margin-top: 8px;
  max-width: 36em;
  color: var(--umgf-ink-2);
  font-size: 14px;
  text-wrap: pretty;
}
.umgf-stack-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 4px;
}
.umgf-stack-links .umgf-link {
  display: inline-block;        /* the arrow flows with the words when a label wraps */
  padding: 10px 0;
  line-height: 24px;
  font-weight: 500;
  text-wrap: balance;
}
.umgf-nw { white-space: nowrap; }
.umgf-arrow { margin-left: 6px; transition: transform 120ms ease; }
.umgf-link:hover .umgf-arrow { transform: translateX(2px); }

/* The board: tools as features, each with its product name. Signature element. */
.umgf-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 16px;
  border-top: 1px solid var(--umgf-rule);
  padding-top: 8px;
}
.umgf-tool a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding: 4px 0;
  color: var(--umgf-ink);
  text-decoration: none;
}
.umgf-tool-name { font-size: 16px; line-height: 1.25; font-weight: 500; }
.umgf-tool-product {
  font-size: 12px;
  line-height: 1.4;
  color: var(--umgf-ink-2);
  font-variant-numeric: tabular-nums;
}
.umgf-tool-leader { display: none; }
.umgf-tool a:hover .umgf-tool-name { color: var(--umgf-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.umgf-tool a[aria-current] .umgf-tool-product { color: var(--umgf-accent); font-weight: 600; }

.umgf-signin { margin-top: 8px; }
.umgf-signin .umgf-link { font-size: 14px; color: var(--umgf-ink-2); }
.umgf-signin .umgf-link:hover { color: var(--umgf-accent); }

/* ---------- Band 3: legal ---------- */
.umgf-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 24px;
}
.umgf-foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.umgf-foot-links .umgf-link { font-size: 14px; color: var(--umgf-ink-2); }
.umgf-foot-links .umgf-link:hover { color: var(--umgf-accent); }
.umgf-parent { font-size: 12px; line-height: 1.5; color: var(--umgf-ink-2); }
.umgf-parent .umgf-link { font-size: 12px; color: inherit; }

/* ---------- 560px and up: the board gets dot leaders ---------- */
@media (min-width: 560px) {
  .umgf-tool a {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-height: var(--umgf-tap);
    padding: 10px 0;
  }
  .umgf-tool-leader {
    display: block;
    flex: 1 1 auto;
    min-width: 16px;
    border-bottom: 2px dotted var(--umgf-leader);
    transform: translateY(-4px);
  }
  .umgf-tool-product { font-size: 14px; white-space: nowrap; }
  .umgf-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 768px and up ---------- */
@media (min-width: 768px) {
  .umgf { --umgf-gutter: 32px; }
  .umgf-site { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding-top: 48px; }
  .umgf-stacks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .umgf-stack-people { grid-column: 1 / -1; }
}

/* ---------- 1100px and up: the lockup sits on one row ---------- */
@media (min-width: 1100px) {
  .umgf { --umgf-gutter: 40px; }
  .umgf-stacks {
    grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: 0;
    padding: 40px 0;
  }
  .umgf-stack-people { grid-column: auto; padding-right: 40px; }
  .umgf-stack-org,
  .umgf-stack-ads { padding-left: 32px; border-left: 1px solid var(--umgf-rule); }
  /* HF2 finding 1 (one seat, applied): the advertiser door has one link, so its hairline is cut to the
     content's own height instead of running the full row; the quiet door stays quiet, not unfinished. */
  .umgf-stack-ads { align-self: start; }
  .umgf-stack-org { padding-right: 32px; }
  .umgf-foot { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .umgf *, .umgf *::before, .umgf *::after { transition-duration: 0ms !important; }
}

@media print {
  .umgf { background: none; color: #000; border-top: 1px solid #000; }
  .umgf-board, .umgf-stack-ads, .umgf-signin { display: none; }
}

/* Host hardening (ummah.city, Oct 28 2026): a host rule like `body.day-mode h2 { color: var(--ink) }` (0,1,2) beats a
   single-class kit rule (0,1,0). These element-qualified, double-class selectors (0,2,1) keep the footer's own ink
   whatever the host says about headings, paragraphs and links. Tokens, not literals, so themes still apply. */
.umgf h2.umgf-site-name, .umgf h2.umgf-stack-head { color: var(--umgf-ink); }
.umgf h3.umgf-group-title { color: var(--umgf-ink); }
.umgf p.umgf-site-line, .umgf p.umgf-stack-line, .umgf p.umgf-parent { color: var(--umgf-ink-2); }
.umgf a.umgf-link { color: var(--umgf-ink); text-decoration: none; }
.umgf .umgf-contact a.umgf-link, .umgf .umgf-group a.umgf-link, .umgf .umgf-signin a.umgf-link, .umgf .umgf-foot-links a.umgf-link { color: var(--umgf-ink-2); }
.umgf .umgf-parent a.umgf-link { color: inherit; }
.umgf a.umgf-link:hover { color: var(--umgf-accent); }
.umgf .umgf-tool a { color: var(--umgf-ink); text-decoration: none; }
.umgf .umgf-tool a .umgf-tool-product { color: var(--umgf-ink-2); }
.umgf .umgf-tool a[aria-current="true"] .umgf-tool-product { color: var(--umgf-accent); }