/*
Theme Name:   SEHEI Child
Theme URI:    https://sehei.org
Description:  Child theme for the sehei.org 2026 rebuild. Holds all custom CSS
              and PHP so that Divi updates never overwrite site customizations.
Author:       Tim Furnish
Author URI:   https://timfurnishdesign.com
Template:     Divi
Version:      1.0.2
Text Domain:  sehei-child
*/

/* ------------------------------------------------------------------
   NOTE: do not add an @import for the parent stylesheet, and do not
   enqueue style.css from functions.php. Divi 5 already enqueues this
   file itself as the "divi-style-child" handle (see Divi/functions.php,
   the is_child_theme() branch). Doing it again double-loads the CSS.
   Custom CSS goes below. Prefer this file over Divi > Theme Options >
   Custom CSS: it is version-controllable, diffable, and reviewable.
   ------------------------------------------------------------------ */

/* ==========================================================================
   Header nav breakpoint + Donate button/text — added by Claude, 2026-09-13,
   revised 2026-09-14 (no images — real Divi-button styling throughout, per
   Tim's direction).

   Moves the header nav's collapse-to-mobile point from Divi's default
   980px down to 767px, so three things switch together at the same width:
     1. the horizontal desktop nav collapses to the hamburger menu
     2. the standalone header Donate button + "SEHEI.org / a 501c3" text
        (top right, column class "sehei-donate") disappears
     3. a matching Donate button + text appear at the bottom of the
        mobile (hamburger) menu, styled like a real button — not an image
   The Donate items never appear in the desktop horizontal menu at any width.
   ========================================================================== */

/* --- Extend the desktop nav through Divi's old 768-980px "tablet" range;
   it now only collapses to the mobile menu at max-width:767px. --- */
/* SUPERSEDED 2026-09-15 — the four `display` rules that used to live here
   have been REMOVED, because they left the site with NO navigation at all
   between 768 and 980px.

   This block was written on 09-13 to keep the DESKTOP nav alive through
   768-980px. The "MENU BREAKPOINT" block further down (added later, moving
   the hamburger up to 1010px) reverses that decision — and being later in
   the file, its `!important` rules win for the two selectors it names:

     .et_pb_menu__menu    hidden below 1010  (later rule wins - intended)
     .et_mobile_nav_menu  shown  below 1010  (later rule wins - intended)

   But the later block never mentions `.mobile_nav`, the element INSIDE the
   wrapper that actually holds the toggle and the dropdown. So this block's
   `.mobile_nav{display:none!important}` went on winning by default: desktop
   nav hidden, hamburger hidden, nothing left. Verified at 900px before the
   fix — neither nav had a non-zero box.

   The 1010px block is now the single place the breakpoint is decided.

   The padding-compression rules below are kept but are UNREACHABLE while
   the breakpoint is 1010px: they squeeze `.et-menu li`, which is inside the
   desktop nav that no longer displays in this range. They are left in place
   so that moving the breakpoint back down restores the behaviour they were
   written for. */
@media (min-width: 768px) and (max-width: 980px) {
  .et_pb_menu_0_tb_header.et_pb_menu .et-menu li { padding: 0 clamp(0px, calc(0.9859vw - 7.562px), 2.1px) !important; }
  .et_pb_menu_0_tb_header.et_pb_menu .et-menu li a { padding: 0 clamp(0px, calc(1.3615vw - 10.443px), 2.9px) !important; }
}

/* --- Donate items: never show in the desktop horizontal nav, at any width. --- */
.et_pb_menu_0_tb_header.et_pb_menu .et-menu.nav .menu-item-mobile-donate,
.et_pb_menu_0_tb_header.et_pb_menu .et-menu.nav .menu-item-mobile-donate-text {
  display: none !important;
}

/* --- Mobile (hamburger) dropdown: center every item's text — matches the
   desktop nav's centered style. --- */
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li,
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li > a {
  text-align: center !important;
}

/* --- Donate items inside the mobile (hamburger) menu: a real pill button,
   same style as the desktop header's Divi button — no image. --- */
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu .menu-item-mobile-donate > a {
  display: inline-block !important;
  margin: 10px auto 0 auto !important;
  padding: 10px 28px !important;
  background-color: var(--gcid-primary-color) !important;
  color: #fff !important;
  border-radius: 29px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu .menu-item-mobile-donate-text > a {
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
  padding: 4px 5% 10px 5% !important;
}

/* --- Standalone header Donate button (top-right "sehei-donate" column):
   left as a real Divi button (its own Design-tab styling), just centered
   over its caption text with the gap between them tightened. Hidden below
   767px so it disappears exactly when the nav switches to mobile. --- */
.sehei-donate { text-align: center; }
.sehei-donate .et_pb_button_module_wrapper { text-align: center !important; margin: 0 !important; }
.sehei-donate-meta { text-align: center !important; margin-top: 2px !important; }
.sehei-donate-meta .et_pb_text_inner { margin: 0 !important; }
.sehei-donate-meta .et_pb_text_inner p { margin: 0 !important; }

@media (max-width: 767px) {
  .sehei-donate { display: none !important; }
}

h1,h2 {padding: 15px 0;}


.et_pb_text_inner *:has(+ ol), .et_pb_text_inner *:has(+ ul) {
    padding-bottom: 0;
}
.et_pb_text_inner ol:first-child, .et_pb_text_inner ul:first-child {
    padding-bottom: 10px;
}
.et_pb_text_inner * + ol, .et_pb_text_inner * + ul {
    padding-top: 10px;
    padding-bottom: 10px;
}




/* The 5px left rule, repointed from Divi's accent to the coral link colour.

   Divi draws the bar with a bare `blockquote{border-left:5px solid}` and then
   colours it from the accent in a second rule —
   `.et-search-form,.nav li ul,.et_mobile_menu,…,blockquote{border-color:#044f63}`
   — which is only (0,0,1) BUT ships inside `#et-critical-inline-css`, printed
   into <head> AFTER the child stylesheet (node 14 vs node 11). So a matching
   bare `blockquote` rule here would tie on specificity and LOSE on source
   order. Scoping to the module classes reaches (0,1,1) and wins either way.

   `.et_pb_text_inner` and `.et_pb_module` both exist in the Visual Builder as
   well as on the front end, so the builder canvas shows the same thing the
   visitor does — unlike `.et-l`/`.entry-content`, which are front-end only.

   Only `border-left-color` is set: the width, style and 20px padding stay
   Divi's, so this cannot drift if the quote treatment changes.

   All six blockquotes on the site are testimonials on Community Impact, inside
   one Text module. A decorative 5px bar carries no text-contrast requirement. */
.et_pb_module blockquote,
.et_pb_text_inner blockquote {
    border-left-color: var(--gcid-link-color, #fa5c43);
    font-weight: bold;
    font-style: italic;
}

/* ==================================================================
   HEADER — responsive fixes
   Header row 1 is: [empty spacer] [logo] [donate]. The empty spacer
   is what keeps the logo optically centred against the window.
   ================================================================== */

/* 1. TABLET (768-980): Divi's own stylesheet hides empty columns with
      `@media (max-width:980px){ .et_pb_column.et_pb_column_empty{display:none} }`.
      That removes the spacer, the logo loses its counterweight and
      slides left. Restore it for the header only, and only while the
      three columns are still side by side. */
@media (min-width: 768px) and (max-width: 980px) {
  .et-l--header .et_pb_row .et_pb_column.et_pb_column_empty {
    display: block;
  }
}

/* 2. PHONE (<=767): columns stack, so the spacer must stay hidden and
      the logo column must actually be full width. Divi's desktop
      12_24 (50%) flex value was still winning here, which is why the
      logo sat in the left half of the screen. */
@media (max-width: 767px) {
  .et-l--header .et_pb_row > .et_pb_column:not(.et_pb_column_empty) {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  .et-l--header .et_pb_row .et_pb_column.et_pb_column_empty {
    display: none;
  }

  /* (An override that forced margin-top:0 here was removed on 2026-09-13:
        the -76px was cleared in the Builder, and the !important was then
        blocking any margin the Builder tried to set on phone.) */
}

/* 4. MENU BREAKPOINT: with 10 top-level items the nav crowds well
      before Divi's 980px switch. Move the hamburger up to 1010px. */
@media (max-width: 1010px) {
  /* !important is required: Divi's generated module CSS sets
     `.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__menu{display:flex!important}`
     for 768-980px, which otherwise wins outright. */
  .et-l--header .et_pb_menu .et_pb_menu__menu { display: none !important; }
  .et-l--header .et_pb_menu .et_mobile_nav_menu { display: flex !important; }
}

/* ==================================================================
   ORDERED LISTS — give <ol> the same hanging indent as <ul>
   ------------------------------------------------------------------
   Divi styles the two differently in its own stylesheet:
     ul -> list-style-position: outside; padding: 0 0 23px 1em;
     ol -> list-style-position: inside;  padding: 0 0 23px;
   "inside" puts the number in the text flow, so wrapped lines run back
   to the left margin instead of aligning under the first line.
   Mirroring Divi's own selector list keeps specificity identical, so
   this wins purely on load order (child stylesheet loads last).
   1.5em rather than ul's 1em leaves room for two-digit numbers.
   ================================================================== */
:root {
  /* --- brand ------------------------------------------------------
     Matches Divi > Theme Options accent_color / header_color. Keep
     these in sync if those change. --------------------------------- */
  --sehei-primary: #2b3c8d;   /* headings, subtitle, accent          */
  --sehei-cyan:    #0faeef;   /* brand cyan - large/decorative only  */
  --sehei-cyan-aa: #0b7ea9;   /* same hue at 4.6:1 for body-size text*/
  --sehei-red:     #d0342c;   /* alert / "reasons why" column        */

  /* One knob for ordered-list indent. The .sehei-list-* classes below
     just change this value; the rule underneath never needs editing. */
  --sehei-ol-indent: 1.5em;

}

#left-area ol,
.entry-content ol,
.et-l--body ol,
.et-l--footer ol,
.et-l--header ol {
  list-style-position: outside;
  padding-left: var(--sehei-ol-indent, 1.5em);
}

/* ------------------------------------------------------------------
   Indent classes for longer ordered lists.
   Add via the module's Advanced > CSS Class field. Custom properties
   inherit, so setting one on the MODULE wrapper reaches the <ol>
   inside it - you do not need to put the class on the list itself.
   ------------------------------------------------------------------
     (default)            items 1-9      1.5em
     .sehei-list-long     items 10-99    2.3em
     .sehei-list-xlong    items 100+     3.1em
     .sehei-list-flush    match the <ul> exactly (1em, single digits)
   ------------------------------------------------------------------ */
.sehei-list-long   { --sehei-ol-indent: 2.3em; }
.sehei-list-xlong  { --sehei-ol-indent: 3.1em; }
.sehei-list-flush  { --sehei-ol-indent: 1em; }

/* Roman / lettered markers run wider than digits at the same count. */
.sehei-list-roman  { --sehei-ol-indent: 2.8em; }
.sehei-list-roman  > ol,
.sehei-list-roman ol { list-style-type: lower-roman; }

/* Nested lists shouldn't double-indent off the page. */
#left-area ol ol, .entry-content ol ol, .et-l--body ol ol,
#left-area ol ul, .entry-content ol ul, .et-l--body ol ul {
  padding-bottom: 0;
}

/* ==================================================================
   HEADINGS + PAGE SUBTITLE  (global)
   ------------------------------------------------------------------
   Divi ships two overlapping heading-padding rules:
       h1,h2,h3,h4,h5,h6 { padding-bottom: 10px; }
       h1,h2             { padding: 15px 0; }   <- shorthand, sets TOP too
   Zeroing only padding-bottom leaves the 15px top in place, which is
   the usual reason a heading still won't sit tight to what follows.
   Control vertical rhythm with margin instead, so it collapses
   predictably between siblings.

   Specificity note: Divi's rules are element-only (0,0,1). Prefixing
   with .et-l / .entry-content gives (0,1,1), which wins without
   !important and still loses to anything you set per-module in the
   Builder - so per-page overrides keep working.
   ================================================================== */
.et-l h1, .et-l h2, .et-l h3, .et-l h4, .et-l h5, .et-l h6,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
  padding-top: 0;
  padding-bottom: 0;
}

/* Page subtitle - the line that sits directly under an h1 and
   describes it. Deliberately NOT a heading: it would otherwise add a
   meaningless entry to the document outline. See the heading spec. */
.et-l p.page-subtitle,
.entry-content p.page-subtitle {
  font-size: 30px;
  line-height: 1.22;
  font-weight: 400;
  margin: 2px 0 30px;
  color: var(--sehei-subtitle, var(--sehei-primary));
  text-wrap: balance;
}

/* The h1 + subtitle behave as one unit, so the h1 gives up its
   bottom margin when a subtitle follows it. */
.et-l h1 + p.page-subtitle,
.entry-content h1 + p.page-subtitle {
  margin-top: 0;
}

@media (max-width: 767px) {
  .et-l p.page-subtitle,
  .entry-content p.page-subtitle { font-size: 22px; margin-bottom: 20px; }
}

/* ==================================================================
   IN-CONTENT LINKS
   ------------------------------------------------------------------
   link_color is #2b3c8d (the brand accent). Against white that is
   9.84:1 - excellent. But links sit inside #2b2b2b body text, and
   #2b3c8d vs #2b2b2b is only 1.44:1, well under the 3:1 WCAG asks
   for when colour is the ONLY thing distinguishing a link.
   An underline is a non-colour cue, which satisfies WCAG 1.4.1 and
   lets the brand colour stay.

   Scoped to --body and .entry-content on purpose: header nav, the
   DONATE block and footer links read as interactive from their
   position, and underlining them would just add noise.
   ================================================================== */
.et-l--body p a:not(.et_pb_button):not(.et_pb_more_button),
.et-l--body li a:not(.et_pb_button),
.entry-content p a:not(.et_pb_button):not(.et_pb_more_button),
.entry-content li a:not(.et_pb_button) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);

}

/* Full-strength underline on hover/focus so the target is unambiguous. */
.et-l--body p a:not(.et_pb_button):hover,
.et-l--body li a:not(.et_pb_button):hover,
.entry-content p a:not(.et_pb_button):hover,
.entry-content li a:not(.et_pb_button):hover,
.et-l--body p a:focus-visible,
.entry-content p a:focus-visible {
  text-decoration-color: currentColor;
}

/* Keyboard users get a visible focus ring, not just an underline shift. */
.et-l--body a:focus-visible,
.entry-content a:focus-visible {
  outline: 2px solid var(--sehei-primary, #2b3c8d);
  outline-offset: 2px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .et-l--body p a, .entry-content p a { transition: none; }
}

/* ==================================================================
   HEADING RHYTHM
   ------------------------------------------------------------------
   MARGIN, not padding, and the reason is collapsing:
     margin-bottom:.55em on an h2 followed by a paragraph whose
     margin-top is 1em collapses to the LARGER of the two, so the gap
     stays 1em no matter what follows. With padding the two ADD, and
     the gap changes depending on the next element - which is exactly
     why Divi's own `h1,h2{padding:15px 0}` was so hard to tame.
   Padding also sits INSIDE the box: any background, border or hover
   state on a heading would bleed through it. Margin keeps the gap
   outside the element.

   Values are in em so each level's spacing tracks its own size - a
   40px h1 earns more air than a 16px h6 without a second rule.
   More space ABOVE than below, so a heading binds to the content it
   introduces rather than floating between blocks.
   ================================================================== */
.et-l--body :is(h1,h2,h3,h4,h5,h6),
.entry-content :is(h1,h2,h3,h4,h5,h6),
.et_pb_text_inner :is(h1,h2,h3,h4,h5,h6) {
  margin-top: 1.3em;
  margin-bottom: 0.55em;
}

/* An h2 keeps normal space below it. (A blanket `h2{margin-bottom:0}`
   was tried and reverted: it made the tight heading/description pair
   inside the program list work, but flattened every OTHER h2 against
   its paragraph. The tight pairing is specific to list items, so it is
   scoped there instead - see below.) */
.et-l--body h2,
.entry-content h2,
.et_pb_text_inner h2 { margin-bottom: 0.5em; }

/* Inside a list item, a heading sits tight to its description - that
   is the PDF's treatment for the numbered programs. */
.et-l--body li > :is(h1,h2,h3,h4,h5,h6),
.entry-content li > :is(h1,h2,h3,h4,h5,h6),
.et_pb_text_inner li > :is(h1,h2,h3,h4,h5,h6) { margin-bottom: 0; }

/* A heading opening its module shouldn't push it down. */
.et_pb_text_inner > :is(h1,h2,h3,h4,h5,h6):first-child,
.et_pb_text_inner > *:first-child > :is(h1,h2,h3,h4,h5,h6):first-child {
  margin-top: 0;
}

/* The h1 + subtitle pair stays tight - the SUBTITLE owns the gap below
   the pair, so the h1 gives up its bottom margin when one follows.
   Zeroing only the subtitle's margin-top is not enough: adjacent
   margins collapse to the LARGER value, so the h1's 0.55em would
   still win and push the two apart. */
.et-l--body h1:has(+ p.page-subtitle),
.entry-content h1:has(+ p.page-subtitle) { margin-bottom: 0; }

.et-l--body h1 + p.page-subtitle,
.entry-content h1 + p.page-subtitle { margin-top: 0; }


/* ==================================================================
   PROGRAM LIST  (.sehei-program-list on the module's CSS Class field)
   ------------------------------------------------------------------
   An ordered list whose items each open with a heading - the two
   certificate programs on the Education page. The marker is sized and
   coloured to match the h2 so "1." reads as part of the heading, the
   way it does in the PDF, instead of as small body-sized text.
   ================================================================== */
/* Self-targeting: any ordered list whose items open with a heading
   gets the heading-weight marker. No CSS Class needed on the module -
   the markup itself is the signal, so this cannot be forgotten. The
   .sehei-program-list class still works as an explicit opt-in. */
.et-l--body ol:has(> li > :is(h1,h2,h3,h4,h5,h6)),
.entry-content ol:has(> li > :is(h1,h2,h3,h4,h5,h6)),
.et_pb_text_inner ol:has(> li > :is(h1,h2,h3,h4,h5,h6)),
.sehei-program-list ol {
  --sehei-ol-indent: 2.2em;   /* room for a 30px marker */
  list-style-position: outside;
}

.et-l--body ol:has(> li > :is(h1,h2,h3,h4,h5,h6)) > li::marker,
.entry-content ol:has(> li > :is(h1,h2,h3,h4,h5,h6)) > li::marker,
.et_pb_text_inner ol:has(> li > :is(h1,h2,h3,h4,h5,h6)) > li::marker,
.sehei-program-list ol > li::marker {
  font-size: 30px;
  font-weight: 700;
  color: var(--sehei-primary);
}

/* (The "heading opens a list item" rule moved out of this class - see
   LIST ITEMS THAT OPEN WITH A HEADING below. It is correct for any
   such list, not just this one.) */

@media (max-width: 767px) {
  .et-l--body ol:has(> li > :is(h1,h2,h3,h4,h5,h6)),
  .entry-content ol:has(> li > :is(h1,h2,h3,h4,h5,h6)),
  .sehei-program-list ol { --sehei-ol-indent: 1.6em; }

  .et-l--body ol:has(> li > :is(h1,h2,h3,h4,h5,h6)) > li::marker,
  .entry-content ol:has(> li > :is(h1,h2,h3,h4,h5,h6)) > li::marker,
  .sehei-program-list ol > li::marker { font-size: 22px; }
}


/* ==================================================================
   LIST ITEMS THAT OPEN WITH A HEADING
   ------------------------------------------------------------------
   A heading carries margin-top:1.3em from the global rhythm. Inside a
   list item that pushes the heading off its own marker and opens a
   large gap above the item - 39px on the Education page.

   Two rules replace it: the heading gives up its top margin, and the
   SPACING BETWEEN ITEMS becomes the single knob. :has() scopes this to
   lists whose items actually contain headings, so ordinary bullet
   lists keep their normal tighter rhythm.
   ================================================================== */
.et-l--body li > :is(h1,h2,h3,h4,h5,h6):first-child,
.entry-content li > :is(h1,h2,h3,h4,h5,h6):first-child,
.et_pb_text_inner li > :is(h1,h2,h3,h4,h5,h6):first-child {
  margin-top: 0;
}

.et-l--body li:has(> :is(h1,h2,h3,h4,h5,h6)) + li,
.entry-content li:has(> :is(h1,h2,h3,h4,h5,h6)) + li,
.et_pb_text_inner li:has(> :is(h1,h2,h3,h4,h5,h6)) + li {
  margin-top: 1em;   /* was 39px of heading margin; now one knob */
}


/* (A --sehei-page-top rule lived here and was removed on 2026-09-14.
    It set padding-top on each page's first section, but computed to
    (0,4,0) - which BEAT Divi's own (0,2,0) per-section rule instead of
    deferring to it. Result: the Builder showed the real Builder value
    while the front end showed the override, and the two disagreed.
    Space below the header belongs in the Builder, per page:
    Section > Design > Spacing > Padding top.) */

/* ==================================================================
   SIDE GUTTERS ON TABLET / PHONE
   ------------------------------------------------------------------
   Divi sizes every row with `width: var(--content-width)`, which is
   80% by default - so 10% of the viewport is dead margin on each side.
   At 484px that is ~48px a side, which is a lot of a small screen.
   Overriding the variable is cleaner than fighting row widths, because
   every row picks it up automatically and per-row Builder overrides
   still win.
   ================================================================== */
@media (max-width: 980px) {
  :root { --content-width: 90%; }   /* ~5% a side */
}
@media (max-width: 767px) {
  :root { --content-width: 92%; }   /* ~4% a side */
}

/* ==================================================================
   GALLERY — remove Divi's built-in slide-in
   ------------------------------------------------------------------
   Divi generates, inline and with no module setting to disable it:
     .et_pb_gallery_grid .et_pb_gallery_item {
       opacity:1; animation: 1s cubic-bezier(.77,0,.175,1) fadeLeft; }
   so every grid item slides in from the left on load. Turning off the
   module's own Animation option does nothing - that option controls a
   separate layer.

   Divi's rule is (0,2,0) and is printed inline in <head>, which may
   come AFTER this stylesheet - so match at (0,3,0) to win on
   specificity rather than relying on source order.
   ================================================================== */
.et_pb_gallery.et_pb_gallery_grid .et_pb_gallery_item,
.et_pb_gallery.et_pb_gallery_grid .et_pb_grid_item {
  animation: none !important;
  opacity: 1;
}


/* ==================================================================
   VIDEO CAPTIONS ON PHONES
   ------------------------------------------------------------------
   Each video on Media is followed by its own caption Text module.
   Divi gives every module the same bottom margin:

     @media (max-width: 980px) { .et_pb_column .et_pb_module {
       margin-bottom: 30px; } }

   so the caption sits 30px below its own video but only ~45px above
   the NEXT video. At phone width those two gaps are close enough that
   the caption reads as floating between the two videos instead of
   belonging to the one above it. Tightening the first gap restores the
   grouping; the untouched 30px below the caption still separates it
   from the next video.

   Only the video-then-text pair is matched, so a video followed by
   anything else keeps Divi's spacing.

   SPECIFICITY: Divi's rule is (0,2,0) and is printed inline in <head>,
   which may come after this stylesheet - so this deliberately matches
   its shape and adds the :has() qualifier to reach (0,3,0), the same
   approach the gallery override below uses. A per-module bottom margin
   set in the Builder computes to (0,2,0) and will NOT beat this; set
   that spacing here rather than per module.
   ================================================================== */
@media (max-width: 767px) {
  .et_pb_column .et_pb_video:has(+ .et_pb_text) { margin-bottom: 8px; }
}


/* ==================================================================
   CAPTIONS  —  .sehei-caption
   ------------------------------------------------------------------
   Apply to the Text module that captions the image or video directly
   above it:

     Module > Advanced > CSS ID & Classes > CSS Class > sehei-caption

   Without it a caption inherits body copy (18px, #2b2b2b) and Divi's
   uniform 30px module gap, so it reads as a paragraph that happens to
   follow a picture rather than as a caption of it.

   Three things make it read as a caption:
     1. it sits close to what it describes (8px, not 30px)
     2. it is smaller and quieter than body copy
   (1) tightens the PRECEDING module, whatever it is - image, video,
   anything - so the pair groups visually. Divi's rule is
   `.et_pb_column .et_pb_module` at (0,2,0), printed inline in <head>
   and therefore possibly after this stylesheet, so this matches its
   shape and adds :has() to reach (0,3,0). Same approach as the
   gallery override and the video-caption rule above - and this is the
   general form of that rule: add the class to the Media page captions
   and the video-specific rule becomes redundant. Both set 8px, so
   they do not conflict in the meantime.

   NOT handled here: space BELOW the caption. The Divi 5 module preset
   `.preset--module--divi-text--default` sets BOTH margin-bottom and
   padding-bottom to 0 with !important on every Text module site-wide,
   at all three breakpoints. Nothing short of another !important beats
   it, and that is an explicit global decision that belongs in the
   Builder, not something a caption class should quietly override. So
   a caption currently sits flush against whatever follows it - on
   Mission, the next row's heading. Fix that in the text module preset
   or in row spacing.

   Colour #5f5f5f is ~6:1 on white: quieter than body #2b2b2b, still
   comfortably AA at this size.

   Scoped to module classes so the Builder canvas matches the front end.
   ================================================================== */
.et_pb_column .et_pb_module:has(+ .sehei-caption) { margin-bottom: 8px; }

/* MATCHES THE CLASS IN EITHER PLACE. The block above documents putting
   `sehei-caption` on the MODULE, but on Mission it was authored on the
   <p> instead — `<p class="sehei-caption">` — and every selector here
   required `.et_pb_text.sehei-caption`, so NOTHING matched. That caption
   had been rendering as plain body copy (18px, #2b2b2b) rather than 15px
   grey. Accepting both placements fixes it without Builder work and makes
   the class impossible to apply "wrong" in future.

   `.et_pb_text_inner .sehei-caption` is (0,2,0), enough to beat the
   `.et_pb_text_inner p` rules that size body copy. Both class names exist
   in the Visual Builder as well as the front end. */
.et_pb_text.sehei-caption,
.et_pb_text.sehei-caption .et_pb_text_inner,
.et_pb_text.sehei-caption p,
.et_pb_text_inner .sehei-caption,
.sehei-caption {
  font-size: 15px;
  line-height: 1.45;
  color: #5f5f5f;
  font-style: italic;
}

/* An <em> inside an already-italic caption has nothing left to say, so it
   flips upright instead — the correct convention for nested emphasis, and
   it keeps a title or a proper name distinguishable. */
.et_pb_text.sehei-caption em,
.et_pb_text.sehei-caption i,
.et_pb_text.sehei-caption cite,
.et_pb_text_inner .sehei-caption em,
.et_pb_text_inner .sehei-caption i,
.et_pb_text_inner .sehei-caption cite { font-style: normal; }

@media (max-width: 767px) {
  .et_pb_text.sehei-caption,
  .et_pb_text.sehei-caption .et_pb_text_inner,
  .et_pb_text.sehei-caption p,
  .et_pb_text_inner .sehei-caption,
  .sehei-caption { font-size: 12px; }
}


/* ==================================================================
   STICKY HEADER — keep the logo still
   ------------------------------------------------------------------
   When the header section's Sticky Position is anything but `none`,
   Divi emits `transition-property: width; 300ms` on the header
   modules. The header then animates its width as it sticks, the logo
   visibly resizes, and the menu appears to slide with it. Setting
   sticky to `none` is what dropped that to 0ms and is why sticky was
   switched off on 2026-09-14 — this rule is what lets sticky be ON
   without the movement coming back.

   Kills the DURATION rather than the property, so anything that
   transitions colour still has a defined transition - it just happens
   instantly - instead of being left in a half-defined state.

   Deliberately NOT applied to `.et_pb_menu` links, so menu hover
   transitions survive. Only the boxes that actually resize are
   targeted: section, row, column and the logo image.

   Scoping to `.et-l--header` is front-end only, which is normally the
   wrong instinct on this project (see the selector gotcha in
   CLAUDE.md). It is correct HERE because sticky is a front-end
   scroll behaviour - the builder canvas never sticks, so there is
   nothing to suppress there.
   ================================================================== */
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_image,
.et-l--header .et_pb_image .et_pb_image_wrap,
.et-l--header .et_pb_image img {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}


/* ==================================================================
   TEXT BEFORE IMAGE ON PHONES  —  .sehei-text-first
   ------------------------------------------------------------------
   Apply to a COLUMN:
     Column > Advanced > CSS ID & Classes > CSS Class > sehei-text-first

   A column laid out as image-then-text reads fine on desktop, where
   the image sits beside its neighbour, but on a phone the visitor
   meets a picture with no heading to frame it and has to scroll past
   it to find out what it is. This promotes the Text module above the
   image at phone width only; desktop and tablet keep the authored
   order.

   Divi 5 has NO Builder control for this: `flexDirection` appears in
   the module metadata only for `divi/layout`, never for `divi/column`
   (and one entry is `'render' => false`). Reordering the modules in
   the Builder instead would change desktop too, which is not wanted.

   `order: -1` on the text rather than `column-reverse` on the column,
   because column-reverse flips EVERY child - correct only while the
   column holds exactly two modules, and silently wrong the moment a
   third is added. This promotes the text and leaves everything else
   in its authored order.

   ACCESSIBILITY: `order` moves the box, not the DOM. A screen reader
   and the tab sequence still meet the image before the heading. That
   is an acceptable mismatch for a decorative image, but do not use
   this class where the order carries meaning.
   ================================================================== */
@media (max-width: 767px) {
  .et_pb_column.sehei-text-first { display: flex; flex-direction: column; }
  .et_pb_column.sehei-text-first > .et_pb_text { order: -1; }
}


/* ==================================================================
   STICKY HEADER — REMOVED 2026-09-14
   ------------------------------------------------------------------
   `position:sticky` on `.et-l--header` was added earlier today and then
   removed at the client's request while investigating the header logo
   vanishing on hover. Sticky promotes the header to its own compositing
   layer, which is a plausible cause of that repaint artifact.

   The previous version of this file in `_backups/` has the full block if
   it needs to come back. If it does, promote the layer explicitly
   (`will-change: transform`) rather than relying on the browser, and
   re-test the logo hover before calling it done.

   Divi's own Sticky Position is still "Do Not Stick" on the header
   section, so the header is currently NOT sticky by any mechanism.
   ================================================================== */


/* ==================================================================
   MENU LINKS — don't animate the font swap
   ------------------------------------------------------------------
   Divi ships:

     .et-menu a, .et-menu a:hover { transition: 0.4s ease-in-out; }

   The shorthand names no property, so it resolves to `all`. Every
   property change on a menu link then animates over 0.4s — including
   the WIDTH change when Barlow finishes loading and replaces the
   fallback face. The menu visibly slides and settles on load: the
   "menu animating in".

   The font swap itself is now fast (Google Fonts CSS ~105ms, font file
   ~89ms, both before first paint, with preconnects and only five
   weights requested). It is `transition: all` that turns an otherwise
   imperceptible reflow into a 0.4s animation.

   So keep the hover fade, drop everything else: colour and opacity
   still transition, geometry is instant. Layout changes should never
   animate on load.

   (0,2,1) to beat Divi's (0,1,1). Applies to the footer menu too,
   which has the same rule and the same problem.
   ================================================================== */
.et_pb_menu .et-menu a,
.et_pb_menu .et-menu a:hover {
  transition-property: color, background-color, border-color, opacity;
}


/* ==================================================================
   GALLERY HOVER — zoom only, no overlay, no lightbox
   ------------------------------------------------------------------
   Divi's Gallery wraps every thumbnail in a link to the FULL-SIZE file
   and lays a `.et_overlay` over it: `rgba(255,255,255,.9)` plus a "+"
   icon, faded in on hover. That is the white wash with the plus sign.

   Wanted instead: a slight zoom of the image inside its box, nothing
   else. There is one gallery on the site (Home), but this is written
   for `.et_pb_gallery` generally so a second one behaves the same.

   The overlay colour and icon ARE editable in the Builder
   (Design > Overlay), but there is no setting to remove the overlay
   outright, and none at all for the lightbox link — Divi 5's gallery
   metadata has `overlayIcon`, `zoomIcon`, `hoverOverlay` and
   `useOverlay`, but no lightbox option. Hence CSS.

   `overflow:hidden` on the image wrapper is what keeps the zoom inside
   its box; without it the scaled image spills over its neighbours.

   ACCESSIBILITY NOTE: `pointer-events:none` stops the mouse opening
   the lightbox, but the <a> is still in the DOM and still keyboard
   focusable — a keyboard user can tab to it and press Enter, which
   navigates to the raw .jpg. If that matters, the link needs removing
   server-side rather than hidden with CSS.
   ================================================================== */
.et_pb_gallery .et_overlay {
  display: none;
}

.et_pb_gallery .et_pb_gallery_image {
  overflow: hidden;
}

.et_pb_gallery .et_pb_gallery_image img {
  transition: transform 0.35s ease;
}

.et_pb_gallery .et_pb_gallery_image:hover img {
  transform: scale(1.06);
}

/* No lightbox: the thumbnail is decorative here, not a link. */
.et_pb_gallery .et_pb_gallery_image a {
  pointer-events: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .et_pb_gallery .et_pb_gallery_image img,
  .et_pb_gallery .et_pb_gallery_image:hover img {
    transition: none;
    transform: none;
  }
}


/* ==================================================================
   MAIN MENU — full-height hover blocks  (.colorblock)
   ------------------------------------------------------------------
   The `colorblock` class is on the header SECTION, not the menu
   module, so everything here is scoped under it.

   Divi's menu links are inline-ish boxes 25px tall sitting inside a
   33px flex row, so a background on the link alone would float as a
   short bar with gaps above and below. Two things make it a true
   block: the <li> stretches to the row height, and the <a> becomes a
   flex box filling that height with its label vertically centred.

   Hover colour is the global Link colour (`--gcid-link-color`), so it
   follows the palette rather than hard-coding a hex. Fallback is the
   current value in case the variable is ever renamed.

   Only `.et-menu` is targeted — that is the DESKTOP menu, hidden
   below 981px — so the mobile dropdown (`.et_mobile_menu`) keeps its
   own behaviour and is not affected.

   CONTRAST: white on #fa5c43 is 3.15:1. These links are 18px/700,
   just under the 18.66px that WCAG counts as "large", so this is
   short of AA (4.5:1) on the strict reading. See HANDOFF.md.
   ================================================================== */
/* Divi pushes each item down with
   `.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li{margin-top:8px}`
   at (0,3,3), which left the stretched item filling only 25px of the 33px row.
   Matched at (0,4,3) to zero it; the <a> re-centres the label, so nothing
   moves visually - the block simply now reaches full height. */
.colorblock .et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li,
.colorblock .et-menu > li {
  margin-top: 0;
  margin-bottom: 0;
  align-self: stretch;
  display: flex;
}

/* The menu module carries `padding-bottom:5px` from a Builder setting
   (`.et_pb_menu_0_tb_header.et_pb_menu`, (0,2,0)). Left alone it leaves a 5px
   strip of bar showing under every hover block. Neutralised at (0,3,0), scoped
   to .colorblock so no other menu is affected. If that 5px is ever wanted back,
   change it in the Builder and delete this rule rather than having both fight. */
.colorblock .et_pb_menu.et_pb_module {
  padding-bottom: 0;
}

.colorblock .et-menu > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  transition-property: background-color, color;
  transition-duration: 140ms;
  transition-timing-function: ease-in-out;
}

/* Vertical padding on the link, not the bar: it gives the block its height AND
   returns the bar to roughly the 38px it was before the item margin was zeroed.
   Divi sets `padding: 0 clamp(...)` on `.et_pb_menu_0_tb_header.et_pb_menu
   .et-menu-nav li a` at (0,3,2), so this has to match at (0,4,2) - and it uses
   LONGHANDS so Divi's responsive horizontal clamp survives untouched. */
.colorblock .et_pb_menu.et_pb_module .et-menu-nav li a {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Hover, keyboard focus, and the current page all share one look.
   Scoped to `.menu-item-object-page` on purpose: the DONATE item is a custom
   link that carries `current-menu-item` on EVERY page, so keying off that class
   alone would leave it permanently highlighted. */
.colorblock .et-menu > li > a:hover,
.colorblock .et-menu > li > a:focus-visible,
.colorblock .et-menu > li.menu-item-object-page.current-menu-item > a,
.colorblock .et-menu > li.menu-item-object-page.current_page_item > a {
  background-color: var(--gcid-link-color, #fa5c43);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .colorblock .et-menu > li > a { transition-duration: 0s; }
}


/* ==================================================================
   KEY DATES  —  .keyDates   (About Us timeline)
   ------------------------------------------------------------------
   The four year markers above the Key Dates columns: 2005 / 2015 /
   2018 / 2024-2025. Applied to the <p> itself, not the module.

   Marked up as <h3> (2026-09-15) so the timeline joins the document
   outline, sized to match h2 (30px desktop / 24px phone) rather than
   h3's own 26px, and coloured with the SECONDARY global so the years
   sit a step below the primary-teal headings.

   They straddle a horizontal rule pulled up behind them, so each one
   carries a white ground. `width:fit-content` + `margin-inline:auto`
   shrink-wraps that ground to the text, which is what lets the rule
   run continuously between the dates instead of being blanked across
   each whole column.

   SPECIFICITY: the group preset styles h3 at
   `.preset--…--default .et_pb_text_inner h3` (0,2,1), which outranked
   the earlier (0,2,0) selector and reset the size to 26px. The real
   ancestor chain `.et_pb_text .et_pb_text_inner` reaches (0,3,0).

   Colour comes from `var(--gcid-secondary-color)`, so it follows the
   palette rather than freezing a hex the way the older `--sehei-*`
   tokens did.

   Two selectors: the bare class for anywhere, and the (0,2,0) form so
   it still wins inside a Divi Text module, where `.et_pb_text_inner p`
   rules would otherwise set the size and colour.
   ================================================================== */
.keyDates,
.et_pb_text .et_pb_text_inner .keyDates {
  /* shrink-wrap to the text and centre it, so the white ground masks only the
     year rather than blanking the rule across the whole column */
  width: fit-content;
  margin-inline: auto;
  padding-inline: 0.45em;
  background: #fff;              /* matches .et_pb_section_1, the white section */

  text-align: center;
  font-weight: 700;
  font-size: 30px;               /* same as h2 */
  line-height: 1.1;
  color: var(--gcid-secondary-color, #02798d);
}

/* ------------------------------------------------------------------
   STACKED BREAKPOINTS — every year needs its OWN rule
   ------------------------------------------------------------------
   The horizontal rule is a single Divider module (the only one on the
   site) sitting as the last module of the row ABOVE the timeline. It
   carries a negative bottom margin (-36px desktop / -34px phone) so the
   next row rides up over it and the years, each masked with a white
   ground, knock a gap in it. One continuous line, four years on top.

   That only works while the four columns are side by side. Below 980px
   the row wraps — 2x2 at tablet, 1x4 at phone — and the single divider
   can only ever reach the columns on the FIRST wrapped line. Tablet
   showed the rule on 2005 and 2015 but not 2018 or 2024-2025; phone
   showed it on 2005 alone.

   So below 980px the technique is inverted: silence the shared divider
   and draw the rule per year instead, as two flex fillers either side
   of the text. Self-sizing, so it needs no knowledge of column width,
   and it survives any future column count.
   ------------------------------------------------------------------ */
@media (max-width: 980px) {

  /* Silence the shared divider, but keep its BOX — the 23px height and
     the negative bottom margin still position the row below exactly
     where it was, so nothing shifts. Only the coral border goes.

     Scoped with :has() to the section that actually holds the timeline
     rather than to `.et_pb_divider_0`: that index class is assigned per
     page and would silently move if a divider were added earlier on
     About Us. Specificity (0,4,1) clears Divi's own (0,1,1) whether its
     inline <head> CSS comes before or after this stylesheet. */
  .et_pb_section:has(.keyDates) .et_pb_module.et_pb_divider::before {
    border-top-width: 0;
  }

  /* Rebuild the rule per year. `width:auto` undoes the desktop
     shrink-wrap and `background:none` drops the white ground, both of
     which exist only to mask a line passing behind. */
  .keyDates,
  .et_pb_text .et_pb_text_inner .keyDates {
    --kd-rule: 12px;             /* the divider's own width at tablet */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45em;                 /* replaces the padding-inline gap */
    width: auto;
    padding-inline: 0;
    background: none;
  }

  .keyDates::before,
  .keyDates::after {
    content: "";
    flex: 1 1 0;                 /* equal fillers, so the year stays centred */
    height: var(--kd-rule);
    background: var(--gcid-link-color, #fa5c43);

    /* Centre the rule on the FIRST LINE BOX, not on the element: the
       preset adds 30px of padding-bottom, so align-items:center would
       drop the rule well below the numerals. Half of line-height 1.1
       (0.55em) minus half the rule lands it on the text's centre line,
       matching where the divider sits at desktop. */
    margin-top: calc(0.55em - (var(--kd-rule) / 2));
  }
}

@media (max-width: 767px) {
  .keyDates,
  .et_pb_text .et_pb_text_inner .keyDates {
    font-size: 24px;             /* same as h2 at phone */
    --kd-rule: 8px;              /* the divider's own width at phone */
  }
}


/* ==================================================================
   STICKY FOOTER — short pages
   ------------------------------------------------------------------
   On a tall window, a short page (Contact is the worst — 978px of
   content) left the footer floating mid-screen with a band of cream
   body background beneath it: 272px of it at 1400x1250.

   Divi's structure is

     #page-container > #et-boc > header.et-l--header
                              > #et-main-area > …content…
                                              > footer.et-l--footer

   so the footer is NOT a sibling of the header — it sits one level
   deeper, inside #et-main-area. That is why the usual
   "body { display:flex }" recipe does nothing here.

   Two links in the chain, then `margin-top:auto` on the footer itself,
   which soaks up the leftover space without needing to know which
   wrapper holds the content.

   `min-height` (not `height`) so long pages are untouched. `100dvh`
   follows `100vh` for mobile browsers whose toolbars change the
   viewport; browsers that do not know `dvh` ignore that line.

   The WP admin bar is fixed and 32px tall (46px under 782px), so a
   flat 100vh would overflow by exactly that much and add a scrollbar
   on every short page while logged in. Visitors never see either rule.
   ================================================================== */
#et-boc {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#et-main-area {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

#et-main-area > .et-l--footer {
  margin-top: auto;
}

body.admin-bar #et-boc {
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar #et-boc {
    min-height: calc(100vh - 46px);
    min-height: calc(100dvh - 46px);
  }
}


/* ==================================================================
   ROLE TITLES  —  .sehei-role
   ------------------------------------------------------------------
   The position lines on About Us: "President", "Treasurer",
   "Executive Director," and so on — the label above each person's
   name, currently <strong> run-ins inside a <br>-separated paragraph.

     <strong class="sehei-role">President</strong><br>
     Aaron P. Sheklin, Esq.<br>
     <em>Co-Founder</em>

   Teal to match the h2s above them, but held at BODY size so they
   read as labels within a block rather than competing with the real
   section headings. Colour and size both come from globals, so they
   follow the palette and the body scale rather than freezing values.

   Now applied to <h3> (2026-09-15), so each person is a real entry in
   the document outline: Board Members > President > Treasurer > …
   The (0,3,0) selector beats the group preset's h3 rule at (0,2,1),
   which would otherwise force them to 26px.
   ================================================================== */
.sehei-role,
.et_pb_text .et_pb_text_inner .sehei-role {
  color: var(--gcid-primary-color, #044f63);
  font-size: var(--et_global_body_font_size, 18px);
  font-weight: 700;
  line-height: 1.3;

  /* The name belongs to the role directly above it, so no gap between
     them — as an <h3> it was picking up the child theme's heading
     rhythm (margin-bottom ~9.9px) and floating free of its own person.
     margin-TOP is deliberately left alone: that is what separates one
     board member from the next. */
  margin-bottom: 0;
}


/* ==================================================================
   FORM SUBMIT BUTTON  —  .blue-button   (WPForms, Contact page)
   ------------------------------------------------------------------
   ALSO THE DIVI CONTACT FORM SUBMIT (Donate page, added 2026-09-24).
   Same look, same rules - the Divi selector is listed alongside the
   WPForms one so the two buttons cannot drift. Divi's contact-form
   button is an .et_pb_button but is NOT a divi/button module, so it
   never gets the "Button Preset 1" class either; out of the box it
   rendered as Divi's bare outline button (teal text, 2px border, 3px
   radius, 20px/500). Its own quirks are handled in the block below.
   Makes the WPForms SEND button match the Divi buttons on Media.
   Add the class in WPForms > Settings > General > Submit Button CSS
   Class; the markup is

     <button type="submit" class="wpforms-submit blue-button">SEND</button>

   WHY THIS NEEDS CSS AT ALL. Those Divi buttons get their look from
   the group preset "Button Preset 1" (ar65qy2qey, the default for
   divi/button), which Divi emits as a .preset--module--divi-button
   class. A WPForms <button> is not a Divi module, never receives that
   class, and so falls through to WPForms' own grey default — #eee on a
   1px #ddd border, square, 18px/400. The class alone did nothing
   because nothing defined it.

   VALUES ARE COPIED FROM THE PRESET, not invented:

     background   var(--gcid-link-color)      hover var(--gcid-primary-color)
     font         900 / 25px / #fff / 1em line-height
     border       0, radius 2em
     padding      Divi's button default, .3em 1em
     icon         off (Divi hides ::before/::after)

   NO BOX-SHADOW. The preset carries a 6px 6px 18px shadow in its attrs,
   but Divi does not emit it — the real buttons on Media compute
   box-shadow:none on both the <a> and its wrapper. Matching the render,
   not the stored attr.

   SPECIFICITY: WPForms styles the button at
   `div.wpforms-container-full .wpforms-form button[type="submit"]`,
   which is (0,3,2). The selector below is (0,4,2), so it wins without
   !important. Divi's own preset uses !important only for the hover
   padding, which is not reproduced here — see the hover note.

   CONTRAST: #fff on --gcid-link-color #fa5c43 is 3.15:1, which fails AA
   for normal text but PASSES for large text (3:1) — and 25px/900 is
   large by WCAG's definition. It is only safe because it is this big.
   If the size is ever reduced below 18.66px bold, the background has to
   darken too. Hover is #044f63 at 9.12:1.
   ================================================================== */
div.wpforms-container-full .wpforms-form button.wpforms-submit.blue-button,
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button {
  background-color: var(--gcid-link-color, #fa5c43);
  color: #fff;
  font-family: inherit;
  font-size: 25px;
  font-weight: 900;
  line-height: 1em;
  border: 0;
  border-radius: 2em;
  padding: .3em 1em;
  cursor: pointer;

  /* Divi animates its buttons over .3s. Named properties rather than the
     `all` shorthand, for the reason documented on the menu links above:
     `all` also animates geometry, so a font swap or a reflow turns into
     a visible slide. */
  transition: background-color .3s ease, color .3s ease;
}

/* Divi's preset swaps the background to the primary teal on hover. Its
   own rule also re-states padding at 1em !important, which is what the
   base padding already computes to at 25px — so it moves nothing and is
   deliberately not copied. */
div.wpforms-container-full .wpforms-form button.wpforms-submit.blue-button:hover,
div.wpforms-container-full .wpforms-form button.wpforms-submit.blue-button:focus,
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button:hover,
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button:focus {
  background-color: var(--gcid-primary-color, #044f63);
  color: #fff;
}

/* Keyboard focus has to stay visible once the hover colour is the only
   other signal. */
div.wpforms-container-full .wpforms-form button.wpforms-submit.blue-button:focus-visible,
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button:focus-visible {
  outline: 3px solid var(--gcid-primary-color, #044f63);
  outline-offset: 3px;
}

/* Divi contact-form submit only: Divi's generic .et_pb_button rules add
   a 2px border, the arrow icon on hover (::after, content "5") and grow
   the right padding to make room for it. The preset turns the icon
   off, so do the same, and pin the padding on hover so it does not
   jump. Divi also forces `.et_pb_button{line-height:1.7em!important}`,
   which made it 17px taller than the Contact button; only !important
   can answer that. */
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button {
  line-height: 1em !important;
  align-self: center; /* its wrapper is flex and stretched it to the captcha's 49px */
}
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button::after,
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button::before {
  display: none;
}
.et_pb_contact_form_container .et_contact_bottom_container button.et_pb_contact_submit.et_pb_button:hover {
  padding: .3em 1em;
  border: 0;
}

/* WPForms swaps the label to data-alt-text ("Sending...") mid-submit and
   disables the button; keep it from reading as broken. */
div.wpforms-container-full .wpforms-form button.wpforms-submit.blue-button[disabled] {
  opacity: .65;
  cursor: default;
}


/* ==================================================================
   EVERY.ORG — thank-you block inside /donate/ content (?sehei_thanks=1)
   ================================================================== */
.et-l--body .sehei-donate-thanks-section {
  padding-top: 0;
  padding-bottom: 1rem;
  background-color: transparent;
}
.et-l--body .sehei-donate-thanks-section .et_pb_row {
  max-width: var(--content-width, 1080px);
}
.sehei-donate-thanks-section .sehei-donate-thanks {
  margin-bottom: 0;
  padding: 1.25rem 1.5rem;
  background: var(--gcid-qh34ptxfmv, #ade2e3);
  border-left: 4px solid var(--gcid-primary-color, #044f63);
  color: var(--gcid-body-color, #2b2b2b);
}
.sehei-donate-thanks-section .et_pb_text_inner p {
  margin: 0 0 0.75rem;
}
.sehei-donate-thanks-section .et_pb_text_inner p:last-child {
  margin-bottom: 0;
}
.sehei-donate-thanks-section .sehei-donate-thanks__lead {
  font-size: 1.15em;
  color: var(--gcid-primary-color, #044f63);
}
.sehei-donate-thanks-section .sehei-donate-thanks__lead strong {
  font-weight: 700;
}

/* ==================================================================
   ZEFFY DONATION EMBED  —  /donate/
   ------------------------------------------------------------------
   READ THIS BEFORE TRYING TO STYLE THE FORM.

   The donation form is a CROSS-ORIGIN IFRAME served from
   https://www.zeffy.com. Nothing inside it can be styled, scripted or
   read from this site — not with CSS, not with JS, not with any Divi
   setting. `iframe.contentDocument` is null and touching it throws.
   That is the browser's same-origin policy, not a Zeffy or Divi
   limitation, and there is no workaround from our side.

   The embed script (embed/v2/zeffy-embed.js) accepts only
   `data-form-url` and `data-min-height`. It has no colour, theme, font
   or brand parameter. The amounts, the Continue button, the mint green
   and the typography inside the frame are all changed in ZEFFY'S OWN
   form editor, in their dashboard — nowhere else.

   WHAT IS OURS: the script renders its loading skeleton into OUR
   document before the iframe paints, so those elements DO take our CSS.
   That is what this block brands. It is the first thing a donor sees.

   SPECIFICITY: Zeffy injects #zeffy-embed-styles into <head> at runtime,
   i.e. AFTER this stylesheet. Its rules are single classes (0,1,0), so
   matching that would lose on source order. Everything below is scoped
   to .et_pb_code to reach (0,2,0) and win regardless of order.

   DO NOT set height on [data-zeffy-embed]. The script owns it — it
   animates the container as the form resizes itself via postMessage.
   Overriding it breaks the auto-resize and the form gets clipped.
   ================================================================== */

/* The shimmer, in palette instead of Zeffy's #ececec/#f5f5f5 greys.
   Built from the light-cyan global over white, so it follows the brand
   rather than freezing a tint. The rgba line is the fallback for
   anything without color-mix(). */
.et_pb_code .zeffy-embed-skeleton-block {
  background-image: linear-gradient(90deg,
    rgba(173, 226, 227, .55) 0%,
    rgba(173, 226, 227, .20) 45%,
    rgba(173, 226, 227, .55) 90%);
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--gcid-qh34ptxfmv, #ade2e3) 55%, #fff) 0%,
    color-mix(in srgb, var(--gcid-qh34ptxfmv, #ade2e3) 20%, #fff) 45%,
    color-mix(in srgb, var(--gcid-qh34ptxfmv, #ade2e3) 55%, #fff) 90%);
  background-size: 200% 100%;
}

/* The CTA block stands in for the Continue button, so it previews the
   accent rather than reading as one more grey bar. */
.et_pb_code .zeffy-embed-skeleton-block--cta {
  background-image: linear-gradient(90deg,
    rgba(250, 92, 67, .38) 0%,
    rgba(250, 92, 67, .16) 45%,
    rgba(250, 92, 67, .38) 90%);
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--gcid-link-color, #fa5c43) 38%, #fff) 0%,
    color-mix(in srgb, var(--gcid-link-color, #fa5c43) 16%, #fff) 45%,
    color-mix(in srgb, var(--gcid-link-color, #fa5c43) 38%, #fff) 90%);
  background-size: 200% 100%;
}

/* The loader sits on the container's own white ground; tint it to the
   cream the rest of the page uses so the load does not flash white. */
.et_pb_code .zeffy-embed-loader {
  background: var(--gcid-82ssp6xt0f, #fef9e6);
}

/* A donor who has asked for less motion should not get a shimmer. */
@media (prefers-reduced-motion: reduce) {
  .et_pb_code .zeffy-embed-skeleton-block { animation: none; }
}


/* ==================================================================
   HAMBURGER — icon only, top right, animating to an X
   ------------------------------------------------------------------
   Replaces Divi's full-width teal menu bar with a bare icon in the
   header's top-right corner. Below 1010px, matching the menu
   breakpoint set further up this file.

   NO MARKUP CHANGE. Divi gives us exactly one element —
   `<span class="mobile_menu_bar">` inside `.mobile_nav`, which Divi's
   own JS toggles between `.closed` and `.opened`. Three bars are built
   from that one span:

     middle  the span's own background (a linear-gradient bar)
     top     ::before
     bottom  ::after

   Divi draws its hamburger as the glyph `content:"\61"` in its
   ETmodules icon font; that is blanked here so the bars are all that
   is left. Opening collapses the middle bar to zero width and rotates
   the other two onto the centre line, +/-45deg, giving the X.

   POSITIONING — why the extra `position: static` rules.
   The span is moved with `position:absolute`, so it resolves against
   its nearest positioned ancestor. Divi makes BOTH the row and the
   column `position:relative`, so by default the icon lands at the top
   of the (now collapsed) menu row, i.e. BELOW the header. Making that
   one row and its column static lets the span resolve against the
   header SECTION instead, which is where the top-right corner is.

   Only the span is moved. `.mobile_nav` and `.et_mobile_nav_menu` are
   deliberately left static: the dropdown `.et_mobile_menu` is itself
   absolutely positioned, and positioning either wrapper would make it
   the dropdown's containing block — the menu would then be 44px wide
   instead of full width. The row is selected with `:has(.et_pb_menu)`
   rather than `.et_pb_row_2_tb_header` so it survives a row reorder.

   The collapsed row is what shortens the header from 167px to 136px.
   ================================================================== */
@media (max-width: 1010px) {

  /* Let the span reach the section, and collapse the empty menu row. */
  .et-l--header .et_pb_row:has(.et_pb_menu),
  .et-l--header .et_pb_row:has(.et_pb_menu) > .et_pb_column { position: static; }
  .et-l--header .et_pb_row:has(.et_pb_menu) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Drop the bar itself. The module's teal ground IS the bar; the
     dropdown's own colour is a separate setting and is untouched. */
  .et_pb_menu_0_tb_header.et_pb_menu {
    position: static;
    background-color: transparent !important;
  }
  .et_pb_menu_0_tb_header .et_pb_menu_inner_container {
    position: static;
    min-height: 0;
  }

  /* The icon. 44x44 is the WCAG 2.5.8 target size — the bars are 28px,
     the rest is invisible tap area. */
  .et_pb_menu_0_tb_header .mobile_menu_bar {
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 100;
    width: 44px;
    height: 44px;
    /* NOT currentColor. Divi emits
         `.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar::before{color:#fff}`
       from the header layout's Hamburger Menu Icon colour, at (0,3,1) — it
       hits ::before ONLY. Bars painted with currentColor therefore came out
       one white (top) and two teal, which is exactly how it looked. Painting
       each bar with the variable directly makes that colour rule irrelevant. */
    --ham-bar: var(--gcid-primary-color, #044f63);
    background-image: linear-gradient(var(--ham-bar), var(--ham-bar));
    background-size: 28px 3px;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size .2s ease;
  }

  /* Blank Divi's icon-font glyph and reuse both pseudo-elements as bars.
     font-size:0 stops the inherited 32px icon metrics affecting layout. */
  .et_pb_menu_0_tb_header .mobile_menu_bar::before,
  .et_pb_menu_0_tb_header .mobile_menu_bar::after {
    content: "";
    position: absolute;
    left: 8px;
    width: 28px;
    height: 3px;
    background: var(--ham-bar);
    border-radius: 2px;
    font-size: 0;
    line-height: 0;
    transition: transform .3s ease, top .3s ease;
  }
  .et_pb_menu_0_tb_header .mobile_menu_bar::before { top: 13px; }
  .et_pb_menu_0_tb_header .mobile_menu_bar::after  { top: 28px; }

  /* OPEN: middle bar collapses, outer two meet on the centre line. */
  .et_pb_menu_0_tb_header .mobile_nav.opened .mobile_menu_bar { background-size: 0 3px; }
  .et_pb_menu_0_tb_header .mobile_nav.opened .mobile_menu_bar::before {
    top: 20.5px;
    transform: rotate(45deg);
  }
  .et_pb_menu_0_tb_header .mobile_nav.opened .mobile_menu_bar::after {
    top: 20.5px;
    transform: rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .et_pb_menu_0_tb_header .mobile_menu_bar,
    .et_pb_menu_0_tb_header .mobile_menu_bar::before,
    .et_pb_menu_0_tb_header .mobile_menu_bar::after { transition: none; }
  }
}


/* --- Breathing room under the Donate block in the hamburger menu.
   The block is two menu items — the pill (`menu-item-mobile-donate`) and
   its caption (`menu-item-mobile-donate-text`) — and the caption sat flush
   against the menu's bottom edge.

   `:last-child` on BOTH rather than naming the caption: whichever item
   happens to end the menu gets the space, so removing the caption later
   does not silently take the padding with it. The pair stays tight to each
   other, since they read as one control. */
.et_pb_menu_0_tb_header .et_mobile_menu .menu-item-mobile-donate:last-child,
.et_pb_menu_0_tb_header .et_mobile_menu .menu-item-mobile-donate-text:last-child {
  padding-bottom: 24px;
}


/* ==================================================================
   MOVE A BLOCK TO THE TOP OF ITS COLUMN ON PHONES  —  .sehei-mobile-first
   ------------------------------------------------------------------
   Same idea as `.sehei-text-first` further up, but general: put the
   class on ANY row or module inside a column and it jumps to the top
   of that column at <=767px, leaving desktop and tablet order alone.

     Row/Module > Advanced > CSS ID & Classes > CSS Class
       > sehei-mobile-first

   There are two of them:

     .sehei-mobile-first   jumps to the TOP of the column    (order -1)
     .sehei-mobile-last    drops to the BOTTOM of the column (order  1)

   Written for Community Impact, where the left column stacks as

     Benefits  ->  [image + text row]  ->  meeting image  ->  Impact Size

   and Impact Size was wanted above the meeting image. Note that is a job
   for `-last` ON THE IMAGE, not `-first` on the text: `-first` would send
   Impact Size past "Benefits" and the row above it as well, to the very
   top. Moving the one block that is out of place is the smaller change
   and leaves everything else in authored order.

   HOW IT WORKS. `order` only does anything if the PARENT is a flex
   container, and Divi columns are `display:block`. The `:has()` rules
   below flex the column ONLY when it actually contains a flagged
   child, so no other column on the site is touched — that is what
   makes this safe to add globally instead of per page.

   Two forms of each selector, because it is easy to put the class on
   the Text module inside an inner row rather than on the row itself.
   The second form catches that: it flags the direct child that
   CONTAINS the marked element, since only a direct child of the flex
   container can be ordered.

   Deliberately NOT keyed to `.et_pb_column_1` — column index classes
   are per page and silently shift when a column is added above. */
@media (max-width: 767px) {

  .et_pb_column:has(> .sehei-mobile-first),
  .et_pb_column:has(> * .sehei-mobile-first),
  .et_pb_column:has(> .sehei-mobile-last),
  .et_pb_column:has(> * .sehei-mobile-last) {
    display: flex;
    flex-direction: column;
  }

  /* The second selector in each pair uses a DESCENDANT `:has()`, not a
     child one: a module inside an inner row sits TWO levels down
     (row > column > module), so `> * > .sehei-…` missed it and the class
     silently did nothing when put on the module instead of the row. */
  .et_pb_column > .sehei-mobile-first,
  .et_pb_column > *:has(.sehei-mobile-first) { order: -1; }

  .et_pb_column > .sehei-mobile-last,
  .et_pb_column > *:has(.sehei-mobile-last)  { order: 1; }
}


/* --- Tighten the hamburger menu so the Donate pill and the space under it
   land above the fold instead of needing a scroll.

   The menu is 10 items: 8 nav links, the Donate pill and its 501c3 caption.
   At Divi's 10px link padding each nav row was 46px, putting the menu at
   519px tall and its bottom at 744px for a logged-out visitor. 6px brings
   the rows to 38px and the menu to 442px, ending at 667px — 77px reclaimed,
   entirely from padding. No font size changes, so the menu reads the same.

   38px rows still clear the WCAG 2.5.8 target minimum of 24px, and the
   links are full-width, so the actual tap target stays large. Do not push
   this below ~5px: at that point the rows are tighter than the text is
   tall and the list stops reading as separate items.

   The Donate pill is deliberately EXCLUDED — it keeps its own 10px so it
   still reads as a button rather than another list row, and the 24px under
   its caption (set above) is what this whole rule exists to make room for. */
@media (max-width: 1010px) {
  .et_pb_menu_0_tb_header .et_mobile_menu {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .et_pb_menu_0_tb_header .et_mobile_menu li a {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  /* Keep the pill's own padding — it is a button, not a menu row. */
  .et_pb_menu_0_tb_header .et_mobile_menu .menu-item-mobile-donate > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* ==================================================================
   .altH2  —  bold the "5 Big Roadblocks" heading
   ------------------------------------------------------------------
   Class added in the Builder (Text module > Advanced > CSS Class) so
   this heading can be targeted by NAME rather than by `.et_pb_text_1`,
   whose index shifts the moment a module is added above it.

   The module's own Design tab sets H2 to weight 400 — a light display
   weight that works at 46px on desktop but reads thin on a phone,
   where it drops to 37px and wraps to three lines under a BOLD 33px
   h1. 700 is what the design calls for.

   SPECIFICITY. Divi emits the module value as
     `.et_pb_text_1 .et_pb_text_inner h2{font-weight:400;font-size:46px}`
   at (0,2,1), inside `#et-critical-inline-css` — which is printed into
   <head> AFTER this stylesheet. So `.altH2 .et_pb_text_inner h2` would
   tie at (0,2,1) and LOSE on source order. Adding `.et_pb_text` takes
   it to (0,3,1), which wins outright without !important.

   SIZE IS DELIBERATELY UNTOUCHED — 46px desktop / 37px phone already
   give the two-line wrap in the reference. Only the weight was wrong.
   ================================================================== */
.et_pb_text.altH2 .et_pb_text_inner h2 {
  font-weight: 700;
}
.altH2 .red {color:var(--gcid-link-color, #fa5c43)!important;}

/* Phone: drop to the site's own h2 phone size. The module override was
   37px, which at 700 weight and 345px of content ran to three heavy lines
   and out-shouted the 33px h1 above it. 24px is the value the
   "Heading Text 1" group preset already uses for every other h2 on the
   site at this breakpoint, so the page stops being a special case.
   (0,3,1) beats Divi's `.et_pb_text_1 .et_pb_text_inner h2` at (0,2,1),
   which is printed after this stylesheet. */
@media (max-width: 767px) {
  .et_pb_text.altH2 .et_pb_text_inner h2 {
    font-size: 24px;
  }
}

/* Space above the heading, replacing the -34px pull-up.

   The module carries `margin-top:-34px` from the Builder, which Divi emits
   as `.et_pb_text_1{margin-top:-34px!important}`. That is what made the
   heading's box overlap "Historical Perspective" by 4px. Zeroing it lets
   the subtitle's own 30px bottom margin do the separating.

   This reverses the earlier "the overlap is intentional" note — the
   reference screenshot shows the pair clearly separated. Needs BOTH the
   extra class (0,2,0 vs Divi's 0,1,0) and !important, because Divi's own
   rule carries !important. */
.et_pb_text.altH2 {
  margin-top: 0 !important;
}


/* ==================================================================
   DONATE PAGE  —  contact blurbs + click-to-reveal forms   (2026-09-24)
   ------------------------------------------------------------------
   Each of the two columns is: Text (the prompt) > Blurb (portrait +
   title) > Divi Contact Form. Scoped with `:has(~ form)` / the form
   container itself rather than .et_pb_blurb_0 etc., so it survives
   modules being added or reordered, and so it reaches the Visual
   Builder too (module classes exist there; .et-l--post does not).
   Nothing else on the site uses a Blurb or a Divi Contact Form.
   ================================================================== */

/* --- Blurb: portrait on the left at half size, text floats to its
   right at EVERY width. Divi stacks it (flex column, 30px gap). --- */
.et_pb_column .et_pb_blurb:has(~ .et_pb_contact_form_container) .et_pb_blurb_content {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  max-width: none;
  text-align: start;
}
.et_pb_column .et_pb_blurb:has(~ .et_pb_contact_form_container) .et_pb_main_blurb_image {
  flex: 0 0 120px;      /* 50% of the 240x300 image */
  width: 120px;
  margin: 0;
}
.et_pb_column .et_pb_blurb:has(~ .et_pb_contact_form_container) .et_pb_main_blurb_image img {
  width: 100%;
  height: auto;
}
.et_pb_column .et_pb_blurb:has(~ .et_pb_contact_form_container) .et_pb_blurb_container {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* --- Reveal. The prompt text above each form toggles it.
   functions.php adds `sehei-form-toggles` to <html> from <head> on the
   Donate page only, so forms are hidden before first paint (no flash)
   and are simply visible if JS never runs. The footer script marks each
   trigger and adds `sehei-form-open` to open a form - and opens any form
   it cannot pair with a trigger, so none can be stranded hidden. --- */
html.sehei-form-toggles .et_pb_contact_form_container:not(.sehei-form-open) {
  display: none !important;
}

.sehei-form-trigger {
  cursor: pointer;
  position: relative;
  padding-right: 1.6em;
  border-radius: 4px;
}
.sehei-form-trigger:hover,
.sehei-form-trigger:focus-visible {
  color: var(--gcid-link-color, #fa5c43);
}
.sehei-form-trigger:focus-visible {
  outline: 3px solid var(--gcid-primary-color, #044f63);
  outline-offset: 4px;
}
/* Chevron: points down when closed, flips when open. */
.sehei-form-trigger::after {
  content: "";
  position: absolute;
  right: .35em;
  top: .35em;
  width: .5em;
  height: .5em;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.sehei-form-trigger[aria-expanded="true"]::after {
  transform: translateY(.25em) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .sehei-form-trigger::after { transition: none; }
}


/* ==================================================================
   FOOTER MENU ON PHONES — two lines instead of three   (2026-09-25)
   ------------------------------------------------------------------
   7 items (Home/Mission ... Contact) wrapped 3+2+2 at 375px: 18px
   links, 11px padding each side of the white dividers, in a footer
   row pinned to 88% width by the footer layout (499). Tested live
   across widths; the smallest change that gives 4+3 is:

     row      88% -> 94%       (more of the screen; content is centred)
     links    18px -> 15px
     padding  11px -> 6px each side of the divider

   Two lines verified at 360, 375 and 414px. Below ~350px (iPhone SE
   1st gen, 320px) it falls back to three lines, which is harmless.
   Desktop and tablet are untouched.

   Specificity: the 88% is emitted with !important at (0,1,0), so the
   width override needs !important at (0,2,0). Font-size is (0,3,2) in
   the layout's CSS, beaten here at (0,4,2); padding (0,2,1) at (0,3,1).
   Module classes only, so the Theme Builder canvas matches.
   ================================================================== */
@media (max-width: 767px) {
  .et_pb_row_0_tb_footer.et_pb_row {
    width: 94% !important;
  }
  .et_pb_menu_0_tb_footer.et_pb_menu .et-menu > li {
    padding-left: 6px;
    padding-right: 6px;
  }
  .et_pb_menu_0_tb_footer.et_pb_menu ul.et-menu li a {
    font-size: 15px;
  }
}


/* ==================================================================
   ONE-PAGE PRINT  —  body.sehei-print-onepage   (2026-09-25)
   ------------------------------------------------------------------
   The Executive Summary prints as a single US Letter page, laid out
   like the PDF handout: SEHEI logo on top, title, the Florida Bar
   statistic, then the two content columns SIDE BY SIDE (on screen
   they stack at phone width; on paper they never should).

   The body class is added by functions.php on the executive-summary
   slug. Screen rendering is untouched - everything is inside
   @media print.

   What is dropped on paper: the header menu, tagline strip and
   background art, the DONATE buttons, the footer, the admin bar and
   scroll-to-top. Only the header's logo image is kept.

   !important is used freely here and ONLY here: Divi's presets and
   generated per-module CSS carry their own !important, and a print
   stylesheet has to win against all of it. Selectors are structural
   (".et_pb_text:has(h1) + .et_pb_text", "row with two columns"), not
   module indexes, so adding a module in the Builder does not silently
   break them.

   If content grows and it spills to a second page, shrink --pr-body
   first (every size below is derived from it), then --pr-gap.
   ================================================================== */
@page sehei-onepage {
  size: letter;
  margin: 0.45in 0.5in;
}

@media print {
  html:has(body.sehei-print-onepage),
  body.sehei-print-onepage {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.sehei-print-onepage {
    page: sehei-onepage;
    --pr-body: 9.75pt;  /* 10pt fits in Chrome with ~0.25in spare; 9.75 leaves room for Safari/Firefox metrics */
    --pr-gap: 0.07in;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Page chrome ---------------------------------------------------- */
  body.sehei-print-onepage #wpadminbar,
  body.sehei-print-onepage .et-l--footer,
  body.sehei-print-onepage .et_pb_scroll_top,
  body.sehei-print-onepage .et_pb_button_module_wrapper,
  body.sehei-print-onepage .et-l--header .et_pb_row:not(:first-child),
  body.sehei-print-onepage .et-l--header .et_pb_text,
  body.sehei-print-onepage .et-l--header .mobile_nav,
  body.sehei-print-onepage .et-l--header .et_pb_menu {
    display: none !important;
  }

  body.sehei-print-onepage #page-container,
  body.sehei-print-onepage #et-boc,
  body.sehei-print-onepage #et-main-area,
  body.sehei-print-onepage #main-content,
  body.sehei-print-onepage .et-l,
  body.sehei-print-onepage .et_builder_inner_content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Header: logo only, centred, no art, not sticky. */
  body.sehei-print-onepage .et-l--header .et_pb_section,
  body.sehei-print-onepage .et-l--header .et_pb_row,
  body.sehei-print-onepage .et-l--header .et_pb_column {
    position: static !important;
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
  }
  body.sehei-print-onepage .et-l--header .et_pb_column:not(:has(.et_pb_image)) {
    display: none !important;
  }
  body.sehei-print-onepage .et-l--header .et_pb_image {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 0.12in !important;
  }
  body.sehei-print-onepage .et-l--header .et_pb_image img {
    width: 3.4in !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Content grid ---------------------------------------------------- */
  body.sehei-print-onepage .et-l--post .et_pb_section,
  body.sehei-print-onepage .et-l--post .et_pb_row,
  body.sehei-print-onepage .et-l--post .et_pb_column {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    background: none !important;
  }
  /* Divi 5 spaces modules with a flex `gap` (30px), not margins - it
     has to be zeroed separately or every column keeps 30px holes. */
  body.sehei-print-onepage .et-l--post .et_pb_section,
  body.sehei-print-onepage .et-l--post .et_pb_row,
  body.sehei-print-onepage .et-l--post .et_pb_column,
  body.sehei-print-onepage .et-l--header .et_pb_row,
  body.sehei-print-onepage .et-l--header .et_pb_column {
    row-gap: 0 !important;
  }
  body.sehei-print-onepage .et-l--post .et_pb_module {
    margin: 0 0 var(--pr-gap) !important;
    padding: 0 !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* Any row holding two columns prints them side by side. */
  body.sehei-print-onepage .et-l--post .et_pb_row:has(> .et_pb_column + .et_pb_column) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.3in !important;
    margin-top: 0.06in !important;
  }
  body.sehei-print-onepage .et-l--post .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Type ------------------------------------------------------------- */
  body.sehei-print-onepage .et-l--post p,
  body.sehei-print-onepage .et-l--post li {
    font-size: var(--pr-body) !important;
    line-height: 1.3 !important;
    margin: 0 0 0.04in !important;
    padding: 0 !important;
  }
  body.sehei-print-onepage .et-l--post ul,
  body.sehei-print-onepage .et-l--post ol {
    margin: 0 0 0.05in !important;
    padding: 0 0 0 0.2in !important;
  }
  body.sehei-print-onepage .et-l--post li {
    margin-bottom: 0.01in !important;
  }
  body.sehei-print-onepage .et-l--post h1,
  body.sehei-print-onepage .et-l--post h2,
  body.sehei-print-onepage .et-l--post h3,
  body.sehei-print-onepage .et-l--post h4 {
    line-height: 1.15 !important;
    padding: 0 !important;
    margin: 0.08in 0 0.03in !important;
    break-after: avoid;
  }
  body.sehei-print-onepage .et-l--post h1 {
    font-size: calc(var(--pr-body) * 1.75) !important;
    margin-top: 0 !important;
    text-align: center !important;
  }
  body.sehei-print-onepage .et-l--post h2 {
    font-size: calc(var(--pr-body) * 1.2) !important;
  }
  body.sehei-print-onepage .et-l--post h3,
  body.sehei-print-onepage .et-l--post h4 {
    font-size: calc(var(--pr-body) * 1.05) !important;
  }
  /* A column's first heading needs no space above it. */
  body.sehei-print-onepage .et-l--post .et_pb_column > .et_pb_module:first-child .et_pb_text_inner > :first-child {
    margin-top: 0 !important;
  }

  /* Eyebrow: the first text on the page ("EXECUTIVE SUMMARY"). */
  body.sehei-print-onepage .et-l--post .et_pb_section:first-child .et_pb_row:first-child .et_pb_text:first-child p {
    font-size: calc(var(--pr-body) * 1.25) !important;
    text-align: center !important;
    margin: 0 0 0.03in !important;
  }
  /* The statistic under the title. */
  body.sehei-print-onepage .et-l--post .et_pb_text:has(h1) + .et_pb_text p {
    font-size: calc(var(--pr-body) * 1.12) !important;
    text-align: center !important;
    margin: 0.02in 0 0.04in !important;
  }
  /* Closing tagline: the last text module on the page. Its lead line
     is 30px from the module's own Free-Form CSS; scaled to suit paper. */
  body.sehei-print-onepage .et-l--post .et_pb_column:last-child > .et_pb_text:last-child p {
    text-align: center !important;
    margin-top: 0.1in !important;
  }
  body.sehei-print-onepage .et-l--post .et_pb_column:last-child > .et_pb_text:last-child p > strong:first-child {
    font-size: calc(var(--pr-body) * 1.7) !important;
  }

  /* Links print as text; no URL expansion. */
  body.sehei-print-onepage .et-l--post a {
    color: inherit !important;
    text-decoration: none !important;
  }
}


/* ==================================================================
   "PRINT PAGE" BUTTON  —  .sehei-print-bar   (2026-09-25)
   ------------------------------------------------------------------
   Injected by functions.php above the content on one-page-print pages
   (Executive Summary). Right-aligned to the content column.

   Teal ground, not the coral used by the big CTA buttons: white on
   coral is only 3.15:1, which needs >=18.66px bold to pass AA, and this
   is a small utility button. White on --gcid-primary-color is 9.12:1.
   ================================================================== */
/* Zero-height anchor: the button floats in the top-right of the content
   column and takes no space, so the page below does not move. */
.sehei-print-bar {
  position: relative;
  z-index: 5;
  height: 0;
  width: var(--content-width, 80%);
  max-width: var(--content-max-width, 1080px);
  margin: 0 auto;
}
.sehei-print-btn {
  position: absolute;
  top: 24px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: var(--gcid-primary-color, #044f63);
  border: 0;
  border-radius: 2em;
  padding: .6em 1.2em;
  cursor: pointer;
  transition: background-color .3s ease;
}
.sehei-print-btn:hover,
.sehei-print-btn:focus {
  background-color: var(--gcid-secondary-color, #02798d);
}
.sehei-print-btn:focus-visible {
  outline: 3px solid var(--gcid-primary-color, #044f63);
  outline-offset: 3px;
}
/* Phones: the centred "EXECUTIVE SUMMARY" eyebrow wraps to two lines
   and the full button would sit on it. Collapse to a round icon-only
   button tucked into the corner; the label stays for screen readers. */
@media (max-width: 767px) {
  .sehei-print-btn {
    top: 4px;
    padding: 11px;
    gap: 0;
  }
  .sehei-print-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media print {
  .sehei-print-bar {
    display: none !important;
  }
}

/* Thank-you: text column + sun top-right (float wrap caused orphan lines like "Education."). */
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner {
  position: relative;
  line-height: 1.45;
  --sehei-thanks-art: 300px;
  --sehei-thanks-art-gap: 1.25rem;
}
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > h1:first-child {
  margin: 0 0 0.65em !important;
}
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner p .alignright {
  float: none !important;
  position: absolute;
  top: 3.35rem;
  right: 0;
  width: var(--sehei-thanks-art);
  height: auto;
  margin: 0 !important;
}
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > p:not(:last-of-type),
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > .sehei-donation-receipt {
  max-width: calc(100% - var(--sehei-thanks-art) - var(--sehei-thanks-art-gap));
  margin: 0 0 0.65em !important;
  padding: 0 !important;
}
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > p:last-of-type {
  clear: none;
  max-width: none;
  margin: 0.65em 0 0 !important;
  padding: 0 !important;
}
body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > *:last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 767px) {
  body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner p .alignright {
    position: static;
    display: block;
    width: min(240px, 72%);
    margin: 0 auto 0.75em !important;
  }
  body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > p:not(:last-of-type),
  body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > .sehei-donation-receipt {
    max-width: none;
  }
  body.sehei-page-thank-you .et_pb_text_0 .et_pb_text_inner > p:last-of-type {
    padding-top: 0 !important;
  }
}