/* Accessibility options and cookie notice.
   Linked from partials/meta.html so every public chrome page gets it.
   Preferences are attributes on <html>, set before paint by the boot script.

   Option A (Sharon, 20 Oct 2026): the corner is one row, Give now and the
   Help launcher, the same height: 48px, 44px below 520px
   (assets/support-widget.css). There is no
   Accessibility circle: the panel opens from the first row of Help and from
   "Accessibility options" in the footer. It opens 8px above the corner row.
   --jfsd-float-pad is the band a page keeps at the end so the last control
   can scroll above that row, the safe area, and a phone tab bar. */

:root{
  --jfsd-float-base:max(16px, env(safe-area-inset-bottom, 0px), var(--jfsd-sab, 0px));
  --jfsd-float-x:max(16px, env(safe-area-inset-right, 0px), var(--jfsd-sar, 0px));
  --jfsd-chat-size:48px;
  --jfsd-a11y-size:0px;
  --jfsd-float-gap:0px;
  --jfsd-tab-clear:0px;
  /* Tab bar and cookie bar only. --jsw-lift moves the buttons, not the page.
     The cap keeps Back to top on screen and below the header's menu. */
  --jfsd-obstacle:max(0px, min(calc(var(--jfsd-tab-clear, 0px) + var(--jfsd-cookie-h, 0px)), calc(100dvh - var(--jfsd-header-h, 77px) - var(--jfsd-float-base, 16px) - var(--jfsd-float-stack, 0px) - 8px - 44px)));
  --jfsd-float-stack:calc(var(--jfsd-chat-size) + var(--jfsd-float-gap) + var(--jfsd-a11y-size));
  --jfsd-float-pad:calc(var(--jfsd-float-base) + var(--jfsd-obstacle) + var(--jfsd-float-stack) + 16px);
}
@media (max-width:519px){
  :root{
    --jfsd-chat-size:44px;
    --jfsd-float-base:max(12px, env(safe-area-inset-bottom, 0px), var(--jfsd-sab, 0px));
    --jfsd-float-x:max(12px, env(safe-area-inset-right, 0px), var(--jfsd-sar, 0px));
  }
}
/* The corner group's clearance lives in the navy footer, so the stack floats
   over the footer. The canvas stays the page colour. A navy <html> background
   covers a fixed mark at z-index -1 (the FED360 "360") and paints the
   landscape safe-area strips and the top overscroll navy. Navy extends only
   below the footer, so a short page does not end on white. isolation keeps
   that mark above the body's own background. These live here, not in the
   stamped footer, so a locked page that loads this file gets them too. The
   footer selector outranks a page's own footer padding. */
body:has(footer.ftr){isolation:isolate}
body:has(footer.ftr) footer.ftr{position:relative}
/* After Accept or Decline the bar is gone. The empty navy is the corner
   row (Give now and Help, 48px, 44px on a phone) above its bottom inset,
   plus 8px, less the
   legal row's own 18px, so the badges and the legal line end above the row
   at every width. Cookie height is added only while the bar is open. */
body:has(footer.ftr) footer.ftr{padding-bottom:calc(var(--jfsd-float-base, 16px) + var(--jfsd-float-stack, 0px) + 8px - 18px + var(--jfsd-cookie-h, 0px))}
@media (min-width:1340px){
  body:has(footer.ftr) footer.ftr{padding-bottom:calc(32px + var(--jfsd-cookie-h, 0px))}
  /* Give now sits in the corner on every page that shows it. The short pad
     leaves it on the Candid badge. :has(footer.ftr) is what outranks the
     32px rule above. */
  body:has(.jsw-give):has(footer.ftr) footer.ftr{padding-bottom:calc(32px + var(--jfsd-cookie-h, 0px) + 48px)}
}
/* Back to top sits in the corner above the stack. Below 1280 the legal line
   keeps its last control out of that column, so Cookie settings stays
   tappable without a second navy band. At 1280 the same inset drops the
   badges onto their own row, so it stops there. */
@media (max-width:1279px){
  body.give-end footer.ftr .flegal{padding-right:calc(var(--jfsd-float-x, 16px) + 44px + 12px)}
}
body:has(footer.ftr) footer.ftr::after{content:"";position:absolute;left:0;right:0;top:100%;height:0;box-shadow:0 100vh 0 100vh #0F1C3F;pointer-events:none}
body:has(footer.ftr) .jsw-spacer{height:0;background:#0F1C3F}

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

.jfsd-a11y-btn{
  position:fixed;z-index:120;
  bottom:calc(var(--jfsd-float-base, max(16px, env(safe-area-inset-bottom))) + max(var(--jfsd-obstacle, 0px), var(--jsw-lift, 0px)) + var(--jfsd-chat-size, 48px) + var(--jfsd-float-gap, 8px));
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;
  border:2px solid #1E3EAF;border-radius:999px;
  background:#1E3EAF;color:#fff;
  font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1;
  cursor:pointer;box-shadow:0 8px 24px rgba(16,10,74,.28)
}
/* Option A: no floating Accessibility control on public pages. The locked
   community trip page still carries the old circle in its own footer; this
   hides it there, and visitor.js adds the footer button beside the
   Accessibility link. My Giving keeps its own button (my-giving-app.css). */
html:not(.mg-app) #jfsd-a11y-btn{display:none !important}
.jfsd-a11y-btn svg{width:24px;height:24px;display:block;flex:none}
.jfsd-a11y-btn:hover{background:#27277C;border-color:#27277C}
.jfsd-a11y-btn:focus-visible{
  outline:3px solid #0F1C3F;outline-offset:3px;
  box-shadow:0 0 0 2px #fff, 0 8px 24px rgba(16,10,74,.28)
}

.jfsd-a11y-panel{
  position:fixed;z-index:130;left:auto;
  right:var(--jfsd-float-x, max(16px, env(safe-area-inset-right)));
  bottom:calc(var(--jfsd-float-base, max(16px, env(safe-area-inset-bottom))) + max(var(--jfsd-obstacle, 0px), var(--jsw-lift, 0px)) + var(--jfsd-float-stack, 108px) + 8px);
  width:min(360px, calc(100vw - 32px));
  /* The same offset as bottom, including a risen launcher. float-pad leaves
     lift out, so a tall panel would open with Close above the screen. */
  max-height:calc(100dvh - var(--jfsd-float-base, 16px) - max(var(--jfsd-obstacle, 0px), var(--jsw-lift, 0px)) - var(--jfsd-float-stack, 108px) - 8px - 12px);overflow:auto;
  background:#fff;color:#1A202C;
  border:1px solid #E2E8F0;border-radius:14px;
  box-shadow:0 16px 48px rgba(16,10,74,.28);
  padding:10px 14px 8px;
  font-family:var(--font-display);font-size:1rem;line-height:1.45
}
.jfsd-a11y-panel[hidden]{display:none !important}
.jfsd-a11y-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.jfsd-a11y-panel h2{
  margin:0;font-family:var(--font-display);font-size:1.125rem;font-weight:700;
  color:#1E3EAF;line-height:1.3
}
.jfsd-a11y-x{
  flex:none;width:44px;height:44px;margin:-8px -6px 0 0;
  border:0;border-radius:8px;background:transparent;color:#1E3EAF;
  font-size:1.75rem;line-height:1;cursor:pointer
}
.jfsd-a11y-x:hover{background:#EDF2F7}
.jfsd-a11y-x:focus-visible,.jfsd-a11y-panel button:focus-visible,.jfsd-a11y-panel a:focus-visible{
  outline:3px solid #1E3EAF;outline-offset:2px
}
.jfsd-a11y-label{
  margin:0 0 4px;font-family:var(--font-display);font-size:1rem;font-weight:600;color:#1A202C
}
.jfsd-size{display:flex;gap:8px;margin-bottom:6px}
.jfsd-size button,.jfsd-toggle,.jfsd-a11y-reset,.jfsd-a11y-panel .jfsd-cookie-open{
  font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1.2;
  min-height:44px;border-radius:8px;cursor:pointer;border:2px solid #1E3EAF;
  background:#fff;color:#1E3EAF
}
.jfsd-size button{flex:1;padding:8px 6px}
.jfsd-toggle,.jfsd-a11y-reset,.jfsd-a11y-panel .jfsd-cookie-open{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  text-align:left;padding:8px 12px;margin:0 0 4px;white-space:nowrap
}
.jfsd-toggle::after{content:"Off";font-size:.875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#475569}
.jfsd-size button[aria-checked="true"],
.jfsd-toggle[aria-pressed="true"]{
  background:#1E3EAF;color:#fff;border-color:#1E3EAF
}
.jfsd-toggle[aria-pressed="true"]::after{content:"On";color:#fff}
.jfsd-size button:hover,.jfsd-toggle:hover,.jfsd-a11y-reset:hover,.jfsd-a11y-panel .jfsd-cookie-open:hover{
  background:#EDF2F7
}
.jfsd-size button[aria-checked="true"]:hover,.jfsd-toggle[aria-pressed="true"]:hover{background:#27277C}
.jfsd-a11y-hint,.jfsd-a11y-note{margin:0 0 6px;font-size:1rem;color:#1A202C;line-height:1.35}
footer.ftr .jfsd-a11y-panel a{color:#1E3EAF;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.jfsd-a11y-panel,.jfsd-a11y-panel h2,.jfsd-a11y-panel p,.jfsd-a11y-panel button{color:#1A202C}
.jfsd-a11y-panel h2,.jfsd-size button,.jfsd-toggle,.jfsd-a11y-reset,.jfsd-a11y-panel .jfsd-cookie-open,.jfsd-a11y-x{color:#1E3EAF}
.jfsd-size button[aria-checked="true"],.jfsd-toggle[aria-pressed="true"]{color:#fff}

/* :where() keeps these at zero specificity, so My Giving's .mg-app .jfsd-cookie
   left and bottom win. :where() is what older Firefox and Safari already
   understand. :has() is not, and an id outside :where() would beat My Giving. */
:where(#jfsd-cookie){
  position:fixed;z-index:110;left:0;right:0;bottom:0;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-height:60vh;overflow:hidden;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:#0F1C3F;color:#fff;
  box-shadow:0 -8px 24px rgba(16,10,74,.25);
  font-family:var(--font-display);font-size:1rem;line-height:1.45
}
#jfsd-cookie[hidden]{display:none !important}
:where(#jfsd-cookie) p{
  margin:0;max-width:70ch;min-width:0;min-height:0;align-self:stretch;max-height:100%;
  overflow:auto;overscroll-behavior:contain
}
/* The sticky header covers a focused field while the bar is up. 77px is the
   header when it has not been measured yet; 8px is the same gap as the bar.
   support-widget.css sets scroll-padding-bottom on html after this file, and
   a :where() rule loses to that. The class on html is what wins. :where()
   still wraps :has(header.hdr), so My Giving, which has no site header, is
   left alone. The bottom pad keeps the float stack; the cookie gap only
   replaces it when the bar is the taller obstacle. */
html.jfsd-cookie-open:where(:has(header.hdr)){
  scroll-padding-top:calc(var(--jfsd-header-h, 77px) + 8px);
  scroll-padding-bottom:max(var(--jfsd-float-pad, 0px), calc(var(--jfsd-cookie-h, 0px) + 8px))
}
footer.ftr .jfsd-cookie a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.jfsd-cookie a:focus-visible,.jfsd-cookie button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.jfsd-cookie-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:nowrap}
.jfsd-cookie-actions button{
  appearance:none;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.2;
  min-height:44px;min-width:7.5rem;flex:0 0 auto;padding:10px 18px;border-radius:8px;cursor:pointer;
  border:2px solid #fff;background:#fff;color:#1E3EAF
}
.jfsd-cookie-actions button:hover{background:#D2E9FF}
/* The cookie height is part of --jfsd-float-pad (the spacer and the staff
   page end), so the bar does not add a second padding-bottom on the body.
   Give Now is the page where a focused field was landing under the bar.
   The margin stays on that checkout, including the summary inside it. */
html.jfsd-cookie-open .checkout :is(a[href], input, select, textarea, button, .sum-row){
  scroll-margin-top:calc(var(--jfsd-header-h, 77px) + 8px);
  scroll-margin-bottom:calc(var(--jfsd-cookie-h, 0px) + 8px)
}
/* 43.75em is 700px at the browser's default 16px. At 200% text that em is
   32px, so a 768px window stacks and the notice gets the full width.
   The 900px cap keeps a 32px browser text size from stacking a 1280px window. */
@media (max-width:min(43.75em,900px)){
  :where(#jfsd-cookie){flex-direction:column;align-items:stretch;text-align:left}
  :where(#jfsd-cookie) p{flex:1 1 auto}
  .jfsd-cookie-actions{width:100%;flex-wrap:wrap}
  .jfsd-cookie-actions button{min-width:0;flex:1 1 10rem}
}
/* A short window used to give the notice 0px and clip Decline. The buttons
   stay on one row. The bar scrolls, and the buttons stick, so the Privacy
   link can be read without losing Accept or Decline. About 40vh leaves the
   focused control on screen. 176px is the floor so the Privacy link still
   clears the sticky buttons at 200% text on a 375px window. The page's
   bottom scroll pad is only the bar, not the
   float stack, which is what was hiding that control. The Privacy link is
   one box, so the longer notice cannot break it across three lines that
   no longer fit above the buttons. */
@media (max-height:480px){
  :where(#jfsd-cookie){flex-direction:column;align-items:stretch;text-align:left;overflow:auto;overscroll-behavior:contain;max-height:max(40vh, 176px)}
  :where(#jfsd-cookie) p{flex:0 0 auto;max-height:none;overflow:visible}
  :where(#jfsd-cookie) p a{display:inline-block;max-width:100%;scroll-margin-bottom:calc(62px + 1.5rem)}
  .jfsd-cookie-actions{width:100%;flex-wrap:nowrap;position:sticky;bottom:0;background:#0F1C3F}
  .jfsd-cookie-actions button{flex:1 1 0;min-width:0;white-space:nowrap}
  html.jfsd-cookie-open:where(:has(header.hdr)){
    scroll-padding-bottom:calc(var(--jfsd-cookie-h, 0px) + 8px)
  }
  /* Back to top is hidden so Give now and Help can sit on the bar instead
     of in it. The cap no longer reserves that 44px circle. */
  html.jfsd-cookie-open{
    --jfsd-obstacle:max(0px, min(calc(var(--jfsd-tab-clear, 0px) + var(--jfsd-cookie-h, 0px)), calc(100dvh - var(--jfsd-header-h, 77px) - var(--jfsd-float-base, 16px) - var(--jfsd-float-stack, 0px))))
  }
  html.jfsd-cookie-open .backtop{display:none}
}

footer.ftr .flegal button.jfsd-cookie-open{
  background:none;border:0;padding:0;margin:0;font:inherit;font-size:inherit;
  color:rgba(255,255,255,.85);cursor:pointer;text-decoration:underline;text-underline-offset:2px
}
footer.ftr .flegal button.jfsd-cookie-open:hover{color:#fff}
footer.ftr .flegal button.jfsd-cookie-open:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* "Accessibility options" in the legal line, beside the Accessibility
   statement link, at every width. It opens the same panel as the Help row.
   A phone gives it a 44px target. */
footer.ftr .flegal .jfsd-a11y-foot{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  margin:0;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:inherit;line-height:inherit;
  color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px
}
footer.ftr .flegal .jfsd-a11y-foot:hover{color:#fff}
footer.ftr .flegal .jfsd-a11y-foot:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:700px){
  footer.ftr .flegal .jfsd-a11y-foot{min-height:44px}
}

/* Text size replaces the readable rem base. Three steps, still in rem. */
html[data-a11y-size="lg"]{font-size:112.5%}
html[data-a11y-size="xl"]{font-size:125%}

html[data-a11y-font="1"] body,
html[data-a11y-font="1"] button,
html[data-a11y-font="1"] input,
html[data-a11y-font="1"] select,
html[data-a11y-font="1"] textarea,
html[data-a11y-font="1"] h1,
html[data-a11y-font="1"] h2,
html[data-a11y-font="1"] h3,
html[data-a11y-font="1"] h4{
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif !important
}

html[data-a11y-spacing="1"] body{line-height:1.75}
html[data-a11y-spacing="1"] :is(p, li, dd, blockquote){
  line-height:1.85;letter-spacing:.02em;word-spacing:.06em
}

html[data-a11y-links="1"] a:not(.btn):not(.mz-pill):not(.mz-pill-ghost):not(.fseal):not(.jfsd-a11y-btn):not(.m-donate):not(.m-drawer-donate){
  text-decoration:underline !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:.15em !important;
  background-color:#FFF3A3 !important;
  color:#05206E !important
}

/* High contrast keeps hero, utility bar, and footer bands intact, and the
   words on the closing band (.closer-text, white on midnight #100A4A) white.
   The band's contact card is white, so it takes the dark text like any page. */
html[data-a11y-contrast="1"]{
  --text:#0A1020;--gray:#1A202C;--text-gray:#1A202C;--text-dark:#0A1020;--blue:#05206E;--bg:#fff
}
html[data-a11y-contrast="1"] body{background:#fff !important;color:#0A1020 !important}
html[data-a11y-contrast="1"] main :is(p, li, h1, h2, h3, h4, td, th, label, blockquote, figcaption):not(.slide *):not(.hero *):not(.hero-t2 *):not(.hero-t3 *):not(.fed90 *):not(.cta-bar *):not(.f90-car *):not(.closer-text *){
  color:#0A1020 !important
}
html[data-a11y-contrast="1"] main a:not(.btn):not(.slide *):not(.hero *):not(.hero-t2 *):not(.hero-t3 *):not(.fed90 *):not(.cta-bar *):not(.closer-text *):not(.mz-pill):not(.mz-pill-ghost){
  color:#05206E !important;text-decoration:underline;text-underline-offset:2px
}
html[data-a11y-contrast="1"] main :is(input, select, textarea){
  border-color:#0A1020 !important;color:#0A1020 !important;background:#fff !important
}
html[data-a11y-contrast="1"] footer.ftr .fcol a,
html[data-a11y-contrast="1"] footer.ftr .flegal a,
html[data-a11y-contrast="1"] footer.ftr .flegal button,
html[data-a11y-contrast="1"] footer.ftr .ftr-addr,
html[data-a11y-contrast="1"] footer.ftr .ftr-addr a,
html[data-a11y-contrast="1"] footer.ftr .ftr-brand p{color:#fff !important}

/* Pause motion only for this setting, or when the device asks for it.
   Default pages keep their transitions, including the homepage heroes. */
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
  scroll-behavior:auto !important
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}