/* Calming / survivor-focused visual adjustments layered on top of the Siteplus theme */

/* Keyboard focus indicator (WCAG 2.4.7 / 1.4.11) --------------------------
   publish.css strips the default outline globally and nothing here ever
   restored it, so keyboard users got no visible focus state anywhere on
   the site. This is a single global rule so any new interactive element
   picks it up automatically instead of needing a per-class override (same
   reasoning as the pointer-events fix further down).
   Default ring is dark navy, which is what most of the page needs (content
   sections use a white/near-white background). A navy ring is invisible
   against navy itself, so the handful of navy or red containers (header,
   footer, cookie banner, quick exit, the modal close button) switch to a
   white ring instead - a single ring color can't clear WCAG 1.4.11's 3:1
   non-text contrast requirement against both light and dark backgrounds at
   once. Teal-filled controls that live inside those white-ring containers
   (the active nav link, the Donate button, the cookie Accept button) get
   the navy ring back explicitly, because white-on-teal also falls short of
   3:1 (verified: navy/teal ~6.9:1, white/teal ~2.1:1, white/navy ~14.4:1,
   white/red ~6.5:1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgb(var(--preColor_altBrand));
  outline-offset: 2px;
}

.srca-header :focus-visible,
.srca-footer :focus-visible,
.cookie-toolbar :focus-visible,
#srca-quick-exit:focus-visible {
  outline-color: #fff;
}

.srca-nav a.active:focus-visible,
.srca-nav-donate:focus-visible,
.js-cookie__btn_accept:focus-visible {
  outline-color: rgb(var(--preColor_altBrand));
}

/* Visually-hidden page title: the Home and About pages open
   with an image or a fragile native Siteplus heading rather than a plain
   .srca-block h2 (see the em-multiplier gotcha for why that one isn't
   touched here), so instead of retagging either one, each page gets a
   real h1 with the page title, hidden off-screen so sighted users still
   see the same design while screen readers and the document outline get
   a proper top-level heading. Standard clip-based hidden pattern - not
   display:none (which pulls it from the accessibility tree entirely). */
.srca-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;
}

/* Quick exit: always-visible safety button. Used to be `position: fixed`,
   floating above everything so it could never be scrolled out of view -
   but that put it in the same top-right corner the header's own content
   wants at narrow widths, so it kept overlapping
   the nav/Donate button or the hamburger depending on viewport. Moved into
   the header's own flexbox instead: it's the last child in
   .srca-header-inner, so it gets guaranteed space like every other button
   there and can't overlap anything. Same font-size/padding as .srca-nav a
   below so it's the same height as Resources/Donate - it needs to read as
   part of the same button row, not a mismatched insert.
   Still "always visible": .srca-header itself is `position: sticky; top:0`
   (see the .template overflow-y note further down for why that's safe),
   so this rides along with the header on scroll exactly like it did as an
   independent fixed element - no separate positioning needed to guarantee
   that. */
.srca-quick-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #b3261e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  /* publish.css resets buttons to `line-height: normal`, unlike .srca-nav a
     (a plain <a>, unaffected), which inherits body's line-height:1.7 -
     without restating it here this button measures ~8px shorter than
     Resources/Donate despite identical font-size/padding. */
  line-height: 1.7;
  font-weight: 700;
  font-family: var(--font_primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.srca-quick-exit:hover {
  background: #8f1e18;
}

/* Cookie consent banner (unstyled in the source theme) */
.cookie-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgb(var(--preColor_altBrand));
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  /* .fixed-block (an ancestor, for the back-to-top button) sets
     pointer-events:none so its empty space doesn't block clicks to the
     page beneath it. That was silently swallowing every tap/click on this
     banner too, since it inherits pointer-events. Re-enable it here. */
  pointer-events: auto;
}

.cookie-toolbar__wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cookie-toolbar__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  flex: 1 1 320px;
}

.cookie-toolbar__text-short {
  display: none;
}

.cookie-toolbar__link {
  color: rgb(var(--preColor_brand));
}

.cookie-toolbar__buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-toolbar__btn {
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cookie-toolbar__btn_accept {
  background: rgb(var(--preColor_brand));
  color: rgb(var(--preColor_altBrand));
}

@media (max-width: 560px) {
  .cookie-toolbar__wrap {
    padding: 10px 14px;
    gap: 8px;
  }

  .cookie-toolbar__text-full {
    display: none;
  }

  .cookie-toolbar__text-short {
    display: block;
    flex: 1 1 100%;
    font-size: 12px;
    line-height: 1.4;
  }

  .cookie-toolbar__buttons {
    flex: 1 1 100%;
    gap: 6px;
  }

  .cookie-toolbar__btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
  }
}

body {
  line-height: 1.7;
}

.picture-wrap img,
.img__container-one {
  border-radius: 14px !important;
}

.picture-wrap {
  box-shadow: 0 10px 30px rgba(0, 46, 63, 0.12);
  border-radius: 14px;
  overflow: hidden;
}

.s-section {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* One consistent page container: every section (native Siteplus content and
   our own added sections) lines up to the same width and left/right edges
   instead of alternating between full-bleed and narrow floating columns. */
.s-wrapper {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box;
  /* publish.css ships a blanket .s-wrapper{pointer-events:none}, normally
     re-enabled by a scroll-reveal animation from the removed bundle.js.
     Without that JS it never re-enables, silently killing every link and
     button inside every section (and the footer) site-wide. */
  pointer-events: auto !important;
}

/* Home hero: logo, headline, tagline, intro statement, primary actions.
   Used to be native, unconverted Siteplus widget markup - just
   the dove logo blown up large, duplicating the one already in the header,
   with no headline or call to action. Siteplus doesn't publish this page
   anymore, so that markup (and its now-orphaned per-page inline <style>
   block, which targeted section/image widget ids nothing on this page
   used anymore) was removed and replaced with plain rebuilt markup. */
.srca-intro {
  padding: 8px 0 32px;
  text-align: center;
}

.srca-intro p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.8;
  color: var(--color_text);
}

.srca-hero-logo {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 20px;
}

/* Specificity note: same defensive pattern as the .srca-block h1/h2 rule
   further down - publish.css's four responsive breakpoints reassert a
   near-0px !important h1 font-size via ".template h1:not(.X)" (0,2,1).
   ".template .srca-hero.s-wrapper h1" (0,3,1) beats it regardless of
   viewport or source order. */
.template .srca-hero.s-wrapper h1 {
  max-width: 720px;
  margin: 0 auto 12px;
  font-family: var(--font_secondary);
  font-size: 36px !important;
  font-weight: 700;
  color: rgb(var(--preColor_altBrand));
}

.srca-hero-tagline {
  max-width: 720px;
  margin: 0 auto 20px;
  font-family: var(--font_secondary);
  font-size: 20px;
  font-weight: 600;
  color: rgb(var(--preColor_altBrand));
}

.srca-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

/* Support / crisis-line callout */
.srca-support {
  /* !important required: also carries .s-wrapper, whose max-width is
     itself !important and otherwise wins. Margin is left alone here so
     each context's own alignment (centered under the Home hero intro,
     or left-aligned inside a left-aligned .srca-block) still applies. */
  max-width: 720px !important;
  padding: 24px 28px;
  background: rgb(var(--preColor_complementary));
  border-left: 5px solid rgb(var(--preColor_brand));
  border-radius: 10px;
}

/* Inside .srca-block (Donate/Consulting/Whistleblower), the column itself
   is centered (see the note above .srca-block), text inside stays left. */
.srca-block .srca-support {
  margin: 0 auto 24px;
}

/* On Home, it directly follows the centered hero intro. The box was
   already centered as a block, but its heading/paragraphs inherited
   left-aligned text from outside .srca-intro (this is a sibling, not a
   child, so it doesn't inherit .srca-intro's text-align:center) - so
   centered prose ran straight into flush-left text with no transition.
   text-align:center here matches it to the hero it sits directly under. */
.srca-intro + .srca-support {
  margin: 0 auto 40px !important;
  text-align: center;
}

.srca-support h3 {
  margin: 0 0 10px;
  font-family: var(--font_secondary);
  font-size: 20px;
  color: rgb(var(--preColor_altBrand));
}

.srca-support p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color_text);
}

.srca-support a {
  color: rgb(var(--preColor_altBrand));
  font-weight: 700;
  text-decoration: underline;
}

/* Copy-email-address fallback: mailto: links do nothing if the
   visitor has no desktop mail client configured, with no indication why.
   This small icon button lets them grab the address to paste into webmail
   instead. A <button>, not an <a>, so it's untouched by the `.srca-block a`
   link-color rule below - no specificity fight needed. Icon-only, so the
   accessible name comes from the button's own aria-label (see markup) -
   the icon itself is aria-hidden. */
.srca-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: rgb(var(--preColor_altBrand));
  background: transparent;
  border: 1px solid rgb(var(--preColor_altBrand));
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.srca-copy-btn:hover {
  background: rgb(var(--preColor_altBrand));
  color: #fff;
}

.srca-copy-icon {
  width: 16px;
  height: 16px;
}

/* Donate CTA button: the page's one action was a bare text
   link showing the raw placeholder URL, with no button affordance. This
   is its own class rather than styling `.srca-support a` directly, since
   that shared class also wraps plain informational phone-number links on
   other pages (the Home and Whistleblower crisis-support boxes) - those
   should stay as plain underlined text, not become buttons too.
   Specificity note: plain `.srca-btn` (0,1,0) loses its text color to the
   later-defined `.srca-block a` (0,1,1), which paints every in-page link
   teal - same teal as this button's own background, so the label just
   disappears. `.srca-block a.srca-btn` (0,2,1) beats it regardless of
   source order. `.srca-hero a.srca-btn` added alongside for the Home hero
   actions, which sit in `.srca-intro`, not `.srca-block`. */
.srca-block a.srca-btn,
.srca-hero a.srca-btn {
  display: inline-block;
  margin-top: 2px;
  padding: 12px 26px;
  background: rgb(var(--preColor_brand));
  color: rgb(var(--preColor_altBrand));
  font-family: var(--font_primary);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.srca-block a.srca-btn:hover,
.srca-hero a.srca-btn:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
}

/* Secondary (outline) variant - e.g. the Home hero's second action.
   Specificity note: the base rule above is `.srca-hero a.srca-btn` /
   `.srca-block a.srca-btn` (0,2,1), so a plain `.srca-btn-secondary`
   (0,1,0) loses the background/color fight even though it's a more
   specific *intent*. Repeating the full compound selector plus the extra
   class (0,3,1) beats it regardless of source order. */
.srca-hero a.srca-btn.srca-btn-secondary,
.srca-block a.srca-btn.srca-btn-secondary {
  background: transparent;
  border: 2px solid rgb(var(--preColor_altBrand));
  color: rgb(var(--preColor_altBrand));
}

.srca-hero a.srca-btn.srca-btn-secondary:hover,
.srca-block a.srca-btn.srca-btn-secondary:hover {
  background: rgb(var(--preColor_altBrand));
  color: #fff;
  filter: none;
}

/* Generic content section used for News/Inquiry and Media blocks.
   Spans the full 1100px .s-wrapper column: card grids like .srca-teasers
   want that width for a 3-column layout. Prose is capped separately below
   for readability, and .srca-stats/.srca-bios are capped to match the
   text they sit directly beside.
   Site-wide alignment rule: every prose element below (h1/h2,
   h3, p, ul, .srca-stats, .srca-bios, .srca-quote, .srca-media-list, and
   .srca-support when it's inside a .srca-block) is centered as a 720px
   column via margin-left/right:auto, with left-aligned text inside it -
   long-form prose reads worse centered, so only the column position
   changes, not the text-align. Before this, the column just hugged the
   left edge of the wider 1100px wrapper, leaving a dead gutter on the
   right on any normal desktop screen. .srca-teasers is the one exception:
   it's a card grid, not prose, and deliberately keeps the full 1100px
   width for its 3-column layout. */
.srca-block {
  padding: 60px 0;
}

/* Specificity note: publish.css has FOUR responsive breakpoints
   (@media min-width:1921px, max-width:1366/1024/767px) that reassert a
   near-0px !important font-size on h1/h2 via ".template h1:not(.X)" and
   ".template h2:not(.X)" (specificity 0,2,1 each) - higher than a plain
   ".srca-block h2" (0,1,1), so it silently wins at those specific viewport
   widths even though this rule loads later. ".template .srca-block.s-wrapper
   h1/h2" (0,3,1) beats all four regardless of which one the current
   viewport matches.
   Both h1 and h2 are listed here because most pages promote their single
   top-of-page heading to h1, but About still uses this
   same "page-title" styling on a real h2 that sits below a visually-hidden
   h1 - see about.html for why.
   margin uses auto left/right (not the site-wide plain-0 you'd expect) -
   see the "centered column, left-aligned text" note above .srca-block
   below for why every element in this prose column does this. */
.template .srca-block.s-wrapper h1,
.template .srca-block.s-wrapper h2 {
  max-width: 720px;
  font-family: var(--font_secondary);
  font-size: 32px !important;
  font-weight: 700;
  color: rgb(var(--preColor_altBrand));
  margin: 0 auto 18px;
}

/* Home's "Our Mission" and "Learn More" used to be two separate
   <section>s, each with their own .srca-block padding (60px) stacked on
   top of .s-section's own padding (12px) on both sides of the seam - a
   ~164px gap between two sections with no visual boundary between them
   (same background, no divider), reading as a mistake. Merged into one
   section/.srca-block; this rule gives the second heading its own
   deliberate breathing room instead.
   `~` (general sibling), not `+` (adjacent sibling): the two h2s aren't
   directly adjacent, there's a <p> and <ul> in between, so `+` silently
   never matched. Needs the same 3-class specificity as the h1/h2 rule
   above (0,3,2 here, beating that rule's 0,3,1) since it's only
   overriding margin-top, not repeating the whole shorthand. */
.template .srca-block.s-wrapper h2 ~ h2 {
  margin-top: 44px;
}

.srca-block h3 {
  max-width: 720px;
  font-family: var(--font_secondary);
  font-size: 20px;
  font-weight: 700;
  color: rgb(var(--preColor_altBrand));
  margin: 28px auto 10px;
}

.srca-block p {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color_text);
  margin: 0 auto 16px;
}

.srca-block a {
  color: rgb(var(--preColor_brand));
  font-weight: 700;
}

.srca-block ul {
  max-width: 720px;
  margin: 0 auto 20px;
  padding-left: 22px;
  list-style: disc;
}

.srca-block li {
  display: list-item;
  list-style: disc;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color_text);
  margin-bottom: 8px;
}

/* About page's hero heading was originally native, unconverted
   DraftEditor markup (h4 + em-multiplier trick) inside the right-hand
   column of the two-column intro row (row__item_desktop-5). Rebuilt as a
   plain .srca-block h2/p pair, matched with .s-wrapper, to pick up the
   normal ".template .srca-block.s-wrapper h2" sizing rule above instead of
   the fragile native one. But .srca-block's own 60px vertical padding and
   .s-wrapper's 1100px max-width/auto-margin centering are meant for a
   full-width standalone section - here the block is already nested one
   column inside a narrower, section-padded two-column row, so both would
   double up padding and fight the column's own width. .s-wrapper's own
   max-width/margin/padding are !important, so this override needs
   !important too - a plain override would silently lose. Zeroed out here
   without touching the shared h2/p sizing rules other pages rely on. */
.srca-about-hero-text.srca-block {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Bio cards (About page leadership) */
.srca-bios {
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px auto 0;
}

.srca-bio {
  flex: 1 1 280px;
  background: #fff;
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: 0 6px 20px rgba(0, 46, 63, 0.08);
}

.srca-bio-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

/* Placeholder headshot: dashed ring marks it as a stand-in
   until real co-founder photos are supplied, rather than looking finished. */
.srca-bio-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--preColor_complementary));
  border: 1px dashed rgba(var(--preColor_altBrand), 0.4);
  font-family: var(--font_secondary);
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--preColor_altBrand));
}

.srca-bio h3 {
  margin: 0;
  font-family: var(--font_secondary);
  font-size: 19px;
  color: rgb(var(--preColor_altBrand));
}

.srca-bio p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color_text);
}

/* Stat row for inquiry figures */
.srca-stats {
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px auto 32px;
}

.srca-stat {
  flex: 1 1 140px;
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 46, 63, 0.08);
}

.srca-stat .num {
  display: block;
  font-family: var(--font_secondary);
  font-size: 34px;
  font-weight: 700;
  color: rgb(var(--preColor_brand));
  line-height: 1.1;
}

.srca-stat .label {
  display: block;
  font-size: 13px;
  color: var(--color_text);
  margin-top: 6px;
}

/* Pull-quote */
.srca-quote {
  max-width: 720px;
  border-left: 5px solid rgb(var(--preColor_brand));
  padding: 4px 0 4px 22px;
  margin: 24px auto;
  font-family: var(--font_secondary);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: rgb(var(--preColor_altBrand));
}

.srca-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font_primary);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--color_text);
}

/* Media / podcast list */
.srca-media-list {
  max-width: 720px;
  list-style: none;
  margin: 0 auto 8px;
  padding: 0;
}

.srca-media-list li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 46, 63, 0.1);
}

.srca-media-list li:last-child {
  border-bottom: none;
}

.srca-media-list .show {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--preColor_brand));
  font-weight: 700;
}

.srca-media-list .ep-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: rgb(var(--preColor_altBrand));
  margin: 4px 0 4px;
}

.srca-media-list .ep-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color_text);
  margin: 0;
}

/* Site header / primary navigation */
.srca-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(var(--preColor_altBrand));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.srca-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.srca-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.srca-brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.srca-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  /* Was implicit under the old `justify-content: space-between` (2 flex
     children: brand, nav). Now .srca-quick-exit is a 3rd child after nav,
     so this is what keeps nav+Quick Exit flush right together as a group
     instead of space-between spreading all 3 evenly - see the
     .srca-header-inner/.srca-quick-exit comments above. Reset to 0 in the
     mobile media query below, where nav becomes its own full-width dropdown
     row and auto-pushing it right no longer makes sense. */
  margin-left: auto;
}

.srca-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.srca-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.srca-nav a.active {
  background: rgb(var(--preColor_brand));
  color: rgb(var(--preColor_altBrand));
}

.srca-nav-donate {
  background: rgb(var(--preColor_brand)) !important;
  color: rgb(var(--preColor_altBrand)) !important;
  margin-left: 4px;
}

.srca-nav-donate.active {
  background: rgb(var(--preColor_textAlt)) !important;
  color: rgb(var(--preColor_altBrand)) !important;
}

/* Mobile nav collapse. Hidden by default: at normal widths the
   5 links + Donate button fit on one line via .srca-header-inner's flexbox.
   Below the breakpoint, .srca-nav switches to a hidden dropdown panel that
   this button shows/hides (site.js toggles the "is-open" class and syncs
   aria-expanded/aria-label - CSS alone can't drive that, unlike a
   checkbox-hack, because focus/Escape/outside-click all need JS anyway). */
.srca-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.srca-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.srca-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
}

@media (max-width: 700px) {
  /* .srca-quick-exit is a `position: fixed; top:12px; right:16px` overlay
     (~106px wide, see overrides.css around line 71) that sits above the
     sticky header by design so it's always reachable - now via being a
     normal flex child of the header instead of a floating overlay, see
     the .srca-quick-exit comment above. A right-aligned toggle button used
     to fight it for the same corner; putting the toggle on the left, next
     to the brand, sidesteps that entirely regardless of where Quick Exit
     ends up. */
  .srca-nav-toggle {
    display: flex;
    order: -1;
  }

  .srca-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
    /* Undo the desktop .srca-nav margin-left:auto trick (which pairs it
       with Quick Exit as a flush-right group) - nav is hidden here except
       when opened as its own full-width dropdown row via .is-open, and
       auto-pushing that row right doesn't make sense. */
    margin-left: 0;
  }

  .srca-nav.is-open {
    display: flex;
  }

  .srca-nav a {
    padding: 12px 14px;
  }

  .srca-nav-donate {
    margin-left: 0;
    text-align: center;
  }

  /* Nav's own margin-left:auto is reset above (it's hidden/dropdown here),
     so Quick Exit needs its own auto margin to stay flush right next to
     the [hamburger][logo] group instead of packing left with them under
     `justify-content: flex-start`. */
  .srca-quick-exit {
    margin-left: auto;
  }
}

/* Home page teaser cards linking to sub-pages */
.srca-teasers {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.srca-teaser {
  flex: 1 1 220px;
  background: rgb(var(--preColor_complementary));
  border-radius: 12px;
  padding: 22px 20px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 46, 63, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.srca-teaser:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 46, 63, 0.14);
}

.srca-teaser h3 {
  margin: 0 0 8px;
  font-family: var(--font_secondary);
  font-size: 19px;
  color: rgb(var(--preColor_altBrand));
}

.srca-teaser p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color_text);
}

/* Site footer */
.srca-footer {
  background: rgb(var(--preColor_altBrand));
  padding: 56px 0 32px;
}

.srca-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.srca-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.srca-footer-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.srca-footer-brand span {
  font-family: var(--font_secondary);
  font-weight: 700;
  font-size: 20px;
  color: rgb(var(--preColor_brand));
}

.srca-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-bottom: 28px;
}

.srca-footer-links a {
  color: rgba(var(--preColor_textAlt), 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.srca-footer-links a:hover {
  color: rgb(var(--preColor_brand));
}

.srca-footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.srca-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgb(var(--preColor_brand));
  color: rgb(var(--preColor_brand));
  transition: background 0.15s ease, color 0.15s ease;
}

.srca-footer-social a:hover {
  background: rgb(var(--preColor_brand));
  color: rgb(var(--preColor_altBrand));
}

.srca-footer-social svg {
  width: 20px;
  height: 20px;
}

.srca-footer-copyright {
  font-size: 13px;
  color: rgba(var(--preColor_textAlt), 0.55);
  margin: 0;
}

.srca-footer-copyright a {
  color: rgba(var(--preColor_textAlt), 0.75);
}

/* publish.css makes .template (the direct parent of our sticky header)
   its own internal scroll container: overflow-y:scroll + min-height:100vh.
   That's a classic setup for breaking position:sticky under subpixel
   rounding - at fractional browser zoom (e.g. 90%) the header can end up
   stuck to the top of that inner scroll box while the box itself has
   scrolled out of the outer viewport, making the whole header vanish.
   Let the browser window be the only scroll container instead. */
.template {
  overflow-y: visible !important;
}

/* Same specificity issue as the .srca-block h2 fix above, hitting the one
   remaining native (never-migrated) Siteplus heading: About page's
   "About us" h4. Fixing the h4 itself is not enough on its own: publish.css
   also sizes the INNER text span at font-size: var(--title_heading_fontSize)
   = 36em, relative to the h4's own font-size. Setting the h4 to a normal
   28px turned that inner span into 36 x 28px = 1008px - a giant letter
   filling the screen. Overriding the inner span directly with an absolute
   px value (higher specificity, !important) bypasses the em chain instead
   of feeding it a differently-wrong base. */
.template .section__title.header-four h4 {
  font-size: 28px !important;
}

.template .section__title.header-four h4 span {
  font-size: 28px !important;
}