/* Empower Mississippi — site chrome.
   Everything on this page that is NOT the homepage design: the header, the
   mega-menu trigger row, the mobile menu, the footer, and the accessibility
   overrides that apply wherever those components appear.

   Every homepage option loads this file, then its own stylesheet on top.
   Upstream tokens/ and components/ are never edited; local overrides live here. */

/* ---------- Accessibility overrides (local, reversible) ----------
   Every rule in this block exists to clear a measured WCAG 2.2 AA failure.
   They live here, not in tokens/, so Empower can revert any of them with a
   single deletion once the brand decisions below are settled.

   1. --em-orange (#E65A28) measures 3.59:1 on white and 3.15:1 on the tinted
      surface, both under AA's 4.5:1 for normal-size text. --em-orange-ink is
      the same hue at 80% lightness: 5.17:1 on white, 4.54:1 on the tint. It is
      used ONLY where orange is small text on a light surface. Orange fills,
      orange-on-navy (--orange-300, 5.44:1) and the focus ring keep the exact
      brand value.
   2. Fluid display scale + word breaking so 200% text zoom at 320px no longer
      forces horizontal scrolling (SC 1.4.4 / 1.4.10).
   3. 24x24 minimum target size on standalone links (SC 2.5.8). */

:root{
  /* #BA4920 is the brand orange at 80% lightness. It has to clear 4.5:1 on
     BOTH white (5.17:1) and --surface-tint / --blue-100 (4.54:1), since the
     same roles appear on tinted section backgrounds. */
  --em-orange-ink:#BA4920;
  /* Fluid replacements for the fixed rem display steps. Max values are the
     original token values, so nothing shrinks at desktop widths. */
  --fs-hero:clamp(2rem,1.15rem + 3.4vw,4rem);
  --fs-h1:clamp(1.85rem,1.3rem + 2.2vw,3rem);
  --fs-h2:clamp(1.5rem,1.2rem + 1.3vw,2.25rem);
  --fs-h3:clamp(1.25rem,1.15rem + .5vw,1.625rem);
}

/* Long single words (Mississippians, opportunity) must wrap rather than push
   the line box wider than the viewport once text is scaled up. */
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
p{text-wrap:pretty}
/* h1-h3 get break-word above; body copy needs it too once text is scaled.
   Declared BEFORE the narrow-viewport block below, which upgrades it to
   `anywhere` — source order decides, and `anywhere` has to win there. */
body{overflow-wrap:break-word}

.em-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Keyboard users land on the header's first control otherwise, and have to
   tab the whole nav before reaching the page. */
.em-skip{position:absolute;left:var(--space-4);top:-100px;z-index:60;
  padding:12px 20px;border-radius:var(--radius-pill);
  background:var(--em-blue);color:var(--white);text-decoration:none;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-small);
  transition:top var(--dur) var(--ease-out)}
.em-skip:focus{top:var(--space-4);color:var(--white)}

/* SC 1.4.3: the orange fill is the brand value and stays untouched, so the
   LABEL crosses the large-text threshold instead. --em-orange on white is
   3.59:1, which fails the 4.5:1 for normal text but passes the 3:1 that
   applies at 18.66px and above for bold. 19px clears it. Every option's
   single primary CTA uses this size, so the rule is chrome, not per-page.
   components.css sets .em-btn{white-space:nowrap}, which makes a 19px label
   282px of unbreakable min-content — the 420px block below lets it wrap so
   that cannot force horizontal scroll at 320px. */
.em-btn--primary.em-btn--lg{font-size:19px}

/* SC 2.5.8: standalone links need a 24x24 target. These are card and list
   links, not links inside a sentence, so the inline exception does not apply. */
.em-article__more,
.em-solution__more,
.em-footer__links a{display:inline-flex;align-items:center;min-height:24px;min-width:24px}
.em-footer__links li{margin:0}

/* ---------- Sticky, condensing header ---------- */
/* components.css sets .em-header{position:relative;z-index:40}; only the
   positioning is overridden here so the upstream file stays untouched.
   js/reveal.js sets [data-scrolled] on <html> past 80px. */
.em-header{position:sticky;top:0;transition:box-shadow var(--dur) var(--ease-out)}
.em-header__bar{transition:min-height var(--dur) var(--ease-out)}
[data-scrolled] .em-header{box-shadow:var(--shadow-md)}
[data-scrolled] .em-header__bar{min-height:68px}

/* ---------- Header search ---------- */
.em-header__search{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  padding:0;border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:none;color:var(--em-blue);cursor:pointer;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.em-header__search:hover{background:var(--blue-100);border-color:var(--blue-400)}
.em-header__search svg{width:17px;height:17px}

/* ---------- Header mobile menu toggle ---------- */
/* Hidden at desktop widths; the 960px breakpoint below reveals it once
   .em-header__nav is hidden. Lives inside .em-header__actions so it
   inherits the same right-aligned flex group as search + Donate. */
.em-header__toggle{display:none;width:38px;height:38px;flex:0 0 auto;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  padding:0;border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:none;cursor:pointer;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.em-header__toggle:hover{background:var(--blue-100);border-color:var(--blue-400)}
.em-header__toggle-bar{display:block;width:16px;height:2px;border-radius:1px;
  background:var(--em-blue);transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
.em-header__toggle[aria-expanded="true"] .em-header__toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.em-header__toggle[aria-expanded="true"] .em-header__toggle-bar:nth-child(2){opacity:0}
.em-header__toggle[aria-expanded="true"] .em-header__toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Header mobile menu panel ---------- */
/* Inline dropdown, not an overlay: it is a normal-flow sibling of the
   header bar, so opening it pushes <main> down rather than covering it.
   No scroll-lock and no focus trap — deliberate, matches the simplicity
   of an inline panel. Ships expanded-by-default in the markup (see
   _shared/header.html) for progressive enhancement; js/nav.js collapses it
   once it loads. The [hidden] overrides use an extra attribute selector
   to out-rank the plain-class display rule regardless of cascade order. */
.em-mobilenav{display:none;border-top:1px solid var(--border-subtle);background:var(--surface-page)}
.em-mobilenav__list{list-style:none;margin:0;padding:var(--space-3) 0}
.em-mobilenav__item{border-bottom:1px solid var(--border-subtle)}
.em-mobilenav__item:last-child{border-bottom:0}
.em-mobilenav__link,.em-mobilenav__trigger{display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:var(--space-3);padding:var(--space-4) var(--gutter);
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-small);
  color:var(--em-blue);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.em-mobilenav__link:hover,.em-mobilenav__trigger:hover{color:var(--blue-800)}
.em-mobilenav__caret{width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out)}
.em-mobilenav__trigger[aria-expanded="true"] .em-mobilenav__caret{transform:rotate(-135deg)}

/* A row that is both a destination and a group: the label goes to the page,
   the caret opens the children. The sublist is a child of the row, so the row
   itself cannot be the flex container — the wrapper is, and the sublist is
   pushed onto its own line by wrapping rather than by taking the row apart. */
.em-mobilenav__item--split{display:flex;flex-wrap:wrap;align-items:center}
.em-mobilenav__item--split .em-mobilenav__link{flex:1 1 auto;width:auto}
/* 56px against the 44px minimum target: the caret is the smaller half of a
   split row and is the one control here a thumb can miss. */
.em-mobilenav__trigger--caret{width:56px;flex:0 0 auto;justify-content:center;
  padding-inline:var(--space-4);min-height:44px}
.em-mobilenav__item--split .em-mobilenav__sublist{flex:1 0 100%}
.em-mobilenav__sublist{list-style:none;margin:0;
  padding:0 var(--gutter) var(--space-3) calc(var(--gutter) + var(--space-4))}
.em-mobilenav__sublink{display:block;padding:var(--space-2) 0;font-size:var(--fs-caption);
  color:var(--text-body);text-decoration:none}
.em-mobilenav__sublink:hover{color:var(--em-orange-ink)}

/* ---------- Footer ---------- */
/* The two footer column headings are h3, not the h4 components.css styles.

   They were h4 while every page above them happened to end on an h3 — the
   homepages all close with the Join Us cards. The About Us pages close on a
   section whose deepest heading is an h2, so the same footer produced h2
   followed by h4: a skipped level on six pages, caused by a partial that had
   never been wrong before.

   h3 is also the honest level. These head the footer's own groups; nothing on
   any page makes them a subsection of something else. components.css is the
   upstream design system and is left alone, so the h4 rule is restated here
   for h3 — one line, and reversible by deleting it if the footer ever goes
   back. */
.em-footer h3{font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--orange-300);margin:0 0 var(--space-4)}

/* Shipped em-footer__top is 1.4fr repeat(3,1fr); the homepage has three groups. */
.em-footer__top{grid-template-columns:1.5fr 1fr 1fr}
.em-footer__mission{font-size:var(--fs-small);line-height:1.6;color:var(--text-inverse-muted);
  max-width:40ch;margin:0 0 var(--space-6)}
.em-footer__bottom p{margin:0}

/* The build credit sits in the bottom bar beside the legal line and the
   address. It is a standalone link rather than one inside a sentence, so
   SC 2.5.8 applies and it carries the same 24px target the footer list
   links were given above. Colour and hover match .em-footer__links a so the
   bottom bar reads as the same footer, not a bolted-on line. */
.em-footer__credit a{color:var(--white);text-decoration:none;display:inline-flex;
  align-items:center;min-height:24px;min-width:24px;transition:color var(--dur) var(--ease-out)}
.em-footer__credit a:hover{color:var(--orange-300)}

/* ---------- Responsive ---------- */
/* The header bar (logo + six nav links + search + Donate) never wraps and
   has an intrinsic min-content width of ~940px — measured, not assumed —
   so it overflows before a general 900px stacking breakpoint gets a
   chance to help. Hide the nav a step earlier than that, with margin.
   The mobile toggle + panel come on at the same breakpoint so the nav
   is never unreachable: .em-header__actions picks up the margin-left:auto
   that .em-header__nav used to provide, since nav no longer participates
   in the flex row to push it right. */
@media (max-width:960px){
  .em-header__nav{display:none}
  .em-header__toggle{display:flex}
  .em-header__actions{margin-left:auto}
  .em-mobilenav{display:block}
  .em-mobilenav[hidden]{display:none}
  .em-mobilenav__sublist[hidden]{display:none}
}

@media (max-width:900px){
  .em-footer__top{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  .em-footer__top{grid-template-columns:1fr}
}

@media (max-width:420px){
  /* SC 1.4.4 asks for 200% text with no loss of content. At 320px that means
     nothing may keep an unbreakable intrinsic width: every .em-btn is
     white-space:nowrap upstream, so it grows with the user's text size and
     pushes the layout past the viewport. Buttons wrap here instead. */
  .em-btn{white-space:normal;text-align:center}
  .em-mobilenav__link,.em-mobilenav__trigger{padding-left:16px;padding-right:16px}
  /* The header bar's children are flex:0 0 auto, so at 200% text the Donate
     button cannot give any width back. Let the actions group shrink. */
  .em-header__bar>*,.em-header__actions{min-width:0}
  .em-header__actions .em-btn{flex:0 1 auto}
  /* break-word does NOT reduce an element's min-content width, so a long word
     still forces the grid track wider than the viewport once text is scaled.
     `anywhere` does reduce it. Scoped to this breakpoint because it is an
     aggressive break and only matters where the viewport is this narrow.
     h1-h3 have to be named explicitly: the rule at the top of this file sets
     them to break-word, and an element-level declaration out-specifies the
     value they would otherwise inherit from body. Without this line the
     headings alone keep their long-word min-content width and push a grid
     track past the viewport at 200% text — measured at 320px, 14px over. */
  body,h1,h2,h3{overflow-wrap:anywhere}
}

/* Below ~324px, .em-header__bar's non-wrapping, non-shrinking children
   overflow the ~257px available inside a 320px viewport — measured, not
   assumed. .em-header__nav is already hidden by the 960px rule above, so
   the remaining overflow is logo + bar gap + actions gap + actions
   contents: search + Donate + the mobile toggle push the measured
   min-content width to 326px. Search is the one action with no unique
   destination yet (the mobile menu now covers real navigation), so it
   drops below 400px; the toggle and both gaps are trimmed a little
   further on top. That clears the 320px floor with margin, without
   shrinking the logo or the Donate button themselves. */
@media (max-width:400px){
  .em-header__bar{gap:var(--space-2)}
  .em-header__actions{gap:var(--space-1)}
  .em-header__search{display:none}
  .em-header__toggle{width:32px;height:32px}
  /* SC 1.4.4 wants text to reflow at 200%, not to stay small — so the Donate
     label is NOT capped in px. Instead the bar is allowed to wrap, which it
     only does once the row genuinely cannot fit: at 320px with text at its
     normal size the row is ~234px against 272px of bar and stays on one line.
     At 200% the Donate button alone is ~156px and the actions group drops to
     its own line rather than pushing the page sideways. Measured, not
     assumed. */
  .em-header__bar{flex-wrap:wrap;row-gap:var(--space-3);
    padding-top:var(--space-3);padding-bottom:var(--space-3)}
}

/* ---------- Accessibility overrides, colour half ----------
   Placed last on purpose: rules above set --em-orange on some of these same
   selectors, so this has to win on source order. See the block at the top of
   this file for the measurements and the rationale.

   --em-orange-ink is the brand orange at 80% lightness: 5.17:1 on white and
   4.54:1 on --surface-tint, against 3.59:1 and 3.15:1 for the original.
   Applied ONLY to small orange text on light surfaces. Orange fills,
   orange-on-navy (--orange-300) and the focus ring keep the exact brand
   value. */
.em-eyebrow,
.em-heading__eyebrow,
.em-solution__more,
.em-article__more,
.em-podcast__show{color:var(--em-orange-ink)}

/* Third instance of the same open orange question, and the only one where the
   failing pair is white ON orange rather than orange on white. components.css
   ships .em-badge--accent as --white on --em-orange, which measures 3.59:1 —
   under 4.5:1, and the badge label is 11px so the large-text exemption cannot
   apply. --orange-700 is already in the ramp and measures 5.55:1 against
   white. Fills elsewhere keep the exact brand value; this is a small-text
   surface, which is the same distinction --em-orange-ink draws above. */
.em-badge--accent{background:var(--orange-700)}

/* components.css sets ::placeholder to --grey-500, which measures 2.85:1 on
   the input's white background — under the 4.5:1 that placeholder text needs,
   same as any other text. --text-muted is 5.29:1 and is the same token the
   rest of the page's secondary text already uses. */
.em-input::placeholder,.em-textarea::placeholder{color:var(--text-muted)}