/* ============================================================
   Amir Institute — css/a11y.css
   Display settings panel, the preferences it applies, and the
   cookie consent bar. Loaded by every page after site.css.

   This is a user-preference panel, not an accessibility overlay.
   It changes what a visitor sees and nothing else: it injects no
   ARIA, claims no conformance, and never touches what a screen
   reader reads. The conformance comes from how the pages are
   built; this just lets someone turn the type up.
   ============================================================ */

/* ══════════════ 1. THE PREFERENCES THEMSELVES ══════════════ */

/* Text size. Everything on the site is sized in rem or in a clamp() whose
   bounds are rem, so moving the root size moves all of it together —
   headings, body, buttons and spacing stay in proportion. */
html[data-text="110"]{font-size:110%}
html[data-text="125"]{font-size:125%}
html[data-text="150"]{font-size:150%}

/* High contrast. Darkens body and muted text, puts a visible edge on every
   card, underlines links, and deepens the scrims over the hero photographs
   so white headlines sit on something solid rather than on an image. */
html[data-contrast="high"]{
  --body:#1B2A1C; --muted:#2E3A2F; --ink:#0B1A0C;
  --line:rgba(7,56,45,.42); --gold-dark:#5A4310}
html[data-contrast="high"] .card,html[data-contrast="high"] .svc,
html[data-contrast="high"] .alc,html[data-contrast="high"] .st,
html[data-contrast="high"] .hl,html[data-contrast="high"] .pay,
html[data-contrast="high"] .upcard,html[data-contrast="high"] .evcard,
html[data-contrast="high"] .clcard,html[data-contrast="high"] .person,
html[data-contrast="high"] .subbrand-card,html[data-contrast="high"] .logincard,
html[data-contrast="high"] .factcard,html[data-contrast="high"] .plogo img{
  border-width:2px;border-color:rgba(7,56,45,.5)}
html[data-contrast="high"] .phero::before,html[data-contrast="high"] .hero::before{
  background:linear-gradient(100deg,rgba(7,56,45,.985) 0%,rgba(7,56,45,.96) 46%,
    rgba(7,56,45,.88) 78%,rgba(7,56,45,.8) 100%)}
html[data-contrast="high"] .ftr{color:#E8F0E6}
html[data-contrast="high"] .ftr a{color:#fff}
html[data-contrast="high"] a:not(.btn){text-decoration:underline;
  text-underline-offset:2px}

/* Monochrome. Some people read text far more easily with colour taken out.
   The filter sits on the page wrapper, never on the panel itself, or the
   person could not see what they were switching off. */
html[data-colour="mono"] body>*:not(.a11y-ui){filter:grayscale(1)}

/* Readable font. A wider, more openly spaced stack than Montserrat.
   Deliberately not labelled a dyslexia font: shipping OpenDyslexic would
   mean shipping the font file, and we are not doing that. */
html[data-font="readable"] body,
html[data-font="readable"] h1,html[data-font="readable"] h2,
html[data-font="readable"] h3,html[data-font="readable"] h4,
html[data-font="readable"] .brand-name,html[data-font="readable"] button,
html[data-font="readable"] input,html[data-font="readable"] select,
html[data-font="readable"] textarea{
  font-family:Verdana,Tahoma,"Segoe UI",system-ui,sans-serif!important;
  letter-spacing:0}
html[data-font="readable"] .script{font-family:Verdana,Tahoma,sans-serif!important}

/* Text spacing, at the values WCAG 1.4.12 asks a page to survive. */
html[data-spacing="loose"] p,html[data-spacing="loose"] li,
html[data-spacing="loose"] dd,html[data-spacing="loose"] span,
html[data-spacing="loose"] a,html[data-spacing="loose"] label{
  line-height:1.9!important;letter-spacing:.12em!important;word-spacing:.16em!important}
html[data-spacing="loose"] p{margin-bottom:2em!important}

/* Link highlighting, for anyone who cannot pick links out of body text. */
html[data-links="on"] a:not(.btn):not(.plogo):not(.brand){
  text-decoration:underline!important;text-underline-offset:3px;
  text-decoration-thickness:2px;background:rgba(201,151,46,.16);
  box-shadow:0 0 0 2px rgba(201,151,46,.16);border-radius:3px}

/* Stop animation. Does what the operating system's reduce-motion setting
   does, for people whose device is not set that way but who want it here.
   Anything that was revealed by an animation is forced visible, so nothing
   can be left hidden behind a transition that no longer runs. */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  animation-delay:0ms!important;transition-duration:.001ms!important;
  transition-delay:0ms!important}
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] .rv,html[data-motion="off"] .cl-in{
  opacity:1!important;transform:none!important}
html[data-motion="off"] .plogo-track{animation:none!important;width:auto}
html[data-motion="off"] .plogo-track>ul[aria-hidden="true"]{display:none}

/* Big cursor. An SVG arrow, scaled up, with a white outline so it stays
   visible over both the ivory sections and the dark green bands. */
html[data-cursor="big"],html[data-cursor="big"] *{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M5.5 2.5l13 9.2-5.9.6 3.3 7.1-2.9 1.4-3.3-7.2-4.2 4.3z' fill='%2307382D' stroke='white' stroke-width='1.4'/></svg>") 4 2,auto!important}

/* Reading guide: a band that follows the pointer, for keeping your place. */
.a11y-guide{position:fixed;left:0;right:0;height:2.6rem;z-index:9996;
  pointer-events:none;border-top:2px solid rgba(201,151,46,.9);
  border-bottom:2px solid rgba(201,151,46,.9);background:rgba(201,151,46,.1);
  display:none}
html[data-guide="on"] .a11y-guide{display:block}


/* ══════════════ 2. THE PANEL ══════════════ */

.a11y-ui{font-family:'Montserrat',system-ui,sans-serif}

/* Bottom LEFT on purpose: the quick-exit button owns the bottom right and
   must never be competed with. */
.a11y-btn{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);
  z-index:9997;display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-size:.86rem;font-weight:800;min-height:46px;padding:11px 16px;
  border-radius:999px;cursor:pointer;background:#fff;color:var(--green-900,#07382D);
  border:2px solid var(--green-900,#07382D);box-shadow:0 10px 28px rgba(7,56,45,.26)}
.a11y-btn svg{width:20px;height:20px;flex:none}
.a11y-btn:hover{background:var(--green-100,#E7EFE8)}
.a11y-btn:focus-visible{outline:3px solid var(--gold,#C9972E);outline-offset:3px}
.a11y-btn .a11y-btn-t{display:none}
@media (min-width:900px){.a11y-btn .a11y-btn-t{display:inline}}

.a11y-panel{position:fixed;left:clamp(12px,2vw,24px);bottom:calc(clamp(12px,2vw,24px) + 58px);
  z-index:9998;width:min(344px,calc(100vw - 24px));max-height:min(74vh,620px);
  overflow-y:auto;background:#fff;color:#2E3A2F;border:1px solid rgba(7,56,45,.18);
  border-radius:20px;box-shadow:0 26px 70px rgba(7,56,45,.3);padding:20px}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:4px}
.a11y-head h2{font-size:1.06rem;margin:0;color:#07382D;line-height:1.3}
.a11y-sub{font-size:.8rem;color:#5F6E5B;margin:0 0 16px;line-height:1.5}
.a11y-x{background:none;border:0;cursor:pointer;color:#5F6E5B;padding:6px;margin:-6px;
  border-radius:8px;line-height:0}
.a11y-x svg{width:20px;height:20px}
.a11y-x:hover{background:#E7EFE8;color:#07382D}
.a11y-x:focus-visible{outline:3px solid #C9972E;outline-offset:2px}

.a11y-grp{margin-bottom:16px}
.a11y-grp>legend,.a11y-lbl{display:block;font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#5F6E5B;margin:0 0 8px;padding:0}
.a11y-grp{border:0;padding:0}
.a11y-row{display:flex;gap:6px;flex-wrap:wrap}
.a11y-opt{flex:1 1 0;min-width:62px;min-height:42px;padding:9px 6px;border-radius:10px;
  border:1.5px solid rgba(7,56,45,.18);background:#fff;color:#2E3A2F;cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:700;line-height:1.2}
.a11y-opt:hover{border-color:#8DAA93;background:#F3F7F2}
.a11y-opt[aria-checked="true"],.a11y-opt[aria-pressed="true"]{
  background:#0F5132;border-color:#0F5132;color:#fff}
.a11y-opt:focus-visible{outline:3px solid #C9972E;outline-offset:2px}

.a11y-toggles{display:grid;gap:6px}
.a11y-tog{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:46px;padding:9px 12px;border-radius:10px;
  border:1.5px solid rgba(7,56,45,.18);background:#fff;color:#2E3A2F;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;text-align:left}
.a11y-tog:hover{border-color:#8DAA93;background:#F3F7F2}
.a11y-tog:focus-visible{outline:3px solid #C9972E;outline-offset:2px}
.a11y-sw{flex:none;width:38px;height:22px;border-radius:999px;background:#C9CFC6;
  position:relative;transition:background .18s}
.a11y-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.3)}
.a11y-tog[aria-pressed="true"] .a11y-sw{background:#0F5132}
.a11y-tog[aria-pressed="true"] .a11y-sw::after{transform:translateX(16px)}

.a11y-reset{width:100%;min-height:44px;margin-top:4px;border-radius:10px;
  border:1.5px solid rgba(7,56,45,.22);background:#fff;color:#07382D;
  font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}
.a11y-reset:hover{background:#E7EFE8}
.a11y-reset:focus-visible{outline:3px solid #C9972E;outline-offset:2px}
.a11y-note{font-size:.72rem;line-height:1.5;color:#5F6E5B;margin:12px 0 0}
.a11y-note a{color:#15663E;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .a11y-sw,.a11y-sw::after{transition:none}
}
@media print{.a11y-btn,.a11y-panel,.a11y-guide,.cc-bar{display:none!important}}


/* ══════════════ 3. COOKIE CONSENT ══════════════ */

.cc-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#07382D;color:#D7E3D5;border-top:3px solid #C9972E;
  padding:clamp(16px,2.2vw,22px) clamp(16px,4vw,32px);
  box-shadow:0 -14px 40px rgba(0,0,0,.28)}
.cc-bar[hidden]{display:none}
.cc-in{max-width:1180px;margin:0 auto;display:flex;gap:clamp(14px,2.4vw,30px);
  align-items:flex-start;flex-wrap:wrap}
.cc-tx{flex:1 1 420px;min-width:0}
.cc-tx h2{font-size:1rem;color:#fff;margin:0 0 6px}
.cc-tx p{font-size:.88rem;line-height:1.6;margin:0;color:#C3D4C4}
.cc-tx a{color:#E0B45F;text-decoration:underline}
.cc-act{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cc-btn{min-height:44px;padding:11px 18px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:800;border:1.5px solid transparent;
  white-space:nowrap}
.cc-accept{background:#C9972E;color:#241705}
.cc-accept:hover{background:#E0B45F}
.cc-ess{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cc-ess:hover{background:rgba(255,255,255,.12)}
.cc-more{background:none;border:0;color:#E0B45F;text-decoration:underline;
  font-weight:700;font-size:.84rem;cursor:pointer;padding:11px 4px;min-height:44px}
.cc-btn:focus-visible,.cc-more:focus-visible{outline:3px solid #E0B45F;outline-offset:3px}

.cc-detail{flex-basis:100%;margin-top:4px;border-top:1px solid rgba(255,255,255,.18);
  padding-top:16px;display:grid;gap:10px}
.cc-detail[hidden]{display:none}
.cc-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.06);border-radius:12px;padding:13px 15px}
.cc-cat b{display:block;color:#fff;font-size:.9rem;margin-bottom:3px}
.cc-cat span{display:block;font-size:.82rem;line-height:1.55;color:#C3D4C4}
.cc-cat button{flex:none;min-height:44px;padding:8px 14px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.cc-cat button[aria-pressed="true"]{background:#C9972E;border-color:#C9972E;color:#241705}
.cc-cat button[disabled]{opacity:.65;cursor:not-allowed}
.cc-cat button:focus-visible{outline:3px solid #E0B45F;outline-offset:2px}

/* While the bar is up, everything that floats near the bottom moves above
   it — the quick-exit button above all, which must never be covered. */
html[data-cc="open"] .quickexit{bottom:calc(clamp(12px,2vw,24px) + var(--cc-h,120px))}
html[data-cc="open"] .float-donate{bottom:calc(clamp(12px,2vw,24px) + 58px + var(--cc-h,120px))}
html[data-cc="open"] .a11y-btn{bottom:calc(clamp(12px,2vw,24px) + var(--cc-h,120px))}
html[data-cc="open"] .a11y-panel{bottom:calc(clamp(12px,2vw,24px) + 58px + var(--cc-h,120px))}

@media (max-width:720px){
  .cc-in{flex-direction:column}
  .cc-act{width:100%}
  .cc-accept,.cc-ess{flex:1 1 auto}
}

/* ══════════════ 4. REFLOW AT LARGE TEXT ══════════════
   WCAG 1.4.4 asks that content reflow at 200% without a horizontal
   scrollbar, and the text-size control above makes that easy to test.
   Three things broke it, and all three also affected anyone simply using
   their browser's own zoom — so these are fixed for everybody, not only
   when the panel is in use. */

/* 1. Buttons were nowrap, so a long label pushed past the viewport.
      They may wrap on narrow screens and whenever text is scaled up. */
@media (max-width:720px){
  .btn{white-space:normal;text-align:center}
}
html:is([data-text="110"],[data-text="125"],[data-text="150"]) .btn{
  white-space:normal;text-align:center}

/* 2. The Programs sub-navigation is a single nowrap row. At large text it
      is simply wider than a phone, so it scrolls sideways on its own
      instead of dragging the whole page with it. */
.subnav .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.subnav .wrap::-webkit-scrollbar{height:4px}
.subnav .wrap::-webkit-scrollbar-thumb{background:rgba(7,56,45,.3);border-radius:4px}

/* 3. Grid and flex items default to min-width:auto, which means an item
      refuses to shrink below its longest word and pushes the track wider
      than its container. Every list built this way needs min-width:0. */
.legal-list li,.hl-list li,.bundles li,.ns-list li,.ad-rail li,
.keydates li,.feat li,.ev-meta>div,.cl-meta>div,.ty-grid>*,.cc-cat,
.ftr-locs>*,.plogo,.appr .ap,.pill{min-width:0}
.legal-list li>*,.hl-list li>*,.feat li>*,.appr .ap>*,.pill>*{min-width:0}

/* Long unbroken strings — an email address at 150% on a 390px screen —
   should wrap rather than overflow. */
.ftr a[href^="mailto:"],.legal-body a,.ty-card>span,.a11y-note a,
.cc-tx a,.crisis-nums a{overflow-wrap:anywhere}

/* A control that opens a dialog is a button, not a link — but in the footer
   row it should look like its neighbours. */
.linklike{background:none;border:0;padding:7px 0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:none;display:inline-block}
.linklike:hover{color:var(--gold-light,#E0B45F);text-decoration:underline}
.linklike:focus-visible{outline:3px solid var(--gold,#C9972E);outline-offset:3px;
  border-radius:3px}

/* Skip to content. WCAG 2.4.1: a keyboard user should not have to tab
   through the whole header on every page to reach what they came for.
   Off-screen until focused, then it lands in the top-left corner. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--green-900,#07382D);color:#fff;font-weight:800;font-size:.92rem;
  padding:14px 22px;border-radius:0 0 12px 0;text-decoration:none;
  border:2px solid var(--gold,#C9972E);border-top:0;border-left:0}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:3px solid var(--gold,#C9972E);outline-offset:2px}
#main:focus{outline:none}