/* ════════════════════════════════════════════════════════════════════════
   DHYANAMAHASABHALU — TEMPORARY EVENT SITE
   Self-contained stylesheet.

   Design tokens below mirror css/style.css so this site reads as part of the
   Ahimsa Alliance family. They are COPIED, not imported: the Ahimsa stylesheet
   is not reachable from this subdomain's document root, and copying tokens
   rather than markup means no change to the Ahimsa site can break this one.
   Deleting this folder removes the entire event site.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Colours — mirrors css/style.css */
    --primary: #54B435;
    --primary-dark: #379237;
    --primary-darker: #2B7A0B;
    --primary-darkest: #1A5D1A;
    --accent: #E5272D;
    --accent-dark: #C41E24;
    --text-dark: #0F172A;
    --text-body: #475569;
    --text-light: #94A3B8;
    --bg-white: #FFFFFF;
    --bg-light: #F8FAFC;
    --bg-green-light: #EDFBE2;
    --bg-green-soft: #D5EAD8;
    --bg-footer: #0F172A;
    --border: #E2E8F0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --font-body: 'DM Sans', sans-serif;
    --font-heading: 'Lexend', sans-serif;
    --transition: all 0.3s ease;
    --header-height: 80px;
    --container: 1200px;
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    background: var(--bg-white);
    overflow-x: hidden;               /* no horizontal scroll on any viewport */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-dark);
    line-height: 1.3;
    font-weight: 700;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
img, video { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.section { padding: 80px 0; }
.section-alt { background: var(--bg-light); }

.section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-tag {
    display: inline-block;
    background: var(--bg-green-light);
    color: var(--primary-darker);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.section-divider {
    width: 64px; height: 4px; border-radius: 2px;
    background: var(--primary);
    margin: 16px auto;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: #fff; border-color: #fff; }
.btn-outline:hover { background: #fff; color: var(--text-dark); }
.btn-outline-primary { background: transparent; color: var(--primary-dark); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-lg { padding: 16px 36px; font-size: 17px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Header ───────────────────────────────────────────────────────────── */
.dh-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.dh-header .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    gap: 16px;
}
.dh-logo { display: flex; align-items: center; gap: 12px; }
.dh-logo img { width: 52px; height: 52px; object-fit: contain; }
.dh-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.dh-logo-title { font-family: var(--font-heading); font-weight: 700; color: var(--text-dark); font-size: 18px; }
.dh-logo-tagline { font-size: 12px; color: var(--text-light); }

.dh-nav ul { display: flex; align-items: center; gap: 28px; }
.dh-nav a { font-weight: 500; color: var(--text-dark); }
.dh-nav a:hover, .dh-nav a.active { color: var(--primary-darker); }

.dh-header-actions { display: flex; align-items: center; gap: 12px; }
.nav-donate { display: none; }              /* mobile drawer only — see the 992px block */

.dh-mobile-toggle {
    display: none;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    flex-direction: column; justify-content: center; gap: 5px;
}
.dh-mobile-toggle span { display: block; height: 2px; background: var(--text-dark); border-radius: 2px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.dh-footer { background: var(--bg-footer); color: #cbd5e1; padding: 56px 0 0; }
.dh-footer h3 { color: #fff; font-size: 17px; margin-bottom: 16px; }
.dh-footer a:hover { color: var(--primary); }
.dh-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 40px;
}
.dh-footer-contact li { display: flex; gap: 10px; margin-bottom: 10px; }
.dh-footer-bottom {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    text-align: center;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    font-size: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 16px;                          /* 16px stops iOS zooming on focus */
    color: var(--text-dark);
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(84, 180, 53, 0.15);
}
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"] { border-color: var(--accent); }

.field-error {
    display: block;
    color: var(--accent);
    font-size: 13px;
    margin-top: 5px;
    min-height: 1px;
}
.form-note { font-size: 13px; color: var(--text-light); }

.consent-row { display: flex; align-items: flex-start; gap: 10px; }
.consent-row input { width: 18px; height: 18px; margin-top: 4px; flex-shrink: 0; }
.consent-row label { font-weight: 400; font-size: 14px; }

/* Honeypot: off-screen, not display:none — some bots skip hidden inputs. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ── Cards & alerts ───────────────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px;
}
.alert { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 15px; }
.alert-info { background: var(--bg-green-light); color: var(--primary-darkest); }
.alert-error { background: #FEF2F2; color: var(--accent-dark); }

.page-banner {
    background: linear-gradient(135deg, var(--primary-darkest), var(--primary-dark));
    color: #fff;
    padding: 56px 0;
    text-align: center;
}
.page-banner h1 { color: #fff; }

/* ── Placeholder marker — removed as real content arrives ─────────────── */
.placeholder {
    background: repeating-linear-gradient(45deg, #FFF7ED, #FFF7ED 10px, #FFEDD5 10px, #FFEDD5 20px);
    border: 1px dashed #F59E0B;
    border-radius: var(--radius-md);
    color: #92400E;
    padding: 14px 18px;
    font-size: 14px;
}

/* ── Legal / policy prose ─────────────────────────────────────────────── */
.legal h2 { font-size: 21px; margin: 28px 0 10px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 17px; margin: 20px 0 8px; }
.legal p, .legal li { color: var(--text-body); line-height: 1.75; }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 20px; }
.legal li { margin-bottom: 6px; }
.legal .placeholder { margin: 14px 0; }
.legal .updated { font-size: 14px; color: var(--text-light); margin-bottom: 24px; }

/* ── Accessibility helpers ────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--primary-darkest);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Visible keyboard focus everywhere, without a permanent outline on mouse use */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary-darker);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.is-disabled {
    pointer-events: none;
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    isolation: isolate;
    min-height: min(88vh, 780px);
    display: flex;
    align-items: center;
    text-align: center;
    padding: 72px 0;
    background: linear-gradient(150deg, var(--primary-darkest) 0%, var(--primary-dark) 45%, #14532D 100%);
    overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.75) 100%);
}
/* No video yet: the gradient alone carries the hero, so no dark-on-dark wash */
.hero-media:not(.has-video) + .hero-overlay { background: rgba(15, 23, 42, 0.28); }

.hero-inner { position: relative; color: #fff; }
.hero-logo {
    width: clamp(140px, 26vw, 240px);
    height: auto;
    margin: 0 auto 20px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    box-shadow: var(--shadow-lg);
}
.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    font-weight: 600;
    color: #FDE68A;
    margin-bottom: 10px;
}
.hero h1 {
    color: #fff;
    font-size: clamp(30px, 6vw, 60px);
    line-height: 1.15;
    margin-bottom: 14px;
}
.hero-lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 2.2vw, 20px);
    max-width: 620px;
    margin: 0 auto 24px;
}
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-bottom: 28px;
}
.hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
}
.hero-facts i { color: #FDE68A; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-note { margin-top: 16px; font-size: 15px; color: #FDE68A; }

/* ── Alternating media / content sections ─────────────────────────────── */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.split-reverse .split-media { order: 2; }        /* content left, media right */
.split-body h2 { font-size: clamp(24px, 3.4vw, 36px); margin-bottom: 4px; }
.split-body p { margin-bottom: 16px; }
.section-divider.left { margin: 16px 0 20px; }

.media-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-green-light);
    box-shadow: var(--shadow-md);
}
.media-frame video { width: 100%; height: 100%; object-fit: cover; background: #000; }

/* Portrait source (1080x1920). `cover` on the 16/10 frame would crop the title
   and phone numbers straight out of the picture, so this frame matches the
   video's own shape and is capped so it never dominates the section. */
.media-portrait {
    aspect-ratio: 9 / 16;
    max-width: 330px;
    margin-inline: auto;
}
.media-portrait video { object-fit: contain; }
.media-portrait .video-play { background-size: contain; background-repeat: no-repeat; background-color: #000; }

/* ── Stall enquiry lines ──────────────────────────────────────────────── */
.stall-calls { list-style: none; padding: 0; margin: 18px 0 0; }
.stall-calls li { margin-bottom: 10px; }
.stall-calls a {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 18px; color: var(--primary-darker);
    text-decoration: none;
}
.stall-calls a:hover { text-decoration: underline; }
.stall-calls i { color: var(--primary); }

.media-frame.media-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: repeating-linear-gradient(45deg, #FFF7ED, #FFF7ED 10px, #FFEDD5 10px, #FFEDD5 20px);
    border: 1px dashed #F59E0B;
    box-shadow: none;
}
.media-frame.media-pending p { color: #92400E; font-size: 14px; margin: 0; }

.video-play {
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    background-color: var(--primary-darkest);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-play-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-lg);
    position: relative;
    transition: var(--transition);
}
.video-play-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 54%;
    transform: translate(-50%, -50%);
    border-left: 22px solid var(--primary-darker);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}
.video-play:hover .video-play-icon { transform: scale(1.08); }

.brochure-link {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #fff;
}
.brochure-link img { width: 100%; height: auto; }
.brochure-link:hover { box-shadow: var(--shadow-xl); }

/* ── Content bits ─────────────────────────────────────────────────────── */
.quote {
    border-left: 4px solid var(--primary);
    background: var(--bg-green-light);
    padding: 14px 18px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--font-heading);
    color: var(--primary-darkest);
    margin-bottom: 16px;
}
.quote-small { font-style: italic; color: var(--primary-darker); margin-bottom: 20px; }
.attend-free { color: var(--primary-darker); font-weight: 600; }
.attend-free i { margin-right: 6px; }

.feature-list { margin-bottom: 22px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.feature-list i {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--bg-green-light);
    color: var(--primary-darker);
    border-radius: 50%;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}
.chip-green { background: var(--primary-dark); }
.chip-orange { background: #EA580C; }

.muted-note {
    font-size: 14px;
    color: var(--text-light);
    border-left: 3px solid var(--border);
    padding-left: 14px;
    margin-top: 20px;
}

/* ── Gallery — grid adapts to however many images exist ───────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.gallery-grid figure {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-light);
}
.gallery-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── Information cards ────────────────────────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.info-card { text-align: center; }
.info-card i {
    font-size: 26px;
    color: var(--primary-darker);
    background: var(--bg-green-light);
    width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: 50%;
    margin: 0 auto 14px;
}
.info-card h3 { font-size: 18px; margin-bottom: 8px; }
.info-card p { font-size: 15px; }

/* ── CTA bands ────────────────────────────────────────────────────────── */
.cta-band {
    background: linear-gradient(135deg, var(--primary-darkest), var(--primary-dark));
    color: #fff;
    padding: 56px 0;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin: 0; }
.btn-on-dark { background: #fff; color: var(--primary-darkest); }
.btn-on-dark:hover { background: #FDE68A; }

.donate-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    border-left: 5px solid var(--accent);
}
.donate-band h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 10px; }
.donate-band p { margin: 0; max-width: 640px; }

/* ── Contact & map ────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.contact-grid h3 { font-size: 17px; margin-bottom: 6px; }
.contact-grid h3.mt { margin-top: 22px; }
.contact-grid address { font-style: normal; }
.contact-list li, .org-list li { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.contact-list i { color: var(--primary-darker); width: 18px; }
.org-list li::before { content: '\2022'; color: var(--primary); font-weight: 700; }
.pending-line { color: #92400E; }

.map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 360px;
    border: 1px solid var(--border);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }

/* ── Registration & confirmation (Phase 3.3) ──────────────────────────── */
.container-narrow { max-width: 820px; }

.req { color: var(--accent); }
.optional { color: var(--text-light); font-weight: 400; font-size: 13px; }
.center { text-align: center; }
.form-intro { display: flex; align-items: center; gap: 10px; }
.form-note.center { margin-top: 12px; }

.btn-ghost { background: #fff; color: var(--text-dark); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-darker); }

.closed-card, .success-card { text-align: center; }
.closed-card i { font-size: 34px; color: var(--primary-darker); margin-bottom: 12px; }
.closed-card h2 { margin-bottom: 8px; }
.closed-card .btn { margin-top: 18px; }

.success-icon {
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 32px;
    display: grid; place-items: center;
}
.success-sub { margin-bottom: 24px; }

.code-block {
    background: var(--bg-green-light);
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 26px;
}
.code-label {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-darker);
    margin-bottom: 6px;
}
.code-value {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(26px, 6vw, 40px);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--primary-darkest);
    word-break: break-all;          /* never overflows a narrow phone */
    margin-bottom: 8px;
}

.detail-list { text-align: left; margin-bottom: 20px; }
.detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.detail-list dt { color: var(--text-light); font-size: 14px; }
.detail-list dd { font-weight: 600; color: var(--text-dark); text-align: right; }

.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ── Donation (Phase 3.4) ─────────────────────────────────────────────── */
.form-section-title { font-size: 18px; margin: 4px 0 14px; }

.amount-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.amount-btn {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    padding: 14px 10px;
    background: #fff;
    color: var(--text-dark);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}
.amount-btn:hover { border-color: var(--primary); color: var(--primary-darker); }
.amount-btn.active {
    background: var(--bg-green-light);
    border-color: var(--primary);
    color: var(--primary-darkest);
}

.donate-total {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin: 20px 0;
    text-align: center;
    font-size: 16px;
}
.donate-total strong { font-family: var(--font-heading); font-size: 22px; color: var(--primary-darkest); }

.failure-card .failure-icon {
    width: 76px; height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #FEE2E2;
    color: var(--accent-dark);
    font-size: 34px;
    display: grid; place-items: center;
}
.failure-card h1 { margin-bottom: 10px; }
.failure-card #contactNote { margin-top: 18px; }

/* Printed confirmation: just the details, no site furniture */
@media print {
    .dh-header, .dh-footer, .success-actions, .skip-link, .alert { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #999; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .dh-mobile-toggle { display: flex; }
    /* No room for a second header button — Donate returns to the drawer. */
    .dh-donate-btn { display: none; }
    .nav-donate { display: block; }
    .dh-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(300px, 80vw);
        background: #fff;
        padding: 90px 24px 24px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: var(--shadow-xl);
    }
    .dh-nav.active { transform: translateX(0); }
    .dh-nav ul { flex-direction: column; align-items: flex-start; gap: 20px; }
    .dh-footer-grid { grid-template-columns: 1fr 1fr; }

    /* Stack the alternating sections; media always leads on narrow screens */
    .split { grid-template-columns: 1fr; gap: 28px; }
    .split-reverse .split-media { order: 0; }
    .contact-grid { grid-template-columns: 1fr; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    .section { padding: 56px 0; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .dh-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .dh-logo-title { font-size: 16px; }
    .btn { width: 100%; }
    .dh-header-actions .btn { width: auto; }

    .hero { min-height: auto; padding: 48px 0 56px; }
    .hero-facts li { width: 100%; justify-content: center; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .video-play-icon { width: 60px; height: 60px; }
    .video-play-icon::after { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .donate-band, .cta-inner { flex-direction: column; align-items: flex-start; }
    .donate-band .btn, .cta-inner .btn { width: 100%; }
    .map-frame, .map-frame iframe { min-height: 280px; }

    .detail-list > div { flex-direction: column; gap: 2px; }
    .detail-list dd { text-align: left; }
    .success-actions { flex-direction: column; }
}

/* Honour a reduced-motion preference site-wide */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}