/* ==========================================================================
   Seagull footer system — shared by seagullhealth.global and subtype-atlas.
   Written 6 September 2026. Keep this file BYTE-IDENTICAL in both folders:
     seagull-website/seagull-website-current/footer-system.css
     subtype-aware-evidence-workspace/footer-system.css

   LOAD ORDER: link this AFTER design-refinements.css on every page.
     <link rel="stylesheet" href="footer-system.css?v=20260906">

   WHY THE !important FLAGS: design-refinements.css lines 58-66 assert
   `font-size: 14px !important` and `color: #cbd3df !important` across every
   footer class, which is what flattened the two footers into one undiff-
   erentiated grey block. Until those two rules and the per-page footer CSS
   in each page's inline <style> are deleted, this file can only win by
   matching them. Once they are gone, delete every !important below and the
   file keeps working unchanged.

   THE SCALE — four steps, not one:
     1  brand name     16px / 800 / #ffffff
     2  section label  12px / 800 / uppercase / #ef7835
     3  body + links   14px / 400 / #cbd3df
     3b muted body     14px / 400 / #93a3b8   (tagline, boundary statement)
     4  bottom bar     13px / 400 / #8494a8

   Contrast on #0a1628: #fff 18.1:1, #cbd3df 12.0:1, #93a3b8 7.1:1,
   #8494a8 5.9:1, #ef7835 6.4:1. All pass WCAG AA at their sizes.
   ========================================================================== */

/* --- Class map -------------------------------------------------------------
   Same slot, different class name per site. Note .footer-copy means TWO
   different things and must always be scoped by its parent:
     .footer-grid   .footer-copy  = atlas tagline sentence
     .footer-bottom .footer-copy  = main-site copyright line

   slot            main site              atlas
   brand name      .footer-brand-name     .footer-brand
   tagline         .footer-brand-tag      .footer-grid .footer-copy
   description     .footer-brand-desc     —
   boundary        —                      .footer-boundary
   section label   .footer-col-title      .footer-heading
   links           .footer-links a        .footer-grid a
   bottom bar      .footer-bottom p       .footer-bottom span
   -------------------------------------------------------------------------- */

body footer,
body .site-footer {
  --fs-ink:    #0a1628;  /* --ink (main) / --navy (atlas): the same value */
  --fs-text:   #cbd3df;
  --fs-muted:  #93a3b8;
  --fs-dim:    #8494a8;
  --fs-accent: #ef7835;
  --fs-rule:   rgba(255, 255, 255, 0.10);
  --fs-max:    1180px;

  background: var(--fs-ink);
  padding-block: 64px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Shell ---------------------------------------------------------------
   The two sites gutter differently and both are fine: the main site pads
   <footer> and centres .footer-grid; the atlas puts .container on the grid.
   Only the cap is unified here — that also pulls privacy-policy.html and
   seizuresafe.html back from their one-off 1120px to the 1180px everything
   else uses. --------------------------------------------------------------- */

body .footer-grid,
body .footer-bottom {
  max-width: var(--fs-max);
  margin-inline: auto;
}

body .footer-grid {
  display: grid;
  /* Remove this line if each site should keep its own column rhythm. */
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  padding-bottom: 0;
  border-bottom: 0;  /* the divider now lives on .footer-bottom, once */
}

body .footer-grid > * { min-width: 0; }

body .footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--fs-rule);
}

/* ---- 1. Brand name -------------------------------------------------------
   Was 16px/800 on the main site and 17.92px/850 on the atlas — the one
   footer element the shared standard never covered, so the logotype read
   differently between the two properties. ---------------------------------- */

body .footer-brand-name,
body .footer-brand {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* ---- 2. Section label ----------------------------------------------------
   The only element that gets the uppercase micro-label treatment, and the
   only place the brand orange appears in the footer. This restores the
   atlas's original orange .footer-heading, which `color: #cbd3df !important`
   had been overwriting. ---------------------------------------------------- */

body .footer-col-title,
body .footer-heading {
  margin: 0 0 12px;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-accent) !important;
}

/* ---- 3. Body copy and links --------------------------------------------- */

body .footer-brand-desc {
  margin: 0;
  font-size: 14px !important;
  line-height: 1.65;
  color: var(--fs-text) !important;
}

body .footer-links {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

body .footer-links a,
body .footer-grid a {
  display: inline-block;
  margin: 0;
  padding-block: 6px;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fs-text) !important;
  text-decoration: none;
}

body .footer-links a:hover,
body .footer-grid a:hover {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- 3b. Muted body: tagline and boundary statement ----------------------
   The tagline slot held two different species: an uppercase micro-label on
   the main site, a full sentence on the atlas. Unified as sentence-case
   muted body copy — the atlas string is a whole sentence and setting it in
   12px caps would hurt legibility for this audience. ------------------------ */

body .footer-brand-tag,
body .footer-grid .footer-copy {
  margin: 0 0 14px;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fs-muted) !important;
}

body .footer-boundary {
  margin: 0;
  max-width: 42ch;
  font-size: 14px !important;
  line-height: 1.6;
  color: var(--fs-muted) !important;
}

/* ---- 4. Bottom bar -------------------------------------------------------
   Copyright, disclaimer and editorial version. Steps down to 13px so the
   legal line stops carrying the same weight as a navigation link. --------- */

body .footer-bottom,
body .footer-bottom p,
body .footer-bottom span,
body .footer-bottom .footer-copy,
body .footer-bottom .footer-disclaimer {
  margin: 0;
  font-size: 13px !important;
  line-height: 1.6;
  color: var(--fs-dim) !important;
}

body .footer-bottom .footer-disclaimer {
  max-width: 62ch;
  text-align: left;  /* privacy-policy.html alone had this right-aligned */
}

body .footer-bottom a {
  font-size: 13px !important;
  color: var(--fs-dim) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body .footer-bottom a:hover {
  color: var(--fs-text) !important;
}

/* ---- Focus -------------------------------------------------------------
   design-refinements.css focuses with `outline: 3px solid var(--ink)`,
   which is #0a1628 — invisible against this footer. Orange instead. ------- */

body footer a:focus-visible,
body .site-footer a:focus-visible {
  outline: 3px solid var(--fs-accent);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  body .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 600px) {
  body footer,
  body .site-footer { padding-block: 48px 28px; }

  body .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 32px;
  }

  body .footer-bottom .footer-disclaimer { text-align: left; }
}