/* shared/legal.css — the legal row in the footer strip and the site's one overlay mechanism, on every page (PR #45,
   AIE-Q26; STRATEGY v3_3 §6; PR45-Q17, Q21, Q23, Q25, Q26).
   - Row: © first, then Report an issue (the only page: uppercase, a bug icon), Terms of use, License, Privacy policy
     and Your privacy choices, the related pair last, every item the same distance apart (PR45-Q30). One row from
     1024 px; stacked and left-aligned from 768 to 1023; below 768 one 44 px row per item, so each is an easy tap. Each
     icon sits before its label: the overlays' ↗, the choices control's switch (shared/switch.css). Hover and focus turn a label white and heavier without changing its width, so nothing beside it moves.
   - Overlays (variant A, PR45-Q23): a dark card centred on a blurred scrim, the purple top rule, the title beside the
     navbar's close (the 44 px purple square with a white X, shared/nav.css), the text scrolling inside the card when it
     runs taller than the screen, actions in the site's CTA (shared/cta.css). Any future overlay uses these classes.
   - The scroll lock (body.modal-open) is Contact's rule, repeated here so every page carries it. */

/* ---------- The row ---------- */
.footer__meta.legal {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.5rem;
}
.legal__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 24px;
  min-width: 24px;
  margin: 0;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--color-text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-ui) var(--ease-standard), text-shadow var(--duration-ui) var(--ease-standard);
}
/* White and heavier, as the navbar's labels (PR45-Q21); the weight is drawn, not set, so the width never changes (PR45-Q25). */
.legal__link:hover,
.legal__link:focus-visible { color: var(--color-brand-white); text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor; }
.legal__link:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 3px; }
.legal__link--page { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9em; }
.legal__icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.legal__icon--out { width: 0.75em; height: 0.75em; stroke-width: 2.2; }
@media (min-width: 1024px) {
  .footer__meta.legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
  }
  .legal__links { justify-content: flex-end; }
}
/* Phones: one row per item, full width, 44 px tall, hairlines between them, the same spacing throughout (PR45-Q30). */
@media (max-width: 767px) {
  .footer__meta.legal { align-items: stretch; gap: 1rem; }
  .legal__links { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .legal__links li { border-top: 1px solid var(--color-border-faint); }
  .legal__links li:last-child { border-bottom: 1px solid var(--color-border-faint); }
  .legal__link { width: 100%; min-height: 44px; padding: 0.5rem 0; }
}

body.modal-open { overflow: hidden; }

/* ---------- The overlay (variant A) ---------- */
.legal-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-ui) var(--ease-standard),
              visibility 0s linear var(--duration-ui);
}
/* Visible from the first frame on opening, so focus can move inside at once; hidden only after the fade on closing. */
.legal-dialog.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-ui) var(--ease-standard), visibility 0s;
}
.legal-dialog__window {
  position: relative;
  width: min(40rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-top: 4px solid var(--color-brand-purple);
  color: var(--color-brand-white);
  font-family: var(--font-primary);
  text-align: left;
  transform: translateY(8px);
  transition: transform var(--duration-ui) var(--ease-standard);
}
.legal-dialog.is-active .legal-dialog__window { transform: none; }
.legal-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.legal-dialog__heading { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.25rem; min-width: 0; }
.legal-dialog__rule { display: block; width: 2.5rem; height: 3px; background: var(--color-brand-purple); }
.legal-dialog__title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-brand-white);
}
/* The navbar's close: the open menu button (shared/nav.css .nav__hamburger--open), 44 px, purple, a white X. */
.legal-dialog__close {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--color-brand-purple);
  cursor: pointer;
  transition: background-color var(--duration-ui) var(--ease-standard);
}
.legal-dialog__close span { position: absolute; left: 50%; top: 50%; width: 1.5rem; height: 2px; background: #FFFFFF; }
.legal-dialog__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.legal-dialog__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.legal-dialog__close:hover { background: var(--color-purple-hover); }
.legal-dialog__close:focus-visible { outline: 2px solid var(--color-brand-white); outline-offset: 3px; }
.legal-dialog__body {
  font-size: 1rem;
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--color-text-muted);
}
.legal-dialog__body p { margin: 0 0 0.75rem; }
.legal-dialog__body p:last-child { margin-bottom: 0; }
.legal-dialog__body ul { margin: 0 0 0.75rem; padding-left: 1.25rem; list-style: disc; }
.legal-dialog__body li { margin: 0 0 0.35rem; }
.legal-dialog__body h3 { margin: 1.75rem 0 0.4rem; font-size: 1.1rem; font-weight: var(--fw-bold); line-height: 1.3; color: var(--color-brand-white); }
.legal-dialog__meta { font-size: 0.85rem; color: var(--color-text-dim); }
.legal-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2rem;
}
/* The actions are the site's CTA (shared/cta.css, PR45-Q20), reproduced here scoped to the overlay: the four briefs carry
   their own inline CTA and can't link the global rule without restyling theirs (measured: 7 to 11 CTAs per brief), the
   precedent shared/brief-ending.css records. Retire this copy when the briefs move to shared/cta.css (backlog). */
.legal-dialog .cta { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; width: fit-content; min-height: 44px;
  margin: 0; padding: 0.125rem 0; background: none; border: none; font-family: var(--font-primary); }
.legal-dialog .cta__label { font-size: 1rem; font-weight: var(--fw-bold); color: var(--color-brand-white); letter-spacing: 0.005em; text-align: left; }
.legal-dialog .cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
  background: var(--color-brand-purple); transition: background var(--duration-ui) var(--ease-standard); }
.legal-dialog .cta:hover .cta__icon, .legal-dialog .cta:focus-visible .cta__icon { background: var(--color-purple-hover); }
.legal-dialog .cta:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 3px; }
.legal-dialog .cta__icon svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: var(--color-on-brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.legal-dialog__done { margin: 1.25rem 0 0; font-size: 0.95rem; color: var(--color-brand-white); }
.legal-dialog__done[hidden] { display: none; }

/* ---------- Words inside a sentence that link or open an overlay (the forms' consent line, the policy) ---------- */
.legal__inline,
.legal-dialog__body a {
  display: inline;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--color-purple-light);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.legal__inline:focus-visible,
.legal-dialog__body a:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 2px; }