:root {
  /* Core */
  --fot-navy: #0B2B5B;
  --fot-navy-hover: #143C7C;
  --fot-blue: #1B63D8;
  --fot-blue-hover: #2F76E8;
  --fot-green: #3E8E3E;
  --fot-green-hover: #2F6F2F;
  --fot-gold: #F5A623;

  /* Accents — small doses only */
  --fot-teal: #3FB5A8;
  --fot-orange: #F26B21;
  --fot-violet: #7A6BE8;
  --fot-rose: #C4477A;
  --fot-deep-teal: #2E7D9A;
  --fot-sky: #B9CBE6;
  --fot-bronze: #A6803A;

  /* Surfaces + text */
  --fot-white: #FFFFFF;
  --fot-wash: #EEF4FD;
  --fot-cream: #FDF8EC;
  --fot-mist: #FBFCFE;
  --fot-ink: #12213B;
  --fot-body: #46566E;
  --fot-slate: #56657D;
  --fot-muted: #8494AB;
  --fot-line: #EDF1F7;
  --fot-border: #D3DDEB;

  /* Support tints — on-navy and hairline values */
  --fot-sky-bright: #7FA8E8;   /* eyebrows + labels on navy */
  --fot-sky-pale: #C9D9EE;     /* outline rules, large numerals */
  --fot-green-wash: #EAF5EA;   /* seedling icon circle */
  --fot-navy-rule: #26497F;    /* hairlines on navy */
  --fot-navy-line: #4E6C99;    /* outline buttons on navy */
  --fot-dot-grid: #D7E3F3;     /* decorative dot fields */
  --fot-cream-rule: #EADFC6;   /* dividers inside cream panels */
  --fot-hair: #F1F5FB;         /* list row hairline */
  --fot-quiet: #8FA6C6;        /* placeholder + unfilled values */

  /* Type */
  --fot-display: "Source Serif 4", Georgia, serif;
  --fot-text: "Archivo", Helvetica, Arial, sans-serif;

  /* Radii */
  --fot-r-shell: 40px;
  --fot-r-panel: 28px;
  --fot-r-card: 22px;
  --fot-r-sm: 18px;
  --fot-r-pill: 999px;

  /* Shadows */
  --fot-shadow-rest: 0 2px 10px rgba(11, 43, 91, 0.05);
  --fot-shadow-hover: 0 22px 44px rgba(11, 43, 91, 0.13);
  --fot-shadow-float: 0 26px 54px rgba(11, 43, 91, 0.16);

  /* Rhythm */
  --fot-gap: 26px;
  --fot-space-lg: 68px;
  --fot-space-xl: 104px;
  --fot-space-2xl: 140px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

.fot-page {
  font-family: var(--fot-text);
  color: var(--fot-ink);
  background: var(--fot-white);
}

.fot-page a { color: var(--fot-blue); text-decoration: none; }
.fot-page a:hover,
.fot-page a:focus-visible { color: var(--fot-navy); }

.fot-page :focus-visible {
  outline: 3px solid var(--fot-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* BB rows are already 1240px-capped via Global Settings; this is the fallback. */
.fot-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* GTranslate "dropdown with flags": float the list over the page */
.gt_options {
  position: absolute !important;
  top: 100% !important;
  z-index: 99999 !important;
  max-height: 320px;          /* long language list scrolls */
  overflow-y: auto !important;
  background: #fff;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.25);
}
.gtranslate_wrapper {height: 24px;}
.gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang {padding: 0;}
.gtranslate_wrapper .gt_float_switcher {background: transparent; box-shadow: none; font-size: 16px;}
.gtranslate_wrapper .gt_float_switcher img {width: 20px;}
@media (max-width: 767px) {
  .gt_options {right: 0;}
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

/* -- 2a. NAKED MODULES — no class required -------------------------------
   Beaver Builder Global Settings (Tools > Global Settings > Typography)
   owns font-family / weight / color for H1-H6 and Body — set those there.
   These rules add ONLY what Global Settings can't do: the fluid clamp()
   size scale, read straight off the tag. BB nests real text inside
   .fl-heading > .fl-heading-text (headings) and .fl-rich-text > p (text
   editor), so the selector must reach past the module wrapper — a class
   on the module's Advanced tab lands on the wrapper, not the text, and
   never sees these rules on its own.
   Any heading module dropped anywhere on the site gets this automatically. */

/*
h1 .fl-heading-text { font-size: clamp(2.375rem, 1.715rem + 2.82vw, 4.25rem);  line-height: 1.06; letter-spacing: -0.02em; }
h2 .fl-heading-text { font-size: clamp(1.813rem, 1.438rem + 1.60vw, 2.875rem); line-height: 1.10; letter-spacing: -0.02em; }
h3 .fl-heading-text { font-size: clamp(1.625rem, 1.273rem + 1.50vw, 2.625rem); line-height: 1.14; letter-spacing: -0.02em; }
h4 .fl-heading-text { font-size: clamp(1.438rem, 1.240rem + 0.85vw, 2rem);     line-height: 1.18; letter-spacing: -0.01em; }
h5 .fl-heading-text { font-size: 20px; line-height: 1.35; }
h6 .fl-heading-text { font-size: 14px; line-height: 1.4; letter-spacing: 0.10em; text-transform: uppercase; }
*/

/* Gold period at the end of the hero H1 — wrap it in <span class="fot-period"> */
.fot-period { color: var(--fot-gold); }

/* -- 2b. Classed variants — no matching tag exists, so these need a class
   on the module's Advanced > Class field. All bridge through BB's nesting
   the same way the naked-module rules above do. -------------------------- */


.fot-card-title .fl-heading-text {
  font-family: var(--fot-display);
  font-weight: 700;
  color: var(--fot-navy);
  font-size: 24px;
  line-height: 1.22;
}

.fot-eyebrow {
  font-family: var(--fot-text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fot-blue);
}
.fot-eyebrow--green  .fl-heading-text { color: var(--fot-green); }
.fot-eyebrow--bronze .fl-heading-text { color: var(--fot-bronze); }

/* Force heading-style treatment onto a module using an unusual tag —
   optional; Global Settings + the naked-module rules above already cover
   the normal case of a heading module actually set to that tag. */
.fot-h1 {text-wrap: balance;}
.fot-h1 .fl-heading-text {font-size: clamp(2.375rem, 1.715rem + 2.82vw, 4.25rem);}
.fot-h2 .fl-heading-text {font-size: clamp(1.813rem, 1.438rem + 1.60vw, 2.875rem);}
.fot-h3 .fl-heading-text {font-size: clamp(1.625rem, 1.273rem + 1.50vw, 2.625rem);}
.fot-h4 .fl-heading-text {font-size: clamp(1.438rem, 1.240rem + 0.85vw, 2rem);}
.fot-h5 .fl-heading-text {font-size: 20px;}
.fot-h6 .fl-heading-text {font-size: 14px;}

/* -- 2c. Body text — Global Settings' Body Text panel owns the plain
   default (16px, Archivo, --fot-body). These cover the other three
   variants; apply the class to the Rich Text module's Advanced tab. ------- */

.fot-lead .fl-rich-text,
.fot-lead .fl-rich-text p  { font-size: 17.5px; line-height: 1.70; color: var(--fot-body); max-width: 46ch; }
.fot-body .fl-rich-text,
.fot-body .fl-rich-text p  { font-size: 16px;   line-height: 1.70; color: var(--fot-body); }
.fot-small .fl-rich-text,
.fot-small .fl-rich-text p { font-size: 15px;   line-height: 1.65; color: var(--fot-slate); }
.fot-fine .fl-rich-text,
.fot-fine .fl-rich-text p  { font-size: 13.5px; line-height: 1.6;  color: var(--fot-muted); }

.fot-rule {
  width: 92px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--fot-gold);
  margin: 34px 0 30px;
}

/* --------------------------------------------------------------------------
   3. Buttons + arrow links
   Global Settings > Default Button Style owns the naked-module default
   (Primary: navy fill, white text, pill radius, Archivo 600). Everything
   below layers on top of that: variants beyond Primary, and the universal
   arrow every button gets with zero configuration.
   BB nests the real element at .fl-button-wrap > a.fl-button, so a class
   applied via the module's Advanced tab always bridges through
   ".fot-btn-wrap... .fl-button", never targets .fot-btn-wrap directly.
   -------------------------------------------------------------------------- */

/* -- 3a. Universal arrow ----------------------------------------------------
   Every button gets a trailing arrow automatically — no icon module, no
   editor configuration. Add class "fot-btn-noarrow" on a Button module
   (e.g. the newsletter Subscribe button) to suppress it. */

.fl-button-wrap:not(.fl-btn-noarrow) .fl-button:not([type="submit"])::after {
     content: "\f061";
     font-family: "Font Awesome 6 Free", "Font Awesome 7 Free", "FontAwesome";
     font-weight: 900;
     margin-left: 10px; /* keep this for static spacing from text */
     transform: translateX(0);
     transition: transform 0.2s ease;
     display: inline-block; /* transforms need this on inline elements */
   }

.fl-btn-noarrow a::after {display: none !important;}

/* -- 3b. Base button geometry — applies whenever a variant class is used
   (Global Settings already gives the naked/Primary default this shape,
   this covers the classed variants below so they don't have to repeat it). */

.fot-btn-wrap .fl-button {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--fot-text);
  font-size: 15.5px;
  font-weight: 600;
  padding: 17px 30px;
  border-radius: var(--fot-r-pill) !important;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.fot-btn-wrap .fl-button:hover { transform: translateY(-2px); }

/* -- 3c. Variants — apply as the Button module's Advanced > Class -------- */

.fot-btn-wrap--primary .fl-button {
  background: var(--fot-navy);
  color: var(--fot-white) !important;
}
.fot-btn-wrap--primary .fl-button:hover { background: var(--fot-navy-hover); color: var(--fot-white) !important; }

.fot-btn-wrap--secondary .fl-button {
  background: var(--fot-white);
  color: var(--fot-navy) !important;
  border: 1.5px solid var(--fot-border);
  padding: 15.5px 28.5px; /* keeps the 17/30 optical box with the added border */
}
.fot-btn-wrap--secondary .fl-button:hover { border-color: var(--fot-navy); color: var(--fot-navy) !important; }

.fot-btn-wrap--blue .fl-button {
  background: var(--fot-blue);
  color: var(--fot-white) !important;
  padding: 18px 30px;
  font-size: 15px;
}
.fot-btn-wrap--blue .fl-button:hover { background: var(--fot-blue-hover); }

.fot-btn-wrap--donate .fl-button { padding: 13px 24px; font-size: 14.5px; gap: 9px; }

/* -- 3d. Arrow links (not buttons) — "View All Resources →" style ------- */

.fot-link {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  gap: 0;
  font-size: 15.5px;
  font-weight: 600;
  transition: gap 0.2s ease, color 0.2s ease;
}
.fot-link a {padding: 0 !important; border: none !important; }
.fot-link a:hover::after {
  transform: translateX(5px) !important;
}
.fot-link a:hover {background: none !important;}
.fot-link--green { color: var(--fot-green); font-size: 14.5px; }
.fot-link--green:hover { color: var(--fot-green-hover); }

/* --------------------------------------------------------------------------
   4. Icon circles (Font Awesome 7.3.1, solid + brands)
   -------------------------------------------------------------------------- */

.fot-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--fot-white);
  flex-shrink: 0;
}
.fot-icon--lg { width: 66px; height: 66px; font-size: 26px; }
.fot-icon--md { width: 56px; height: 56px; font-size: 22px; }
.fot-icon--sm { width: 44px; height: 44px; font-size: 20px; }

.fot-icon--blue { background: var(--fot-blue); }
.fot-icon--green { background: var(--fot-green); }
.fot-icon--violet { background: var(--fot-violet); }
.fot-icon--orange { background: var(--fot-orange); }
.fot-icon--teal { background: var(--fot-teal); }
.fot-icon--gold { background: var(--fot-gold); }
.fot-icon--navy { background: var(--fot-navy); }
.fot-icon--rose { background: var(--fot-rose); }
.fot-icon--deep-teal { background: var(--fot-deep-teal); }
.fot-icon--tint-green { background: #E8F3E8; color: var(--fot-green); }

.fot-social {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--fot-border);
  color: var(--fot-navy);
  font-size: 19px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fot-social:hover { background: var(--fot-navy); color: var(--fot-white); }
.fot-social--filled { background: var(--fot-navy); color: var(--fot-white); border-color: var(--fot-navy); }
/* Header search sits smaller than the 42px social circles */
.fot-social--sm { width: 36px; height: 36px; font-size: 15px; }
.fot-social--on-navy { border-color: #4E6C99; color: var(--fot-white); }
.fot-social--on-navy:hover { background: var(--fot-white); color: var(--fot-navy); }
.fot-social--filled:hover { background: var(--fot-navy-hover); color: var(--fot-white); }

/* --------------------------------------------------------------------------
   5. Sections + surfaces
   NOTE: layout/spacing (grid, flex, gap, padding, max-width) for actual
   page sections is intentionally kept OUT of CSS on this site — those
   values live on the Row/Box module's own native settings so future
   editors control them right in the builder. The classes below remain
   defined for reference / optional manual use, but are not applied to
   rows by default.
   -------------------------------------------------------------------------- */

.fot-section { padding: var(--fot-space-xl) 0; }
.fot-section--tall { padding: var(--fot-space-2xl) 0; }

.fot-shell {
  max-width: 1320px;
  margin: 0 auto;
  border-radius: var(--fot-r-shell);
  padding: var(--fot-space-xl) 60px 112px;
}
.fot-shell--wash { background: var(--fot-wash); }
.fot-shell--cream { background: var(--fot-cream); border-radius: 0; max-width: none; padding: var(--fot-space-xl) 0; }

.fot-panel {
  background: var(--fot-navy);
  border-radius: 30px;
  padding: 64px;
  color: var(--fot-white);
}
.fot-panel .fot-panel-title { font-family: var(--fot-display); font-size: 30px; font-weight: 700; color: var(--fot-white); margin: 0 0 10px; }
.fot-panel .fot-panel-copy { font-size: 15.5px; line-height: 1.6; color: var(--fot-sky); max-width: 400px; }

.fot-field {
  background: var(--fot-white);
  border: 0;
  border-radius: var(--fot-r-pill);
  padding: 18px 26px;
  font-family: var(--fot-text);
  font-size: 15px;
  color: var(--fot-ink);
  width: 280px;
  max-width: 100%;
}
.fot-field:focus { outline: 3px solid var(--fot-sky); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */

.fot-grid { display: grid; gap: var(--fot-gap); }
.fot-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fot-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fot-card {
  display: flex;
  flex-direction: column;
  background: var(--fot-white);
  border-radius: var(--fot-r-card);
  padding: 40px 36px 34px;
  min-height: 250px;
  box-shadow: var(--fot-shadow-rest);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.fot-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fot-shadow-hover);
}
.fot-card .fot-icon { margin-bottom: 30px; }
.fot-card .fot-card-title { margin-bottom: 14px; }
.fot-card-arrow {
  margin-top: auto;
  padding-top: 28px;
  font-size: 26px;
  color: var(--fot-blue);
  line-height: 1;
}

.fot-card--fund {
  gap: 16px;
  min-height: 0;
  padding: 38px 34px;
  box-shadow: none;
}
.fot-card--fund:hover { transform: none; box-shadow: var(--fot-shadow-rest); }

.fot-card--float {
  border-radius: var(--fot-r-sm);
  padding: 26px 30px;
  box-shadow: var(--fot-shadow-float);
  flex-direction: row;
  gap: 18px;
  align-items: flex-start;
  min-height: 0;
}
.fot-card--float:hover { transform: none; box-shadow: var(--fot-shadow-float); }

.fot-card-pad--util-30 { padding: 30px 28px !important; } /* Funding: Nine ways to give */
.fot-card-pad--util-38 { padding: 38px !important; } /* Get Involved: Serve on a committee */
.fot-card-pad--util-40 { padding: 40px !important; } /* Community: Start here */

/* --------------------------------------------------------------------------
   7. Split layouts + arched photo frames
   Reference only (see note in section 5) — not applied to rows by default.
   -------------------------------------------------------------------------- */

.fot-split {
  display: grid;
  gap: 72px;
  align-items: center;
  grid-template-columns: minmax(460px, 1fr) minmax(0, 1.06fr);
}
.fot-split--wide { grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.25fr); gap: 84px; align-items: start; }
.fot-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 84px; }
.fot-split > * { min-width: 0; }

.fot-media { position: relative; min-width: 0; }
.fot-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Arched hero frame — rounded left edge, square right */
.fot-media--arch img {
  height: 520px;
  clip-path: inset(0 round 260px 24px 24px 260px);
}
/* Lozenge frame — rounded on opposite corners */
.fot-media--lozenge img {
  height: 400px;
  clip-path: inset(0 round 24px 200px 24px 200px);
}
/* Flush frame inside a bordered shell */
.fot-media--flush img {
  min-height: 420px;
  clip-path: inset(0 round 28px 0 0 28px);
}

.fot-blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}
.fot-blob--wash { inset: -26px -26px auto auto; width: 220px; height: 220px; background: var(--fot-wash); }
.fot-blob--cream { inset: auto auto -22px -22px; width: 150px; height: 150px; background: var(--fot-cream); }
.fot-media img,
.fot-media .fot-card--float { position: relative; z-index: 1; }

.fot-tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--fot-mist);
  border: 1px solid #E7EEF8;
  border-radius: var(--fot-r-panel);
}
.fot-tour-copy { padding: 54px 46px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }

/* --------------------------------------------------------------------------
   8. Header + footer
   -------------------------------------------------------------------------- */

.fot-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fot-line);
}
.fot-header-inner { display: flex; align-items: center; gap: 40px; padding: 14px 40px; max-width: 1240px; margin: 0 auto; }
.fot-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.fot-nav a { font-size: 14.5px; font-weight: 500; color: #26374F; }
.fot-nav a:hover { color: var(--fot-blue); }

.fot-lockup { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.fot-lockup img { height: 52px; width: auto; display: block; }
.fot-lockup-text { display: flex; flex-direction: column; line-height: 1; }
.fot-lockup-pre { font-size: 11px; letter-spacing: 0.16em; font-weight: 600; color: #5B6B85; }
.fot-lockup-name { font-family: var(--fot-display); font-size: 27px; font-weight: 700; color: var(--fot-navy); letter-spacing: -0.01em; }
.fot-lockup-sub { font-size: 8px; letter-spacing: 0.13em; font-weight: 500; color: var(--fot-muted); margin-top: 3px; }

.fot-footer { background: var(--fot-mist); border-top: 1px solid var(--fot-line); }
.fot-footer-grid { display: grid; grid-template-columns: 1.1fr repeat(4, 0.75fr) auto; gap: 44px; padding: 72px 40px 40px; max-width: 1240px; margin: 0 auto; }
.fot-footer-col { display: flex; flex-direction: column; gap: 12px; }
.fot-footer-head { font-size: 11.5px; letter-spacing: 0.15em; font-weight: 700; color: var(--fot-navy); margin-bottom: 4px; }
.fot-footer-col a { font-size: 14.5px; color: var(--fot-slate); }
.fot-footer-col a:hover { color: var(--fot-blue); }
.fot-footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--fot-line); padding: 26px 40px 56px; max-width: 1240px; margin: 0 auto; }

.email-signup .fl-button[type="submit"] {width: fit-content !important;}
.fl-search-form-wrap .fl-button::after {display: none !important;}

/* ==========================================================================
   Smore newsletter signup form
   Scope: .smore-list-subscribe-form (unique on the page)
   Layout: Name + Email inline, icon-only Subscribe button in the same row,
   bottom-aligned to the inputs. No card wrapper — sits on the section bg.
   ========================================================================== */

.smore-list-subscribe-form {
  margin: 0 auto;
  padding: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--fot-text);
}

/* Smore's own CSS hard-codes the <form> element to width:300px with its
   own margin/padding — override so it fills the surrounding box. */
.smore-list-subscribe-form form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Name + Email + Submit row */
.smore-list-subscribe-form .fot-smore-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end; /* bottom-aligns the button with the input boxes, not the labels */
  gap: 10px;
}

.smore-list-subscribe-form .field-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0 !important; /* override Smore's default 10px */
}

/* Labels — white to read on the navy section background */
.smore-list-subscribe-form label {
  display: block;
  margin-bottom: 6px !important;
  font-family: var(--fot-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fot-white) !important;
  line-height: 1.3;
}

.smore-list-subscribe-form label .required {
  color: var(--fot-gold) !important;
  margin-left: 2px;
}

/* Text inputs */
.smore-list-subscribe-form input[type="text"],
.smore-list-subscribe-form input[type="email"] {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #E7EEF8 !important;
  border-radius: 6px !important;
  background: var(--fot-mist) !important;
  font-family: var(--fot-text) !important;
  font-size: 14px !important;
  color: var(--fot-navy) !important;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.smore-list-subscribe-form input[type="text"]:focus,
.smore-list-subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: var(--fot-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 99, 216, 0.20);
}

/* Visually-hidden text (accessible label inside the icon button) */
.fot-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Submit button — icon-only, circular, white pill on navy (matches the
   site's --on-navy button convention), bottom-aligned with the inputs */
.smore-list-subscribe-form .fot-smore-submit {
  flex: 0 0 auto;
}

.smore-list-subscribe-form button#smore-subscribe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  background: var(--fot-white) !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(11, 43, 91, 0.20);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.smore-list-subscribe-form button#smore-subscribe-button::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free", "Font Awesome 7 Free", "FontAwesome";
  font-weight: 900;
  font-size: 15px;
  color: var(--fot-navy);
  line-height: 1;
}

.smore-list-subscribe-form button#smore-subscribe-button:hover {
  background: var(--fot-wash) !important;
  transform: translateX(2px);
}

.smore-list-subscribe-form button#smore-subscribe-button:active {
  background: var(--fot-sky-pale) !important;
}

/* Only wrap onto multiple lines on very narrow screens */
@media (max-width: 767px) {
  .smore-list-subscribe-form .fot-smore-row {
    flex-wrap: wrap;
  }
  .smore-list-subscribe-form .field-group {
    flex: 1 1 100%;
  }
  .smore-list-subscribe-form .fot-smore-submit {
    align-self: flex-end;
  }
}
/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */

@keyframes fotRiseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.fot-rise { animation: fotRiseIn 0.7s ease both; }

@media (prefers-reduced-motion: reduce) {
  .fot-page *,
  .fot-page *::before,
  .fot-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .fot-card:hover,
  .fot-btn-wrap .fl-button:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   10. Breakpoints — matched to Beaver Builder's defaults
       Large 1200 · Medium 992 · Small 767
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .fot-shell { border-radius: 32px; padding: 80px 40px 88px; }
  .fot-split { grid-template-columns: minmax(380px, 1fr) minmax(0, 1fr); gap: 48px; }
  .fot-split--wide,
  .fot-split--even { gap: 56px; }
  .fot-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .fot-panel { padding: 48px; }
}

@media (max-width: 992px) {
  :root { --fot-space-xl: 72px; --fot-space-2xl: 88px; --fot-space-lg: 48px; }
  .fot-lead .fl-rich-text,
  .fot-lead .fl-rich-text p { font-size: 16.5px; }

  .fot-split,
  .fot-split--wide,
  .fot-split--even,
  .fot-tour,
  .fot-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .fot-split { gap: 40px; }

  /* Arch flips to a soft top-rounded frame once stacked */
  .fot-media--arch img { height: 380px; clip-path: inset(0 round 160px 160px 24px 24px); }
  .fot-media--lozenge img { height: 320px; clip-path: inset(0 round 24px 140px 24px 140px); }
  .fot-media--flush img { min-height: 300px; clip-path: inset(0 round 28px 28px 0 0); }
  .fot-blob { display: none; }

  .fot-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fot-tour-copy { padding: 40px 34px; }
  .fot-panel { display: block; }
  .fot-panel .fot-panel-copy { max-width: none; }
  .fot-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .fot-container,
  .fot-header-inner { padding: 0 20px; }
  .fot-header-inner { padding: 12px 20px; }
  h5 .fl-heading-text,
  .fot-h5 .fl-heading-text { font-size: 18px; }
  .fot-lead .fl-rich-text, .fot-lead .fl-rich-text p,
  .fot-body .fl-rich-text, .fot-body .fl-rich-text p { font-size: 16px; }

  .fot-shell { border-radius: 24px; padding: 56px 22px 60px; }
  .fot-shell--cream { padding: 56px 0; }
  .fot-grid--3,
  .fot-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .fot-card { padding: 32px 26px 28px; min-height: 0; }
  .fot-panel { padding: 34px 26px; border-radius: 24px; }
  .fot-field { width: 100%; }

  /* Full-width tap targets, never below 44px */
  .fot-btn-wrap .fl-button { width: 100%; justify-content: center; min-height: 52px; }

  .fot-media--arch img { height: 300px; clip-path: inset(0 round 120px 120px 20px 20px); }
  .fot-media--lozenge img { height: 260px; clip-path: inset(0 round 20px 110px 20px 110px); }

  .fot-nav { display: none; } /* hand off to the theme's mobile menu */
  .fot-footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 48px 20px 30px; }
  .fot-footer-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px 40px; }
  
  .fot-card-pad--util-30,
  .fot-card-pad--util-38,
  .fot-card-pad--util-40 { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --------------------------------------------------------------------------
   11. Interior-page components
       Documented in "Components Guide.dc.html" §01B, §05–§09.
       Every block below is one Beaver Builder HTML module unless noted.
   -------------------------------------------------------------------------- */

/* 11.1 Hero variant B — stat rail + brand graphic (Components Guide §01B)
   Row: two columns. Left = Heading + Text Editor + stat-rail HTML module.
   Right = brandmark HTML module. Vertical align middle, equalize heights on. */

.fot-hero--stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 72px;
  align-items: center;
}

.fot-stat-rail { display: flex; gap: 40px; flex-wrap: wrap; }

.fot-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid var(--fot-sky-pale);
  padding-left: 18px;
}
.fot-stat-value {
  font-family: var(--fot-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fot-navy);
}
.fot-stat-label { font-size: 13.5px; line-height: 1.4; color: #5B6B85; }

/* Brand graphic. Decorative only — set aria-hidden="true" on .fot-brandmark.
   Concentric divs, not SVG and not an image file, so it recolors with tokens. */

.fot-brandmark {
  position: relative;
  width: 400px;
  height: 400px;
  display: grid;
  place-items: center;
  justify-self: end;
}
.fot-brandmark__dots {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.85;
  background: radial-gradient(var(--fot-dot-grid) 1.4px, transparent 1.5px) 0 0 / 22px 22px;
}
.fot-brandmark__disc,
.fot-brandmark__ring,
.fot-brandmark__core { position: absolute; border-radius: 50%; }
.fot-brandmark__disc { width: 85%; height: 85%; background: var(--fot-cream); }
.fot-brandmark__ring { width: 62%; height: 62%; border: 1.5px solid var(--fot-sky-pale); }
.fot-brandmark__core {
  width: 42%;
  height: 42%;
  background: var(--fot-white);
  box-shadow: 0 18px 40px rgba(11, 43, 91, 0.10);
}
.fot-brandmark__mark { position: relative; display: block; height: 96px; width: auto; }

.fot-brandmark__dot { position: absolute; border-radius: 50%; }
.fot-brandmark__dot--green { top: 8.5%;  right: 13%; width: 18px; height: 18px; background: var(--fot-green); }
.fot-brandmark__dot--blue  { bottom: 15.5%; left: 6.5%; width: 26px; height: 26px; background: var(--fot-blue); }
.fot-brandmark__dot--gold  { bottom: 4.5%; right: 24%; width: 12px; height: 12px; background: var(--fot-bronze); }

/* 11.2 Section nav (Components Guide §05)
   Menu module in its own row, row Sticky with an 81px offset. */

.fot-subnav {
  position: sticky;
  top: 81px;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fot-line);
}
.fot-subnav-inner { display: flex; gap: 30px; }
.fot-subnav a,
.fot-subnav a:visited {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fot-slate);
  padding: 18px 0;
  text-decoration: none;
}
.fot-subnav a:hover { color: var(--fot-blue); }
.fot-subnav a.is-current,
.fot-subnav .current-menu-item > a { font-weight: 600; color: var(--fot-blue); }

/* 11.2 Section nav — anchor offset for sticky header + sub-nav */
.fot-subnav-target {
  scroll-margin-top: 150px;
}

/* Header 81px + subnav 53px = 134px of sticky chrome. Set once, never per row. */
.fot-page section[id],
.fot-page .fl-row[id] { scroll-margin-top: 150px; }

/* 11.3 Editorial panels (Components Guide §06) */

.fot-statement-panel {
  background: var(--fot-cream);
  border-radius: var(--fot-r-panel);
  padding: 62px 66px;
}
.fot-statement-panel .fot-eyebrow .fl-heading-text { color: var(--fot-bronze); }
.fot-statement-lead {
  font-family: var(--fot-display);
  font-size: 32px;
  line-height: 1.34;
  font-weight: 400;          /* regular, never bold — this is voice, not a heading */
  color: var(--fot-navy);
  max-width: 900px;
  margin: 0 0 34px;
  text-wrap: pretty;
}
.fot-statement-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  border-top: 1px solid var(--fot-cream-rule);
  padding-top: 34px;
}
.fot-statement-cols p { font-size: 16.5px; line-height: 1.7; color: var(--fot-body); margin: 0; }

.fot-numbered {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fot-gap);
}
.fot-numbered-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border: 1px solid #E7EEF8;
  border-radius: 24px;
  padding: 40px;
}
/* A span, not a list marker — it must not renumber when rows are reordered. */
.fot-numbered-num {
  flex-shrink: 0;
  font-family: var(--fot-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--fot-sky-pale);
}

/* 11.4 Process flow (Components Guide §07)
   ONE HTML module. Three BB columns would break the connector at medium. */

.fot-flow {
  background: var(--fot-navy);
  border-radius: var(--fot-r-panel);
  padding: 56px 56px 52px;
}
.fot-flow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}
.fot-flow__head h3 {
  font-family: var(--fot-display);
  font-size: 32px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fot-white);
  margin: 0;
}
.fot-flow__qualifier { flex-shrink: 0; font-size: 14px; color: var(--fot-sky-bright); }

.fot-flow__stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 0.9fr);
  align-items: stretch;
}
.fot-flow__stage { border-radius: var(--fot-r-card); padding: 34px; }
.fot-flow__stage--one {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fot-navy-rule);
}
.fot-flow__stage--two {
  background: var(--fot-white);   /* solid white so the eye lands on the outcome */
  display: flex;
  flex-direction: column;
}
.fot-flow__badge { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.fot-flow__stage--two .fot-flow__badge { margin-bottom: 22px; }
.fot-flow__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.fot-flow__stage--one .fot-flow__icon { background: var(--fot-white); color: var(--fot-navy); }
.fot-flow__stage--two .fot-flow__icon { background: var(--fot-green-wash); color: var(--fot-green); }
.fot-flow__label { display: flex; flex-direction: column; line-height: 1.25; }
.fot-flow__step {
  font-size: 11.5px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--fot-sky-bright);
}
.fot-flow__stage--two .fot-flow__step { color: var(--fot-quiet); }
.fot-flow__name { font-family: var(--fot-display); font-size: 26px; font-weight: 700; color: var(--fot-white); }
.fot-flow__stage--two .fot-flow__name { color: var(--fot-navy); }

.fot-flow__chips {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.fot-flow__chip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fot-white);
}
.fot-flow__chip i { flex-shrink: 0; font-size: 13px; color: var(--fot-sky-bright); }

.fot-flow__connector { position: relative; display: grid; place-items: center; }
.fot-flow__connector::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--fot-navy-rule);
}
.fot-flow__connector i {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--fot-navy);
  border: 1.5px solid var(--fot-sky-bright);
  font-size: 15px;
  color: var(--fot-sky-bright);
}
.fot-flow__body { font-size: 16px; line-height: 1.7; color: var(--fot-body); margin: 0 0 24px; }
.fot-flow__outcome {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #E7EEF8;
  padding-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fot-navy);
}
.fot-flow__outcome i { font-size: 13px; color: var(--fot-green); }

/* 11.5 Data lists (Components Guide §08)
   Rows, not <table> — tables fight the responsive grid. */

.fot-list-card { border: 1px solid #E7EEF8; border-radius: 24px; overflow: hidden; }
.fot-list-card__head {
  background: var(--fot-mist);
  border-bottom: 1px solid #E7EEF8;
  padding: 24px 30px;
}
.fot-list-card__head h5 {
  font-family: var(--fot-text);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--fot-navy);
  margin: 0;
}

.fot-roster__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 30px;
  border-bottom: 1px solid var(--fot-hair);
}
.fot-roster__row:last-child { border-bottom: none; }
.fot-roster__role { font-size: 15px; color: var(--fot-slate); }
.fot-roster__name { font-size: 15.5px; font-weight: 600; text-align: right; color: var(--fot-navy); }
/* Unfilled seats read as gaps on a scan of the column. */
.fot-roster__name--open { font-weight: 400; font-style: italic; color: var(--fot-quiet); }

.fot-doclist { padding: 6px 30px; }
.fot-doclist__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--fot-hair);
  text-decoration: none;
}
.fot-doclist__item:last-child { border-bottom: none; }
.fot-doclist__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fot-wash);
  font-size: 16px;
  color: var(--fot-blue);
}
.fot-doclist__text { display: flex; flex-direction: column; gap: 3px; }
.fot-doclist__title { font-size: 16px; font-weight: 600; color: var(--fot-navy); }
.fot-doclist__meta { font-size: 14px; color: var(--fot-slate); }
.fot-doclist__arrow { margin-left: auto; font-size: 12px; color: var(--fot-quiet); }

/* 11.6 Placeholders (Components Guide §09)
   Content the client still owes. NEVER ship invented dates, amounts, or names. */

.fot-placeholder { font-style: italic; color: var(--fot-quiet); }
.fot-doclist__meta.fot-placeholder { color: var(--fot-quiet); }
.fot-placeholder--on-navy { color: var(--fot-sky-bright); }
/* Headline-scale fill-in: dashed rule makes the blank unmissable in a screenshot. */
.fot-placeholder--headline {
  display: inline-block;
  font-family: var(--fot-display);
  font-size: 42px;
  line-height: 1.14;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--fot-sky-bright);
  border-bottom: 1.5px dashed var(--fot-navy-line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

a.tops-markup:hover {text-decoration: none !important;}

/* Specificity fix: a heading module set to tag="p" and created without ever being
   an h1-h6 sometimes renders as a single flat <p class="fl-heading-text fot-*">
   instead of the usual nested wrapper. In that flat case, BB's own zero-config
   paragraph rule () is more specific than a bare single .fot-*
   class and silently wins. These qualified overrides restore the intended style
   regardless of which markup shape BB produced. */
.fot-card-title {
  font-family: var(--fot-display) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.22 !important;
  color: var(--fot-navy) !important;
  margin: 0 !important;
}
.fot-eyebrow {
  font-family: var(--fot-text) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fot-blue) !important;
}
.fot-eyebrow--green { color: var(--fot-green) !important; }
.fot-eyebrow--bronze { color: var(--fot-bronze) !important; }
.fot-panel-title {
  font-family: var(--fot-display) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--fot-white) !important;
  margin: 0 0 10px !important;
}


/* Prevent the newsletter submit button text from wrapping to 3 lines */
.fot-field-wrap .fl-button {
  white-space: nowrap !important;
}


/* Design calls for sentence-case button/link text, not uppercase.
   BB's Global Settings button typography default is applying
   text-transform: uppercase site-wide; override it here. */
.fl-button, .fl-button-wrap .fl-button, .fot-link, .fot-btn {
  text-transform: none !important;
}


/* tops-styles.css defines .fot-btn--secondary but the button MODULE renders
   .fot-btn-wrap--secondary .fl-button (same pattern as the primary variant,
   which does have both selectors). Add the missing wrap-pattern rule so
   secondary buttons don't fall through to BB's navy default. */
.fot-btn-wrap--secondary .fl-button {
  background: var(--fot-white) !important;
  color: var(--fot-navy) !important;
  border: 1.5px solid var(--fot-border) !important;
  padding: 15.5px 28.5px !important;
}
.fot-btn-wrap--secondary .fl-button:hover {
  border-color: var(--fot-navy) !important;
  color: var(--fot-navy) !important;
}
.fot-btn-wrap--secondary .fl-button-text {
  color: var(--fot-navy) !important;
}


/* Secondary button hover border-color wasn't winning against a BB per-module
   hover rule of equal specificity (order-dependent tie). Repeating the class
   bumps specificity enough to guarantee it wins regardless of load order. */
.fot-btn-wrap--secondary.fot-btn-wrap--secondary .fl-button:hover {
  border-color: var(--fot-navy) !important;
  color: var(--fot-navy) !important;
}


/* Belt-and-suspenders fix: target this exact button instance directly with a
   hex value (bypassing any var() resolution/cache ordering ambiguity between
   the Global Settings CSS and the enqueued tops-styles.css file). */
.fl-node-module_6a9757cbdeac2 .fl-button:hover {
  border-color: #0B2B5B !important;
  color: #0B2B5B !important;
}


/* Resource/fund cards are whole-card <a> links (Box module with a link
   setting). A global anchor :hover rule was underlining the card text on
   hover. Cards should lift + deepen shadow on hover, not underline text. */
a.fot-card:hover,
a.fot-card:hover * {
  text-decoration: none !important;
}



/* Card body copy was inheriting the card's own <a> link color (blue) since
   the whole card became a clickable link when hover support was added.
   Raise specificity above the global ".fot-page a" anchor-color rule. */
.fot-card .fot-small,
a.fot-card .fot-small {
  color: var(--fot-slate) !important;
}


/* ROOT CAUSE FIX: Beaver Builder's own base stylesheet sets html{font-size:10px}
   for its internal spacing system. tops-styles.css's fluid type scale was authored
   in rem assuming the standard 16px root, so every rem-based clamp() below was
   rendering at exactly 62.5% of its intended size (e.g. H2's 46px max was showing
   as 28.75px). Converting these five rules to px-based clamp() values makes them
   immune to whatever the root font-size is, and restores the exact style-guide
   targets: H1 38-68px, H2 29-46px, H3 26-42px, H4 23-32px, Statement 34-60px.
   h5/h6 already use fixed px and were never affected. */
.fot-h1 .fl-heading-text, .fot-h1 {
  font-size: clamp(38px, 27.44px + 2.82vw, 68px) !important;
}
.fot-h2 .fl-heading-text, .fot-h2 {
  font-size: clamp(29px, 23px + 1.6vw, 46px) !important;
}
.fot-h3 .fl-heading-text, .fot-h3 {
  font-size: clamp(26px, 20.37px + 1.5vw, 42px) !important;
}
.fot-h4 .fl-heading-text, .fot-h4 {
  font-size: clamp(23px, 19.84px + 0.85vw, 32px) !important;
}
.fot-statement .fl-heading-text, .fot-statement {
  font-size: clamp(34px, 24.85px + 2.44vw, 60px) !important;
}


/* Header Donate button — native BB button module uses fot-btn-wrap bridge classes;
   gap between icon and label isn't a native button field, so set it here. */
.fot-btn-wrap--donate .fl-button { gap: 9px; }


/* Components Guide reference page — small overline "variant" labels
   (e.g. "A · Split — homepage only", "PHOTO — IMAGE SLOT"). Additive utility,
   only used on the Components Guide page. */
.fot-variant-label {
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--fot-quiet);
  margin: 0 0 16px;
}


/* Buttons on a Navy background (Hero variant D, CTA navy band).
   fot-btn-wrap--primary/--secondary assume a light page background;
   these two invert for use inside navy panels. */
.fot-btn-wrap--on-navy .fl-button {
  background: var(--fot-white) !important;
  color: var(--fot-navy) !important;
  border: 0 !important;
}
.fot-btn-wrap--on-navy .fl-button:hover {
  background: var(--fot-wash) !important;
  color: var(--fot-navy) !important;
}
.fot-btn-wrap--outline-on-navy .fl-button {
  background: transparent !important;
  color: var(--fot-white) !important;
  border: 1.5px solid var(--fot-navy-line) !important;
}
.fot-btn-wrap--outline-on-navy .fl-button:hover {
  background: var(--fot-white) !important;
  color: var(--fot-navy) !important;
  border-color: var(--fot-white) !important;
}


/* Bug fix: .fot-btn-wrap--on-navy / --outline-on-navy set color on .fl-button
   but BB nests the label in its own .fl-button-text span, which wasn't
   inheriting it reliably (same issue already fixed for --secondary). Text
   was rendering white-on-white on the "Give today" button. */
.fot-btn-wrap--on-navy .fl-button-text {
  color: var(--fot-navy) !important;
}
.fot-btn-wrap--outline-on-navy .fl-button-text {
  color: var(--fot-white) !important;
}
.fot-btn-wrap--outline-on-navy .fl-button:hover .fl-button-text {
  color: var(--fot-navy) !important;
}

:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {outline-width: 0;}


/* --------------------------------------------------------------------------
   12. Interior-page breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .fot-hero--stat { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
  .fot-brandmark { width: 320px; height: 320px; }
  .fot-brandmark__mark { height: 78px; }
  .fot-statement-panel { padding: 48px; }
  .fot-flow { padding: 48px 40px 44px; }
  .fot-numbered-item { padding: 32px; }
}

@media (max-width: 992px) {
  .fot-hero--stat,
  .fot-numbered,
  .fot-statement-cols { grid-template-columns: minmax(0, 1fr); }
  .fot-hero--stat { gap: 40px; }
  .fot-statement-cols { gap: 22px; }
  .fot-brandmark { justify-self: start; }
  .fot-statement-lead { font-size: 27px; }

  /* Connector rotates to vertical once the stages stack. */
  .fot-flow__stages { grid-template-columns: minmax(0, 1fr); }
  .fot-flow__connector { height: 76px; }
  .fot-flow__connector::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .fot-flow__connector i { transform: rotate(90deg); }
}

@media (max-width: 767px) {
  /* Graphic is decorative — drop it rather than shrink it past legibility. */
  .fot-brandmark { display: none; }
  .fot-stat-rail { gap: 22px; }
  .fot-statement-panel { padding: 34px 26px; border-radius: 24px; }
  .fot-statement-lead { font-size: 23px; }
  .fot-flow { padding: 34px 26px 30px; border-radius: 24px; }
  .fot-flow__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 28px; }
  .fot-flow__chips { grid-template-columns: minmax(0, 1fr); }
  .fot-flow__stage { padding: 26px; }
  .fot-numbered-item { padding: 26px; gap: 18px; }
  .fot-numbered-num { font-size: 34px; }

  /* Rosters go two-line so long names never collide with the role. */
  .fot-roster__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 22px;
  }
  .fot-roster__name { text-align: left; }
  .fot-doclist { padding: 6px 22px; }
  .fot-placeholder--headline { font-size: 30px; }

  /* Subnav scrolls sideways rather than wrapping to two sticky rows. */
  .fot-subnav {
  display: none !important;
  }
  .fot-subnav-inner {
    gap: 22px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fot-subnav-inner::-webkit-scrollbar { display: none; }
  .fot-subnav a { white-space: nowrap; }
  .fot-page section[id],
  .fot-page .fl-row[id] { scroll-margin-top: 120px; }
}

/* Mobile-only Donate nav item — .donate-nav is the <li> in the WP menu,
   so styling + icon target the <a> inside it. */
.donate-nav { list-style: none; margin-top: 20px !important;}

.donate-nav > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--fot-text);
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--fot-white) !important;
  background: var(--fot-navy) !important;
  padding: 13px 24px !important;
  border-radius: var(--fot-r-pill) !important;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.donate-nav > a::before {
  content: "\f004";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

.donate-nav > a:hover,
.donate-nav > a:focus-visible {
  background: var(--fot-navy-hover) !important;
  color: var(--fot-white) !important;
  transform: translateY(-2px);
}

@media screen and (min-width: 767px) {
  .donate-nav { display: none !important; }
}

/* Roster box (Beaver Builder Component): title on the left, name on the right, one line per item.
   Scoped to the Roster list module (class .tops-roster__list) so nothing else on the site is affected. */
.fl-module-list.tops-roster__list .fl-list-item { margin-bottom: 10px; }
.fl-module-list.tops-roster__list .fl-list-item:last-child { margin-bottom: 0; }
.fl-module-list.tops-roster__list .fl-list-item-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.fl-module-list.tops-roster__list .fl-list-item-heading,
.fl-module-list.tops-roster__list .fl-list-item-content { display: block; width: auto; flex: 0 1 auto; }
.fl-module-list.tops-roster__list .fl-list-item-content { text-align: right; }
.fl-module-list.tops-roster__list .fl-list-item-content-icon { display: none; }
/* Wrap a name in italics (<em>) to get the muted "Position open" look. */
.fl-module-list.tops-roster__list .fl-list-item-content-text em { color: #8FA6C6; font-weight: 400; font-style: italic; }

/* Icon modules inside flex "link rows" (e.g. Community Resources list): keep the icon at its natural size
   so the text box takes the remaining space. Add class "fot-row-icon" in the icon module's Advanced > Class field.
   Replaces the per-node-ID rule that previously had to be updated for every new row. */
.fl-module-icon.fot-row-icon { flex: 0 0 auto !important; }