/* Shared chrome: hover states and responsive footer for the site header/footer.
   Class names are stable and page-independent, unlike the per-page hvN registry
   emitted by build.py. Loaded by every page. */
[data-hv="c1"]:hover,[data-hv="c1"]:focus-visible{color:#553832}
[data-hv="c2"]:hover,[data-hv="c2"]:focus-visible{background:#E6E6E6;color:#000}
[data-hv="c3"]:hover,[data-hv="c3"]:focus-visible{background:#3f2925;color:#FFFFFF}
[data-hv="c4"]:hover,[data-hv="c4"]:focus-visible{color:#FFFFFF}
[data-hv="c5"]:hover,[data-hv="c5"]:focus-visible{color:#E5A542}
@media(max-width:840px){.foot{grid-template-columns:1fr 1fr !important;gap:36px !important}}
@media(max-width:540px){.foot{grid-template-columns:1fr !important}}

/* Breathing room above the footer.
 *
 * Content sections carry `padding: 0 24px` inline, which sets padding-bottom to
 * 0 and beats an external rule - hence !important. Pages whose last section is
 * a colour band (#404040, #E6E6E6) are excluded: those are meant to run flush
 * into the footer, and padding would just make the band taller. Matching on the
 * inline style attribute keeps this to one rule instead of editing 24 templates.
 */
main > section:last-child:not([style*="background"]) {
  padding-bottom: 80px !important;
}

/* The hidden attribute vs inline display.
 *
 * `hidden` only carries display:none from the UA stylesheet, so ANY inline
 * display declaration beats it. Two elements pair the two, and the JS toggles
 * the attribute, so the attribute has to be made authoritative:
 *
 *   [data-slide]      inline display:flex - every banner slide rendered at once
 *                     and the carousel arrows/dots did nothing visible. Latent
 *                     until there was more than one event to show.
 *   [data-mobile-nav] inline display:none - so removing `hidden` never revealed
 *                     it. The mobile menu had never opened at all.
 */
[data-slide][hidden] { display: none !important; }

[data-mobile-nav][hidden] { display: none !important; }
[data-mobile-nav]:not([hidden]) { display: block !important; }

/* ---------------------------------------------------------------------------
   Rich text out of a wysiwyg field.

   A wysiwyg field emits its own block markup - <p>, and sometimes <ul> or a
   heading. Putting that inside a <p> makes nested paragraphs, which the parser
   auto-closes: the content becomes a SIBLING of the wrapper and silently loses
   the wrapper's inline styles. That is how the homepage hero lede rendered
   black on a photo on 2026-09-03 - no code changed, a content save through
   CKEditor was enough to wrap the value in <p>.

   So the container is always a div carrying .rt, and these two rules hand the
   outer spacing back to the wrapper's own inline margin, so the block occupies
   exactly the space the template asks for.

   tools/check-templates.php fails the build if a <p> wrapper comes back.
   --------------------------------------------------------------------------- */
.rt > * { margin: 0 }
.rt > * + * { margin-top: 1em }

/* Givebutter widgets build into a shadow root, so nothing in this stylesheet
   reaches inside them - colour, label and shape are set in the Givebutter
   dashboard. These wrappers carry only the spacing the surrounding layout
   needs. There is no fallback by design: an unpublished or failed campaign
   renders nothing and leaves empty space where the button would be. */
.gb-cta { display: inline-flex }