/* ==========================================================================
   legal.css — the whole design system for the legal pages.

   Was `legacy.css`, shared with `app/views/layouts/application.html.erb`. That
   layout was deleted when D15 finished (2026-07-28) and its `.dropdown-*` rules
   went with it — nothing renders those classes any more (the UN Agency header
   uses its own `un-dropdown-*`). What remains is live: `layouts/legal` serves
   /privacy_policy and /360_degree_feedback/cookie_policy, and loads NO tailwind
   and NO application.css, so these rules ARE the design system for those pages.

   LINK ORDER: last in <head> — the rules below were lifted verbatim from a
   <style> block that sat at the end of that head.
   ========================================================================== */

/* ===== Legal layout chrome (app/views/layouts/legal.html.erb) =============
   Lifted verbatim from the layout's <style> block. The `legal` layout loads
   NO tailwind and NO application.css, so these rules are the whole design
   system for /privacy_policy and friends — do not tidy or normalise them.
   ========================================================================= */
:root { --legal-navy: #003366; --legal-ink: #1f2937; --legal-muted: #6b7280; --legal-border: #e5e7eb; }
.legal-body { margin: 0; font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--legal-ink); background: #fff; }

.legal-header { border-bottom: 1px solid var(--legal-border); }
.legal-header-inner { max-width: 48rem; margin: 0 auto; padding: 1.25rem 1.5rem; }
.legal-header img { height: 32px; width: auto; display: block; }

.legal-page { max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.legal-page h1 { font-size: 2rem; font-weight: 700; color: var(--legal-navy); line-height: 1.2; margin: 0 0 0.5rem; }
.legal-page h2 { font-size: 1.375rem; font-weight: 700; color: var(--legal-navy); margin: 2.5rem 0 0.75rem; }
.legal-page h3 { font-size: 1.125rem; font-weight: 600; color: var(--legal-navy); margin: 2rem 0 0.5rem; }
.legal-page h4 { font-size: 1rem; font-weight: 600; color: var(--legal-ink); margin: 1.5rem 0 0.5rem; }
.legal-page p { font-size: 1rem; line-height: 1.7; margin: 0 0 1rem; }
.legal-page ul, .legal-page ol { margin: 0 0 1rem; padding-left: 1.5rem; line-height: 1.7; }
.legal-page li { margin-bottom: 0.375rem; }
.legal-page a { color: var(--legal-navy); text-decoration: underline; }
.legal-page .legal-updated { color: var(--legal-muted); font-size: 0.875rem; margin: 0 0 2rem; }
.legal-page .center { text-align: left; }

.legal-footer { border-top: 1px solid var(--legal-border); margin-top: 2rem; }
.legal-footer-inner { max-width: 48rem; margin: 0 auto; padding: 2rem 1.5rem; }
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.legal-footer-links a { color: var(--legal-muted); text-decoration: none; font-size: 0.875rem; }
.legal-footer-links a:hover { color: var(--legal-navy); }
.legal-footer-copy { color: var(--legal-muted); font-size: 0.8125rem; }
.legal-footer-bar { background: var(--legal-navy); padding: 0 1.5rem; }
.legal-footer-bar .footer-locale-bar { max-width: 48rem; margin: 0 auto; }

/* ===== Cookie policy (app/views/home/cookie_policy.html.erb) ==============
   HomeController#cookie_policy renders under the `application` layout
   (`layout "legal"` is scoped to :privacy_policy only). The page had 28
   inline attributes carrying just four distinct declarations.
   ========================================================================= */

/* Body copy: every <p>, <dt> and <dd> in the policy (24 occurrences). */
.cookie-policy-text { font-size: 18px; }

/* The numbered "Index" list at the top. */
.cookie-policy-index { font-size: 15px; }

/* The bulleted list of fields a contact form collects. */
.cookie-policy-form-fields { margin-left: 20px; font-size: 15px; }

/* "Purpose" column of the cookie table. */
.cookie-policy-purpose-col { width: 50%; }

/* ===== Glossary term card (app/views/glossary/_term.html.erb) =============
   Both call sites run under the `application` layout: glossary#index and
   Admin::GlossaryTermsController#preview (`render layout: "application"`).
   Lifted from a partial-level <style> block that used a bare `img` selector;
   `!important` retained because the original had it (imported term bodies
   carry hard-coded height attributes).
   SCOPED CHANGE: the original bare rule leaked to every image on the host
   page. On both host pages the only other images are logos that already
   compute to `height: auto`, EXCEPT any images inside the `glossary/_details`
   body on the admin preview page — see the P6 report, item 6.
   ========================================================================= */
.glossary-term-card img {
  height: auto !important;
}
