/*
Theme Name: Beacon of Hope Project
Theme URI: https://beaconofhopeprojectaus.org
Author: Beacon of Hope Project
Description: Custom theme for the Beacon of Hope Project — an Illawarra-based, peer-led not-for-profit. Accessible (WCAG 2.2 AA — 2.2 delta audited 2026-07-28: 2.5.8/2.4.11/3.3.8/3.3.7), warm, person-centred. Self-hosted fonts (no external requests).
Version: 0.8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bohp
*/

/* ============================================================
   Self-hosted brand font — Nunito Sans (variable, weights 400–800)
   Bundled 2026-07-14 to remove the Google Fonts external request
   (privacy + performance + offline reliability). Latin + Latin-Ext
   subsets only; SIL Open Font License. Same font as before.
   ============================================================ */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/nunito-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/nunito-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway (variable, 400–900) — interim brand font per Jessie 2026-07-24:
   less rounded, professional but feminine. Self-hosted (SIL OFL), same
   no-external-requests rule. Replaces Nunito Sans site-wide until Sam
   confirms the Canva brand font; Nunito files retained for quick revert. */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/raleway-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/raleway-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   BOHP brand tokens (contrast-checked WCAG 2.1 AA)
   ============================================================ */
:root {
    --bohp-pink:        #FF6DA8; /* Sam's brand value 2026-07-15 (was #FE6DA8) — bg/decorative/large only, 2.6:1 as text on white */
    --bohp-pink-mid:    #F9A8C9; /* Sam 2026-07-15 — backgrounds only; ink on it 7.0:1, ink-soft FAILS (3.7:1) */
    --bohp-pink-soft:   #FFE3EF;
    --bohp-purple:      #A04193;
    --bohp-purple-deep: #7A2E70; /* links / small text — AA on white */
    --bohp-lilac:       #CF7FB1;
    --bohp-blue:        #AFE4EC;
    --bohp-blue-deep:   #1F6B78; /* teal for small text on light — 6.1:1 white / 5.7:1 cream (was #2A8595, 4.3:1 — FAILED its own comment; darkened 2026-07-28) */
    --bohp-peach:       #FFD9AC;
    --bohp-cream:       #FFF4EC;
    --bohp-ink:         #2D3142;
    --bohp-ink-soft:    #565a6b;
    --bohp-white:       #FFFFFF;
    --bohp-line:        #f7d9e5; /* DECORATIVE hairlines only (dividers, card edges) — 1.3:1, fails 1.4.11 as a control boundary */
    --bohp-border-control: #B07EA8; /* resting border for inputs/selects — 3.28:1 white / 3.03:1 cream (WCAG 1.4.11 non-text) */

    /* Spacing scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: clamp(3rem, 6vw, 5rem);

    --bohp-radius-pill: 999px;  /* demoted 2026-07-24: true toggles/avatars only */
    /* Signature "tuned petal" (Jessie pick C, 2026-07-24): the flame in the
       corners, 2:1 asymmetry. Actions + chips wear this — not pills. */
    --bohp-radius-petal:    16px 8px 16px 8px;
    --bohp-radius-petal-sm: 10px 5px 10px 5px;
    --bohp-radius-xs: 6px;   /* micro elements */
    --bohp-radius-sm: 10px;  /* small controls */
    --bohp-radius:    16px;  /* surfaces (default) */
    --bohp-radius-lg: 28px;  /* oversized media only */

    /* Rhythm tokens (design-uniformity spec 2026-07-24): bands + card insets.
       New px paddings/margins/gaps need a justifying comment. */
    --band-pad:    clamp(40px, 6vw, 64px);
    --section-pad: clamp(48px, 7vw, 84px);
    --card-pad:    clamp(24px, 3vw, 32px);
    --bohp-shadow:    0 6px 24px rgba(45,49,66,0.08);
    --bohp-shadow-lg: 0 18px 48px rgba(122,46,112,0.14);
    /* Flame gradient (candle-logo echo) — DECORATIVE ONLY, never behind text */
    --bohp-grad-flame: linear-gradient(180deg, #FFD36B 0%, #FF6DA8 55%, #A04193 100%);
    --bohp-maxw: 1120px;
    /* Measured sticky-header height at >=880px, where .detail-card is sticky.
       Anything offsetting against the header should derive from this so the two
       can never drift apart again. */
    --bohp-header-h: 108px;

    /* Type pairing (spec 2026-07-24): Raleway = display voice (h1–h3, blockquote,
       hero stat numerals) at >=1.3rem and >=600 weight only; Nunito Sans = all
       functional UI (body, buttons, nav, chips, forms, footer). */
    --font-display: 'Raleway', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-head:    'Raleway', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ease: cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; /* keyboard focus + anchors clear the sticky header (WCAG 2.4.11) */ }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--bohp-ink);
    background: var(--bohp-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-head); color: var(--bohp-ink); margin: 0 0 .6em; text-wrap: balance; }
h4 { font-family: var(--font-body); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; color: var(--bohp-ink); margin: 0 0 .6em; }
:target { scroll-margin-top: 120px; } /* anchors clear the sticky header */
a, button, input, select, textarea { touch-action: manipulation; }
body { -webkit-tap-highlight-color: transparent; } /* theme provides its own active states */
h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
.lead, p.lead { font-size: 1.2rem; line-height: 1.55; color: var(--bohp-ink-soft); }
a { color: var(--bohp-purple-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .15s var(--ease); }
a:hover { color: var(--bohp-purple); }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }
.container { width: 100%; max-width: var(--bohp-maxw); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

/* Accessibility */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--bohp-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--bohp-radius-xs) 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--bohp-purple); outline-offset: 2px; border-radius: var(--bohp-radius-xs);
}
:focus-visible { outline: 3px solid var(--bohp-purple); outline-offset: 2px; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   Buttons (all AA-safe pairings)
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    font-family: var(--font-body); font-weight: 800;
    padding: 14px 30px; min-height: 48px; border-radius: var(--bohp-radius-petal);
    text-decoration: none; border: 2px solid transparent; cursor: pointer;
    font-size: 1rem; line-height: 1.2;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.btn:hover { transform: translateY(-3px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary  { color: #fff;
    background: linear-gradient(180deg, #AC50A0 0%, var(--bohp-purple) 55%, #8A3780 100%); /* white AA at every stop (5.2–6.9:1) */
    box-shadow: 0 10px 26px rgba(160,65,147,.38), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.14); }
.btn-primary:hover { color: #fff; box-shadow: 0 16px 34px rgba(160,65,147,.5), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.14); }
.btn-donate   { color: var(--bohp-ink);
    background: linear-gradient(180deg, #FF9BC2 0%, var(--bohp-pink) 70%); /* ink AA at every stop (4.89:1 at the darkest) */
    box-shadow: 0 10px 26px rgba(255,109,168,.42), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.10); }
.btn-donate:hover { color: var(--bohp-ink); box-shadow: 0 16px 34px rgba(255,109,168,.55), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.10); }
.btn-outline  { background: transparent; color: var(--bohp-purple-deep); border-color: var(--bohp-purple); }
.btn-outline:hover { background: var(--bohp-purple); color: #fff; }
.btn-ghost-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--bohp-purple-deep); }
.btn-sm { padding: 10px 20px; min-height: 40px; font-size: .92rem; }
.btn .icon { width: 1.05em; height: 1.05em; display: inline-block; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
    /* Opaque, deliberately. This was rgba(255,255,255,.92) and body text was
       visibly ghosting through the sticky header on scroll. Over the cream page
       background that 92% white computed to roughly #FFFEFE, so pure white is
       visually near-identical - it just stops being see-through. The backdrop
       blur is dropped with it: it cannot do anything behind an opaque surface,
       and it was costing a compositing layer on every page. */
    background: #fff;
    box-shadow: 0 1px 0 var(--bohp-line);
    position: sticky; top: 0; z-index: 100;
}
.header-inner { display: flex; align-items: center; gap: 24px; max-width: var(--bohp-maxw); margin: 0 auto; padding: 12px 24px; }
.site-logo img, .custom-logo { height: clamp(58px, 6vw, 84px); width: auto; max-width: 100%; }
.site-logo .site-name-text { font-family: var(--font-body); font-weight: 800; font-size: 1.25rem; color: var(--bohp-purple); text-decoration: none; }
.header-spacer { flex: 1; }
.main-nav .nav-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; align-items: center; }
.main-nav a { color: var(--bohp-ink); text-decoration: none; font-weight: 700; padding: 10px 14px; border-radius: var(--bohp-radius-sm); display: inline-flex; align-items: center; min-height: 44px; transition: background .15s var(--ease), color .15s var(--ease); }
.main-nav a:hover { background: var(--bohp-pink-soft); color: var(--bohp-purple-deep); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--bohp-purple-deep); box-shadow: inset 0 -3px 0 var(--bohp-pink); border-radius: var(--bohp-radius-sm) var(--bohp-radius-sm) 0 0; }
.main-nav .btn-donate { color: var(--bohp-ink); margin-left: 10px; padding: 10px 22px; }
.main-nav .btn-donate:hover { background: #ff5b9d; color: #000; }
.menu-toggle { display: none; background: var(--bohp-pink-soft); border: none; border-radius: var(--bohp-radius-sm); padding: 10px 16px; font-weight: 800; font-family: var(--font-body); min-height: 44px; color: var(--bohp-purple-deep); cursor: pointer; align-items: center; gap: .4em; }

/* --- Primary nav dropdown / submenu (e.g. Programs) --- */
.main-nav .menu-item-has-children { position: relative; }
.main-nav .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: .48em; height: .48em; margin-left: .45em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--ease);
}
.main-nav .sub-menu {
	list-style: none; margin: 0; padding: 6px;
	position: absolute; top: 100%; left: 0; min-width: 230px; z-index: 100;
	background: #fff; border: 1px solid var(--bohp-pink-soft); border-radius: var(--bohp-radius-sm);
	box-shadow: 0 12px 30px rgba(45, 49, 65, .16);
	display: none;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu li { width: 100%; }
.main-nav .sub-menu a { display: block; width: 100%; white-space: nowrap; padding: 10px 14px; border-radius: var(--bohp-radius-sm); }
.main-nav .sub-menu .current-menu-item > a { color: var(--bohp-purple-deep); box-shadow: none; }

@media (max-width: 900px) {
	.main-nav .menu-item-has-children { position: static; }
	.main-nav .menu-item-has-children > a[aria-expanded="true"]::after { transform: rotate(225deg) translateY(2px); }
	.main-nav .sub-menu {
		position: static; display: none; min-width: 0;
		background: transparent; border: none; box-shadow: none;
		padding: 0 0 4px 16px;
	}
	.main-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
}

/* --- Responsive embed (e.g. the Lark share-form iframe on Get Involved) --- */
.bohp-embed { width: 100%; margin: var(--space-3) 0; }
.bohp-embed iframe { display: block; width: 100%; min-height: 920px; border: 1px solid var(--bohp-line); border-radius: var(--bohp-radius); background: #fff; }
@media (max-width: 640px) { .bohp-embed iframe { min-height: 1040px; } }

/* ============================================================
   Jetpack form controls (all 5 forms) — v0.4.0 uniformity pass.
   Scoped to the form container, element-level, so every Jetpack
   field inherits regardless of its internal classes. Labels and
   structure untouched (complaints bridge maps on label text).
   ============================================================ */
.contact-form label,
.wp-block-jetpack-contact-form label,
.contact-form .grunion-field-label,
.wp-block-jetpack-contact-form .grunion-field-label {
    font-weight: 700; color: var(--bohp-ink); display: block; margin-bottom: .35rem;
}
.wp-block-jetpack-contact-form .grunion-label-required { color: var(--bohp-purple-deep); font-weight: 700; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form textarea,
.contact-form .jetpack-combobox-trigger,
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"],
.wp-block-jetpack-contact-form input[type="number"],
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-contact-form .jetpack-combobox-trigger {
    font: inherit; width: 100%; color: var(--bohp-ink); background-color: #fff;
    /* --bohp-border-control is 3.28:1 on white and 3.03:1 on cream, but only
       2.73:1 on --bohp-pink-soft: bordered controls belong on white or cream
       surfaces only (measured by Design, verified 2026-07-28). */
    border: 2px solid var(--bohp-border-control);
    border-radius: var(--bohp-radius-petal);
    padding: 12px 16px; min-height: 48px;
    box-shadow: none;
    transition: border-color .15s var(--ease);
}
.contact-form textarea, .wp-block-jetpack-contact-form textarea { min-height: 140px; }
.contact-form input:hover, .contact-form textarea:hover,
.wp-block-jetpack-contact-form input:hover,
.wp-block-jetpack-contact-form textarea:hover { border-color: var(--bohp-lilac); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible,
.wp-block-jetpack-contact-form input:focus-visible,
.wp-block-jetpack-contact-form textarea:focus-visible { border-color: var(--bohp-purple); }
/* Selects: Jetpack ships its own `select{}` reset (pale-blue 4px border) AND a
   higher-specificity `.contact-form .contact-form__select-wrapper select` rule,
   so brand styling has to out-specify both and pin the properties Jetpack owns.
   Its chevron span is hidden in favour of one drawn here, so the control looks
   identical whether or not Jetpack's stylesheet is on the page. */
.contact-form .contact-form__select-wrapper select,
.contact-form select,
.wp-block-jetpack-contact-form .contact-form__select-wrapper select,
.wp-block-jetpack-contact-form select {
    -webkit-appearance: none !important; appearance: none !important;
    font: inherit; width: 100%; color: var(--bohp-ink);
    border: 2px solid var(--bohp-border-control) !important;
    border-radius: var(--bohp-radius-petal) !important;
    min-height: 48px;
    padding: 12px 44px 12px 16px !important;
    line-height: 1.4;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2E70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
    box-shadow: none !important;
    text-overflow: ellipsis;
    transition: border-color .15s var(--ease);
}
.contact-form select:hover,
.wp-block-jetpack-contact-form select:hover { border-color: var(--bohp-lilac) !important; }
.contact-form select:focus,
.contact-form select:focus-visible,
.wp-block-jetpack-contact-form select:focus,
.wp-block-jetpack-contact-form select:focus-visible {
    border-color: var(--bohp-purple) !important;
    box-shadow: none !important;
    outline: 3px solid var(--bohp-purple); outline-offset: 2px;
}
/* One chevron only — ours */
.contact-form .jetpack-field-dropdown__icon,
.wp-block-jetpack-contact-form .jetpack-field-dropdown__icon { display: none !important; }
/* Jetpack's architecture puts the visible control styling on the WRAPPER div and
   strips the inner select. Since the brand styling lives on the select itself,
   the wrapper is neutralised — otherwise both render and the control shows a
   double ring. Same trap as the chevron, different element. */
.contact-form .contact-form__select-wrapper,
.wp-block-jetpack-contact-form .contact-form__select-wrapper,
.contact-form .contact-form__select-element-wrapper,
.wp-block-jetpack-contact-form .contact-form__select-element-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: block;
}
.contact-form .contact-form__input-error,
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.wp-block-jetpack-contact-form .contact-form__input-error,
.wp-block-jetpack-contact-form input[aria-invalid="true"],
.wp-block-jetpack-contact-form textarea[aria-invalid="true"] { border-color: #B3261E !important; }
/* Submit: the Primary gradient button recipe at petal radius (pill is off-spec) */
.contact-form button[type="submit"],
.contact-form .wp-block-button__link,
.contact-form input[type="submit"],
.wp-block-jetpack-contact-form button[type="submit"],
.wp-block-jetpack-contact-form .wp-block-button__link,
.wp-block-jetpack-contact-form input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: 800; font-size: 1rem; line-height: 1.2;
    padding: 14px 30px; min-height: 48px;
    border: 2px solid transparent; border-radius: var(--bohp-radius-petal); cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, #AC50A0 0%, var(--bohp-purple) 55%, #8A3780 100%); /* white AA at every stop */
    box-shadow: 0 10px 26px rgba(160,65,147,.38), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.14);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.contact-form button[type="submit"]:hover,
.contact-form .wp-block-button__link:hover,
.contact-form input[type="submit"]:hover,
.wp-block-jetpack-contact-form button[type="submit"]:hover,
.wp-block-jetpack-contact-form .wp-block-button__link:hover,
.wp-block-jetpack-contact-form input[type="submit"]:hover {
    transform: translateY(-3px); color: #fff;
    box-shadow: 0 16px 34px rgba(160,65,147,.5), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 0 rgba(0,0,0,.14);
}

/* ============================================================
   Hero
   ============================================================ */
.bohp-hero {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 85% 8%, rgba(255,109,168,0.30) 0%, transparent 55%),
      radial-gradient(ellipse at 8% 92%, rgba(160,65,147,0.12) 0%, transparent 52%),
      var(--bohp-cream);
    padding: var(--section-pad) 0 clamp(56px, 8vw, 92px); /* hero keeps a slightly larger bottom */
}
/* soft decorative blob */
.bohp-hero::before {
    content: ""; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(249,168,201,.55), transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.bohp-hero .hero-grid { display: flex; align-items: center; gap: clamp(32px, 5vw, 56px); position: relative; }
.bohp-hero .hero-text { flex: 1.15; min-width: 0; }
.bohp-hero .hero-art { flex: 1; display: flex; justify-content: center; }
/* Editorial gradient-bar label (2026-07-24) — the flame bar echoes the candle logo. */
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800;
    color: var(--bohp-purple-deep); margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 3px; height: 1.9em; border-radius: 2px; background: var(--bohp-grad-flame); flex: 0 0 auto; }
.bohp-hero h1 { margin-bottom: 1rem; }
.bohp-hero h1 .accent { color: var(--bohp-purple); }
.bohp-hero .lead { margin-bottom: 1.8rem; max-width: 40ch; }
.bohp-hero .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.bohp-hero .hero-art img { border-radius: var(--bohp-radius-lg); box-shadow: var(--bohp-shadow-lg); }

/* ============================================================
   Full-bleed photo hero (rotating consented photos as backdrop,
   dimming scrim keeps overlaid text WCAG AA on any photo)
   ============================================================ */
.bohp-hero--photo {
	background: var(--bohp-ink); /* fallback while photos load */
	padding: 0;
	display: flex;
	align-items: center;
	/* Fits a standard laptop viewport (with the sticky header) without scrolling */
	min-height: clamp(420px, 62vh, 600px);
}
.bohp-hero--photo::before { content: none; } /* drop the decorative blob */
.bohp-hero--photo .hero-bg { position: absolute; inset: 0; }
.bohp-hero--photo .hc-track { list-style: none; margin: 0; padding: 0; }
.bohp-hero--photo .hc-slide {
	display: none;
	position: absolute; inset: 0;
	z-index: 1;
}
.bohp-hero--photo .hc-slide.is-active { display: block; z-index: 2; }
.bohp-hero--photo .hc-slide.is-leaving { display: block; z-index: 1; }
.bohp-hero--photo .hc-slide img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}
.bohp-hero--photo .hero-scrim {
	position: absolute; inset: 0; z-index: 3;
	/* even coverage — the content is centred, so no side can go light */
	background: linear-gradient(180deg, rgba(26,16,30,0.68) 0%, rgba(26,16,30,0.76) 100%);
}
.bohp-hero--photo .hero-content {
	position: relative; z-index: 4;
	padding-top: clamp(40px, 6vw, 64px);
	padding-bottom: clamp(44px, 6.5vw, 72px);
	max-width: var(--bohp-maxw);
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
}
.bohp-hero--photo .eyebrow { color: #fff; }
.bohp-hero--photo h1 { color: #fff; max-width: 26ch; }
.bohp-hero--photo .lead { max-width: 52ch; margin-left: auto; margin-right: auto; }
.bohp-hero--photo .hero-ctas { justify-content: center; }
.bohp-hero--photo .hero-trust {
	width: 100%;
	justify-content: space-between;
	text-align: center;
	border-top: 0;
	padding-top: 0;
	gap: clamp(12px, 2.5vw, 28px);
}
.bohp-hero--photo .hero-trust .stat {
	align-items: center;
	flex: 1 1 160px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: var(--bohp-radius);
	padding: 14px 18px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.bohp-hero--photo h1 .accent { color: var(--bohp-pink-mid); } /* pink 2.2:1 vs lightest slide+scrim — pink-mid 3.5:1 at 0.68 scrim (large text 3:1, verified per-slide 2026-07-24) */
.bohp-hero--photo .lead { color: rgba(255,255,255,0.94); }
.bohp-hero--photo .hero-trust { border-top-color: rgba(255,255,255,0.35); }
.bohp-hero--photo .hero-trust .stat b { color: #fff; }
.bohp-hero--photo .hero-trust .stat span { color: rgba(255,255,255,0.88); }
.bohp-hero--photo :focus-visible { outline-color: #fff; }
/* Pause control is invisible until a keyboard user tabs to it
   (skip-link pattern) — sighted mouse users see photos only, while
   WCAG 2.2.2 keeps a real pause mechanism. */
.bohp-hero--photo .hc-controls {
	position: absolute; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 28px); z-index: 5;
	opacity: 0; pointer-events: none;
}
.bohp-hero--photo .hc-controls:focus-within { opacity: 1; pointer-events: auto; }
.hc-btn {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: var(--bohp-ink);
	border: 0; border-radius: 50%; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
@media (prefers-reduced-motion: no-preference) {
	.bohp-hero--photo .hc-slide.is-active { animation: hc-fade 0.7s ease; }
	@keyframes hc-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 700px) {
	.bohp-hero--photo { min-height: 0; }
	.bohp-hero--photo .hero-scrim {
		background: rgba(26,16,30,0.74); /* even coverage — text spans full width */
	}
	.bohp-hero--photo .hero-content { padding-bottom: clamp(56px, 10vw, 72px); }
}

/* Trust / stats row beneath hero CTAs */
.hero-trust { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 44px); margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--bohp-line); }
.hero-trust .stat { display: flex; flex-direction: column; }
.hero-trust .stat b { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--bohp-purple); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-trust .stat span { font-size: .9rem; color: var(--bohp-ink-soft); margin-top: .35rem; }

/* ============================================================
   Sections / bands
   ============================================================ */
.section { padding: var(--section-pad) 0; position: relative; }
.section--cream { background: var(--bohp-cream); }
.section--white { background: var(--bohp-white); }
.section--blue  { background: linear-gradient(180deg, #c4ebf1, var(--bohp-blue)); }
.section--peach { background: var(--bohp-peach); }
.section--pink  { background: linear-gradient(180deg, #FDD3E3, var(--bohp-pink-mid)); }
.section--pink p, .section--pink .lead, .section--pink .section-head p { color: var(--bohp-ink); } /* ink-soft is 3.7:1 on pink-mid — full ink only (WCAG 1.4.3) */
.section--ink   { background: radial-gradient(ellipse at 80% 0%, #3a3f57, var(--bohp-ink)); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lead { color: rgba(255,255,255,.86); }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto var(--space-5); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { font-size: 1.2rem; color: var(--bohp-ink-soft); }
.section--ink .section-head p { color: rgba(255,255,255,.82); }

/* Mission strip */
.mission-strip { text-align: center; max-width: 52ch; margin: 0 auto; }
.mission-strip p { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; line-height: 1.4; color: var(--bohp-ink); }
.mission-strip .mission-mark { color: var(--bohp-purple); font-weight: 800; } /* was --bohp-pink 2.64:1 → purple 5.72:1 on white (WCAG 1.4.3) */

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
    background: var(--bohp-white); border-radius: var(--bohp-radius); padding: var(--card-pad);
    box-shadow: var(--bohp-shadow); border: 1px solid var(--bohp-line);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--bohp-shadow-lg); }
.pillar .pillar-icon {
    width: 56px; height: 56px; border-radius: var(--bohp-radius); display: grid; place-items: center;
    background: var(--bohp-pink-soft); color: var(--bohp-purple-deep); margin-bottom: 1.1rem;
}
.pillar:nth-child(2) .pillar-icon { background: #efe1f0; }
.pillar:nth-child(3) .pillar-icon { background: #dcf3f7; color: var(--bohp-blue-deep); }
.pillar .pillar-icon svg { width: 28px; height: 28px; }
.pillar h3 { color: var(--bohp-purple-deep); margin-bottom: .4rem; }
.pillar p { margin: 0; color: var(--bohp-ink-soft); }

/* Program cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.card {
    background: var(--bohp-white); border-radius: var(--bohp-radius); padding: var(--card-pad);
    box-shadow: var(--bohp-shadow); border: 1px solid var(--bohp-line);
    position: relative; overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--bohp-pink); }
.card:nth-child(2n)::before { background: var(--bohp-purple); }
.card:nth-child(3n)::before { background: var(--bohp-blue); }
.card:hover { transform: translateY(-4px); box-shadow: var(--bohp-shadow-lg); }
.card h3 { color: var(--bohp-purple-deep); margin-bottom: .3rem; }
.card .card-when { display: inline-block; font-weight: 800; color: var(--bohp-purple); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; background: var(--bohp-pink-soft); padding: 4px 10px; border-radius: var(--bohp-radius-petal-sm); margin-bottom: .7rem; }
.card p { color: var(--bohp-ink-soft); margin-bottom: 0; }

/* Quote / values band */
.quote-band { max-width: 60ch; margin: 0 auto; text-align: center; }
.quote-band blockquote { margin: 0; font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 800; line-height: 1.35; color: #fff; }
.quote-band .quote-mark { display: block; font-size: 3.4rem; line-height: 1; color: var(--bohp-pink); margin-bottom: .3rem; }
.quote-band cite { display: block; margin-top: 1.4rem; font-style: normal; font-weight: 700; font-size: .98rem; color: rgba(255,255,255,.82); }

/* CTA band */
.cta-band { text-align: center; max-width: 60ch; margin: 0 auto; }
.cta-band h2 { margin-bottom: .6rem; }
.cta-band .lead { font-size: 1.2rem; max-width: 50ch; margin: 0 auto 1.8rem; }
.cta-band .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Generic centred CTA row */
.center-cta { text-align: center; margin-top: var(--space-4); }

/* Clickable card (used on the 404 helper grid) */
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover h3 { color: var(--bohp-purple); }

/* Search form */
.search-form { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.search-form .search-field {
    font: inherit; padding: 12px 18px; min-height: 48px; border: 2px solid var(--bohp-border-control);
    border-radius: var(--bohp-radius-petal); min-width: 240px; background: #fff; color: var(--bohp-ink);
}
.search-form .search-field:focus-visible { border-color: var(--bohp-purple); outline-offset: 2px; }
.search-form .search-submit {
    font-family: var(--font-body); font-weight: 800; padding: 12px 26px; min-height: 48px;
    border: 2px solid transparent; border-radius: var(--bohp-radius-petal); background: var(--bohp-purple); color: #fff; cursor: pointer;
}
.search-form .search-submit:hover { background: var(--bohp-purple-deep); }

/* Pagination */
.pagination, .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: var(--space-5); }
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    padding: 0 14px; border-radius: var(--bohp-radius-sm); background: #fff; border: 1px solid var(--bohp-line);
    text-decoration: none; color: var(--bohp-ink); font-weight: 700;
}
.pagination .page-numbers.current { background: var(--bohp-purple); color: #fff; border-color: var(--bohp-purple); }
.pagination a.page-numbers:hover { background: var(--bohp-pink-soft); color: var(--bohp-purple-deep); }
.post-card-link { font-weight: 800; text-decoration: none; color: var(--bohp-purple-deep); }
.post-card-link:hover { color: var(--bohp-purple); }

/* ============================================================
   Events list (front-page band + events page)
   ============================================================ */
.event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 24px; }
.event-item {
    background: rgba(255,255,255,.78); border-radius: var(--bohp-radius); padding: var(--card-pad);
    display: flex; gap: 18px; align-items: flex-start; border: 1px solid rgba(255,255,255,.6);
}
.event-date {
    flex: 0 0 auto; width: 62px; text-align: center; background: #fff; border-radius: var(--bohp-radius-sm);
    padding: 8px 0; box-shadow: var(--bohp-shadow); line-height: 1;
}
.event-date .d-month { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--bohp-purple); /* was pink 2.6:1 on white — purple 5.72:1 (WCAG 1.4.3, spec 2026-07-24) */ }
.event-date .d-day { display: block; font-size: 1.6rem; font-weight: 800; color: var(--bohp-ink); margin-top: 3px; }
.event-body h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.event-body h3 a { color: var(--bohp-ink); text-decoration: none; }
.event-body h3 a:hover { color: var(--bohp-purple-deep); }
.event-meta { font-size: .9rem; color: var(--bohp-ink-soft); margin: 0; }
.event-meta span { display: inline-flex; align-items: center; gap: .35em; margin-right: 1em; }

/* ============================================================
   Page header + content (interior pages)
   ============================================================ */
.page-header { background: linear-gradient(180deg, #c4ebf1, var(--bohp-blue)); padding: var(--band-pad) 0; text-align: center; }
.page-header h1 { margin: 0; }
.page-header .page-subtitle { max-width: 56ch; margin: .8rem auto 0; font-size: 1.2rem; color: #2b5a63; }
.page-content { padding: var(--section-pad) 0; background: var(--bohp-white); }
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.3em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { border-radius: var(--bohp-radius); margin: 1.5em 0; }
.entry-content blockquote {
    border-left: 4px solid var(--bohp-pink); margin: 1.5em 0; padding: .4em 0 .4em 1.2em;
    font-size: 1.15rem; color: var(--bohp-purple-deep); font-style: italic;
}

/* Posts grid */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; }
.post-card { background: var(--bohp-white); border-radius: var(--bohp-radius); overflow: hidden; box-shadow: var(--bohp-shadow); border: 1px solid var(--bohp-line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--bohp-shadow-lg); }
.post-card-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card-body { padding: var(--card-pad); }
.post-card-title { margin: .2rem 0 .5rem; font-size: 1.2rem; }
.post-card-title a { color: var(--bohp-ink); text-decoration: none; }
.post-card-title a:hover { color: var(--bohp-purple-deep); }
.post-card-meta { color: var(--bohp-ink-soft); font-size: .85rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: radial-gradient(ellipse at 20% 0%, #3a3f57, var(--bohp-ink)); color: #fff; padding: var(--section-pad) 0 28px; }
.site-footer a { color: var(--bohp-blue); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-brand img { height: clamp(48px, 5vw, 62px); width: auto; max-width: 100%; margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,.82); max-width: 38ch; }
.footer-social { display: flex; gap: 12px; margin-top: 1rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; transition: background .15s var(--ease); }
.footer-social a:hover { background: var(--bohp-pink); }
.footer-social svg { width: 20px; height: 20px; fill: #fff; }
.site-footer h4 { color: #fff; margin: 0 0 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .6rem; }
.footer-disclaimer { background: rgba(255,255,255,.08); border-radius: var(--bohp-radius-sm); padding: 16px 20px; margin-top: 12px; font-size: .92rem; color: rgba(255,255,255,.9); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.16); margin-top: 36px; padding-top: 20px; font-size: .85rem; color: rgba(255,255,255,.7); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
.acknowledgement { font-size: .9rem; color: rgba(255,255,255,.8); font-style: italic; max-width: 60ch; }

/* ============================================================
   Motion / reveal (progressive enhancement)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .pillars { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
    .bohp-hero .hero-grid { flex-direction: column-reverse; text-align: center; }
    .bohp-hero .hero-ctas { justify-content: center; }
    .bohp-hero .lead { margin-left: auto; margin-right: auto; }
    .eyebrow { margin-left: auto; margin-right: auto; }
    .hero-trust { justify-content: center; }
    .bohp-hero .hero-art img { max-width: 420px; }
}
/* Collapse the primary nav to the hamburger below 900px so the 7 items + a larger
   logo never crowd on tablets. Keep in sync with navigation.js (innerWidth <= 900). */
@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .main-nav { display: none; width: 100%; }
    .main-nav.is-open { display: block; }
    .header-inner { flex-wrap: wrap; }
    .main-nav .nav-menu { flex-direction: column; align-items: stretch; width: 100%; padding-top: 10px; gap: 2px; }
    .main-nav .nav-menu a { width: 100%; }
    .main-nav .btn-donate { margin-left: 0; margin-top: 6px; }
}
@media (max-width: 768px) {
    .pillars { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .header-inner { padding: 10px 16px; gap: 12px; }
    .container { padding: 0 16px; }
}

/* ============================================================
   Colour-coded cards (programs & events) — driven by --accent
   ============================================================ */
.card--colour::before { background: var(--accent, var(--bohp-pink)); }
.card--colour .card-when { background: var(--accent-soft, var(--bohp-pink-soft)); color: var(--accent-text, var(--bohp-purple-deep)); }
.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card--link:hover h3 { color: var(--accent-text, var(--bohp-purple)); }
.card .card-more { margin-top: auto; padding-top: .8rem; font-weight: 800; color: var(--accent-text, var(--bohp-purple-deep)); }
.card .card-thumb { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 18px; aspect-ratio: 16/9; overflow: hidden; background: var(--accent-soft, var(--bohp-cream)); }
.card .card-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Single program / event
   ============================================================ */
.entry-hero { padding: var(--band-pad) 0; border-bottom: 4px solid var(--accent, var(--bohp-pink)); background: linear-gradient(180deg, var(--accent-soft, #fff), var(--bohp-white)); }

.entry-hero h1 { margin: 0; }
.entry-hero .entry-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-weight: 700; color: var(--bohp-ink); }
.entry-hero .entry-meta span { display: inline-flex; align-items: center; gap: .4em; }
.entry-meta .meta-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.entry-hero .entry-banner { margin-top: 1.8rem; border-radius: var(--bohp-radius-lg); overflow: hidden; box-shadow: var(--bohp-shadow-lg); }
.entry-hero .entry-banner img { width: 100%; max-height: 380px; object-fit: cover; }

.entry-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(28px, 4vw, 48px); align-items: start; }
.entry-layout .entry-content { max-width: none; margin: 0; }
.detail-card { background: #fff; border: 1px solid var(--bohp-line); border-left: 5px solid var(--accent, var(--bohp-pink)); border-radius: var(--bohp-radius); padding: var(--card-pad); box-shadow: var(--bohp-shadow); position: sticky; top: calc(var(--bohp-header-h) + 16px); }
/* A2 fallback: an event with no body and no programme to inherit from collapses
   to a single column rather than leaving an empty half-page void. */
.entry-layout--single { grid-template-columns: 1fr !important; }

/* Location renders as two parts, because a Lark Location field IS two parts:
   a venue name and a Maps-resolved street address. Never print Lark's
   `full_address` composite - it joins them with a fullwidth comma (U+FF0C)
   and sometimes no separator at all. */
.where-parts { display: block; }
.where-venue { display: block; font-weight: 700; }
.where-address { display: block; }

/* `.event-meta span` sets display:inline-flex (0,1,1) and would out-specify a
   bare `.event-where` (0,1,0), so these need the parent in the selector. That
   inline-flex was also causing the overflow: flex items do not wrap, so a long
   street address could not break and pushed past the card edge. */
.event-meta .event-where { display: block; margin-right: 0; }
.event-meta .where-parts { display: block; margin-top: .1rem; }
.event-meta .where-address, .event-meta .where-venue { overflow-wrap: anywhere; }

.detail-card h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.detail-row { margin-bottom: 1rem; }
.detail-row .detail-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--accent-text, var(--bohp-purple-deep)); margin-bottom: .2rem; }
.detail-card .btn { width: 100%; margin-top: .4rem; }
.detail-card .btn-accent { background: var(--accent, var(--bohp-purple)); color: #fff; }

/* Photo gallery strip (placeholder when no real photos yet) */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 1.8rem 0; }
.photo-strip .ph { aspect-ratio: 4/3; border-radius: var(--bohp-radius); background: linear-gradient(135deg, var(--accent-soft, #eee), #fff); display: grid; place-items: center; color: var(--accent-text, var(--bohp-ink-soft)); font-size: .85rem; font-weight: 700; border: 1px dashed var(--accent, #ccc); }

/* ============================================================
   Calendar (self-coded month grid)
   ============================================================ */
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 1.6rem; flex-wrap: wrap; }
.calendar-head h2 { margin: 0; }
.calendar-nav { display: flex; gap: 8px; }
.calendar-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--bohp-radius-petal); background: #fff; border: 1px solid var(--bohp-line); text-decoration: none; font-weight: 800; color: var(--bohp-purple-deep); }
.calendar-nav a:hover { background: var(--bohp-pink-soft); }
.calendar-grid { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.calendar-grid caption { text-align: left; }
.cal-dow { width: 14.28%; text-align: center; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bohp-ink-soft); padding: 6px 0; }
.cal-cell { height: 104px; vertical-align: top; background: #fff; border: 1px solid var(--bohp-line); border-radius: var(--bohp-radius-sm); padding: 8px; overflow: hidden; }
.cal-cell--empty { background: transparent; border: none; }
.cal-cell--today { border-color: var(--bohp-purple); box-shadow: inset 0 0 0 1px var(--bohp-purple); }
.cal-day-num { font-weight: 800; font-size: .85rem; color: var(--bohp-ink); margin-bottom: 6px; }
.cal-event { --accent: var(--bohp-pink); display: block; text-decoration: none; font-size: .8rem; line-height: 1.25; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); border-left: 3px solid var(--accent); border-radius: var(--bohp-radius-xs); min-height: 24px; padding: 2px 6px; margin-bottom: 3px; }
.cal-event:hover { filter: brightness(0.97); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 1.6rem; }
.calendar-legend .leg { display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; font-weight: 700; color: var(--bohp-ink-soft); }
.calendar-legend .dot { width: 14px; height: 14px; border-radius: var(--bohp-radius-xs); background: var(--accent); }

/* ============================================================
   Member area (prototype scaffold)
   ============================================================ */
.member-login { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--bohp-line); border-radius: var(--bohp-radius); box-shadow: var(--bohp-shadow); padding: var(--card-pad); }
.member-login h2 { margin-top: 0; }
.member-login label { display: block; font-weight: 700; margin: .8rem 0 .3rem; }
.member-login input[type="text"], .member-login input[type="password"] { width: 100%; font: inherit; padding: 12px 14px; border: 2px solid var(--bohp-border-control); border-radius: var(--bohp-radius-sm); min-height: 48px; }
.member-login input:focus-visible { border-color: var(--bohp-purple); }
.member-login .button, .member-login input[type="submit"] { margin-top: 1.2rem; width: 100%; font-family: var(--font-body); font-weight: 800; padding: 14px; min-height: 48px; border: none; border-radius: var(--bohp-radius-petal); background: var(--bohp-purple); color: #fff; cursor: pointer; }
.member-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 2rem; }
.role-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: var(--bohp-radius-petal-sm); font-weight: 800; font-size: .78rem; background: var(--bohp-pink-soft); color: var(--bohp-purple-deep); }
.role-badge--staff { background: #efe1f0; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.member-panel { background: #fff; border: 1px solid var(--bohp-line); border-top: 5px solid var(--bohp-pink); border-radius: var(--bohp-radius); padding: var(--card-pad); box-shadow: var(--bohp-shadow); }
.member-panel--staff { border-top-color: var(--bohp-purple); }
.member-panel--forum { border-top-color: var(--bohp-blue); }
.member-panel h3 { margin-top: 0; color: var(--bohp-purple-deep); }
.member-panel ul { padding-left: 1.1em; }
.enrolled-list { list-style: none; padding: 0; margin: 0; }
.enrolled-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bohp-line); }
.enrolled-list li:last-child { border-bottom: none; }
.enrol-inline { display: inline; }
.enrol-inline button { font: inherit; font-weight: 800; cursor: pointer; border: none; background: none; padding: 6px 10px; border-radius: var(--bohp-radius-sm); }
.enrol-inline .do-enrol { background: var(--bohp-purple); color: #fff; }
.enrol-inline .do-withdraw { background: var(--bohp-pink-soft); color: var(--bohp-purple-deep); }
.notice { background: #e7f6ea; border: 1px solid #b6e0c0; color: #1e6b34; border-radius: var(--bohp-radius-sm); padding: 12px 16px; margin-bottom: 1.6rem; font-weight: 700; }
.scaffold-note { background: var(--bohp-peach); border-radius: var(--bohp-radius-sm); padding: 12px 16px; font-size: .9rem; color: #6b4a23; margin-top: 1.6rem; }

/* ============================================================
   Support & Resources — accessible accordion (native <details>)
   ============================================================ */
.resource-banner {
    display: block; background: var(--bohp-ink); color: #fff;
    border-radius: var(--bohp-radius-sm); padding: 16px 20px; margin: 0 0 1.4rem;
    font-weight: 700; font-size: 1.05rem; line-height: 1.5;
}
.resource-banner a { color: #fff; text-decoration: underline; font-weight: 800; }
.resource-banner a:hover { color: var(--bohp-blue); }
.resource-intro { max-width: 70ch; font-size: 1.08rem; margin-bottom: 2rem; }

.resource-accordion { max-width: 820px; }
.resource-cat {
    background: var(--bohp-white); border: 1px solid var(--bohp-line);
    border-radius: var(--bohp-radius); margin-bottom: 14px; overflow: hidden;
}
.resource-cat > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; gap: 14px; padding: 16px 20px; min-height: 44px;
    transition: background .15s var(--ease);
}
.resource-cat > summary::-webkit-details-marker { display: none; }
.resource-cat > summary h2 { margin: 0; font-size: 1.18rem; color: var(--bohp-purple-deep); }
.resource-cat > summary::after {
    content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; line-height: 1;
    background: var(--bohp-pink-soft); color: var(--bohp-purple-deep);
}
.resource-cat[open] > summary::after { content: "\2212"; } /* minus */
.resource-cat > summary:hover { background: var(--bohp-cream); }
.resource-cat > summary:focus-visible { outline: 3px solid var(--bohp-purple); outline-offset: -3px; }
.resource-cat[open] > summary { border-bottom: 1px solid var(--bohp-line); }
.resource-cat__body { padding: 14px 20px 20px; }
.resource-list { margin: 0; padding-left: 1.2em; }
.resource-list li { margin-bottom: .8em; line-height: 1.6; color: var(--bohp-ink); }
.resource-list li:last-child { margin-bottom: 0; }
.resource-list a { color: var(--bohp-purple-deep); }
.resource-list a[target="_blank"]::after { content: "\2197"; margin-left: .12em; font-size: .85em; text-decoration: none; }

/* Compact headings under 1.3rem keep Nunito — Raleway floor is 1.3rem/600
   (type-pairing rule, spec 2026-07-24) */
.event-body h3, .post-card-title, .detail-card h2, .resource-cat > summary h2 { font-family: var(--font-body); }

/* Crisis section: always-visible emphasis, sits open at the top */
.resource-cat--crisis { border: 2px solid var(--bohp-pink); }
.resource-cat--crisis > summary h2 { color: var(--bohp-ink); }
.resource-cat--crisis > summary::after { background: var(--bohp-pink); color: var(--bohp-ink); }

/* Sources section: quieter */
.resource-cat--sources > summary h2 { font-size: 1.02rem; color: var(--bohp-ink-soft); }

@media (max-width: 880px) {
    .entry-layout { grid-template-columns: 1fr; }
    .detail-card { position: static; }
}
@media (max-width: 680px) {
    .calendar-grid { border-spacing: 3px; }
    .cal-cell { height: 76px; padding: 5px; }
    .cal-event { font-size: .8rem; }
    .photo-strip { grid-template-columns: 1fr 1fr; }
}

/* Definition-list variant of .detail-row (semantic dt/dd). Additive; .detail-list is not used elsewhere. */
.detail-list { margin: 0; }
.detail-list dd { margin: 0; }

/* --- [bohp_1yr_timeline] : vertical running order. Scoped; used on /1-year/ only. --- */
.bohp-timeline { list-style: none; margin: 2rem 0 0; padding: 0 0 0 28px; border-left: 3px solid var(--bohp-pink); }
.bohp-tl-phase { position: relative; margin: 0 0 2.4rem; }
.bohp-tl-phase::before { content: ""; position: absolute; left: -37px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bohp-pink); box-shadow: 0 0 0 4px var(--bohp-white); }
.bohp-tl-time { display: block; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--bohp-purple-deep); }
.bohp-tl-title { margin: .15rem 0 .5rem; }
.bohp-tl-items { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .7rem; }
.bohp-tl-items li { background: var(--bohp-white); border-radius: var(--bohp-radius-sm); padding: .8rem 1rem; border-left: 4px solid var(--bohp-lilac); }
.bohp-tl-items li strong { display: block; color: var(--bohp-purple-deep); }
.bohp-tl-items li span { display: block; margin-top: .2rem; }
.bohp-tl-note { margin: .7rem 0 0; }
.bohp-tl-past { padding: 1rem 1.2rem; border-radius: var(--bohp-radius-sm); background: var(--bohp-peach); font-weight: 600; }
@media (max-width: 600px) { .bohp-timeline { padding-left: 20px; } .bohp-tl-phase::before { left: -29px; width: 12px; height: 12px; } }
.bohp-tl-intro { margin: .3rem 0 .2rem; }