/* BrickyardCms.Web — site styles */

/* ── Anchor scroll behavior ────────────────────────────────────────────────
   Enables the single-page-site nav pattern: NavigationItem with LinkType=Anchor
   emits href="#{slug}"; ContentRenderer emits id="{slug}" on the matching module
   wrapper. The scroll-margin-top keeps the target below a sticky header — set
   --anchor-scroll-offset in a site-specific rule (or inline) when a header
   overlaps content; 0 is a no-op for non-sticky layouts. */
html {
    scroll-behavior: smooth;
}
.content-module[id] {
    scroll-margin-top: var(--anchor-scroll-offset, 0);
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── Noise Texture Overlay ─────────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.03;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: var(--z-overlay-top);
}

/* ── Typography scale defaults ────────────────────────────────────────────
   ~1.25 modular scale, mobile-first with fluid top-end. Every token is
   overridable per-site via WebsiteSettings.FontSize* — ThemeCssHelper
   emits overrides as :root vars that win over these fallbacks. Hero uses
   --font-size-display (outside the scale); module-header titles use
   --font-size-h2; card/item titles use --font-size-h3. */
:root {
    --font-size-display:    clamp(3rem, 6vw + 1rem, 5.5rem);
    --font-size-h1:         clamp(2.25rem, 3vw + 1rem, 3.5rem);
    --font-size-h2:         clamp(1.75rem, 2vw + 0.75rem, 2.5rem);
    --font-size-h3:         1.5rem;
    --font-size-h4:         1.25rem;
    --font-size-h5:         1.125rem;
    --font-size-h6:         1rem;
    --font-size-body:       1rem;
    --line-height-heading:  1.15;
    --line-height-body:     1.6;
    --font-weight-heading:  700;
    /* Shared spring easing — used across every interactive module transition.
       Override in CustomCss or a theme to swap animation personality globally. */
    --spring-ease:          cubic-bezier(0.16, 1, 0.3, 1);
    /* Text-shadow values for content rendered over background images. Shared
       between HeroModule and CarouselModule so a theme can lighten/remove them
       in one place rather than patching both modules. */
    --text-shadow-on-image:         0 1px 3px rgba(0, 0, 0, 0.5);
    --text-shadow-on-image-body:    0 1px 4px rgba(0, 0, 0, 0.6);
    --text-shadow-on-image-eyebrow: 0 1px 3px rgba(0, 0, 0, 0.55);

    /* ── Monospace stack (A5) — matches the existing inline fallback verbatim ── */
    --font-mono: ui-monospace, monospace;

    /* ── Elevation scale (A2) — each step == an existing box-shadow literal ── */
    --shadow-search-result:   0 2px 8px rgba(0, 0, 0, 0.06);   /* search-result hover */
    --shadow-card-hover:      0 8px 24px rgba(0, 0, 0, 0.15);  /* card / image hovers */
    --shadow-btn-hover:       0 8px 24px rgba(0, 0, 0, 0.25);  /* .btn-cta hover/focus */
    --shadow-toast:           0 8px 24px rgba(0, 0, 0, 0.3);   /* .bcms-toast */
    --shadow-dropdown:        0 8px 24px rgba(0, 0, 0, 0.35);  /* nav flyout / language menu */
    --shadow-blog-card-hover: 0 20px 50px rgba(0, 0, 0, 0.4);  /* blog featured/card hover */
    --shadow-featured-hover:  0 20px 40px rgba(0, 0, 0, 0.5);  /* featured-item lift */

    /* ── Z-index scale (A3) — identical numeric values, semantic names ── */
    --z-content:       1;     /* positioned content above its ::before/overlay sibling */
    --z-carousel-tag:  2;     /* carousel tag chip over caption */
    --z-strip-arrow:   3;     /* image-strip prev/next arrows */
    --z-sticky-header: 50;    /* .site-header (position: sticky) */
    --z-site-assistant: 55;   /* .site-assistant — floats over content, under the consent banner */
    --z-consent-banner: 60;   /* .consent-banner — above a bottom announcement bar, below dropdowns */
    --z-dropdown:      100;   /* nav flyout + language-switcher menu */
    --z-overlay-top:   9999;  /* noise-texture overlay + toast */

    /* ── Form select chevron — an overridable image, not a color ──────────
       A data URI cannot interpolate var() for its stroke, so the two tones
       ship as whole images and anything painting the form on a light surface
       swaps one for the other in a single declaration (see
       docs/business-rules/module-style-utilities.md). The default is the
       light-toned arrow the dark form background needs. */
    --form-select-chevron:          url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23d1c8c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    --form-select-chevron-on-light: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234a423c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}

/* ── Design token hooks ───────────────────────────────────────────────────── */
body {
    background-color: var(--color-background, #fff);
    color: var(--color-text-muted, var(--color-text, inherit));
    font-family: var(--font-body, inherit);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, var(--font-body, inherit));
    color: var(--color-text, inherit);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-heading);
    /* margin: 0 0 0.5em; */
}

h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

/* Headings that wrap an interactive trigger (WAI-ARIA accordion / disclosure
   pattern: <h3><button>…</button></h3>) should keep the heading's typography
   rather than letting the button's user-agent / framework defaults override
   font-size, font-family, weight, and line-height. The [class] attribute
   selector lifts specificity to 0,1,2 so single-class framework rules
   (e.g. Bootstrap's .accordion-button) don't win the cascade. Color is left
   alone so modules can paint state-driven hues (e.g. expanded primary). */
:is(h1, h2, h3, h4, h5, h6) > button[class] {
    font: inherit;
}

/* ── Shared CTA Button ───────────────────────────────────────────────────── */
.btn-cta {
    display: inline-block;
    padding: 0.85rem 2rem;
    font-family: var(--font-body, inherit);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
    text-decoration: none;
    background: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    border: 1px solid var(--color-primary, #E63B2E);
    border-radius: var(--border-radius, 0.25rem);
    cursor: pointer;
    transition: background 0.3s var(--spring-ease),
                border-color 0.3s var(--spring-ease),
                transform 0.3s var(--spring-ease),
                box-shadow 0.3s var(--spring-ease);
}

.btn-cta:hover,
.btn-cta:focus {
    background: var(--color-secondary, #FF5722);
    border-color: var(--color-secondary, #FF5722);
    color: var(--color-on-secondary, #fff);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.btn-cta--outline {
    background: transparent;
    color: var(--color-primary, #E63B2E);
}

.btn-cta--outline:hover,
.btn-cta--outline:focus {
    background: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
}

.btn-cta--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.085em;
}

/* ── CTA trailing arrow — opt-in via module CssClass "cta-arrows" ───────────
   Adds a trailing → after each FILLED CTA inside a module whose CssClass
   includes `cta-arrows` (emitted on the outer .content-module wrapper by
   ContentRenderer). Outline CTAs are excluded so a hero's primary button gets
   the arrow while its secondary (outline) button stays clean — the common
   "primary CTA points forward" mockup. The glyph inherits the button's text
   color (currentColor), so it stays theme-correct on every background, and
   nudges right on hover to echo the site's hover-slide-right motion.
   Importable with zero per-button data: set "cssClass":"cta-arrows" on the
   module. Decorative only — the link text already carries the meaning (same
   posture as the BlogList &rarr; precedent). To hide it from assistive tech
   on modern browsers, use `content: "\2192" / ""`. */
.cta-arrows .btn-cta:not(.btn-cta--outline)::after {
    content: "\2192";              /* → U+2192 — matches the BlogList arrow glyph */
    display: inline-block;
    margin-left: 0.5em;
    transition: transform 0.3s var(--spring-ease);
}
.cta-arrows .btn-cta:not(.btn-cta--outline):hover::after,
.cta-arrows .btn-cta:not(.btn-cta--outline):focus::after {
    transform: translateX(3px);
}

/* ── CTA as an inline text link — opt-in via module CssClass "cta-link" ───────
   Strips the filled .btn-cta chrome (background/border/padding) so the CTA
   reads as an inline text link in the theme accent color, while keeping the
   button's uppercase + letter-spacing. Pairs with `cta-arrows` for a trailing
   → (that utility targets .btn-cta:not(.btn-cta--outline), which a .cta-link
   button still is). Importable with zero per-button data — set
   "cssClass":"cta-link cta-arrows" on the module. Reusable on any module whose
   CTA uses the shared .btn-cta (CardGrid, CallToAction, Pillar, Hero…). */
.cta-link .btn-cta {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--color-accent, #F5A623);
}
.cta-link .btn-cta:hover,
.cta-link .btn-cta:focus {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--color-accent, #F5A623);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ── Skip link ────────────────────────────────────────────────────────────
   Layout chrome, not an author-attachable utility. Hidden via Bootstrap's
   .visually-hidden-focusable until keyboard focus; must layer above the
   sticky .site-header (--z-sticky-header). */
.skip-link:focus,
.skip-link:focus-within {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-dropdown);
    padding: 0.5rem 1rem;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    text-decoration: underline;
}
#main-content {
    scroll-margin-top: var(--anchor-scroll-offset, 0);
}

/* ── Site Header ──────────────────────────────────────────────────────────── */
.site-header {
    background-color: transparent;
    color: var(--color-header-text, #FFF5E6);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-header);
}

.site-header.scrolled {
    background-color: var(--color-header-bg, #0D0D0D);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Opt-in solid header: paints the themed header background from the top instead of
   the default transparent-until-scroll (hero-overlay) behavior. Add the CssClass
   "site-header--solid" to a site's header. The .scrolled blur above still applies. */
.site-header--solid {
    background-color: var(--color-header-bg, #0D0D0D);
}

/* ---------------------------------------------------------------------------
   Announcements
   Block is .site-announcement (not .site-header__announcement) — it is no
   longer a header element: bottom-positioned bars and popups render at layout
   level. The old class is kept below as a deprecated alias for one release
   because customer themes override on these names.
   Severity colors fall back through bare var() defaults rather than new theme
   token columns, so a site can retheme via CustomCss with no schema change.
   --------------------------------------------------------------------------- */
.site-announcement {
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    text-align: center;
}

.site-announcement--warning {
    background-color: var(--color-accent, #F2A900);
    color: var(--color-on-accent, #1a1a1a);
}

.site-announcement--emergency {
    background-color: var(--color-emergency, #b00020);
    color: var(--color-on-emergency, #fff);
    font-weight: 600;
}

.site-announcement--bottom {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky-header);
}

.site-announcement__viewport {
    position: relative;
}

/* Only the active slide is shown; rotation swaps the modifier class. A single
   announcement keeps --active from the server render, so the bar is correct
   with JavaScript disabled. */
.site-announcement__item {
    display: none;
}

.site-announcement__item--active {
    display: flex;
}

.site-announcement__link {
    color: inherit;
    text-decoration: underline;
}

.site-announcement__dismiss {
    flex: 0 0 auto;
    opacity: 0.75;
}

.site-announcement__dismiss:hover {
    opacity: 1;
}

.site-announcement__controls {
    padding-bottom: 0.15rem;
}

.site-announcement__nav,
.site-announcement__pause,
.site-announcement__dot {
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.6;
    line-height: 1;
    padding: 0 0.35rem;
}

.site-announcement__nav:hover,
.site-announcement__pause:hover,
.site-announcement__dot:hover {
    opacity: 1;
}

.site-announcement__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.35;
    padding: 0;
    margin: 0 0.15rem;
}

.site-announcement__dot--active {
    opacity: 1;
}

/* A bottom bar overlays the end of the page; reserve room so it can't cover
   the last line of content or the footer's final row. */
body.has-bottom-announcement .site-main {
    padding-bottom: 3.5rem;
}

/* ---------------------------------------------------------------------------
   Consent banner (issue #223)
   Ships `hidden` in output-cached HTML; consent.js reveals it per visitor.
   Fixed to the bottom edge above a bottom announcement bar and below
   dropdowns. Colours come from theme tokens so themes need no override;
   CustomCss can retarget any .consent-banner__* element.
   --------------------------------------------------------------------------- */
.consent-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-consent-banner);
    background-color: var(--color-surface, #fff);
    color: var(--color-text, #1a1a1a);
    border-top: 1px solid var(--color-border, #e5e5e5);
    box-shadow: var(--shadow-dropdown);
}

.consent-banner__message {
    font-size: 0.9375rem;
    line-height: var(--line-height-body);
}

.consent-banner__policy-link {
    color: inherit;
    text-decoration: underline;
    margin-inline-start: 0.35rem;
}

.consent-banner__accept,
.consent-banner__accept:hover,
.consent-banner__accept:focus-visible {
    background-color: var(--color-primary, #E63B2E);
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
}

.consent-banner__accept:hover,
.consent-banner__accept:focus-visible {
    filter: brightness(0.92);
}

.consent-banner__reject,
.consent-banner__reject:hover,
.consent-banner__reject:focus-visible {
    background-color: transparent;
    border-color: var(--color-border, #ccc);
    color: inherit;
}

.consent-banner__reject:hover,
.consent-banner__reject:focus-visible {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------------------------
   Site assistant (AI chat widget)
   Ships `hidden`; site-assistant.js reveals it. A launcher pinned bottom-right
   and a panel that opens above it — a bottom sheet on phones. Layered under
   the consent banner on purpose: until a visitor answers consent, the banner
   covers the launcher (same known limit as a bottom announcement bar). Colours
   come from theme tokens so themes need no override; CustomCss can retarget
   any .site-assistant__* element.
   --------------------------------------------------------------------------- */
.site-assistant {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 1.25rem;
    z-index: var(--z-site-assistant);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: var(--line-height-body);
}

.site-assistant[hidden] {
    display: none;
}

.site-assistant__launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    font-weight: 600;
    box-shadow: var(--shadow-dropdown);
    cursor: pointer;
}

.site-assistant__launcher:hover,
.site-assistant__launcher:focus-visible {
    filter: brightness(0.92);
}

.site-assistant__launcher:focus-visible,
.site-assistant__close:focus-visible,
.site-assistant__reset:focus-visible,
.site-assistant__send:focus-visible {
    outline: 3px solid var(--color-accent, #1a73e8);
    outline-offset: 2px;
}

.site-assistant--open .site-assistant__launcher-label {
    display: none;
}

.site-assistant__panel {
    display: flex;
    flex-direction: column;
    width: min(24rem, calc(100vw - 2.5rem));
    height: min(34rem, calc(100vh - 7rem));
    background-color: var(--color-surface, #fff);
    color: var(--color-text, #1a1a1a);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 1rem;
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
}

.site-assistant__panel[hidden] {
    display: none;
}

.site-assistant__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
}

.site-assistant__title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-assistant__reset,
.site-assistant__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 0.5rem;
}

.site-assistant__reset {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    text-decoration: underline;
}

.site-assistant__close {
    width: 2rem;
    height: 2rem;
}

.site-assistant__reset:hover,
.site-assistant__close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.site-assistant__log {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overscroll-behavior: contain;
}

.site-assistant__message {
    max-width: 88%;
    padding: 0.6rem 0.85rem;
    border-radius: 0.9rem;
}

.site-assistant__message--assistant {
    align-self: flex-start;
    background-color: var(--color-background, #f4f4f4);
    border: 1px solid var(--color-border, #e5e5e5);
    border-bottom-left-radius: 0.25rem;
}

.site-assistant__message--user {
    align-self: flex-end;
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    border-bottom-right-radius: 0.25rem;
}

.site-assistant__message--pending .site-assistant__text {
    color: var(--color-text-muted, #666);
    font-style: italic;
}

.site-assistant__message--error {
    border-color: var(--color-emergency, #b00020);
}

.site-assistant__text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.site-assistant__sources {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
}

.site-assistant__sources-label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #666);
}

.site-assistant__source-list {
    margin: 0;
    padding-left: 1.1rem;
}

.site-assistant__source {
    color: var(--color-primary, #E63B2E);
    text-decoration: underline;
}

.site-assistant__form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
}

.site-assistant__input {
    flex: 1;
    min-height: 2.5rem;
    max-height: 8rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 0.75rem;
    background-color: var(--color-surface, #fff);
    color: inherit;
    font: inherit;
    resize: none;
}

.site-assistant__input:focus {
    outline: 2px solid var(--color-primary, #E63B2E);
    outline-offset: 1px;
}

.site-assistant__send {
    padding: 0.55rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    font-weight: 600;
    cursor: pointer;
}

.site-assistant__send:disabled {
    opacity: 0.6;
    cursor: progress;
}

.site-assistant__disclaimer {
    margin: 0;
    padding: 0 0.75rem 0.6rem;
    font-size: 0.75rem;
    color: var(--color-text-muted, #666);
}

@media (max-width: 575.98px) {
    .site-assistant {
        inset-inline-end: 1rem;
        bottom: 1rem;
    }

    .site-assistant--open {
        inset-inline: 0;
        bottom: 0;
    }

    .site-assistant--open .site-assistant__launcher {
        display: none;
    }

    .site-assistant__panel {
        width: 100vw;
        height: min(85vh, 100dvh);
        border-radius: 1rem 1rem 0 0;
    }
}

@media print {
    .site-assistant {
        display: none !important;
    }
}

.site-announcement-modal--emergency .site-announcement-modal__header {
    background-color: var(--color-emergency, #b00020);
    color: var(--color-on-emergency, #fff);
}

@media (prefers-reduced-motion: reduce) {
    .site-announcement__item {
        transition: none !important;
    }
}

/* DEPRECATED — v1 alias, retained one release for customer theme overrides
   that target the old block name. Remove alongside the
   WebsiteHeaderLocalization.AnnouncementText column drop. */
.site-header__announcement {
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    text-align: center;
}

/* Utility bar (Stacked / Split layouts) */
.site-header__utility-bar {
    font-size: 0.8rem;
    opacity: 0.60;
}

.site-header__phone,
.site-header__social-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.site-header__phone:hover,
.site-header__social-link:hover {
    opacity: 1;
    color: inherit;
}

/* Nav strip (Centered / Stacked layouts) */
.site-header__nav-strip {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Hero Module */
.hero-module {
    position: relative;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    /* The side padding IS the hero's gutter on every viewport narrower than
       .hero-module__inner's 1200px max-width — nothing else insets the copy
       there, so it must survive intact. See the break-out note below. */
    padding: 4rem 1rem;
}

/* Full-bleed handling.
   A hero authored full width already sits in an edge-to-edge
   .content-module--full-width wrapper, and the background paint / CssClass
   backdrop live on THAT wrapper (ContentRenderer + ModuleStyleHelper), not on
   .hero-module — so a full-width hero needs no break-out at all. Only the
   not-full-width wrapper (.w-100.mx-auto.px-3) has to be cancelled, and it is
   cancelled symmetrically with margin-inline.

   This replaces a margin-left-only `calc(50% - 50vw - 1rem)` that applied to
   BOTH cases. Because the full-width wrapper has no padding for that -1rem to
   cancel, it shifted every hero a full rem past the left viewport edge (plus
   half a scrollbar, since 50vw counts scrollbar width but 50% does not) while
   the right side kept its 1rem. Left-aligned copy landed flush against — or
   clipped by — the screen edge on mobile. */
.content-module:not(.content-module--full-width) .hero-module {
    margin-inline: calc(50% - 50vw);
}

.hero-module__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}

/* Background video — a library MP4 behind the content, in both layouts. It paints the
   whole padding box beneath the overlay (source order is video → overlay → inner, and
   .hero-module__inner carries --z-content), so the gradient that keeps copy legible over
   a photo does the same over a moving frame. The section's own background image is the
   poster: it shows while the file loads, for reduced-motion / Data Saver visitors who
   never receive the file (hero-module.js), and when the MP4 fails. pointer-events: none
   keeps the CTAs clickable through it. */
.hero-module__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Belt and braces under the JS gate: if the script never runs, a reduced-motion visitor
   still sees the still image, not a looping clip. */
@media (prefers-reduced-motion: reduce) {
    .hero-module__video {
        display: none;
    }
}

.hero-module__inner {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Horizontal alignment */
.hero-module[data-alignment="center"] .hero-module__inner {
    text-align: center;
}

.hero-module[data-alignment="center"] .hero-module__cta-group {
    justify-content: center;
}

.hero-module[data-alignment="right"] .hero-module__inner {
    text-align: right;
}

.hero-module[data-alignment="right"] .hero-module__cta-group {
    justify-content: flex-end;
}

/* Vertical alignment */
.hero-module[data-vertical-alignment="top"] {
    justify-content: flex-start;
}

.hero-module[data-vertical-alignment="middle"] {
    justify-content: center;
}

.hero-module[data-vertical-alignment="bottom"] {
    justify-content: flex-end;
}

.hero-module__title {
    font-size: var(--font-size-display);
    margin-bottom: 1rem;
}

.hero-module__body {
    margin-bottom: 1.5rem;
}

.hero-module__cta {
    display: inline-block;
}

.hero-module__eyebrow {
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-accent, #F5A623);
}

.hero-module__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}


/* Page banner variant — compact title header, gradient bottom rule, no CTA */
.hero-module--page-banner {
    background-color: var(--color-background, #0D0D0D);
    min-height: 225px;
}

.hero-module.hero-module--page-banner::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #E63B2E) 0%, var(--color-accent, #F5A623) 100%);
}

.hero-module--page-banner .hero-module__title {
    /* Page banner inherits --font-size-display; let letter-spacing/line-height stay as design choices */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0;
}

.hero-module--page-banner .hero-module__eyebrow {
    letter-spacing: 0.35em;
    margin-bottom: 0.75rem;
}

/* Hero entrance animations (full hero only, not page banners) */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-module:not(.hero-module--page-banner) .hero-module__eyebrow {
    opacity: 0;
    animation: fadeUp 0.8s var(--spring-ease) 0.2s forwards;
}

.hero-module:not(.hero-module--page-banner) .hero-module__title {
    opacity: 0;
    animation: fadeUp 0.8s var(--spring-ease) 0.4s forwards;
}

.hero-module:not(.hero-module--page-banner) .hero-module__body {
    opacity: 0;
    animation: fadeUp 0.8s var(--spring-ease) 0.6s forwards;
}

.hero-module:not(.hero-module--page-banner) .hero-module__cta-group {
    opacity: 0;
    animation: fadeUp 0.8s var(--spring-ease) 0.8s forwards;
}

/* ── Hero — Split layout (HeroLayoutEnum.Split = 1) ─────────────────────────
   Two-column band: eyebrow/headline/body/CTAs left, image panel right.
   Split reuses every .hero-module__* element class from the Standard view, so
   everything above this block already applies unchanged — the display type tier
   on __title, the accent __eyebrow, the --has-background text shadows, the
   [data-alignment] / [data-vertical-alignment] rules, and the staggered fadeUp
   entrance. This block only adds the column plumbing.

   Full-bleed interaction: .hero-module keeps its 1rem side padding and (for a
   not-full-width wrapper only) its margin-inline break-out; .hero-module__inner
   keeps the 1200px max-width and centers the row inside it. Bootstrap's row
   gutters cancel against the section padding, so no extra container and no
   override of the break-out are required.

   Alignment: the ViewComponent emits data-alignment="left" for Split when
   TextAlignment is unset. On lg and up "left" needs no rule — it's the natural
   direction — and an author who explicitly picks center/right still gets the
   shared .hero-module[data-alignment=…] rules, which cascade into
   .hero-module__content and re-justify .hero-module__cta-group for free. Below
   lg the columns stack, and the mobile block at the end of this section
   recenters the default. */

.hero-module--split .hero-module__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* contain, not cover: the archetypal Split panel is a logo or product shot that
   must never be cropped. max-height keeps a tall portrait from dwarfing the copy.
   Opt into cropping per-instance with the hero-media--cover utility below. */
.hero-module__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    border-radius: var(--border-radius);
}

/* Admin-canvas only — a Split hero with no image selected yet. */
.hero-module__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 1px dashed currentColor;
    border-radius: var(--border-radius);
    opacity: 0.4;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* Entrance: the image slots into the existing eyebrow(.2s) → title(.4s) →
   body(.6s) → cta(.8s) stagger. Same :not(--page-banner) guard as those rules. */
.hero-module--split:not(.hero-module--page-banner) .hero-module__media {
    opacity: 0;
    animation: fadeUp 0.8s var(--spring-ease) 0.5s forwards;
}

/* Mobile: col-12 stacks with copy first (no order-* utilities — a hero must lead
   with its headline). The image cap shrinks so the panel doesn't push the CTAs
   below the fold, and the copy recenters over it.

   Why recenter: once stacked, the image is centered in its own full-width row
   (.hero-module__media is justify-content:center), so left-aligned copy sitting
   above a centered logo reads as a misalignment rather than a choice. Only the
   Split DEFAULT is overridden — the ViewComponent emits data-alignment="left"
   when TextAlignment is unset, so [data-alignment="left"] is the thing being
   recentered. An author who explicitly picked center or right keeps it, because
   those values never match this selector. Standard heroes are untouched: they
   have no .hero-module__content element. */
@media (max-width: 991.98px) {
    .hero-module--split .hero-module__image {
        max-height: 260px;
    }

    .hero-module--split .hero-module__media {
        margin-top: 0.5rem;
    }

    .hero-module--split[data-alignment="left"] .hero-module__content {
        text-align: center;
    }

    .hero-module--split[data-alignment="left"] .hero-module__cta-group {
        justify-content: center;
    }

    /* Authored width constraints in the body (e.g. <p style="max-width:60%">,
       a common way to keep a desktop measure readable) are block boxes:
       text-align centers their TEXT but leaves the box itself hugging the
       inline start, so the paragraph reads as off-center under a centered
       headline. Auto margins recenter the box, and are a no-op for any child
       that already fills the column. */
    .hero-module--split[data-alignment="left"] .hero-module__body > * {
        margin-inline: auto;
    }
}

/* ── Hero — Split + form layout (HeroLayoutEnum.SplitForm = 2) ──────────────
   Split's two-column band with a tenant form in the right-hand column instead
   of the image panel. Everything above still applies (the shared __* element
   rules, the --has-background shadows, alignment, the fadeUp stagger); the form
   itself is the Form module's own .form-module__* markup and styling, so this
   block only adds the column plumbing and the card treatment that lets the form
   sit on a photo or a coloured band.

   No mobile recentre, unlike Split: that rule exists because a centred image
   under left-aligned copy reads as a misalignment, and a full-width form card
   under left-aligned copy does not — left labels under centred copy would be
   the worse pairing. */

/* Form controls stay start-aligned whatever the hero's data-alignment says: the
   shared [data-alignment="center"] rule text-aligns the whole __inner, and a
   centred label column is not a form anyone expects. The success message keeps
   its own centring from .form-module__success. */
.hero-module--split-form .hero-module__form {
    text-align: start;
}

/* Card treatment. The title and the form live inside ONE .hero-module__form-card
   so they read as a single embedded panel: the card owns the surface, padding,
   radius and shadow, and the Form module's own wrapper sheds its background and
   padding inside it (it keeps both everywhere else — .form-module__form-wrapper
   paints --color-surface and 2rem of padding site-wide). Titling the wrapper
   itself is not an option: it is the Form module's partial, shared with the Form
   module and /forms/{slug}, and the success block must stay its direct child. */
.hero-module--split-form .hero-module__form-card {
    background: var(--hero-form-card-bg, var(--color-surface, #1a1a1a));
    border-radius: var(--border-radius);
    box-shadow: var(--hero-form-card-shadow, 0 1.25rem 2.5rem rgba(0, 0, 0, 0.25));
    padding: var(--hero-form-card-padding, 2rem);
}

.hero-module--split-form .hero-module__form-card .form-module__form-wrapper {
    background: none;
    padding: 0;
}

/* The form's title, inside the card above the fields. Pinned to the h3 scale
   rather than the h2 default — it labels a card beside a display-size hero
   title. Colour is --color-text, the token that pairs with --color-surface (the
   shape .form-module__copy h2 uses), NOT the inherited band colour: the card's
   background is fixed, so a module-theme--dark band would otherwise paint this
   heading dark-on-dark. 0,2,0 beats .module-theme--* :is(h1…h6) at 0,1,1. */
.hero-module--split-form .hero-module__form-title {
    font-size: var(--font-size-h3);
    color: var(--color-text, inherit);
    margin-bottom: 1.5rem;
}

/* Half-span fields (_FieldGroup.cshtml's col-md-6) stack in the side column: at
   lg the card interior is ~310px, at xl+ ~410px (.hero-module__inner caps at
   1200px), and two 150–200px inputs side by side is cramped. Below lg the form
   is full width and the authored spans apply as they do everywhere else. */
@media (min-width: 992px) {
    .hero-module--split-form .form-module__field-wrapper {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Admin-canvas only — a SplitForm hero with no usable form selected yet. Same
   shape as the Split image placeholder above. */
.hero-module__form-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 1px dashed currentColor;
    border-radius: var(--border-radius);
    opacity: 0.4;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* Entrance: the form slots into the eyebrow → title → body → cta stagger at the
   same point Split's image does. Same :not(--page-banner) guard. */
.hero-module--split-form:not(.hero-module--page-banner) .hero-module__form {
    opacity: 0;
    animation: fadeUp 0.8s var(--spring-ease) 0.5s forwards;
}

/* Stacked, the form needs a real break from the copy above it — more than the
   0.5rem Split gives its image. The image is a passive block the eye reads as
   part of the same band; a form is a second thing to do, and with the card's
   surface only a shade off the section behind it on most themes, the gap is what
   separates them. 2.5rem on top of the row's own 1.5rem g-4 gutter is ~4rem. */
@media (max-width: 991.98px) {
    .hero-module--split-form .hero-module__form {
        margin-top: 2.5rem;
    }
}

/* ── Curated cssClass override for the form card ───────────────────────────
   It lands on the outer .content-module wrapper (ContentRenderer emits
   cssClass there, not on the section), hence the descendant selectors, and it
   sits after the rules it overrides. Catalogued in
   docs/business-rules/module-style-utilities.md. Anything else needs no class:
   --hero-form-card-bg / --hero-form-card-shadow / --hero-form-card-padding are
   set in a customCss rule scoped to the module's own hook class, and zeroing
   all three is how you get "no card, fields straight on the band". There is
   deliberately no shipped class for that: .form-module__input has a
   transparent border, so with no card the fields need a fill or a border that
   the band does not also have — a judgement about one band, not a portable
   preset. The same applies to .hero-module__form-title, which is pinned to
   --color-text for the card and would want `inherit` (or the band's on-colour)
   once there is no card under it. */

/* "hero-form--swap" — swap the card and the field fills. Named for what it
   does rather than for an outcome: on a band already painted --color-surface,
   where the default card disappears into it, this separates them; on a default
   band it does the opposite, sinking the card into the band so the fields read
   as inset. Both tokens are neutrals in every theme, so the swap is portable.
   It has to move the PAIR: .form-module__input has a transparent border, so a
   card painted the fields' own colour would leave them invisible. :focus
   restates the field fill, so it is restated here too. */
.hero-form--swap .hero-module__form-card {
    --hero-form-card-bg: var(--color-background, #0d0d0d);
}

.hero-form--swap .hero-module__form-card .form-module__input,
.hero-form--swap .hero-module__form-card .form-module__textarea,
.hero-form--swap .hero-module__form-card .form-module__input:focus,
.hero-form--swap .hero-module__form-card .form-module__textarea:focus {
    background-color: var(--color-surface, #1a1a1a);
}

/* Opt-in via module CssClass "hero-media--cover" — crop the panel to a fixed 4:3
   frame instead of letterboxing it. For photographic panels; contain stays right
   for logos. The class lands on the outer .content-module wrapper (ContentRenderer),
   hence the descendant selector — same shape as .cta-arrows. Passes the CssClass
   validator's ^[A-Za-z0-9_\- ]*$ regex. */
.hero-media--cover .hero-module__image {
    aspect-ratio: 4 / 3;
    max-height: none;
    object-fit: cover;
}

/* Rich Text Module — background image + overlay (mirrors hero pattern) */
.richtext-module--has-background {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.richtext-module__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    pointer-events: none;
}

.richtext-module--has-background .richtext-module__container {
    position: relative;
    z-index: var(--z-content);
}

/* Background-image text legibility — mirrors CarouselModule shadow values.
   Applied to Hero and RichText only when a background image is present so
   un-imaged sections render with clean type. The overlay handles contrast for
   tinted bg images; the shadow handles edge legibility against busy photos. */
.hero-module--has-background .hero-module__title,
.richtext-module--has-background .richtext-module__title {
    text-shadow: var(--text-shadow-on-image);
}

.hero-module--has-background .hero-module__body,
.richtext-module--has-background .richtext-module__body {
    text-shadow: var(--text-shadow-on-image-body);
}

.hero-module--has-background .hero-module__eyebrow,
.richtext-module--has-background .richtext-module__eyebrow {
    text-shadow: var(--text-shadow-on-image-eyebrow);
}

/* Site Header — nav open state (toggled by JS) */
/* ID selector: specificity 1,0,1 — cannot be overridden from CustomCss (0,1,0).
   If override capability is ever needed, add data-nav attribute and target
   [data-nav]:not(.d-none) (specificity 0,1,1) instead. */
#site-header-nav:not(.d-none) {
    display: flex;
}

/* ── Nav link + group label (shared base) ────────────────────────────────── */
.nav-item__link,
.nav-item__group-label {
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s;
    font-family: var(--font-body, inherit);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-header-text, inherit);
    text-decoration: none;
}

.nav-item__link:hover,
.nav-item__group-label:hover {
    color: var(--color-primary, currentColor);
}

/* Group-label-specific additions */
.nav-item__group-label {
    cursor: pointer;
    user-select: none;
}

.nav-item__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary, #E63B2E);
    transition: width 0.25s var(--spring-ease);
}

.nav-item__link:hover::after {
    width: 100%;
}

.nav-item--active .nav-item__link::after {
    width: 100%;
}

/* Brand lockup: logo + stacked title/subtitle wordmark rendered by _Brand.cshtml.
   BrandTitle is the bold wordmark (header text color); BrandSubtitle is a smaller
   accent-colored line stacked beneath it (e.g. "Team 31759 · Winsted, MN"). */
.site-header__brand-text {
    line-height: 1.15;
}

.site-header__brand-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--color-header-text, inherit);
}

.site-header__brand-subtitle {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent, #F5A623);
}

/* Nav CTA button: add the item CssClass "nav-btn" to render a nav link as a solid
   accent button (e.g. a header "Donate" action). The underline animation is
   suppressed above; here we give it the button chrome. */
.nav-btn .nav-item__link::after {
    display: none;
}

.nav-btn .nav-item__link {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #fff);
    border-radius: var(--border-radius, 0.25rem);
    font-weight: 700;
}

.nav-btn .nav-item__link:hover {
    background: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #fff);
    opacity: 0.9;
}

/* Chevron indicator */
.nav-item__group-label::after {
    content: '';
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 0.4em;
    vertical-align: 0.15em;
    transition: transform 0.25s var(--spring-ease);
}

/* Children container — reset */
.nav-item__children {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* MOBILE (default): accordion-style, hidden until toggled */
.nav-item__children--depth-2 {
    display: none;
    padding-left: 1rem;
}

.nav-item--open > .nav-item__children--depth-2 {
    display: block;
}

.nav-item--open > .nav-item__group-label::after {
    transform: rotate(-135deg);
}

.nav-item__children--depth-2 .nav-item__link {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.9em;
    opacity: 0.85;
}

.nav-item__children--depth-2 .nav-item__link:hover {
    opacity: 1;
}

/* DESKTOP (md+): hover/focus flyout dropdown */
@media (min-width: 768px) {
    .nav-item--has-children {
        position: relative;
    }

    .nav-item__children--depth-2 {
        display: block;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        min-width: 10rem;
        padding: 0.5rem 0;
        background-color: var(--color-header-bg, #0D0D0D);
        border: 1px solid var(--color-border, #2A2A2A);
        border-radius: var(--border-radius, 0.25rem);
        box-shadow: var(--shadow-dropdown);
        z-index: var(--z-dropdown);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease,
                    transform 0.2s var(--spring-ease),
                    visibility 0.2s;
    }

    .nav-item--has-children:hover > .nav-item__children--depth-2,
    .nav-item--has-children:focus-within > .nav-item__children--depth-2 {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Reset mobile open chevron on desktop; hover takes over */
    .nav-item--open > .nav-item__group-label::after {
        transform: rotate(45deg);
    }

    .nav-item--has-children:hover > .nav-item__group-label::after,
    .nav-item--has-children:focus-within > .nav-item__group-label::after {
        transform: rotate(-135deg);
    }

    .nav-item__children--depth-2 .nav-item {
        padding: 0;
    }

    .nav-item__children--depth-2 .nav-item__link {
        display: block;
        padding: 0.4rem 1.25rem;
        white-space: nowrap;
        font-size: 0.85em;
        opacity: 1;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .nav-item__children--depth-2 .nav-item__link:hover {
        background-color: var(--color-surface, rgba(255,255,255,0.07));
        color: var(--color-primary, #E63B2E);
    }
}

/* ── Language Switcher ──────────────────────────────────────────────────── */
.language-switcher {
    position: relative;
}

.language-switcher__toggle {
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.language-switcher__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 10rem;
    margin-top: 4px;
    padding: 0.5rem 0;
    background-color: var(--color-header-bg, #0D0D0D);
    border: 1px solid var(--color-border, #2A2A2A);
    border-radius: var(--border-radius, 0.25rem);
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease,
                transform 0.2s var(--spring-ease),
                visibility 0.2s;
    z-index: var(--z-dropdown);
}

.language-switcher--open .language-switcher__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.language-switcher__link {
    white-space: nowrap;
    font-size: 0.9em;
    transition: background 0.15s ease, color 0.15s ease;
}

.language-switcher__link:hover {
    background-color: var(--color-surface, rgba(255,255,255,0.07));
    color: var(--color-primary, #E63B2E);
}

.language-switcher__item--active .language-switcher__link {
    color: var(--color-primary, #E63B2E);
    font-weight: 600;
}

/* ── Module Header (shared) ─────────────────────────────────────────────── */
.module-header__eyebrow {
    font-family: var(--font-body, inherit);
    letter-spacing: 0.5em;
    color: var(--color-accent, #F5A623);
}
.module-header__title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h2);
    color: var(--color-text, var(--color-heading, inherit));
}
/* Body copy under a module title. Must track the theme's body token, not a
   hardcoded 1rem — a site that raises WebsiteSettings.FontSizeBody (emitted as
   :root --font-size-body by ThemeCssHelper) otherwise renders this smaller than
   the item copy inside the same module (e.g. .card-grid-module__content, which
   inherits from body). Same reasoning for line-height. */
.module-header__content {
    color: var(--color-text-muted, var(--color-text, inherit));
    font-size: var(--font-size-body, 1rem);
    line-height: var(--line-height-body, 1.6);
}
/* Authored inline images (the admin editor's image node). `height: auto` is
   load-bearing, not cosmetic: the editor persists width/height attributes, so
   a `w-50` image would otherwise keep its pixel height and squash. `.prose img`
   already covers the blog body. */
.module-header__content img,
.event-detail-module__description img {
    max-width: 100%;
    height: auto;
}
/* Contain a floated authored image so a short body cannot spill it into the
   next module. A descendant selector, not a child one: the editor's column
   picker and hand-authored wrappers put the image inside a <div>. :has()
   keeps this zero-impact on every page without a floated image. */
.module-header__content:has(img.float-start, img.float-end),
.blog-detail-module__body:has(img.float-start, img.float-end),
.event-detail-module__description:has(img.float-start, img.float-end) {
    display: flow-root;
}
/* Rich-text sinks that were converted from <p> to <div> wrappers (a nested <p>
   would be hoisted out by the parser). The editor emits <p>-wrapped blocks, so
   zero the trailing paragraph margin to keep the pre-conversion layout for the
   common single-paragraph case. Same idea as .quote-module__body p:last-child. */
.card-grid-module__content > p:last-child,
.pillar-module__content > p:last-child,
.testimonials-module__content > p:last-child,
.hours-module__footnote > p:last-child,
.product-list-module__item-description > p:last-child,
.product-list-module__grid-card-desc > p:last-child {
    margin-bottom: 0;
}
/* Alignment modifiers — settings-first hook (ContentModule.TextAlignment → _ModuleHeader).
   No !important, so a theme's later-loading CustomCss overrides at equal specificity. */
.module-header--left   { text-align: left; }
.module-header--center { text-align: center; }
.module-header--right  { text-align: right; }

/* ── Module Back-link (shared) ───────────────────────────────────────────── */
.module-back-link {
    font-family: var(--font-heading, inherit);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-text-muted, #6c757d);
    transition: color 0.3s;
}
.module-back-link:hover {
    color: var(--color-primary, #E63B2E);
}

/* Image Module — header above the image+content layout */
.image-module__header {
    text-align: left;
}
.image-module__title {
    color: var(--color-primary, inherit);
}

/* Featured Module */
.featured-module__eyebrow { /* theme override hook */ }
.featured-module__title   { /* theme override hook */ }

/* Featured Item — default colors (override per theme) */
/* Span-based accent bar: positioned absolutely so it can extend into container padding.
   Use .border-left-accent on new modules instead. */
.featured-item__accent {
    background-color: var(--color-accent, #F5A623);
    width: .25rem;
}

.featured-item__tag {
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    font-size: 0.75rem;
}

.featured-item__title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
}

.featured-item__content {
    /* color set by customer theme */
}

.featured-item {
    border-radius: var(--border-radius, 0);
    background-color: var(--color-surface, rgba(255, 255, 255, 0.07));
    padding: 2rem 1.5rem 2rem 2rem;
}

/* ── Featured item hover lift ─────────────────────────────────────────────── */
.featured-item {
    transition: transform 0.3s var(--spring-ease),
        box-shadow 0.3s var(--spring-ease);
}

.featured-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-featured-hover);
}

/* Content module borders — opt-in via modifier classes */
.content-module {
    position: relative;
}

.content-module--border-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 2px;
    background: var(--content-module-border-color, var(--color-primary, #E63B2E));
}

.content-module--border-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 2px;
    background: var(--content-module-border-color, var(--color-primary, #E63B2E));
}

/* Override border to accent/gold colour */
.content-module--accent-border {
    --content-module-border-color: var(--color-accent, #F5A623);
}

.content-module--item-title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
    color: var(--color-text, #FFF5E6);
    margin-bottom: 0.75rem;
}

/* Layout */
.site-main {
    min-height: 70vh;
    overflow-x: hidden;
}

.site-footer {
    color: var(--color-footer-text, #666);
    background-color: var(--color-footer-bg, #0D0D0D);
}

.site-footer__brand {
    font-family: var(--font-heading, inherit);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.75rem;
    color: var(--color-footer-text, inherit);
}

.site-footer__brand-accent {
    color: var(--color-primary, currentColor);
}

.site-footer__logo {
    display: block;
    height: 5rem;
    width: auto;
    max-width: 100%;
    margin-bottom: 0.75rem;
}

.site-footer__tagline {
    line-height: 1.6;
    color: var(--color-footer-text, inherit);
    margin-bottom: 0;
}

.site-footer__description {
    line-height: 1.6;
    color: var(--color-footer-text, inherit);
    opacity: 0.8;
}

/* Social icons in the footer brand column. Circular affordance keeps them
   distinguishable from the plain text links in the nav columns. */
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--color-footer-text, inherit);
    background-color: rgba(255, 255, 255, 0.08);
    opacity: 0.85;
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s, background-color 0.2s;
}

.site-footer__social-link:hover {
    opacity: 1;
    color: var(--color-primary, currentColor);
    background-color: rgba(255, 255, 255, 0.16);
}

.site-footer__heading {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: var(--color-footer-text, inherit);
}

.site-footer__links {
    margin: 0;
    padding: 0;
}

.site-footer__links li {
    margin-bottom: 0.5rem;
}

.site-footer__link {
    color: var(--color-footer-text, inherit);
    opacity: 0.85;
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}

.site-footer__link:hover {
    opacity: 1;
    color: var(--color-primary, currentColor);
}

/* Separator above the copyright bar. Deliberately not the `.border-theme`
   utility: that is `--color-border`, a value tuned for cards and inputs sitting
   on the page background, and against the darker footer ground it reads as a
   bright rule rather than a divider. A low-alpha tint of the inherited footer
   text colour mutes it without adding a second token, and stays visible on a
   light footer where a hard-coded white alpha would disappear. */
.site-footer__bottom {
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.site-footer__copyright {
    color: var(--color-footer-text, inherit);
    opacity: 0.7;
}

.site-footer__powered-by {
    color: var(--color-footer-text, inherit);
    opacity: 0.55;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* ── Rich-text / prose typography ────────────────────────────────────────── */
.prose {
    max-width: 65ch;
    line-height: 1.75;
    color: var(--color-text-muted, var(--color-text, inherit));
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
    font-family: var(--font-heading, inherit);
}

.prose p {
    margin-bottom: 1.25em;
}

.prose ul,
.prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

.prose a {
    color: var(--color-primary, #E63B2E);
    text-decoration: underline;
}

.prose img {
    max-width: 100%;
    height: auto;
}

.prose blockquote {
    border-left: 4px solid var(--color-border, #dee2e6);
    padding-left: 1em;
    font-style: italic;
    margin: 1.25em 0;
}

.prose--full {
    max-width: none;
}

/* ── Quill rich-text classes ─────────────────────────────────────────────── */
/* The admin's RichTextEditor (Quill 2) emits alignment as classes like
   <p class="ql-align-center">. Quill's own stylesheet scopes these under
   .ql-editor, which only exists inside the admin. The public site needs the
   same rules unscoped so module Content rendered via @Html.Raw picks them up. */
.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

/* ── Container widths ────────────────────────────────────────────────────── */
.container-max-7xl {
    max-width: 1280px;
}

.container-max-6xl {
    max-width: 1152px;
}

/* ── Spacing beyond Bootstrap's 0-5 scale ────────────────────────────────── */
.py-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.py-section-sm {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-section-lg {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.mb-section {
    margin-bottom: 2rem;
}

.gap-lg {
    gap: 2rem;
}

.border-left-accent {
    border-left: 4px solid var(--color-accent, #F5A623);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.hover-slide-right {
    transition: transform 0.3s var(--spring-ease), box-shadow 0.3s;
}
.hover-slide-right:hover {
    transform: translateX(8px);
    box-shadow: -8px 0 30px rgba(var(--bs-primary-rgb, 230, 59, 46), 0.15);
}

/* ── Module tag / badge (shared typography) ──────────────────────────────── */
/* Use on any small uppercase label. Override font-size / letter-spacing / colors per module. */
.module-tag {
    display: inline-block;
    font-family: var(--font-heading, inherit);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ── Star rating (shared) ────────────────────────────────────────────────── */
/* Isolated to TestimonialsModule today; extract here so product reviews can reuse. */
.star-rating__filled {
    color: var(--color-accent, #F5A623);
}
.star-rating__empty {
    color: var(--color-border, #d1d5db);
}

/* ── Section background palette ──────────────────────────────────────────── */
.section-bg-default {
    background-color: var(--color-background);
}

.section-bg-surface {
    background-color: var(--color-surface);
}

/* Colored section backgrounds auto-pair with .module-theme--light (see
   ModuleStyleHelper.GetTextThemeClass), which paints text via --color-on-dark.
   Each colored section locally overrides that var with the matching
   text-on-brand-color token so a theme controls the on-fill text in one place.
   Unset tokens fall back to #ffffff — the same white the light theme produced
   before these tokens existed (zero visual regression). */
.section-bg-primary {
    background-color: var(--color-primary);
    --color-on-dark: var(--color-on-primary, #ffffff);
}

.section-bg-secondary {
    background-color: var(--color-secondary);
    --color-on-dark: var(--color-on-secondary, #ffffff);
}

.section-bg-accent {
    background-color: var(--color-accent);
    --color-on-dark: var(--color-on-accent, #ffffff);
}

/* ── Decorative section backdrop: gradient depth + subtle grid ─────────────
   Layers a depth gradient (top-right glow + bottom shade) and a faint square
   grid over whatever section-background fill is present. Opt-in via a module
   CssClass ("section-backdrop--grid") — composes with .section-bg-primary /
   -secondary / -accent, which supply the underlying --color-* fill. Uses only
   white/black alpha, so it recolors per theme automatically: the glow reads as
   a lighter patch of the section's own color, with no hardcoded hue. This is
   the importable expression of a "gradient + grid" hero mockup — a raster
   BackgroundMediaId is the only other background knob and can't reproduce a
   live, themeable gradient. Grid cell size is tunable via --backdrop-grid-size. */
.section-backdrop--grid {
    --backdrop-grid-size: 42px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(60% 80% at 85% 8%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 38%, rgba(0, 0, 0, 0.38) 100%);
    background-size:
        var(--backdrop-grid-size) var(--backdrop-grid-size),
        var(--backdrop-grid-size) var(--backdrop-grid-size),
        100% 100%,
        100% 100%;
    background-position: center top;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}

/* ── Decorative section backdrop: dot matrix ────────────────────────────────
   A faint repeating dot grid over whatever section-background fill is
   present. Same opt-in mechanism as .section-backdrop--grid (module
   BackgroundPattern → ModuleStyleHelper.GetBackgroundPatternClass), same
   white-alpha-only rule so it recolors per theme automatically. Dot spacing
   is tunable via --backdrop-dot-size. */
.section-backdrop--dots {
    --backdrop-dot-size: 22px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px);
    background-size: var(--backdrop-dot-size) var(--backdrop-dot-size);
    background-position: center top;
    background-repeat: repeat;
}

/* ── Decorative section backdrop: diagonal lines ────────────────────────────
   Subtle 45° hairline stripes over the section-background fill. Same
   opt-in mechanism and white-alpha-only rule as the grid/dots backdrops.
   Stripe pitch is tunable via --backdrop-stripe-size. */
.section-backdrop--diagonal {
    --backdrop-stripe-size: 14px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.06) 0,
        rgba(255, 255, 255, 0.06) 1px,
        transparent 1px,
        transparent var(--backdrop-stripe-size)
    );
    background-repeat: repeat;
}

/* ── Decorative section backdrop: glow ──────────────────────────────────────
   The depth-gradient half of .section-backdrop--grid (top-right glow +
   bottom shade) with no grid lines — a softer backdrop for sections that
   want depth without a texture. Same white/black-alpha-only rule, so it
   recolors per theme automatically. */
.section-backdrop--glow {
    background-image:
        radial-gradient(60% 80% at 85% 8%, rgba(255, 255, 255, 0.14), transparent 60%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 38%, rgba(0, 0, 0, 0.38) 100%);
    background-size: 100% 100%, 100% 100%;
    background-position: center top;
    background-repeat: no-repeat, no-repeat;
}

/* ── Decorative section backdrop: noise ─────────────────────────────────────
   Fractal-noise grain over the section-background fill — a stronger, opt-in
   sibling of the global body noise overlay above. A background-image can't
   carry a separate element opacity (that would fade the module's own content
   too), so the alpha is baked into the SVG rect's own opacity attribute
   instead. Tiles at its native 256×256 size. */
.section-backdrop--noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── Module text theme overrides ─────────────────────────────────────────── */
/* "light" = light-colored text (for dark backgrounds like primary/secondary/accent). */
/* "dark"  = dark-colored text (for light backgrounds). */
.module-theme--light,
.module-theme--light :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-on-dark, #ffffff);
}
.module-theme--light a { color: var(--color-on-dark, #ffffff); }

.module-theme--dark,
.module-theme--dark :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-on-light, #111111);
}
.module-theme--dark a { color: var(--color-on-light, #111111); }

/* BEM-specific color rules win over the class-root rules above via specificity,
   so re-assert the theme color for every module-internal class that sets its own
   color (module-header, hero, featured). Specificity 0,2,0 beats the 0,1,0 BEM
   rules without requiring !important.
   MAINTENANCE NOTE: this list grows with each new module that hard-wires a color
   token. Avoid the pattern: new modules should use `color: var(--color-text, inherit)`
   as their fallback so the 0,1,0 root rules (.module-theme--light / --dark) cascade
   through naturally without requiring a new entry here. */
.module-theme--light .module-header__title,
.module-theme--light .module-header__content,
.module-theme--light .hero-module__body,
.module-theme--light .featured-item__title,
.module-theme--light .featured-item__content,
.module-theme--light .card,
.module-theme--light .card-body,
.module-theme--light .card-title,
.module-theme--light .card-text,
.module-theme--light .card-grid-module__content,
.module-theme--light .testimonials-module__content,
.module-theme--light .faq-module__question,
.module-theme--light .faq-module__answer,
.module-theme--light .faq-module__accordion .accordion-button,
.module-theme--light .faq-module__accordion .accordion-body {
    color: var(--color-on-dark, #ffffff);
}

.module-theme--dark .module-header__title,
.module-theme--dark .module-header__content,
.module-theme--dark .hero-module__body,
.module-theme--dark .featured-item__title,
.module-theme--dark .featured-item__content,
.module-theme--dark .card,
.module-theme--dark .card-body,
.module-theme--dark .card-title,
.module-theme--dark .card-text,
.module-theme--dark .card-grid-module__content,
.module-theme--dark .testimonials-module__content,
.module-theme--dark .faq-module__question,
.module-theme--dark .faq-module__answer,
.module-theme--dark .faq-module__accordion .accordion-button,
.module-theme--dark .faq-module__accordion .accordion-body {
    color: var(--color-on-light, #111111);
}

/* CallToAction outline button: on a light-text theme the outline+label should
   follow the parent text color so the button reads legibly against a dark bg. */
.module-theme--light .btn-cta--outline {
    color: currentColor;
    border-color: currentColor;
}

/* Filled (primary) CTA on a light-text / dark-background module: fall back to the
   accent color. A primary-colored button on a primary-colored section (e.g. a Hero
   or CallToAction with background:"primary") is otherwise invisible. The base
   :hover transform + shadow still apply — we only swap the color tokens. */
.module-theme--light .btn-cta:not(.btn-cta--outline) {
    background: var(--color-accent, #F5A623);
    border-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #fff);
}

.module-theme--light .btn-cta:not(.btn-cta--outline):hover,
.module-theme--light .btn-cta:not(.btn-cta--outline):focus {
    background: var(--color-accent, #F5A623);
    border-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #fff);
}

/* ── Theme-variable utilities ────────────────────────────────────────────── */
.bg-header {
    background-color: var(--color-header-bg, #0D0D0D);
}

.text-header {
    color: var(--color-header-text, #FFF5E6);
}

.border-theme {
    border-color: var(--color-border, #2A2A2A) !important;
}

/* ── Responsive header nav (md breakpoint overrides) ─────────────────────── */
@media (min-width: 768px) {
    .nav-md-static {
        position: static !important;
    }

    .bg-md-transparent {
        background-color: transparent !important;
    }
}

/* ── Product List Module ────────────────────────────────────────────────── */
.product-list-module__tab {
    border: 2px solid var(--color-border, #2A2A2A);
    background: transparent;
    color: var(--color-text-muted, var(--color-text, inherit));
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    border-radius: 0;
    letter-spacing: 0.25em;
    transition: all 0.3s var(--spring-ease);
}

.product-list-module__tab:hover {
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-text, #FFF5E6);
    background: var(--color-border, #2A2A2A);
}

.product-list-module__tab--active {
    background: var(--color-border, #2A2A2A);
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-text, #FFF5E6);
}

.product-list-module__item {
    border-bottom: 1px solid var(--color-border, #2A2A2A);
    gap: 2rem;
}

.product-list-module__item-name {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
    color: var(--color-text, #FFF5E6);
    margin-bottom: 0;
}

.product-list-module__item-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: -4px;
    padding: 0.2rem 0.6rem;
    background-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #0D0D0D);
    border-radius: 0;
    white-space: nowrap;
}

.product-list-module__item-description {
    color: var(--color-text-muted, #999);
}

/* Item-level stock state (issue #236). Until then a variant-less product at zero
   stock rendered an ordinary, clickable Add button and the shopper learned it was
   sold out only from the 409 toast. Scoped in the view to items with no variants --
   ProductPriceResolver prices a named variant against the variant's own stock. */
.product-list-module__item-stock {
    color: var(--color-accent, #F5A623);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-list-module__item--sold-out {
    opacity: 0.55;
}

/* Unscoped, NOT under --sold-out: that modifier is emitted only by the server-rendered
   item-level leg, so scoping here left the variant-level sold-out button (disabled by
   product-list-module.js, which adds no class -- dimming the whole item would grey out
   the option inputs the shopper needs to change selection) at full --color-primary,
   looking live. */
.product-list-module__item-add:disabled {
    background-color: var(--color-text-muted, #999);
    color: var(--color-on-primary, #FFF5E6);
    cursor: not-allowed;
    transform: none;
}

.product-list-module__item-price {
    font-family: var(--font-heading, inherit);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-accent, #F5A623);
    letter-spacing: 1px;
    white-space: nowrap;
}

.product-list-module__item-add {
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #FFF5E6);
    border: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    min-width: 62px;
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    border-radius: 0;
    transition: all 0.3s var(--spring-ease);
    text-align: center;
}

/* `:not(:disabled)`: CSS :hover still matches a disabled <button>, and the transform
   below is not something the :disabled rule above would have overridden -- so a
   Sold-out button used to lift and recolour on hover as though it were clickable. */
.product-list-module__item-add:not(:disabled):hover {
    background-color: var(--color-secondary, #FF5722);
    color: var(--color-on-secondary, #FFF5E6);
    transform: translateY(-2px);
}

.product-list-module__item-image {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--border-radius, 0);
}

/* ── Event List Module ──────────────────────────────────────────────────── */
.event-list-module__item {
    background-color: var(--color-surface, #1A1A1A);
    border-radius: var(--border-radius, 0);
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    gap: 2rem;
}

/* Span-based accent bar: extends into container padding and carries border-radius.
   Use .border-left-accent on new modules instead. */
.event-list-module__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-accent, #F5A623);
    border-radius: var(--border-radius, 0) 0 0 var(--border-radius, 0);
}

.event-list-module__date {
    width: 120px;
    height: 120px;
    padding: 1rem;
    background-color: var(--color-border, #2A2A2A);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-list-module__date-month {
    font-size: 0.7rem;
    color: var(--color-primary, #E63B2E);
    letter-spacing: 0.15em;
    margin-bottom: 0.15rem;
}

.event-list-module__date-day {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text, #FFF5E6);
    margin-bottom: 0.15rem;
}

.event-list-module__date-weekday {
    font-size: 0.8rem;
    color: var(--color-text-muted, #8C8279);
}

.event-list-module__title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
    letter-spacing: 0.04em;
    color: var(--color-text, #FFF5E6);
}

.event-list-module__time {
    font-size: 0.8rem;
    color: var(--color-accent, #F5A623);
    letter-spacing: 0.05em;
}

.event-list-module__description {
    color: var(--color-text-muted, #8C8279);
    line-height: 1.6;
}

.event-list-module__btn {
    display: inline-block;
    min-width: 120px;
    padding-top: 0.75rem;
    padding-bottom: 0.65rem;
}

@media (max-width: 767.98px) {
    .event-list-module__item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
        padding: 1.5rem;
    }

    .event-list-module__date {
        text-align: left;
    }

    .event-list-module__action {
        margin-left: 0 !important;
    }
}

/* ── Event Detail Module ───────────────────────────────────────────────── */


.event-detail-module__header {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.event-detail-module__date {
    background: var(--color-surface, #1a1a1a);
    padding: 1.5rem 1rem;
    border-top: 4px solid var(--color-primary, #E63B2E);
}

.event-detail-module__date-month {
    font-family: var(--font-heading, inherit);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: var(--color-primary, #E63B2E);
}

.event-detail-module__date-day {
    font-family: var(--font-heading, inherit);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-text, inherit);
}

.event-detail-module__date-weekday {
    font-size: 0.9rem;
    color: var(--color-text-muted, #6c757d);
    margin-bottom: 0.25rem;
}

.event-detail-module__date-year {
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--color-text-muted, #6c757d);
}

.event-detail-module__time {
    font-family: var(--font-heading, inherit);
    font-size: 1rem;
    color: var(--color-accent, #F5A623);
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
}

.event-detail-module__title {
    font-family: var(--font-heading, inherit);
    font-size: var(--font-size-h1);
    color: var(--color-text, inherit);
}

.event-detail-module__badge {
    padding: 0.35rem 1rem;
    margin-right: 0.5rem;
}

.event-detail-module__badge--free {
    background: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #0D0D0D);
}

.event-detail-module__badge--paid {
    background: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
}

.event-detail-module__badge--limited {
    background: transparent;
    border: 1px solid var(--color-accent, #F5A623);
    color: var(--color-accent, #F5A623);
}

.event-detail-module__summary {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-muted, #6c757d);
}

.event-detail-module__body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
}

.event-detail-module__body--sidebar-left {
    grid-template-columns: 340px 1fr;
}

.event-detail-module__body--sidebar-left .event-detail-module__sidebar {
    order: -1;
}

.event-detail-module__description h3 {
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    color: var(--color-text, inherit);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.event-detail-module__description h3:first-child {
    margin-top: 0;
}

.event-detail-module__description p {
    color: var(--color-text-muted, #6c757d);
    font-size: var(--font-size-body, 1rem);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.event-detail-module__description ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.event-detail-module__description ul li {
    color: var(--color-text-muted, #6c757d);
    font-size: 0.95rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-surface, #2a2a2a);
}

.event-detail-module__card {
    background: var(--color-surface, #1a1a1a);
    border: 1px solid var(--color-border, #2a2a2a);
    padding: 1.5rem;
    border-radius: var(--border-radius, 0);
}

.event-detail-module__card-heading {
    font-family: var(--font-heading, inherit);
    font-size: var(--font-size-h4);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary, #E63B2E);
}

.event-detail-module__detail-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border, #2a2a2a);
}

.event-detail-module__detail-row:last-child {
    border-bottom: none;
}

.event-detail-module__detail-label {
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--color-text-muted, #6c757d);
}

.event-detail-module__detail-value {
    font-size: 0.95rem;
    color: var(--color-text, inherit);
}

.event-detail-module__btn {
    display: block;
    width: 100%;
    text-align: center;
}

@media (max-width: 900px) {
    .event-detail-module__header {
        grid-template-columns: 120px 1fr;
    }

    .event-detail-module__body,
    .event-detail-module__body--sidebar-left {
        grid-template-columns: 1fr;
    }

    .event-detail-module__body--sidebar-left .event-detail-module__sidebar {
        order: 0;
    }
}

@media (max-width: 600px) {
    .event-detail-module__header {
        grid-template-columns: 1fr;
    }

    .event-detail-module__date {
        max-width: 160px;
    }
}

/* ── Upcoming Events Module ─────────────────────────────────────────────── */

.upcoming-events-module {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border, #333);
}

.upcoming-events-module__heading {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    color: var(--color-text, inherit);
    margin-bottom: 1.5rem;
}

.upcoming-events-module__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.upcoming-events-module__card {
    background: var(--color-surface, #1a1a1a);
    padding: 1.5rem;
    border-left: 4px solid var(--color-accent, #F5A623);
    cursor: pointer;
    display: block;
    color: inherit;
}

.upcoming-events-module__card:hover {
    color: inherit;
}

.upcoming-events-module__card-date {
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--color-accent, #F5A623);
    margin-bottom: 0.25rem;
}

.upcoming-events-module__card-title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    color: var(--color-text, inherit);
    margin-bottom: 0.25rem;
}

.upcoming-events-module__card-time {
    font-family: var(--font-heading, inherit);
    font-size: 0.75rem;
    color: var(--color-secondary, #d4a847);
    letter-spacing: 0.15em;
}

/* ── Form Module ─────────────────────────────────────────────────────────── */
.form-module__copy h2 {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 2.4rem;
    letter-spacing: 0.04em;
    color: var(--color-text, inherit);
    margin-bottom: 1.5rem;
}

/* Wrapper fills the Bootstrap column so its height matches the sibling copy
   column (rows are flex-stretch by default). With the inner form hidden after
   submit, the success message takes its place inside the same locked-height
   wrapper instead of collapsing to its own content height. */
.form-module__form-wrapper {
    background: var(--color-surface, #1a1a1a);
    padding: 2rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.form-module__title {
/*     font-family: var(--font-display, var(--font-heading, inherit));
    color: var(--color-text, inherit);
    margin-bottom: 1rem; */
}

.form-module__label {
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text-muted, #8C8279);
}

/* Reset the browser's default fieldset chrome (gray box around the group).
   The visual divider lives on the section *title* below; the fieldset itself
   stays invisible. min-width:0 keeps the fieldset from blowing out grid
   columns via its default min-width:min-content. */
.form-module__section {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Stack consecutive sections with breathing room. Adjacent-sibling selector
   so the first section doesn't hang a top margin off the form's top edge. */
.form-module__section + .form-module__section {
    margin-top: 1.5rem;
}

/* Underline the section title with the same muted tone as field labels so
   the title reads as a divider above its grouped fields. Applies to every
   section title — first one included. */
.form-module__section-title {
    border-bottom: 1px solid var(--color-text-muted, #8C8279);
    padding-bottom: 0.25rem;
    width: 100%;
}

.form-module__input,
.form-module__textarea {
    background-color: var(--color-background, #2a2a2a);
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--color-text, inherit);
    font-family: var(--font-body, inherit);
    transition: border-color 0.3s;
}

.form-module__input:focus,
.form-module__textarea:focus {
    border-color: var(--color-primary, #e63b2e);
    box-shadow: none;
    background-color: var(--color-background, #2a2a2a);
}

/* Selects need an explicit chevron — Bootstrap's default ships a dark-grey
   arrow that gets lost on the dark form background. The image comes from
   --form-select-chevron (:root) rather than sitting inline here, so a form
   repainted onto a light surface can swap it without restating the data URI;
   --form-select-chevron-on-light is the ready-made dark twin. background-color
   and background-image are split above so this rule only paints the arrow. */
.form-module__input--select {
    background-image: var(--form-select-chevron);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 12px 8px;
    padding-right: 2.25rem;
}

.form-module__input::placeholder,
.form-module__textarea::placeholder {
    color: var(--color-text-muted, #8C8279);
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Selects render their placeholder as an <option value="" disabled selected>,
   so the ::placeholder pseudo-element doesn't apply. When that empty option
   is the active one, mute the select itself to match input placeholder text
   (color + opacity + the same 0.875rem font-size inputs use). */
.form-module__input--select:has(option[value=""]:checked) {
    color: var(--color-text-muted, #8C8279);
    opacity: 0.7;
    font-size: 0.875rem;
}
/* Restores option text to normal input size after the placeholder shrink above.
   "Normal" for a .form-control is --bs-body-font-size, which ThemeCssHelper
   derives from WebsiteSettings.FontSizeBody — so this must read the same token
   rather than a literal, or the open dropdown renders smaller than the closed
   select on any site that scales its body font. */
.form-module__input--select option {
    color: var(--color-text, inherit);
    opacity: 1;
    font-size: var(--font-size-body, 1rem);
}

.form-module__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Centered within the still-locked wrapper height (see form-wrapper rule)
   so submitting a tall form doesn't leave the copy column visually taller
   than the form column. flex: 1 fills the wrapper's remaining height after
   the (hidden) form is taken out of the flow. */
.form-module__success {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
    font-size: 1.1rem;
    color: var(--color-text, inherit);
}

.form-module__success h3 {
    font-size: 2rem;
}

/* Honeypot field (PR 7 anti-abuse). The input itself is also pushed off-screen
   via inline style on the wrapper as a belt-and-braces measure — this class
   gives theme stylesheets a single override hook. */
.form-module__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Inline field-level error rendered by forms-client-validation.js. The
   element is always present in the DOM (so CSS toggles work without
   layout shift); --visible toggles the message + a red border on the
   adjacent input. */
.form-module__field-error {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--bs-danger, #dc3545);
}
.form-module__field-error--visible {
    display: block;
}
.form-module__form-error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-danger, #dc3545);
    border-radius: 0.25rem;
    color: var(--bs-danger, #dc3545);
    font-size: 0.9rem;
}

/* Conditional-logic wrapper IS the Bootstrap grid cell — _FieldGroup.cshtml
   applies the col-* class here so the wrapper picks up `.row > *` gutter
   padding directly. Toggling `.d-none` from forms-conditional.js hides the
   whole cell; removing it puts the cell back in layout flow. */

/* Form Module — Modal variant */
.modal-content.form-module--modal {
    background: var(--color-background, #0d0d0d);
    border: 1px solid var(--color-border, #2a2a2a);
    border-radius: 0;
    color: var(--color-text, inherit);
}

.form-module__modal-header {
    background: var(--color-surface, #1a1a1a);
    border-bottom: 2px solid var(--color-primary, #E63B2E);
    padding: 1.25rem 1.5rem;
}

.form-module__modal-header .form-module__title {
    color: var(--color-primary, #E63B2E);
}

.form-module__modal-body {
    background: var(--color-surface, #1a1a1a);
    padding: 1.5rem;
}

/* ── Blog List Module — Featured Card ────────────────────────────────── */
.blog-list-module__featured {
    margin-bottom: 3rem;
}

.blog-list-module__featured-link {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--color-surface, #1A1A1A);
    color: inherit;
    overflow: hidden;
    transition: transform 0.4s var(--spring-ease), box-shadow 0.4s;
}

.blog-list-module__featured-link:hover,
.blog-list-module__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-blog-card-hover);
    color: inherit;
}

.blog-list-module__featured-thumb {
    background: var(--color-border, #2A2A2A);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-list-module__featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 320px;
}

.blog-list-module__featured-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-list-module__featured-tag {
    font-size: 0.6rem;
    letter-spacing: 2px;
    background: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #FFF5E6);
    padding: 0.25rem 0.75rem;
    margin-bottom: 1rem;
    align-self: flex-start;
}

.blog-list-module__featured-title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h2);
    color: var(--color-text, inherit);
    margin-bottom: 0.5rem;
}

.blog-list-module__featured-excerpt {
    color: var(--color-text-muted, #8C8279);
    font-size: var(--font-size-body, 1rem);
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* ── Blog List Module — Card Grid ────────────────────────────────────── */
.blog-list-module__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-list-module__card {
    background: var(--color-surface, #1A1A1A);
    overflow: hidden;
    transition: transform 0.4s var(--spring-ease), box-shadow 0.4s;
}

.blog-list-module__card-link {
    color: inherit;
    display: block;
}

.blog-list-module__card-link:hover {
    color: inherit;
}

.blog-list-module__card-thumb {
    width: 100%;
    height: 200px;
    background: var(--color-border, #2A2A2A);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-list-module__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list-module__card-body {
    padding: 2rem;
}

.blog-list-module__meta {
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255, 245, 230, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-list-module__separator {
    color: var(--color-text-muted, rgba(255, 245, 230, 0.4));
}

.blog-list-module__card-title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
    color: var(--color-text, inherit);
    transition: color 0.2s ease;
}

.blog-list-module__card-link:hover .blog-list-module__card-title {
    color: var(--color-primary, #E63B2E);
}

.blog-list-module__card-summary {
    color: var(--color-text-muted, #8C8279);
    font-size: 0.9rem;
    line-height: 1.6;
}

.blog-list-module__card-cta {
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    color: var(--color-primary, #E63B2E);
    letter-spacing: 3px;
    transition: color 0.3s;
}

.blog-list-module__card-link:hover .blog-list-module__card-cta {
    color: var(--color-secondary, #FF5722);
}

.blog-list-module__pagination-btn {
    color: var(--color-primary, #E63B2E);
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-primary, #E63B2E);
    border-radius: var(--border-radius, 0);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-list-module__pagination-btn:hover {
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
}

.blog-list-module__pagination-info {
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255, 245, 230, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .blog-list-module__featured-link {
        grid-template-columns: 1fr;
    }

    .blog-list-module__featured-thumb {
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    .blog-list-module__grid {
        grid-template-columns: 1fr;
    }
}

/* Section header (all display styles) now renders via the shared _ModuleHeader
   partial — styling comes from .module-header__eyebrow/__title/__content. */

/* ── Blog List Module — List display style ───────────────────────────── */
.blog-list-module__row {
    background: var(--color-surface, #1A1A1A);
    overflow: hidden;
    transition: transform 0.4s var(--spring-ease), box-shadow 0.4s;
}

.blog-list-module__row:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-blog-card-hover);
}

.blog-list-module__row-link,
.blog-list-module__row-link:hover {
    color: inherit;
}

.blog-list-module__row-thumb {
    height: 100%;
    min-height: 200px;
    background: var(--color-border, #2A2A2A);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-list-module__row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
}

.blog-list-module__row-body {
    padding: 1.75rem 2rem;
}

.blog-list-module__row-title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
    color: var(--color-text, inherit);
    transition: color 0.2s ease;
}

.blog-list-module__row-link:hover .blog-list-module__row-title {
    color: var(--color-primary, #E63B2E);
}

.blog-list-module__row-summary {
    color: var(--color-text-muted, #8C8279);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Blog List Module — Compact display style ────────────────────────── */
.blog-list-module__compact-item + .blog-list-module__compact-item {
    border-top: 1px solid var(--color-border, #2A2A2A);
}

.blog-list-module__compact-link {
    color: var(--color-text, inherit);
    transition: color 0.2s ease;
}

.blog-list-module__compact-link:hover {
    color: var(--color-primary, #E63B2E);
}

.blog-list-module__compact-title {
    font-family: var(--font-heading, inherit);
    font-size: 1.05rem;
}

.blog-list-module--compact .blog-list-module__date {
    font-size: 0.8rem;
    color: var(--color-text-muted, rgba(255, 245, 230, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Blog Detail Module ──────────────────────────────────────────────────── */
.blog-detail-module__hero-image {
    width: 100%;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
}

.blog-detail-module__hero-img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}


.blog-detail-module__title {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h1);
    color: var(--color-text, inherit);
}

.blog-detail-module__meta {
    font-size: 0.85rem;
    color: var(--color-text-muted, rgba(255, 245, 230, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.blog-detail-module__read-time {
    color: var(--color-accent, var(--color-primary, #E63B2E));
}

/* Body + Sidebar layout */
.blog-detail-module__body-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 4rem;
}

.blog-detail-module__body {
    max-width: none;
}

.blog-detail-module__body h1,
.blog-detail-module__body h2,
.blog-detail-module__body h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-detail-module__body h1 {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 1.8rem;
    color: var(--color-text, inherit);
}

.blog-detail-module__body h2 {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: 1.4rem;
    color: var(--color-text, inherit);
}

.blog-detail-module__body h3 {
    font-size: 1.15rem;
}

.blog-detail-module__body p {
    color: var(--color-text-muted, rgba(255, 245, 230, 0.8));
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.blog-detail-module__body blockquote {
    border-left: 4px solid var(--color-primary, #E63B2E);
    background: var(--color-surface, #1A1A1A);
    padding: 2rem;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
}

.blog-detail-module__body a {
    color: var(--color-primary, #E63B2E);
    text-decoration: underline;
}

.blog-detail-module__body a:hover {
    opacity: 0.8;
}

/* Sidebar */
.blog-detail-module__sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-detail-module__sidebar-card {
    background: var(--color-surface, #1A1A1A);
    border: 1px solid var(--color-border, #2A2A2A);
    padding: 2rem;
}

.blog-detail-module__sidebar-heading {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h4);
    color: var(--color-text, inherit);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary, #E63B2E);
}

.blog-detail-module__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-detail-module__tag {
    font-size: 0.6rem;
    letter-spacing: 2px;
    padding: 0.4rem 0.8rem;
    background: var(--color-border, #2A2A2A);
    color: var(--color-text-muted, #8C8279);
    transition: all 0.3s;
    cursor: default;
}

.blog-detail-module__tag:hover {
    background: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #FFF5E6);
}

.blog-detail-module__sidebar-post {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border, #2A2A2A);
    color: inherit;
    transition: padding-left 0.3s;
}

.blog-detail-module__sidebar-post:hover {
    padding-left: 0.5rem;
    color: inherit;
}

.blog-detail-module__sidebar-post:last-child {
    border-bottom: none;
}

.blog-detail-module__sidebar-post h5 {
    font-family: var(--font-heading, inherit);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--color-text, inherit);
    margin-bottom: 0.15rem;
}

.blog-detail-module__sidebar-date {
    font-family: var(--font-heading, inherit);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-muted, #8C8279);
}

/* Related Posts */
.blog-detail-module__related {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border, #2A2A2A);
}

.blog-detail-module__related-heading {
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: var(--font-size-h3);
    color: var(--color-text, inherit);
    margin-bottom: 2rem;
}

.blog-detail-module__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

@media (max-width: 900px) {
    .blog-detail-module__body-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Image Gallery Module ──────────────────────────────────────────────── */

/* Shared masonry item styling (two- and three-column variants) */
.gallery-module--three-column .gallery-module__item,
.gallery-module--two-column .gallery-module__item {
    break-inside: avoid;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Three-column masonry */
.gallery-module--three-column .gallery-module__grid {
    columns: 3;
    column-gap: 1rem;
}

/* Two-column masonry */
.gallery-module--two-column .gallery-module__grid {
    columns: 2;
    column-gap: 1rem;
}

/* Grid layout (default) — content-fit, not breakpoint-based */
.gallery-module--grid .gallery-module__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.gallery-module--grid .gallery-module__item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-module--grid .gallery-module__img {
    height: 250px;
}

.gallery-module__img {
    width: 100%;
    display: block;
    background: var(--color-surface, #1A1A1A);
    border: 1px solid var(--color-border, #2A2A2A);
    min-height: 200px;
    object-fit: cover;
    transition: transform 0.5s var(--spring-ease), filter 0.5s;
}

.gallery-module__item:hover .gallery-module__img {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.gallery-module__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(13, 13, 13, 0.9), transparent);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s var(--spring-ease);
}

.gallery-module__item:hover .gallery-module__caption {
    opacity: 1;
    transform: translateY(0);
}

.gallery-module__caption span {
    font-family: var(--font-heading, inherit);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-text, #FFF5E6);
}

/* Responsive masonry reduction (Bootstrap lg/md breakpoints) */
@media (max-width: 991.98px) {
    .gallery-module--three-column .gallery-module__grid {
        columns: 2;
    }
}

@media (max-width: 767.98px) {

    .gallery-module--three-column .gallery-module__grid,
    .gallery-module--two-column .gallery-module__grid {
        columns: 1;
    }
}

/* ── Misc utilities Bootstrap lacks ──────────────────────────────────────── */
.hover-bg-light:hover {
    background-color: #f8f9fa;
}

.ls-wide {
    letter-spacing: 0.05em;
}

.ls-wider {
    letter-spacing: 0.2em;
}

.lh-relaxed {
    line-height: 1.625;
}

/* ── Carousel Module ──────────────────────────────────────────────────────── */
.carousel-module__image {
    object-fit: cover;
    height: 640px;
    max-height: 80vh;
}

.carousel-module__image--placeholder {
    height: 640px;
    max-height: 80vh;
    background-color: var(--color-surface, #1a1a1a);
}

.carousel-module__caption {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 2rem 2.5rem;
}

/* Horizontal alignment */
.carousel-module__caption[data-alignment="center"] {
    align-items: center;
    text-align: center;
}

.carousel-module__caption[data-alignment="right"] {
    align-items: flex-end;
    text-align: right;
}

/* Vertical alignment */
.carousel-module__caption[data-vertical-alignment="top"] {
    justify-content: flex-start;
}

.carousel-module__caption[data-vertical-alignment="middle"] {
    justify-content: center;
}

.carousel-module__caption[data-vertical-alignment="bottom"] {
    justify-content: flex-end;
}

/* ── Overlay style modifiers ── */
.carousel-module__caption--overlay-dark-bottom {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.carousel-module__caption--overlay-dark-full {
    background: rgba(0, 0, 0, 0.55);
}

.carousel-module__caption--overlay-light-top {
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 60%, transparent 100%);
}

.carousel-module__caption--overlay-light-full {
    background: rgba(255, 255, 255, 0.6);
}

/* overlay-none: no background (transparent) */
.carousel-module__caption--overlay-none {
    background: none;
}

/* ── Caption text color modifiers ── */
/* --text-light: white text for dark-overlay carousels (default) */
.carousel-module__caption--text-light .carousel-module__item-title {
    color: #fff;
    text-shadow: var(--text-shadow-on-image);
}

.carousel-module__caption--text-light .carousel-module__content {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: var(--text-shadow-on-image-body);
}

.carousel-module__caption--text-light .carousel-module__eyebrow {
    color: var(--color-accent, #F5A623);
    opacity: 0.9;
    text-shadow: var(--text-shadow-on-image-eyebrow);
}

/* --text-dark: dark text for light-overlay carousels */
.carousel-module__caption--text-dark .carousel-module__item-title {
    color: #111;
    text-shadow: 0 1px 2px rgba(255,255,255,0.15);
}

.carousel-module__caption--text-dark .carousel-module__content {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

.carousel-module__caption--text-dark .carousel-module__eyebrow {
    color: var(--color-primary, #E63B2E);
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.carousel-module__caption--text-dark .carousel-module__tag {
    background-color: #111;
    color: #fff;
}


.carousel-module__tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: var(--z-carousel-tag);
    background-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #000);
    font-size: 0.7rem;
    border-radius: var(--border-radius, 0.375rem);
}

.carousel-module__item-title {
    max-width: 700px;
}

.carousel-module__content {
    max-width: 600px;
}


@media (max-width: 767.98px) {
    .carousel-module__image,
    .carousel-module__image--placeholder {
        height: 320px;
    }

    .carousel-module__caption {
        padding: 1rem 1.25rem;
    }

    .carousel-module__item-title {
        font-size: 1.25rem;
    }
}

/* ============================================================
   CART HEADER ICON
   ============================================================ */
.cart-header-icon {
    color: var(--color-header-text, inherit);
}

.search-header-icon {
    color: var(--color-header-text, inherit);
}

.cart-header-icon__badge,
.cart-summary-module__badge {
    position: absolute;
    top: -0.4rem;
    right: -0.5rem;
    background: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
    text-align: center;
    border-radius: 50%;
    padding: 0 0.25rem;
}

.cart-header-icon__badge--hidden {
    display: none;
}

/* ============================================================
   CART SUMMARY MODULE (inline widget)
   ============================================================ */
.cart-summary-module__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-text, inherit);
    text-decoration: none;
}

.cart-summary-module__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.cart-summary-module__badge--hidden {
    display: none;
}

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-page__title {
    font-family: var(--font-heading, inherit);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
}

.cart-page__empty {
    text-align: center;
    padding: 4rem 0;
}

.cart-page__empty-icon {
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 1.5rem;
}

.cart-page__empty-text {
    font-size: 1.25rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 2rem;
}

.cart-page__continue-btn {
    background: var(--color-primary, #E63B2E);
    border-color: var(--color-primary, #E63B2E);
}

.cart-page__item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.cart-page__item-image-wrap {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.cart-page__item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius, 0.5rem);
}

.cart-page__item-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface, #f3f4f6);
    border-radius: var(--border-radius, 0.5rem);
    color: var(--color-text-muted, #6b7280);
}

.cart-page__item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cart-page__item-name {
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cart-page__item-variant,
.cart-page__item-options {
    font-size: 0.85rem;
    color: var(--color-text-muted, #6b7280);
}

.cart-page__item-price {
    font-weight: 600;
    color: var(--color-accent, #F5A623);
    white-space: nowrap;
}

.cart-page__item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-page__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--border-radius, 0.375rem);
    background: var(--color-surface, #f9fafb);
    cursor: pointer;
    /* Tracks the token so the −/+ glyphs stay sized with the .cart-page__qty-value
       between them, which inherits body. */
    font-size: var(--font-size-body, 1rem);
    line-height: 1;
    color: inherit;
    transition: background 0.15s;
}

.cart-page__qty-btn:hover {
    background: var(--color-border, #e5e7eb);
}

.cart-page__qty-value {
    min-width: 2rem;
    text-align: center;
    font-weight: 600;
}

.cart-page__item-total {
    font-weight: 700;
    white-space: nowrap;
}

.cart-page__item-remove {
    background: none;
    border: none;
    color: var(--color-text-muted, #9ca3af);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.15s;
}

.cart-page__item-remove:hover {
    color: var(--color-primary, #E63B2E);
}

.cart-page__notice {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-primary, #E63B2E);
    border-radius: var(--border-radius, 0.375rem);
    color: var(--color-text, inherit);
    font-size: 0.9rem;
}

.cart-page__summary {
    padding: 2rem 0;
    text-align: right;
}

.cart-page__summary-row {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.cart-page__subtotal {
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 700;
}

.cart-page__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.cart-page__clear-btn {
    border-color: var(--color-border, #d1d5db);
    color: var(--color-text-muted, #6b7280);
}

/* Checkout start (issue #198) — sits between the subtotal row and the secondary actions. */
.cart-page__checkout {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cart-page__fulfillment {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.cart-page__fulfillment-legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted, #6b7280);
}

.cart-page__fulfillment-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
    color: var(--color-text, inherit);
}

.cart-page__fulfillment-option .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

/* Off-screen, never display:none — a hidden input a bot can still "see" is the point. */
.cart-page__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cart-page__checkout-btn {
    min-width: 12rem;
}

/* Cart page responsive */
@media (max-width: 767.98px) {
    .cart-page__item {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 0.75rem;
    }

    .cart-page__item-image-wrap,
    .cart-page__item-image,
    .cart-page__item-image--placeholder {
        width: 60px;
        height: 60px;
    }

    .cart-page__item-details {
        grid-column: 2;
    }

    .cart-page__item-price,
    .cart-page__item-quantity,
    .cart-page__item-total,
    .cart-page__item-remove {
        grid-column: 2;
    }

    .cart-page__item-price {
        display: inline;
    }

    .cart-page__summary-row {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .cart-page__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Recommended Products Module ─────────────────────────────────────────── */

.recommended-products-module {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border, #333);
}

.recommended-products-module__eyebrow { /* theme override hook */ }
.recommended-products-module__title   { /* theme override hook */ }


.recommended-product-item__price {
    color: var(--color-accent, #F5A623);
}

.recommended-product-item__add-btn {
    background-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
    border: 1px solid var(--color-primary, #E63B2E);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 1rem;
    border-radius: var(--border-radius, 0);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.recommended-product-item__add-btn:hover {
    background-color: var(--color-accent, #F5A623);
    border-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #fff);
    transform: translateY(-1px);
}

.recommended-product-item__add-btn--added {
    background-color: var(--bs-success, #10b981);
    border-color: var(--bs-success, #10b981);
}

.recommended-product-item__footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* -- Image Strip Module -------------------------------------------------------- */
.image-strip-module {
    --image-strip-gap: 0.75rem;
}

/* Viewport clips overflow — no scrollbar */
.image-strip-module__viewport {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

/* Track slides via transform */
.image-strip-module__track {
    display: flex;
    gap: var(--image-strip-gap);
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Item width set by JS based on viewport — flex: none prevents flex sizing */
.image-strip-module__item {
    flex: none;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius, 0.25rem);
    aspect-ratio: 4 / 3;
}

.image-strip-module__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-strip-module__item:hover .image-strip-module__image {
    transform: scale(1.08);
}

.image-strip-module__link {
    display: block;
}

.image-strip-module__caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.75rem 1rem;
}

.image-strip-module__caption {
    margin: 0;
    font-size: 0.875rem;
    color: #fff;
    text-align: center;
}

/* Prev / Next arrows */
.image-strip-module__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-strip-arrow);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.image-strip-module__arrow:hover {
    background: rgba(0,0,0,0.75);
}

.image-strip-module__arrow--prev {
    left: 0.75rem;
}

.image-strip-module__arrow--next {
    right: 0.75rem;
}
/* ── Pillar Module ─────────────────────────────────────────────────────────── */
.pillar-module__eyebrow { /* theme override hook */ }
.pillar-module__title   { /* theme override hook */ }

.pillar-module__image {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 4px solid var(--color-surface, #f3f4f6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-module__item:hover .pillar-module__image {
    transform: scale(1.05);
    box-shadow: var(--shadow-card-hover);
}

.pillar-module__item-title {
    font-family: var(--font-display, var(--font-heading, inherit));
    color: var(--color-heading, inherit);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pillar-module__content {
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 34ch;
}

/* ── Location Module ────────────────────────────────────────────────────────── */
.location-module__eyebrow { /* theme override hook */ }
.location-module__title   { /* theme override hook */ }

.location-module__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.location-module__map-placeholder {
    background-color: var(--color-surface, #f3f4f6);
    min-height: 400px;
}

.location-module__address {
    font-style: normal;
    line-height: 1.7;
}

.location-module__business-name {
    font-family: var(--font-heading, inherit);
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.location-module__phone {
    color: var(--color-primary, inherit);
    text-decoration: none;
}

.location-module__phone:hover {
    text-decoration: underline;
}

.location-module__hours-heading {
    font-family: var(--font-heading, inherit);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 0.75rem;
}

.location-module__hours-row {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    font-size: 0.95rem;
}

.location-module__hours-row:last-child {
    border-bottom: none;
}

@media (max-width: 767px) {
    .location-module__map,
    .location-module__content {
        width: 100%;
    }

    .location-module__iframe,
    .location-module__map-placeholder {
        min-height: 280px;
    }
}

/* ── Video Module ──────────────────────────────────────────────────────────── */
.video-module__eyebrow { /* theme override hook */ }
.video-module__title   { /* theme override hook */ }

/* ── Card Grid Module ──────────────────────────────────────────────────────── */
.card-grid-module__eyebrow { /* theme override hook */ }
.card-grid-module__title   { /* theme override hook */ }

.card-grid-module__content {
    color: var(--color-text-muted, inherit);
}

/* ── Card Grid — opt-in layout utilities (set on the module's CssClass) ───────
   Composable modifiers for a "features / highlights" deck that the shipped
   knobs (paddingY/background/textTheme) can't express. Each targets the
   card-grid BEM elements from the .content-module ancestor that carries the
   authored CssClass, so they only affect the one module. Combine freely, e.g.
   "cssClass":"card-grid--icon-tile card-grid--caps-titles cta-link cta-arrows".
   Tint uses color-mix over the live theme color, so it recolors per tenant. */

/* Borderless, shadowless, transparent cards. */
.card-grid--flat .card-grid-module__card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Turn the full-bleed card-img-top image into a small tinted rounded icon tile,
   inset from the top-left so it aligns with the body copy. Tunable per module
   via --card-icon-tile-{size,bg,radius} (override in a small customCss rule).

   SUPERSEDED by the module-level MediaStyle: Tile setting (see below), but kept
   verbatim for decks authored before that field existed — including its
   primary-tint backdrop, which the new setting does NOT share (MediaStyle backs
   the swatch with --color-surface). Reach for the setting on new decks.

   Scoped to --banner (MediaStyle's default) so a deck that HAS since adopted
   Tile/Circle is styled by the wrapper rules only — otherwise the backdrop would
   paint twice, once on the wrapper and again on the nested <img>. Specificity
   rises 0,2,0 -> 0,3,0: a customCss hook targeting .card-grid-module__image on a
   deck that also carries card-grid--icon-tile now needs a 3-class selector to
   win. */
.card-grid--icon-tile .card-grid-module__media--banner .card-grid-module__image {
    width: var(--card-icon-tile-size, 3.5rem);
    height: var(--card-icon-tile-size, 3.5rem);
    margin: 1.5rem 0 0 var(--bs-card-spacer-x, 1rem);
    padding: 0.75rem;
    object-fit: contain;
    border-radius: var(--card-icon-tile-radius, 0.85rem);
    background: var(--card-icon-tile-bg,
        color-mix(in srgb, var(--color-primary, #6b21a8) 12%, transparent));
}

/* Uppercase card titles with a touch of tracking. */
.card-grid--caps-titles .card-grid-module__item-title {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Card Grid — card media presentation (module-level MediaStyle) ────────────
   One rule set serves BOTH an <img> and a Bootstrap-Icons <i> glyph: sizing and
   the backdrop live on the shared .card-grid-module__media wrapper (Tile and
   Circle) or on the glyph itself (Banner, where an image is full-bleed and must
   stay untouched). Banner (0) is the default and is a visual no-op for images,
   so decks authored before MediaStyle render unchanged.

   Glyph defaults: the site's PRIMARY color on a SURFACE-token backdrop with
   rounded corners. Every value is a custom property, so a tenant retints or
   reshapes a whole deck from the admin's Custom CSS box (or an import bundle's
   customCss key) without restating a single selector:

     .card-grid--our-values {
         --card-icon-color: var(--color-accent);
         --card-icon-bg: transparent;
         --card-icon-radius: 0;
     }

   These are deliberately NOT the legacy --card-icon-tile-* names above. That
   utility class keeps its primary-tint look for decks already authored against
   it; the tunables here belong to the MediaStyle setting alone. */

/* Banner — full-bleed card-img-top for an image; the wrapper is inert. */
.card-grid-module__media--banner {
    display: block;
}

/* A glyph has no "full-bleed" reading, so under Banner it renders as a large
   self-contained swatch, inset to align with the body copy. */
.card-grid-module__media--banner .card-grid-module__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--card-icon-banner-size, 3rem);
    height: var(--card-icon-banner-size, 3rem);
    margin: 1.5rem 0 0 var(--bs-card-spacer-x, 1rem);
    font-size: var(--card-icon-glyph-size, 1.5rem);
    background: var(--card-icon-bg, var(--color-surface, rgba(0, 0, 0, 0.05)));
    border-radius: var(--card-icon-radius, 0.55rem);
}

/* Tile + Circle share the backdrop and centering; flex: 0 0 auto is required
   because Bootstrap's .card is a flex column and a tall .card-body would
   otherwise shrink the swatch. The backdrop sits on the wrapper, so a small
   IMAGE gets the same treatment as a glyph — that is what makes Tile a
   first-class replacement for the legacy card-grid--icon-tile hack. */
.card-grid-module__media--tile,
.card-grid-module__media--circle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: var(--card-icon-bg, var(--color-surface, rgba(0, 0, 0, 0.05)));
}

/* Tile — a small rounded square, inset from the top-left. */
.card-grid-module__media--tile {
    width: var(--card-icon-size, 3.5rem);
    height: var(--card-icon-size, 3.5rem);
    padding: 0.75rem;
    margin: 1.5rem 0 0 var(--bs-card-spacer-x, 1rem);
    border-radius: var(--card-icon-radius, 0.85rem);
}

/* Circle — same backdrop, fully round, centered. The radius is intentionally
   NOT --card-icon-radius: "circle" is the setting's whole meaning, and a deck
   that overrides the radius for its tiles must not silently square these off. */
.card-grid-module__media--circle {
    width: var(--card-icon-circle-size, 4.5rem);
    height: var(--card-icon-circle-size, 4.5rem);
    padding: 0.9rem;
    margin: 1.5rem auto 0;
    border-radius: 50%;
}

/* Child normalization — identical for the <img> and the <i>. */
.card-grid-module__media--tile > .card-grid-module__image,
.card-grid-module__media--circle > .card-grid-module__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-grid-module__media--tile > .card-grid-module__icon,
.card-grid-module__media--circle > .card-grid-module__icon {
    font-size: var(--card-icon-glyph-size, 1.5rem);
}

/* Glyph color — one rule for all three styles so the default survives whichever
   MediaStyle the deck picks. */
.card-grid-module__icon {
    line-height: 1;
    color: var(--card-icon-color, var(--color-primary, inherit));
}

/* ── Testimonials Module ───────────────────────────────────────────────────── */
.testimonials-module__eyebrow { /* theme override hook */ }
.testimonials-module__title   { /* theme override hook */ }

.testimonials-module__avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid var(--color-surface, #f3f4f6);
}

.testimonials-module__author-name {
    font-size: 1rem;
    color: var(--color-heading, inherit);
}

.testimonials-module__author-detail {
    font-size: 0.85rem;
}

.testimonials-module__stars {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
}

.testimonials-module__content {
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-muted, inherit);
}

/* ── Image Grid Module ────────────────────────────────────────────────────── */
.image-grid-module__eyebrow { /* theme override hook */ }
.image-grid-module__title   { /* theme override hook */ }

.image-grid-module__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius, 0.5rem);
}

.image-grid-module__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.image-grid-module__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease;
}

.image-grid-module__link:hover .image-grid-module__overlay {
    background: rgba(0, 0, 0, 0.5);
}

.image-grid-module__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.image-grid-module__item-title {
    color: var(--color-on-dark, #fff);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── FAQ Module ────────────────────────────────────────────────────────────── */
.faq-module__eyebrow { /* theme override hook */ }
.faq-module__title   { /* theme override hook */ }

.faq-module__question {
    color: var(--color-heading, inherit);
}

.faq-module__answer {
    line-height: 1.65;
    color: var(--color-text-muted, inherit);
}

.faq-module__accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border, #2A2A2A);
}

.faq-module__accordion .accordion-item:first-child {
    border-top: 1px solid var(--color-border, #2A2A2A);
}

.faq-module__accordion .accordion-button {
    background-color: transparent;
    color: var(--color-text, #FFF5E6);
    padding: 1.25rem 1rem;
}

.faq-module__accordion .accordion-button:not(.collapsed) {
    color: var(--color-primary, #E63B2E);
    background-color: transparent;
    box-shadow: none;
}

.faq-module__accordion .accordion-button::after {
    /* Default: invert Bootstrap's dark chevron for the dark-bg default site theme.
       Reset for explicit light-background modules (.module-theme--dark = dark text on
       light bg). A site-wide light theme with no module-theme modifier would still
       get an invisible white-on-white chevron — full fix requires a custom SVG with
       currentColor or a global body theme class. */
    filter: invert(1) brightness(0.8);
}

.module-theme--dark .faq-module__accordion .accordion-button::after {
    filter: none;
}

.faq-module__accordion .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.faq-module__accordion .accordion-body {
    background-color: transparent;
    color: var(--color-text-muted, #FFF5E6);
    padding: 0 1rem 1.25rem;
}

/* ===== Team Module ===== */
.team-module {
    /* theme override hook */
}

.team-module__eyebrow {
    /* theme override hook */
}

.team-module__title {
    /* theme override hook */
}

.team-module__card {
    background-color: var(--color-surface, transparent);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--border-radius, 0.5rem);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-module__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.team-module__image-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--color-border, rgba(255, 255, 255, 0.05));
}

.team-module__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-module__name {
    color: var(--color-text, var(--color-heading, inherit));
    font-size: 1.25rem;
}

.team-module__role {
    color: var(--color-accent, var(--color-primary, inherit));
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.team-module__bio {
    color: var(--color-text-muted, var(--color-text, inherit));
    font-size: 0.95rem;
    line-height: 1.6;
}

.team-module__contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.team-module__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted, var(--color-text, inherit));
    text-decoration: none;
    transition: color 0.15s ease;
}

.team-module__contact-link:hover {
    color: var(--color-primary, inherit);
}

.team-module__contact-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

.team-module__social {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.team-module__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--color-text-muted, var(--color-text, inherit));
    background-color: transparent;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.team-module__social-link:hover {
    color: var(--color-background, #fff);
    background-color: var(--color-primary, currentColor);
    border-color: var(--color-primary, currentColor);
}

.team-module__social-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* ===== Stats Module ===== */
.stats-module {
    /* theme override hook */
}

.stats-module__eyebrow {
    /* theme override hook */
}

.stats-module__title {
    /* theme override hook */
}

.stats-module__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
}

.stats-module__icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-accent, var(--color-primary, inherit));
    margin-bottom: 0.25rem;
}

.stats-module__number {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    color: var(--color-primary, var(--color-heading, inherit));
    font-weight: 700;
    line-height: 1;
}

.stats-module__value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stats-module__prefix,
.stats-module__suffix {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stats-module__label {
    margin: 0.5rem 0 0;
    color: var(--color-text-muted, var(--color-text, inherit));
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ==========================================================================
   Donation Form Module
   ========================================================================== */

.donation-form-module__container {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.donation-form-module__form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: left;
}

.donation-form-module__label {
    font-family: var(--font-heading, inherit);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    margin: 1.5rem 0 0.625rem;
}

.donation-form-module__label--first {
    margin-top: 0;
}

.donation-form-module__label--spaced {
    margin-top: 1.5rem;
}

/* Frequency toggle */
.donation-form-module__freq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 4px;
    margin-bottom: 1.5rem;
}

.donation-form-module__freq-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 0.75rem 0;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: calc(var(--border-radius) - 2px);
    transition: background 0.15s, color 0.15s;
}

.donation-form-module__freq-btn[aria-selected="true"] {
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
}

.donation-form-module__freq-btn:hover:not([aria-selected="true"]) {
    color: var(--color-text);
}

.donation-form-module__freq-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Amount tiles */
.donation-form-module__tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.donation-form-module__tier {
    appearance: none;
    cursor: pointer;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--border-radius);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.donation-form-module__tier:hover {
    border-color: var(--color-accent);
}

.donation-form-module__tier:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.donation-form-module__tier[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary, #fff);
}

.donation-form-module__tier-amount {
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
}

.donation-form-module__tier-impact {
    font-family: var(--font-body, inherit);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.375rem;
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0;
}

/* Field shells (custom amount, designation, dedication input, employer-match input) */
.donation-form-module__field {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}

.donation-form-module__field:focus-within {
    border-color: var(--color-accent);
}

.donation-form-module__field--select {
    position: relative;
}

.donation-form-module__field--select::after {
    content: '\25be'; /* ▾ */
    color: var(--color-text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.donation-form-module__prefix {
    color: var(--color-accent);
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 1rem;
}

.donation-form-module__input {
    flex: 1;
    min-width: 0;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
}

.donation-form-module__input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.donation-form-module__input--block {
    width: 100%;
}

/* Hide number input spinners (custom amount looks cleaner without them) */
.donation-form-module__custom-amount-input::-webkit-outer-spin-button,
.donation-form-module__custom-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.donation-form-module__custom-amount-input {
    -moz-appearance: textfield;
}

/* Custom checkbox */
.donation-form-module__check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    cursor: pointer;
}

.donation-form-module__check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.donation-form-module__check-box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.donation-form-module__check-box::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-on-primary, #fff);
    border-radius: 1px;
    transform: scale(0);
    transition: transform 0.12s;
}

.donation-form-module__check-input:checked + .donation-form-module__check-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.donation-form-module__check-input:checked + .donation-form-module__check-box::after {
    transform: scale(1);
}

.donation-form-module__check-input:focus-visible + .donation-form-module__check-box {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.donation-form-module__check-fields {
    display: none;
    margin-top: 0.5rem;
}

.donation-form-module__check-fields.is-open {
    display: block;
}

.donation-form-module__hint {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin: 0 0 0.5rem;
}

/* Optional sub-group */
.donation-form-module__optional {
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.875rem 1.125rem;
    margin-top: 1rem;
}

.donation-form-module__optional .donation-form-module__label {
    margin-top: 0;
    margin-bottom: 0.375rem;
}

/* Primary CTA */
.donation-form-module__cta {
    appearance: none;
    border: 0;
    cursor: pointer;
    width: 100%;
    padding: 1.125rem;
    margin-top: 1.5rem;
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: var(--border-radius);
    transition: background 0.15s;
}

.donation-form-module__cta:hover {
    background: color-mix(in oklab, var(--color-primary) 88%, var(--color-text) 12%);
}

.donation-form-module__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.donation-form-module__cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Trust signals */
.donation-form-module__trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.125rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.donation-form-module__trust-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.donation-form-module__trust-lock {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.donation-form-module__trust-pay {
    color: var(--color-text-muted);
    opacity: 0.7;
    font-size: 0.71875rem;
    text-align: center;
}

.donation-form-module__trust-links {
    margin-top: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    justify-content: center;
}

.donation-form-module__trust-link {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px dotted var(--color-border);
    padding: 0 0 1px;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.donation-form-module__trust-link:hover,
.donation-form-module__trust-link:focus-visible {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    outline: none;
}

/* Upsell modal — inherits the form's CTA styling */
.donation-form-module__upsell-modal .modal-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius);
    color: var(--color-text);
}

.donation-form-module__upsell-decline {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.5rem;
}

.donation-form-module__upsell-decline:hover {
    color: var(--color-accent);
}

@media (max-width: 559.98px) {
    .donation-form-module__form {
        padding: 1.25rem;
    }
    .donation-form-module__tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-page__header {
    margin-bottom: 2.5rem;
}

.search-page__title {
    margin: 0 0 1.25rem;
}

.search-page__form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-width: 720px;
}

.search-page__input {
    flex: 1 1 auto;
    font-size: 1.0625rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--border-radius, 0.25rem);
    background: var(--color-surface, #fff);
    color: var(--color-text, inherit);
}

.search-page__input:focus {
    outline: none;
    border-color: var(--color-primary, #E63B2E);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #E63B2E) 20%, transparent);
}

.search-page__submit {
    flex: 0 0 auto;
}

.search-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-page__filter {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted, var(--color-text, inherit));
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 120ms, color 120ms, border-color 120ms;
}

.search-page__filter:hover,
.search-page__filter:focus {
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-primary, #E63B2E);
}

.search-page__filter--active {
    background: var(--color-primary, #E63B2E);
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-on-primary, #fff);
}

.search-page__filter--active:hover,
.search-page__filter--active:focus {
    color: var(--color-on-primary, #fff);
}

.search-page__meta {
    color: var(--color-text-muted, inherit);
    font-size: 0.9375rem;
    margin: 0;
}

.search-page__meta-term {
    color: var(--color-text, inherit);
    font-weight: 600;
}

.search-page__empty {
    padding: 3rem 0;
    color: var(--color-text-muted, inherit);
    text-align: center;
}

.search-page__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-result {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--border-radius, 0.25rem);
    background: var(--color-surface, #fff);
    transition: border-color 120ms, box-shadow 120ms;
}

.search-result:hover {
    border-color: var(--color-primary, #E63B2E);
    box-shadow: var(--shadow-search-result);
}

.search-result__link {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
}

.search-result__thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--border-radius, 0.25rem);
}

.search-result__body {
    flex: 1 1 auto;
    min-width: 0;
}

.search-result__type {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent, #F5A623);
    margin-bottom: 0.25rem;
}

.search-result__title {
    margin: 0 0 0.35rem;
    font-size: var(--font-size-h4);
    color: var(--color-text, inherit);
}

.search-result__summary {
    margin: 0 0 0.35rem;
    color: var(--color-text-muted, inherit);
    line-height: 1.5;
}

.search-result__price {
    margin: 0;
    font-weight: 600;
    color: var(--color-primary, currentColor);
}

.search-page__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.search-page__page-link {
    color: var(--color-primary, currentColor);
    text-decoration: none;
    font-weight: 600;
}

.search-page__page-link:hover,
.search-page__page-link:focus {
    text-decoration: underline;
}

.search-page__page-indicator {
    color: var(--color-text-muted, inherit);
    font-size: 0.9375rem;
}

@media (max-width: 559.98px) {
    .search-page__form {
        flex-direction: column;
    }
    .search-result__link {
        flex-direction: column;
        gap: 0.75rem;
    }
    .search-result__thumb {
        width: 100%;
        height: 180px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Hours module — five layouts (Standard, MultiSet H/V, TodayFocused, SlimStrip)
   Colors map to existing theme + Bootstrap state tokens; no new hex values.
   ────────────────────────────────────────────────────────────────────────── */

.hours-module__schedule-card {
    background-color: var(--color-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--border-radius, 0.5rem);
    padding: 1.25rem 1.5rem;
}

.hours-module__schedule-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hours-module__rows {
    display: flex;
    flex-direction: column;
}

.hours-module__row {
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.hours-module__row:last-child {
    border-bottom: none;
}

.hours-module__row--today {
    background-color: color-mix(in srgb, var(--color-primary, #E63B2E) 8%, transparent);
    border-radius: 0.25rem;
}

.hours-module__row--today .hours-module__row-day {
    color: var(--color-accent, currentColor);
    font-weight: 500;
}

.hours-module__row--today .hours-module__row-time {
    color: var(--color-text, currentColor);
    font-weight: 500;
}

.hours-module__row-note {
    font-size: 0.8125rem;
}

.hours-module__footnote {
    color: var(--color-text-muted, inherit);
    font-size: 0.875rem;
}

/* Side-by-side alert banner — accent left border + warning glyph */
.hours-module__alert {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background-color: color-mix(in srgb, var(--color-primary, #E63B2E) 8%, transparent);
    border-left: 3px solid var(--color-primary, currentColor);
    border-radius: var(--border-radius, 0.375rem);
}

.hours-module__alert-icon {
    color: var(--color-primary, currentColor);
    font-size: 1.25rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.hours-module__alert-body {
    line-height: 1.5;
}

/* Live-status pill (Open / Closing soon / Closed) */
.hours-module__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hours-module__pill-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.hours-module__pill--open {
    color: var(--bs-success-text-emphasis, var(--bs-success, #198754));
    background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.15));
}

.hours-module__pill--closing-soon {
    color: var(--bs-warning-text-emphasis, var(--bs-warning, #ffc107));
    background-color: var(--bs-warning-bg-subtle, rgba(255, 193, 7, 0.15));
}

.hours-module__pill--closed {
    color: var(--bs-danger-text-emphasis, var(--bs-danger, #dc3545));
    background-color: var(--bs-danger-bg-subtle, rgba(220, 53, 69, 0.15));
}

/* TodayFocused: bordered status panel (eyebrow + OPEN/CLOSED on the left,
   pill + today blurb on the right), with a left accent stripe. */
.hours-module__status-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: center;
    padding: 1.5rem 1.75rem;
    margin: 1rem auto 0;
    max-width: var(--hours-module-strip-width, 44rem);
    text-align: left;
    background-color: var(--color-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--border-radius, 0.375rem);
}

.hours-module__status-panel-main {
    flex: 0 0 auto;
}

.hours-module__status-panel-detail {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* TodayFocused: massive OPEN/CLOSED label uses heading font + heading color. */
.hours-module__big-answer {
    font-family: var(--font-display, var(--font-heading, inherit));
    color: var(--color-text, var(--color-heading, inherit));
    line-height: 1;
}

.hours-module__today-blurb {
    color: var(--color-text-muted, inherit);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.hours-module__today-blurb strong {
    color: var(--color-text, inherit);
    font-weight: 600;
}

/* TodayFocused: 7-tile week strip */
.hours-module__week-strip {
    max-width: var(--hours-module-strip-width, 44rem);
}

.hours-module__week-tile {
    flex: 1 1 0;
    min-width: 5.5rem;
    padding: 0.75rem 0.625rem;
    background-color: var(--color-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--border-radius, 0.375rem);
    text-align: center;
}

.hours-module__week-tile--today {
    background-color: color-mix(in srgb, var(--color-accent, #F5A623) 12%, transparent);
    border-color: var(--color-accent, currentColor);
}

.hours-module__week-tile-day {
    color: var(--color-text-muted, inherit);
    margin-bottom: 0.25rem;
}

.hours-module__week-tile--today .hours-module__week-tile-day {
    color: var(--color-accent, currentColor);
}

.hours-module__week-tile-time {
    color: var(--color-text, inherit);
    font-size: 0.875rem;
    font-weight: 500;
}

/* MultiSet: side-by-side or stacked grid of schedule cards */
.hours-module__schedule-grid {
    display: grid;
    gap: 1.5rem;
}

.hours-module--horizontal .hours-module__schedule-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hours-module--vertical .hours-module__schedule-grid {
    grid-template-columns: 1fr;
}

/* SlimStrip: tight one-row bar */
.hours-module--slim-strip {
    /* .py-section has no !important, so later source order wins here without !important.
       Bootstrap .py-0 (has !important) and CustomCss (inline) still override correctly
       when an author explicitly opts out or customizes. */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.hours-module__strip-sep {
    color: var(--color-text-muted, inherit);
    opacity: 0.6;
}

.hours-module__strip-countdown {
    font-variant-numeric: tabular-nums;
}

/* Standard layout: accent-word title + schedule-card chrome.
   CTAs use the shared .btn-cta / .btn-cta--outline classes — same as Hero. */
.hours-module__title-accent {
    color: var(--color-accent, currentColor);
}

.hours-module__cta {
    display: inline-block;
}

.hours-module--standard .hours-module__schedule-card {
    border-left-width: 3px;
    border-left-color: var(--color-accent, currentColor);
}

.hours-module--standard .hours-module__header {
    margin-bottom: .75rem;
}

/* ==========================================================================
   Fundraising Module
   ==========================================================================
   Two layouts share the .fundraising-module base; modifiers split styling:
     .fundraising-module--progress-vertical   → vertical thermometer rail on
                                                 the left with tick marks,
                                                 headline + actions on right.
     .fundraising-module--progress-horizontal → landscape card with live pill,
                                                 horizontal progress bar, and
                                                 a three-up stats row below.
   Fills + accents pull from --color-primary / --color-accent so the layout
   inherits the website theme. Card chrome stays neutral (var(--color-surface)
   fallback to a subtle inset) so it reads correctly on both light and dark
   theme backgrounds.
   ========================================================================== */

.fundraising-module {
    /* base section paint already handled by .py-section / outer wrapper */
}

.fundraising-module__container {
    max-width: 72rem;
}

.fundraising-module__placeholder {
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    padding: 2rem;
}

.fundraising-module__card {
    position: relative;
    padding: 2rem 2.25rem;
}

.fundraising-module__divider {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
    margin: 1rem 0 1.25rem;
}

.fundraising-module__amount-label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    opacity: 0.7;
}

.fundraising-module__amount {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    font-weight: 800;
}

.fundraising-module__goal-text {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    opacity: 0.75;
}

/* ---- Live-fundraiser meta row (Progress Horizontal) ------------------- */

.fundraising-module__meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.fundraising-module__live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-primary, #E63B2E);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary, #E63B2E);
    background: rgba(var(--bs-primary-rgb, 230, 59, 46), 0.08);
}

.fundraising-module__live-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-primary, #E63B2E);
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 230, 59, 46), 0.5);
    animation: fundraising-pulse 1.8s ease-out infinite;
}

@keyframes fundraising-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 230, 59, 46), 0.5); }
    70%  { box-shadow: 0 0 0 0.5rem rgba(var(--bs-primary-rgb, 230, 59, 46), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb, 230, 59, 46), 0); }
}

.fundraising-module__meta-text {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* ---- Headline row (Progress Horizontal) ------------------------------ */

.fundraising-module__headline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.fundraising-module__headline-amounts {
    flex: 1 1 18rem;
}

.fundraising-module__headline-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---- Horizontal progress bar (Progress Horizontal) ------------------- */

.fundraising-module--progress-horizontal .fundraising-module__progress-bar {
    margin-top: 1.5rem;
    height: 10px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    overflow: hidden;
}

.fundraising-module--progress-horizontal .fundraising-module__progress-bar-fill {
    height: 100%;
    background: var(--color-primary, #E63B2E);
    transition: width 600ms ease-out;
    min-width: 4px;
}

/* ---- Stats row (shared by both layouts, three-up) -------------------- */

.fundraising-module__stats-row {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.fundraising-module__stat {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
}

.fundraising-module__stat--accent {
    border-left: 2px solid var(--color-accent, #F5A623);
}

.fundraising-module__stat-value {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
}

.fundraising-module__stat--accent .fundraising-module__stat-value {
    color: var(--color-accent, #F5A623);
}

.fundraising-module__stat-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

/* ==========================================================================
   ProgressVertical layout
   ========================================================================== */

.fundraising-module--progress-vertical .fundraising-module__vertical-layout {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

@media (max-width: 575.98px) {
    .fundraising-module--progress-vertical .fundraising-module__vertical-layout {
        grid-template-columns: 1fr;
    }
}

.fundraising-module__vertical-rail {
    position: relative;
    display: flex;
    gap: 1.25rem;
    min-height: 22rem;
}

.fundraising-module__vertical-track {
    position: relative;
    width: 3.25rem;
    border-radius: 1.625rem;
    background: rgba(0, 0, 0, 0.32);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.fundraising-module__vertical-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        var(--color-accent, var(--color-primary, #E63B2E)) 0%,
        var(--color-primary, #E63B2E) 100%
    );
    transition: height 600ms ease-out;
    min-height: 6px;
}

.fundraising-module__vertical-bulb {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-primary, #E63B2E);
}

.fundraising-module__vertical-ticks {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    font-size: 0.75rem;
}

.fundraising-module__vertical-tick {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    transform: translateY(50%);
}

.fundraising-module__vertical-tick::before {
    content: "";
    width: 0.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

.fundraising-module__vertical-tick-label {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent, #F5A623);
}

.fundraising-module__vertical-tick-amount {
    opacity: 0.75;
    font-weight: 600;
}

.fundraising-module__vertical-content {
    display: flex;
    flex-direction: column;
}

.fundraising-module__actions {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   Toast notification (used by the Share button — reusable primitive)
   ==========================================================================
   First toast in the codebase; future modules can dispatch via window.BrickyardCms.showToast(msg).
   ========================================================================== */

.bcms-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 0.5rem);
    z-index: var(--z-overlay-top);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: var(--shadow-toast);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.bcms-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================================
   MenuModule
   ============================================================================ */

.menu-module__section-anchor-nav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 1rem;
}

.menu-module__section {
    border-radius: 4px;
}

.menu-module__section-title {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.5rem;
}

h3.menu-module__section-title {
    font-size: 2.75rem;
}

.menu-module__item-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
}

.menu-module__item-name {
    line-height: 1.3;
}

.menu-module__item-tag {
    background: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #fff);
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

.menu-module__item-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.menu-module__item-description {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---- Spice markers ----------------------------------------------------- */

.menu-module__spice-marker {
    font-size: 0.9em;
    margin-left: 0.25rem;
    line-height: 1;
}

.menu-module__spice-marker--mild { opacity: 0.7; }
.menu-module__spice-marker--hot { opacity: 0.85; }
.menu-module__spice-marker--extra-hot { opacity: 1; }

/* ---- Allergen chips ---------------------------------------------------- */

.menu-module__allergen-chip {
    background: rgba(220, 53, 69, 0.12);
    color: #842029;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ---- Dietary chips ----------------------------------------------------- */

.menu-module__dietary-chip {
    background: rgba(25, 135, 84, 0.12);
    color: #0f5132;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.menu-module__dietary-chip--vegan,
.menu-module__dietary-chip--vegetarian {
    background: rgba(25, 135, 84, 0.14);
    color: #0f5132;
}

.menu-module__dietary-chip--gluten-free,
.menu-module__dietary-chip--dairy-free {
    background: rgba(13, 110, 253, 0.12);
    color: #084298;
}

.menu-module__dietary-chip--keto,
.menu-module__dietary-chip--pescatarian {
    background: rgba(102, 16, 242, 0.12);
    color: #432874;
}

.menu-module__dietary-chip--halal,
.menu-module__dietary-chip--kosher {
    background: rgba(255, 193, 7, 0.18);
    color: #664d03;
}

/* ---- Tabbed / Accordion shared --------------------------------------- */

.menu-module__tab {
    border: 2px solid var(--color-border, #2A2A2A);
    background: transparent;
    color: var(--color-text-muted, var(--color-text, inherit));
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
    border-radius: 0;
    letter-spacing: 0.25em;
    transition: all 0.3s var(--spring-ease);
}

.menu-module__tab:hover {
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-text, #FFF5E6);
    background: var(--color-border, #2A2A2A);
}

.menu-module__tabs .menu-module__tab[aria-selected="true"] {
    pointer-events: none;
    background: var(--color-border, #2A2A2A);
    border-color: var(--color-primary, #E63B2E);
    color: var(--color-text, #FFF5E6);
}

.menu-module__panel,
.menu-module__section {
    /* Edge-to-edge color paint inside a colored section background */
}

/* ---- Adjustments inside themed (dark-on-color) sections --------------- */

.menu-module__section.module-theme--light .menu-module__item-description,
.menu-module__panel.module-theme--light .menu-module__item-description {
    color: rgba(255, 255, 255, 0.85);
}

.menu-module__section.module-theme--light .menu-module__allergen-chip,
.menu-module__panel.module-theme--light .menu-module__allergen-chip {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.menu-module__section.module-theme--light .menu-module__dietary-chip,
.menu-module__panel.module-theme--light .menu-module__dietary-chip {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ---- Masonry ------------------------------------------------------------ */

.menu-module__masonry {
    position: relative;
}

.menu-module__masonry-sizer,
.menu-module__masonry-item {
    width: 33.333%;
}

.menu-module__masonry--cols-2 .menu-module__masonry-sizer,
.menu-module__masonry--cols-2 .menu-module__masonry-item {
    width: 50%;
}

.menu-module__masonry--cols-4 .menu-module__masonry-sizer,
.menu-module__masonry--cols-4 .menu-module__masonry-item {
    width: 25%;
}

.menu-module__masonry-item {
    float: left;
    padding: 0.75rem;
}

@media (max-width: 767.98px) {
    .menu-module__masonry-sizer,
    .menu-module__masonry-item {
        width: 100% !important;
        float: none;
    }
}

/* =====================================================================
   FundraisingHeroModule
   ---------------------------------------------------------------------
   Hero-band treatment for a fundraising campaign — combines a campaign
   image, headline + description, live progress and donate CTAs.
   Two layouts:
     .fundraising-hero-module--split      → two-column band (image 4:5
                                              left, content + progress right)
     .fundraising-hero-module--full-bleed → full-width background image
                                              with stats card overlay
   All colors flow through theme tokens (--color-primary / --color-accent /
   --color-text / --color-background / --color-surface) so customer themes
   override correctly. Numbers use the existing typography scale.
   ===================================================================== */

.fundraising-hero-module {
    position: relative;
    overflow: hidden;
}

.fundraising-hero-module__container {
    position: relative;
}

.fundraising-hero-module__placeholder {
    padding: 2rem 0;
}

.fundraising-hero-module__eyebrow {
    color: var(--color-primary, #E63B2E);
    letter-spacing: 0.08em;
}

.fundraising-hero-module__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: var(--line-height-heading, 1.1);
    color: inherit;
}

.fundraising-hero-module__description {
    font-size: var(--font-size-body, 1rem);
    line-height: var(--line-height-body, 1.6);
    color: inherit;
}

.fundraising-hero-module__divider {
    border: none;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    opacity: 0.6;
}

.fundraising-hero-module__raised {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.fundraising-hero-module__goal {
    font-size: 0.95rem;
}

.fundraising-hero-module__percent {
    color: var(--color-primary, #E63B2E);
    font-size: 1.125rem;
}

/* ---- Progress bar (shared by both layouts) ---------------------------- */

.fundraising-hero-module__progress-bar {
    height: 10px;
    width: 100%;
    background: var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 5px;
    overflow: hidden;
}

.fundraising-hero-module__progress-bar-fill {
    height: 100%;
    min-width: 4px;
    background: var(--color-primary, #E63B2E);
    border-radius: 5px;
    transition: width 600ms ease-out;
}

.fundraising-hero-module__days-left {
    color: inherit;
    opacity: 0.7;
}

/* =====================================================================
   Layout: Split (two-column band)
   ===================================================================== */

.fundraising-hero-module--split .fundraising-hero-module__image-wrap {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--color-surface, rgba(0, 0, 0, 0.04));
}

.fundraising-hero-module--split .fundraising-hero-module__image {
    object-fit: cover;
    display: block;
}

.fundraising-hero-module--split .fundraising-hero-module__image-placeholder {
    color: var(--color-text, rgba(0, 0, 0, 0.5));
    opacity: 0.5;
    letter-spacing: 0.08em;
}

/* On narrow screens the image collapses below the content. Cap its height
   so the column doesn't push the hero band absurdly tall on mobile. */
@media (max-width: 991.98px) {
    .fundraising-hero-module--split .fundraising-hero-module__image-wrap {
        aspect-ratio: 16 / 9;
        max-height: 60vh;
    }
}

/* =====================================================================
   Layout: Full-bleed (background image + stats card overlay)
   ===================================================================== */

.fundraising-hero-module--full-bleed {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 450px;
    color: var(--color-text, #FFF5E6);
}

.fundraising-hero-module--full-bleed.fundraising-hero-module--has-background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-text, #FFF5E6);
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__content {
    position: relative;
    z-index: var(--z-content);
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__campaign-end {
    color: rgba(255, 255, 255, 0.85);
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__stats-card {
    position: relative;
    z-index: var(--z-content);
    background: rgba(0, 0, 0, 0.55);
    padding: 1.75rem;
    color: #FFF5E6;
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__raised {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__goal {
    opacity: 0.85;
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__progress-bar {
    background: rgba(255, 255, 255, 0.15);
    margin-top: 1rem;
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__stats-row {
    gap: 1rem;
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__stat-block {
    flex: 1 1 0;
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__stat-value {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.fundraising-hero-module--full-bleed .fundraising-hero-module__stat-label {
    opacity: 0.75;
    letter-spacing: 0.06em;
}

/* On narrow screens the stats card stacks below the content; reduce padding. */
@media (max-width: 991.98px) {
    .fundraising-hero-module--full-bleed .fundraising-hero-module__stats-card {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Schedule module — public appointment booking · Direction 01 (Tab Strip)
   All colors/type flow through theme tokens so a customer theme override
   repaints the picker without touching this file. BEM throughout. Ported from
   the design reference's `.sm__*` rules with every `--sm-*` token remapped to
   the CMS theme system. `data-density` / `data-seats` / `data-tz` switches on
   the outer section drive the per-placement render options.
   ========================================================================== */

.schedule-module {
    /* Internal spacing scale; tightened by the compact density. */
    --sched-gap: 0.75rem;
    /* Subtle component radius. The design rounds every surface to 2px even on
       square-cornered themes (Brick House sets --border-radius: 0). Module-local
       so a theme can still override it. */
    --sched-radius: 2px;
    /* Focus/pending glow follows the gold accent (design --sm-primary-soft), not red. */
    --sched-soft: color-mix(in srgb, var(--color-accent, #F5A623) 12%, transparent);
}
.schedule-module[data-density="compact"] {
    --sched-gap: 0.5rem;
}

.schedule-module__header {
    margin-bottom: 2rem;
}

.schedule-module__eyebrow {
    font-family: var(--font-heading, inherit);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--color-accent, #F5A623);
    margin-bottom: 0.75rem;
}

.schedule-module__title {
    font-size: var(--font-size-h2, 2rem);
    margin-bottom: 0.75rem;
}

.schedule-module__description {
    color: var(--color-text-muted, #8C8279);
    max-width: 42rem;
    margin: 0 auto;
}

.schedule-module__booking {
    max-width: 36rem;
    margin: 0 auto;
}

/* Tenant timezone disclosure line. */
.schedule-module__tz {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #8C8279);
    opacity: 0.85;
    margin: 0 0 1rem;
}
.schedule-module[data-tz="hide"] .schedule-module__tz {
    display: none;
}

/* Day tabs — a wrapping row of two-line date pills. */
.schedule-module__days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.schedule-module__day {
    /* Equal-width pills that grow to fill the strip (flex-basis 0 + grow 1).
       Wraps to additional rows when there are more days than fit; each pill in
       a row stays uniform. */
    flex: 1 1 0;
    min-width: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
    border: 1px solid var(--color-text-muted, #8C8279);
    background: var(--color-surface, transparent);
    color: var(--color-text-muted, inherit);
    font-family: var(--font-heading, inherit);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    line-height: 1.1;
    padding: 0.5rem 0.85rem;
    border-radius: var(--sched-radius);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

.schedule-module__day-dow {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.schedule-module__day:hover {
    border-color: var(--color-accent, #F5A623);
    color: var(--color-text, inherit);
}

.schedule-module__day--active {
    background: var(--color-accent, #F5A623);
    border-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #0D0D0D);
}
.schedule-module__day--active .schedule-module__day-dow {
    color: var(--color-on-accent, #0D0D0D);
}

.schedule-module__panel {
    margin-bottom: 0.5rem;
}
.schedule-module__panel-head {
    margin-bottom: 0.75rem;
}
.schedule-module__panel-date {
    font-family: var(--font-heading, inherit);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--color-text-muted, #8C8279);
}

/* Slot grid — a responsive grid of time buttons within the active day panel. */
.schedule-module__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr));
    gap: var(--sched-gap);
    margin-bottom: 1.4rem;
}

.schedule-module__slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    text-align: left;
    border: 1px solid var(--color-text-muted, #8C8279);
    background: var(--color-surface, #1a1a1a);
    color: var(--color-text, inherit);
    font-family: var(--font-body, inherit);
    padding: 0.65rem 0.8rem;
    border-radius: var(--sched-radius);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
}

.schedule-module__slot:hover {
    border-color: var(--color-accent, #F5A623);
}
.schedule-module__slot:active {
    transform: translateY(1px);
}

.schedule-module__slot-time {
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.schedule-module__slot--selected {
    background: var(--color-accent, #F5A623);
    border-color: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #0D0D0D);
}
.schedule-module__slot--selected .schedule-module__seats {
    color: var(--color-on-accent, #0D0D0D);
    opacity: 0.85;
}

.schedule-module__slot[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
    background: transparent;
    border-style: dashed;
}
.schedule-module__slot[aria-disabled="true"] .schedule-module__slot-time {
    text-decoration: line-through;
    color: var(--color-text-muted, #8C8279);
}

/* Seats-remaining affordance (data-seats = hide | count | urgency). State is
   conveyed in text — never color alone (a11y). */
.schedule-module__seats {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #8C8279);
}
.schedule-module__seats--low {
    color: var(--color-accent, #F5A623);
}
.schedule-module__seats--last {
    color: var(--color-primary, #e63b2e);
    font-weight: 600;
}
.schedule-module__seats--full {
    color: var(--color-text-muted, #8C8279);
}
.schedule-module[data-seats="hide"] .schedule-module__seats {
    display: none;
}

/* ---- selected-state summary card + single-event card share this shell ---- */
.schedule-module__summary,
.schedule-module__event {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0 0.5rem;
    background: var(--color-surface, #161616);
    border: 1px solid var(--color-text-muted, #2a2a2a);
    border-left: 3px solid var(--color-accent, #F5A623);
    border-radius: var(--sched-radius);
    padding: 1rem 1.1rem;
}
.schedule-module__summary--empty {
    border-left-color: var(--color-text-muted, #383838);
}

.schedule-module__summary-cal {
    flex: none;
    width: 3.25rem;
    height: 3.5rem;
    border: 1px solid var(--color-text-muted, #383838);
    border-radius: var(--sched-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    background: var(--color-surface, #1a1a1a);
}
.schedule-module__summary-mo {
    background: var(--color-accent, #F5A623);
    color: var(--color-on-accent, #0D0D0D);
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.15rem 0;
}
.schedule-module__summary-day {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--color-text, inherit);
}
.schedule-module__summary-body {
    flex: 1;
    min-width: 0;
}
.schedule-module__summary-when {
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    color: var(--color-text, inherit);
}
.schedule-module__summary--empty .schedule-module__summary-when {
    color: var(--color-text-muted, #8C8279);
}
.schedule-module__summary-meta {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--color-text-muted, #8C8279);
    margin-top: 0.25rem;
}
.schedule-module__summary-change {
    flex: none;
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent, #F5A623);
    background: none;
    border: 0;
    cursor: pointer;
}

/* single-event seats line under the date/range */
.schedule-module__event-seats {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--color-text-muted, #8C8279);
    margin-top: 0.35rem;
}
.schedule-module__event-seats--low {
    color: var(--color-accent, #F5A623);
    font-weight: 600;
}
.schedule-module[data-seats="hide"] .schedule-module__event-seats {
    display: none;
}

/* ── Direction 04 — Event Spotlight (single-event hero) ─────────────────── */
.schedule-module__booking--spotlight {
    /* Wider than the 36rem Tab-Strip column to host the two-column hero. */
    max-width: 64rem;
}
.schedule-module__spot {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid var(--color-text-muted, #2a2a2a);
    border-radius: var(--sched-radius);
    overflow: hidden;
    background: var(--color-surface, #161616);
}

/* Left media panel: admin image or striped placeholder + oversized date block. */
.schedule-module__spot-media {
    position: relative;
    min-height: 360px;
    background: var(--color-surface, #1a1a1a);
}
.schedule-module__spot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.schedule-module__spot-placeholder {
    position: absolute;
    inset: 0;
    /* Subtle diagonal hatch so the panel reads as a deliberate placeholder. */
    background-image: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-text-muted, #2a2a2a) 28%, transparent) 0,
        color-mix(in srgb, var(--color-text-muted, #2a2a2a) 28%, transparent) 1px,
        transparent 1px,
        transparent 12px);
}
.schedule-module__spot-placeholder-text {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #8C8279);
    border: 1px solid var(--color-text-muted, #383838);
    border-radius: var(--sched-radius);
    padding: 0.3rem 0.6rem;
}
.schedule-module__spot-bigday {
    position: absolute;
    left: 1.5rem;
    bottom: 1.25rem;
    display: flex;
    flex-direction: column;
}
.schedule-module__spot-mo {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent, #F5A623);
}
.schedule-module__spot-day {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    line-height: 0.9;
    color: var(--color-text, #f3ead8);
}
.schedule-module__spot-fulldate {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--color-text-muted, #a8a293);
    margin-top: 0.4rem;
}

/* Right body: eyebrow, title, facts, seats meter, timezone, intake form. */
.schedule-module__spot-body {
    padding: 1.75rem;
}
.schedule-module--spotlight[data-density="compact"] .schedule-module__spot-body {
    padding: 1.25rem;
}
.schedule-module__spot-title {
    font-size: var(--font-size-display, 2.75rem);
    line-height: 1.02;
    margin: 0.25rem 0 1.1rem;
}

.schedule-module__facts {
    margin: 0 0 1.1rem;
    border-top: 1px solid var(--color-text-muted, #2a2a2a);
}
.schedule-module__fact {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-text-muted, #2a2a2a);
}
.schedule-module__fact-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted, #8C8279);
}
.schedule-module__fact-value {
    margin: 0;
    font-family: var(--font-heading, inherit);
    font-weight: 600;
    color: var(--color-text, inherit);
}

/* Seats meter — bar + "N of M seats left". Text conveys state (a11y), color reinforces. */
.schedule-module__meter {
    margin-bottom: 1.1rem;
}
.schedule-module__meter-track {
    height: 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted, #2a2a2a) 45%, transparent);
    overflow: hidden;
}
.schedule-module__meter-fill {
    height: 100%;
    background: var(--color-accent, #F5A623);
}
.schedule-module__meter-label {
    margin: 0.4rem 0 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--color-text-muted, #8C8279);
}
.schedule-module__meter--low .schedule-module__meter-label {
    color: var(--color-accent, #F5A623);
    font-weight: 600;
}
.schedule-module[data-seats="hide"] .schedule-module__meter {
    display: none;
}

@media (max-width: 768px) {
    .schedule-module__spot {
        grid-template-columns: 1fr;
    }
    .schedule-module__spot-media {
        min-height: 220px;
    }
}

/* ---- intake form ---- */
.schedule-module__form {
    margin-top: 0.75rem;
}
.schedule-module__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sched-gap);
    margin-bottom: 1rem;
}

.schedule-module__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.schedule-module__field--full {
    grid-column: 1 / -1;
}

.schedule-module__label {
    display: block;
    font-family: var(--font-heading, inherit);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted, #8C8279);
}

.schedule-module__optional {
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.6;
}

.schedule-module__input {
    background-color: var(--color-surface, #161616);
    border: 1px solid var(--color-text-muted, #383838);
    border-radius: var(--sched-radius);
    color: var(--color-text, inherit);
    font-family: var(--font-body, inherit);
    padding: 0.65rem 0.8rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.schedule-module__input:focus {
    outline: none;
    border-color: var(--color-accent, #F5A623);
    box-shadow: 0 0 0 3px var(--sched-soft);
    background-color: var(--color-surface, #161616);
}

/* confirmation-expectation helper (driven by data-confirm) */
.schedule-module__confirm-hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--color-text-muted, #8C8279);
    margin: 0 0 1rem;
}
.schedule-module__confirm-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    flex: none;
    background: var(--color-success, #5b9c61);
}
.schedule-module[data-confirm="request"] .schedule-module__confirm-dot {
    background: var(--color-accent, #F5A623);
}

/* CTA — base look comes from the theme's .btn-cta; we add the spinner. */
.schedule-module__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.schedule-module__spin {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: schedule-spin 0.7s linear infinite;
}
@keyframes schedule-spin {
    to { transform: rotate(360deg); }
}

.schedule-module__error {
    color: var(--color-primary, #e63b2e);
    font-size: 0.82rem;
    margin-top: 0.75rem;
}

.schedule-module__empty,
.schedule-module__unavailable {
    text-align: center;
    color: var(--color-text-muted, #8C8279);
    padding: 1.75rem 1.25rem;
    border: 1px dashed var(--color-text-muted, #383838);
    border-radius: var(--sched-radius);
}

/* success boxes (confirmed = check, pending = envelope) */
.schedule-module__success {
    text-align: center;
    padding: 2.25rem 1.75rem;
    border: 1px solid var(--color-text-muted, #2a2a2a);
    border-radius: var(--sched-radius);
    background: var(--color-surface, #161616);
    color: var(--color-text, inherit);
}
.schedule-module__success-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.schedule-module__success--confirmed .schedule-module__success-badge {
    background: color-mix(in srgb, var(--color-success, #5b9c61) 15%, transparent);
    color: var(--color-success, #5b9c61);
    border: 1px solid var(--color-success, #5b9c61);
}
.schedule-module__success--pending .schedule-module__success-badge {
    background: var(--sched-soft);
    color: var(--color-accent, #F5A623);
    border: 1px solid var(--color-accent, #F5A623);
}
.schedule-module__success-title {
    font-family: var(--font-heading, inherit);
    font-size: var(--font-size-h3, 1.5rem);
    margin-bottom: 0.5rem;
}
.schedule-module__success-body {
    color: var(--color-text-muted, #8C8279);
    max-width: 24rem;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .schedule-module__fields {
        grid-template-columns: 1fr;
    }
}

/* ── Quote Module ──────────────────────────────────────────────────────────── */
.quote-module__eyebrow { /* theme override hook */ }
.quote-module__title   { /* theme override hook */ }

/* The eyebrow sits directly above the quote, so collapse the shared header's
   section-sized bottom margin. Quote never renders a title or header content. */
.quote-module__header {
    margin-bottom: 1rem;
}

.quote-module__eyebrow {
    color: var(--color-accent, #F5A623);
}

/* Decorative mark — QuoteMarkStyleEnum.Glyph. Block-level so it owns its own
   line; horizontal placement follows the container's text-align. */
.quote-module__mark {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    color: var(--color-accent, #F5A623);
}

/* QuoteMarkStyleEnum.Bar. An explicit-width block does NOT follow text-align,
   so alignment is carried by margin-inline per modifier. */
.quote-module__rule {
    display: block;
    width: 3rem;
    height: 3px;
    margin-bottom: 1.5rem;
    background-color: var(--color-accent, #F5A623);
}

.quote-module--center .quote-module__rule { margin-inline: auto; }
.quote-module--left   .quote-module__rule { margin-inline: 0; }
.quote-module--right  .quote-module__rule { margin-inline: auto 0; }

.quote-module__figure {
    margin: 0;
}

.quote-module__body {
    margin: 0;
    margin-inline: auto;
    max-width: 56rem;
    font-family: var(--font-heading, inherit);
    font-style: italic;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    line-height: var(--line-height-heading, 1.25);
}

.quote-module__body p:last-child {
    margin-bottom: 0;
}

.quote-module__attribution {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    opacity: 0.8;
}

.quote-module__attribution::before {
    content: "— ";
}

/* ============================================================
   Newsletter module — email signup band. Input + button inline
   at ≥sm (Bootstrap flex utilities in the view), stacked below.
   ============================================================ */

/* Theme override hooks — keep these first even when empty. */
.newsletter-module__eyebrow {}
.newsletter-module__title {}

.newsletter-module__form {
    max-width: 34rem;
}

.newsletter-module__input {
    flex: 1 1 auto;
}

.newsletter-module__button {
    white-space: nowrap;
}

.newsletter-module__consent {
    max-width: 34rem;
    margin-inline: auto;
    opacity: 0.75;
}

.newsletter-module__success {
    font-weight: 600;
}

.newsletter-module__error {
    color: var(--bs-danger, #dc3545);
}

/* ==========================================================================
   Countdown Module
   ========================================================================== */

/* Theme override hooks — keep these first even when empty. */
.countdown-module__eyebrow {}
.countdown-module__title {}

/* Base — shared by all three layouts */
/* .countdown-module__clock centers each unit as a flex item (d-flex
   justify-content-center in the view), but that only positions the unit box
   itself — it doesn't center the value/label text inside it. Without this,
   the wide digit span happens to nearly fill its box and looks centered by
   coincidence, while the much narrower label sits flush left underneath. */
.countdown-module__unit {
    text-align: center;
}

.countdown-module__value {
    color: var(--color-primary, inherit);
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.countdown-module__unit--seconds .countdown-module__value {
    color: var(--color-accent, var(--color-primary, inherit));
}

.countdown-module__label {
    display: block;
    margin-top: 0.5rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted, var(--color-text, inherit));
}

.countdown-module__cta {
    display: inline-block;
    margin-top: 2rem;
}

.countdown-module__expiry {
    margin-top: 1rem;
    color: var(--color-text-muted, var(--color-text, inherit));
    font-size: 0.9rem;
}

/* expiredBehavior: 2 (keep counting up) — applied by site.js once the clock
   crosses zero. Softens the accent color so "counting up" reads differently
   from an active countdown at a glance. */
.countdown-module--elapsed .countdown-module__unit--seconds .countdown-module__value {
    opacity: 0.7;
}

/* ---- Default layout ---- */
.countdown-module--default .countdown-module__clock {
    gap: 0;
}

.countdown-module--default .countdown-module__unit {
    padding: 0 40px;
    border-left: 1px solid var(--color-border, currentColor);
}

.countdown-module--default .countdown-module__unit:first-child {
    border-left: none;
}

.countdown-module--default .countdown-module__value {
    font-size: 5.125rem;
}

@media (max-width: 767.98px) {
    .countdown-module--default .countdown-module__clock {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--color-border, #e5e5e5);
    }

    .countdown-module--default .countdown-module__unit {
        border-left: none;
        background: var(--color-surface, var(--color-bg, #fff));
        padding: 1rem;
    }

    .countdown-module--default .countdown-module__value {
        font-size: 2.875rem;
    }

    .countdown-module--default .countdown-module__label,
    .countdown-module--flip .countdown-module__label {
        font-size: 10px;
    }
}

/* ---- Boxed restyle (opt-in via cssClass, a Default restyle for tenants who want cards) ---- */
.countdown-module--boxed .countdown-module__unit {
    border: 1px solid var(--color-border, currentColor);
    border-radius: var(--border-radius, 0.5rem);
    padding: 1.5rem 1rem;
}

.countdown-module--boxed .countdown-module__clock {
    gap: 1rem;
}

/* ---- Flip layout ---- */
.countdown-module--flip .countdown-module__clock {
    gap: 26px;
}

.countdown-module--flip .countdown-module__cards {
    display: flex;
    gap: 4px;
}

.countdown-module--flip .countdown-module__card {
    position: relative;
    display: inline-block;
    width: 74px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-primary, #1a1a1a) 88%, #000);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 16px rgba(0, 0, 0, 0.25);
    perspective: 260px;
}

/* The seam: a physical split-flap card is two hinged panels, so the digit reads as cut
   in half by a thin center line, with the top panel catching light and the bottom panel
   sitting in its shadow. Drawn as an overlay above the digit rather than as two clipped
   copies of it, so the flip animation underneath doesn't have to know about the seam. */
.countdown-module--flip .countdown-module__card::before,
.countdown-module--flip .countdown-module__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 2;
    pointer-events: none;
}

.countdown-module--flip .countdown-module__card::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}

.countdown-module--flip .countdown-module__card::after {
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 60%);
}

.countdown-module--flip .countdown-module__card-face,
.countdown-module--flip .countdown-module__card-flap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 62px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    backface-visibility: hidden;
}

.countdown-module--flip .countdown-module__card-flap {
    transform-origin: bottom center;
    transform: rotateX(0deg);
}

.countdown-module--flip .countdown-module__card--flipping .countdown-module__card-flap {
    animation: countdown-flip 0.45s var(--spring-ease);
}

@keyframes countdown-flip {
    0% { transform: rotateX(-92deg); }
    100% { transform: rotateX(0deg); }
}

/* Flip's CTA is a block with width:fit-content rather than the base inline-block,
   so the container's text-align cannot move it — margin-inline is what positions it,
   and the auto/0 pairing has to track .countdown-module--{left|center|right} or a
   left-aligned Flip keeps a centered button while its header moves. Same technique
   as .quote-module__rule. The mobile rule below takes the button full-width, where
   the question stops applying. */
.countdown-module--flip .countdown-module__cta {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

.countdown-module--flip.countdown-module--left .countdown-module__cta {
    margin-inline: 0 auto;
}

.countdown-module--flip.countdown-module--right .countdown-module__cta {
    margin-inline: auto 0;
}

@media (max-width: 767.98px) {
    .countdown-module--flip .countdown-module__clock {
        gap: 12px;
    }

    .countdown-module--flip .countdown-module__card {
        width: 42px;
        height: 58px;
    }

    .countdown-module--flip .countdown-module__card-face,
    .countdown-module--flip .countdown-module__card-flap {
        font-size: 36px;
    }

    .countdown-module--flip .countdown-module__cta {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .countdown-module--flip .countdown-module__card--flipping .countdown-module__card-flap {
        animation: none;
    }
}

/* ---- Ring layout ---- */
.countdown-module--ring .countdown-module__dial {
    position: relative;
    width: 132px;
    height: 132px;
}

.countdown-module--ring .countdown-module__arc {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-module--ring .countdown-module__arc-track {
    fill: none;
    stroke: var(--color-border, currentColor);
    stroke-width: 6;
}

.countdown-module--ring .countdown-module__arc-fill {
    fill: none;
    stroke: var(--color-accent, var(--color-primary, currentColor));
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s var(--spring-ease);
}

.countdown-module--ring .countdown-module__dial .countdown-module__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    letter-spacing: -0.03em;
}

.countdown-module--ring .countdown-module__clock {
    gap: 1.5rem;
}

@media (max-width: 991.98px) {
    .countdown-module--ring .countdown-module__clock {
        flex-wrap: wrap;
        justify-content: center;
    }

    .countdown-module--ring .countdown-module__dial {
        width: 76px;
        height: 76px;
    }

    .countdown-module--ring .countdown-module__arc-track,
    .countdown-module--ring .countdown-module__arc-fill {
        stroke-width: 8;
    }

    .countdown-module--ring .countdown-module__dial .countdown-module__value {
        font-size: 24px;
    }

    .countdown-module--ring .countdown-module__label {
        font-size: 9px;
    }

    .countdown-module--ring .countdown-module__cta {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .countdown-module--ring .countdown-module__arc-fill {
        transition: none;
    }
}

/* ============================================================================
   PricingTiers module (enum 41) — append to BrickyardCms.Web/wwwroot/css/site.css

   Three layouts share this block; the root <section> carries exactly one of
   .pricing-tiers-module--cards | --rows | --spotlight.
   No new tokens, no !important, no Bootstrap override beyond the shipped grid
   classes. The tier card is NOT a Bootstrap .card — only the grid is Bootstrap.
   ============================================================================ */

/* ── Shared: the tier card ─────────────────────────────────────────────────── */
.pricing-tiers-module__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.75rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: transform .35s var(--spring-ease), box-shadow .35s var(--spring-ease);
}

.pricing-tiers-module__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.pricing-tiers-module__card--featured {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.pricing-tiers-module__badge {
    position: absolute;
    top: 0;
    left: 1.75rem;
    transform: translateY(-50%);
    padding: .35rem .7rem;
    white-space: nowrap;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--border-radius);
}

.pricing-tiers-module__name {
    margin: 0 0 1.25rem;
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.pricing-tiers-module__price-row {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: 1.1rem;
}

.pricing-tiers-module__price {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-heading);
    line-height: 1;
}

.pricing-tiers-module__period {
    font-size: .85rem;
    color: var(--color-text-muted);
}

/* __item-content, NOT __content — __content is the module header's slot */
.pricing-tiers-module__item-content {
    margin: 0 0 1.75rem;
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    text-wrap: pretty;
}

.pricing-tiers-module__item-content ul { padding-left: 1.1rem; margin: 0; }

.pricing-tiers-module__footer { margin-top: auto; }

.pricing-tiers-module__cta {
    display: block;
    width: 100%;
    text-align: center;
}

/* Wrapper for badge + name + price. Emitted in Rows and Spotlight only. */
.pricing-tiers-module__identity { display: block; }

/* ── Layout 1: Rows ───────────────────────────────────────────────────────────
   Identity column is capped and the CTA column sizes to its label, so all
   remaining width goes to the copy. Do not give the CTA a fixed track. */
.pricing-tiers-module--rows .pricing-tiers-module__grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.pricing-tiers-module--rows .pricing-tiers-module__card {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) max-content;
    align-items: center;
    gap: 2rem 2.5rem;
    padding: 1.5rem 1.75rem;
}

/* A full-width band that lifts on hover looks wrong; darken the border instead */
.pricing-tiers-module--rows .pricing-tiers-module__card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-text-muted);
}

.pricing-tiers-module--rows .pricing-tiers-module__card--featured:hover { border-color: var(--color-primary); }
.pricing-tiers-module--rows .pricing-tiers-module__identity { display: flex; flex-direction: column; gap: .55rem; }
.pricing-tiers-module--rows .pricing-tiers-module__badge { position: static; transform: none; align-self: flex-start; }
.pricing-tiers-module--rows .pricing-tiers-module__name { margin: 0; }
.pricing-tiers-module--rows .pricing-tiers-module__price-row { margin: 0; }
.pricing-tiers-module--rows .pricing-tiers-module__price { font-size: var(--font-size-h3); }
.pricing-tiers-module--rows .pricing-tiers-module__item-content { margin: 0; }
.pricing-tiers-module--rows .pricing-tiers-module__footer { margin: 0; }
.pricing-tiers-module--rows .pricing-tiers-module__cta { display: inline-block; width: auto; justify-self: end; }

/* ── Layout 2: Spotlight ──────────────────────────────────────────────────── */
.pricing-tiers-module__spotlight {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: center;
    padding: 2.5rem;
    margin-bottom: 1.25rem;
}

.pricing-tiers-module__spotlight .pricing-tiers-module__identity { display: flex; flex-direction: column; gap: .75rem; }
.pricing-tiers-module__spotlight .pricing-tiers-module__badge { position: static; transform: none; align-self: flex-start; }
.pricing-tiers-module__spotlight .pricing-tiers-module__name { margin: 0; }
.pricing-tiers-module__spotlight .pricing-tiers-module__price-row { margin: 0; }
.pricing-tiers-module__spotlight .pricing-tiers-module__price { font-size: clamp(2.75rem, 3vw + 1.25rem, 3.5rem); }
.pricing-tiers-module__spotlight .pricing-tiers-module__item-content { margin: 0 0 1.5rem; font-size: 1.0625rem; }
.pricing-tiers-module__spotlight .pricing-tiers-module__footer { margin: 0; }
.pricing-tiers-module__spotlight .pricing-tiers-module__cta { display: inline-block; width: auto; }

/* The secondary row under the panel */
.pricing-tiers-module--spotlight .pricing-tiers-module__grid .pricing-tiers-module__card { padding: 1.5rem; }
.pricing-tiers-module--spotlight .pricing-tiers-module__grid .pricing-tiers-module__price { font-size: var(--font-size-h3); }
.pricing-tiers-module--spotlight .pricing-tiers-module__grid .pricing-tiers-module__item-content { margin-bottom: 1.25rem; font-size: .9375rem; }

/* ── Custom-amount footnote (customCtaStyle 1) ────────────────────────────── */
.pricing-tiers-module__note {
    margin: 1.75rem 0 0;
    font-size: .9375rem;
    color: var(--color-text-muted);
    text-align: center;
}

.pricing-tiers-module__note a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.pricing-tiers-module__note a:hover { color: var(--color-secondary); }
.pricing-tiers-module--rows .pricing-tiers-module__note { text-align: left; margin-top: 1.25rem; }

/* ── Responsive ───────────────────────────────────────────────────────────────
   Rows stacks at lg, one breakpoint earlier than the others: below 992px the
   copy column is squeezed past a readable measure. */
@media (max-width: 991.98px) {
    .pricing-tiers-module--rows .pricing-tiers-module__card { grid-template-columns: 1fr; gap: 1.25rem; }
    .pricing-tiers-module--rows .pricing-tiers-module__cta { display: block; width: 100%; justify-self: stretch; }
}

@media (max-width: 767.98px) {
    .pricing-tiers-module__spotlight { grid-template-columns: 1fr; gap: 1.25rem; }
    .pricing-tiers-module__spotlight .pricing-tiers-module__cta { display: block; width: 100%; }
}

/* ── On-color sections (background: primary|secondary|accent) ──────────────────
   Same pattern site.css already has for FAQ. */
.module-theme--light .pricing-tiers-module__card { background: transparent; border-color: rgba(255, 255, 255, .25); }

.module-theme--light .pricing-tiers-module__name,
.module-theme--light .pricing-tiers-module__period,
.module-theme--light .pricing-tiers-module__item-content,
.module-theme--light .pricing-tiers-module__note { color: inherit; opacity: .85; }

.module-theme--light .pricing-tiers-module__card--featured {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.module-theme--light .pricing-tiers-module__note a { color: inherit; }

/* Theme override hooks — the module-header partial emits these two on every module. */
.pricing-tiers-module__eyebrow { /* theme override hook */ }
.pricing-tiers-module__title { /* theme override hook */ }

/* ============================================================================
   Sponsors module (enum 42) — append to BrickyardCms.Web/wwwroot/css/site.css

   Three layouts share this block; the root <section> carries exactly one of
   .sponsors-module--cards | --tiered | --logos.

   Forked from the PricingTiers block (enum 41): same card shell, same hover
   lift, same badge type, so a sponsorship page can run PricingTiers above (the
   ask) and Sponsors below (the thank-you) and read as one family.

   No new tokens, no !important, no Bootstrap override beyond the shipped grid
   classes. The sponsor card is NOT a Bootstrap .card — unlike Team, it needs a
   fixed-ratio logo frame and a footer pinned by margin-top:auto, neither of
   which .card / .card-footer give cleanly. Only the grid is Bootstrap, and the
   Logos layout drops even that.
   ============================================================================ */

/* ── Shared: the sponsor card ─────────────────────────────────────────────── */
.sponsors-module__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius, 0.5rem);
    transition: transform .35s var(--spring-ease), box-shadow .35s var(--spring-ease);
}

.sponsors-module__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* ── The logo frame ────────────────────────────────────────────────────────────
   Always rendered, logo or not. A missing logo must not collapse the frame, or
   the card above it rides up and the row loses its grid. The fixed aspect-ratio
   is what makes ragged logo dimensions land on one baseline. */
.sponsors-module__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: var(--border-radius, 0.5rem);
    overflow: hidden;
}

.sponsors-module__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sponsors-module__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* imageFit 1 (Cover) — for tenants who supply storefront photos, not wordmarks */
.sponsors-module__image-wrap--cover { padding: 0; }

.sponsors-module__image-wrap--cover .sponsors-module__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Third fallback: no item imageUrl AND no module defaultImageUrl */
.sponsors-module__image-wrap--empty { border: 1px dashed var(--color-border); }

.sponsors-module__image-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--color-text-muted);
    opacity: .5;
}

.sponsors-module__image-fallback i { font-size: 1.75rem; line-height: 1; }

.sponsors-module__image-fallback span {
    font-family: var(--font-heading);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── Identity + copy ──────────────────────────────────────────────────────── */
.sponsors-module__level {
    align-self: flex-start;
    padding: .3rem .6rem;
    margin-bottom: .55rem;
    white-space: nowrap;
    background: var(--color-primary);
    color: var(--color-on-primary, #ffffff);
    border-radius: var(--border-radius, 0.5rem);
}

.sponsors-module__name {
    margin: 0 0 .4rem;
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-heading);
    line-height: 1.25;
}

/* __item-content, NOT __content — __content is the module header's slot */
.sponsors-module__item-content {
    margin: 0 0 1.1rem;
    font-size: .9375rem;
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    text-wrap: pretty;
}

.sponsors-module__item-content ul { padding-left: 1.1rem; margin: 0; }

.sponsors-module__footer { margin-top: auto; }

.sponsors-module__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}

.sponsors-module__link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: .25em;
}

.sponsors-module__link-icon { font-size: .95em; }

/* ── Layout 1: Tiered ─────────────────────────────────────────────────────────
   One group per level, highest levelRank first. The per-card badge is suppressed
   here — the ruled group heading carries the level, so it is not repeated on
   every card. Logo size comes from the group's column count, not a per-item
   field, so nothing has to be re-authored to change the hierarchy. */
.sponsors-module__tier { margin-bottom: 2.75rem; }
.sponsors-module__tier:last-child { margin-bottom: 0; }

.sponsors-module__tier-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.sponsors-module__tier-name {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sponsors-module__tier-rule { flex: 1 1 auto; height: 1px; background: var(--color-border); }
.sponsors-module__tier-count { flex: 0 0 auto; font-size: .8rem; color: var(--color-text-muted); }

.sponsors-module--tiered .sponsors-module__tier--lead .sponsors-module__image-wrap { aspect-ratio: 16 / 7; }
.sponsors-module--tiered .sponsors-module__tier--lead .sponsors-module__name { font-size: var(--font-size-h3); }

/* ── Layout 2: Logos ──────────────────────────────────────────────────────────
   A compact wall. One DOM order serves all three layouts; flex `order` moves the
   level below the name here rather than changing the emitted markup. */
.sponsors-module--logos .sponsors-module__grid { display: flex; flex-wrap: wrap; gap: .75rem; }

/* height:100% is a SPECIFIED cross-size, and a specified cross-size cancels
   align-self:stretch — so in a flex wall each card sizes to its own content and
   a two-line company name leaves the row's bottom edges staggered. The wall
   needs height:auto plus an explicit stretch. Do not drop these two values. */
.sponsors-module--logos .sponsors-module__card {
    flex: 1 1 190px;
    max-width: 260px;
    height: auto;
    align-self: stretch;
    align-items: center;
    padding: 1rem;
    text-align: center;
}

.sponsors-module--logos .sponsors-module__image-wrap { width: 100%; aspect-ratio: 3 / 2; margin-bottom: .7rem; }
.sponsors-module--logos .sponsors-module__name { order: 1; margin: 0; font-size: .9375rem; }

.sponsors-module--logos .sponsors-module__level {
    order: 2;
    align-self: center;
    margin: .45rem 0 0;
    padding: .22rem .55rem;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* order:3 + margin-top:auto — the footer still pins to the card bottom */
.sponsors-module--logos .sponsors-module__footer { order: 3; margin-top: auto; padding-top: .6rem; }

/* ── Optional footnote (customCtaStyle 1) — same pattern as PricingTiers ───── */
.sponsors-module__note {
    margin: 2rem 0 0;
    font-size: .9375rem;
    color: var(--color-text-muted);
    text-align: center;
}

.sponsors-module__note a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.sponsors-module__note a:hover { color: var(--color-secondary); }

/* ── Responsive ───────────────────────────────────────────────────────────────
   Cards and Tiered stack via the Bootstrap row-cols-* classes they emit. Only
   the flex wall and the tier count need a rule. */
@media (max-width: 575.98px) {
    .sponsors-module--logos .sponsors-module__card { flex: 1 1 100%; max-width: none; }
    .sponsors-module__tier-count { display: none; }
}

/* ── On-color sections (background: primary|secondary|accent) ──────────────────
   Same pattern site.css already has for FAQ, with one addition: the logo frame
   keeps a near-white ground. Most supplied logos are dark ink on transparent and
   disappear entirely on a primary fill. */
.module-theme--light .sponsors-module__card { background: transparent; border-color: rgba(255, 255, 255, .25); }
.module-theme--light .sponsors-module__image-wrap { background: rgba(255, 255, 255, .92); }
.module-theme--light .sponsors-module__name { color: inherit; }

.module-theme--light .sponsors-module__item-content,
.module-theme--light .sponsors-module__note,
.module-theme--light .sponsors-module__tier-count { color: inherit; opacity: .85; }

.module-theme--light .sponsors-module__link,
.module-theme--light .sponsors-module__tier-name { color: inherit; }

.module-theme--light .sponsors-module__tier-rule { background: rgba(255, 255, 255, .3); }
.module-theme--light .sponsors-module__note a { color: inherit; }
.module-theme--light .sponsors-module--logos .sponsors-module__level { color: inherit; border-color: rgba(255, 255, 255, .35); }

/* Theme override hooks — the module-header partial emits these two on every module. */
.sponsors-module__eyebrow { /* theme override hook */ }
.sponsors-module__title { /* theme override hook */ }