/* 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.

   The Accessibility control shares the chat launcher's bottom-right corner
   (assets/support-widget.css). A 44px circle sits 8px above the launcher
   (48px, or 44px below 520px), so the left side of a phone page stays clear. --jfsd-float-pad
   is the band a page keeps at the end so the last control can scroll
   above that group, 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);
}
html:has(#jfsd-a11y-btn){--jfsd-a11y-size:44px;--jfsd-float-gap:8px}
@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 button
   stack (chat, the gap, and Accessibility), plus the legal row's own 18px,
   which is what main leaves (about 18 to 106px). The full scroll pad was
   142 to 150px of navy. Cookie height is added only while the bar is open. */
body:has(footer.ftr) footer.ftr{padding-bottom:calc(var(--jfsd-float-stack, 0px) - 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)
}
/* The circle, the hidden name, and the tooltip belong to the shared stack.
   My Giving keeps its own pill and rail icon, docked on the left, so these
   do not apply there: a 44px box would crush the label, and a tooltip
   anchored to the left of that button opens off the screen. */
html:not(.mg-app) .jfsd-a11y-btn{
  left:auto;
  right:var(--jfsd-float-x, max(16px, env(safe-area-inset-right)));
  width:44px;height:44px;min-width:44px;padding:0
}
html:not(.mg-app) .jfsd-a11y-btn span{
  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 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)
}
/* The name is in aria-label. Keyboard focus shows it. A pointer that can
   hover shows it too. A click that leaves :focus behind does not.
   Safari before 17.4 drops a content value that uses the alt-text slash,
   so the plain string is set first and the slash form follows. */
html:not(.mg-app) .jfsd-a11y-btn::after{
  content:"Accessibility options";
  content:"Accessibility options" / "";
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  padding:8px 12px;border-radius:8px;background:#fff;color:#0F1C3F;border:1px solid #0F1C3F;
  font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1.2;
  white-space:nowrap;box-shadow:0 8px 24px rgba(16,10,74,.28);
  opacity:0;pointer-events:none;cursor:default;transition:none !important
}
/* The 10px between the circle and the label. It takes the pointer while the
   circle is hovered, so the pointer can cross that gap. The label takes the
   pointer too, so moving onto the words keeps the name visible. A pointer
   click on the words is ignored in visitor.js. */
html:not(.mg-app) .jfsd-a11y-btn::before{
  content:"";position:absolute;top:0;bottom:0;right:100%;width:10px;pointer-events:none
}
/* Reduced motion sets a tiny duration on every ::after, which would hold this
   label at opacity 0 for the rest of the turn. The name shows immediately. */
html[data-a11y-motion="off"]:not(.mg-app) .jfsd-a11y-btn::after{transition:none !important}
html:not(.mg-app) .jfsd-a11y-btn:focus-visible::after{opacity:1}
@media (hover:hover){
  html:not(.mg-app) .jfsd-a11y-btn:hover::before{pointer-events:auto}
  html:not(.mg-app) .jfsd-a11y-btn:hover::after{opacity:1;pointer-events:auto}
}
/* Esc dismisses the label while the panel is closed. Blur or leaving the
   circle clears it, so the next hover or focus can show the name again. */
html.jfsd-tip-off:not(.mg-app) .jfsd-a11y-btn::before,
html.jfsd-tip-off:not(.mg-app) .jfsd-a11y-btn::after{opacity:0;pointer-events:none}
/* The open chat panel grows over the shared corner. My Giving's control sits
   on the left, so it stays. The circle comes back when the chat closes. */
html:not(.mg-app):has(.jsw[data-open]) .jfsd-a11y-btn{visibility:hidden}
/* The locked community trip page pins this circle to the left in its own
   style, from when a wide label would have covered card text. Nothing on
   that page sits in this corner: the cards run the full width, and the
   chat is already the right-hand control. This outranks the page rule, so
   the circle joins the stack, 8px above the chat, at 44px. My Giving keeps
   its own placement (rail icon, left side on a phone), so it is excluded. */
html:not(.mg-app) .jfsd-visitor #jfsd-a11y-btn{
  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-chat-size, 48px) + var(--jfsd-float-gap, 8px));
  padding:0;min-width:44px;width:44px;height:44px
}

.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 the chat and Accessibility 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}
/* Phones get the same panel from the legal line. The circle stays. */
.jfsd-a11y-foot{display:none}
@media (max-width:700px){
  footer.ftr .flegal .jfsd-a11y-foot{
    display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
    min-height:44px;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}
}

/* 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
  }
}