/* =============================================================================
   ui.css — EDUSKILL INDIA FOUNDATION premium component system
   -----------------------------------------------------------------------------
   Loaded LAST on every public page (and the admin panel), so it is the single
   deterministic winner for the shared components that were previously defined
   in several files at once (.btn was declared 4×, .nav-link 3× …).

   Rules of this file:
     • Every colour / radius / shadow / motion value comes from a CSS custom
       property, so the Global Theme Engine can restyle it with no code change.
     • No !important unless it is undoing a legacy conflict (each one commented).
     • Everything is keyboard accessible and honours prefers-reduced-motion.
   Contents: 1 tokens · 2 a11y · 3 buttons · 4 cards · 5 forms · 6 tables
             7 badges/alerts · 8 tabs/accordion · 9 pagination/breadcrumb
            10 modal/dropdown/tooltip · 11 states (empty/skeleton) · 12 utilities
   ============================================================================= */

/* 1. ------------------------------------------------------------- LOCAL TOKENS
   Derived from the theme tokens so components stay in sync automatically.     */
:root {
    --ui-ring: 0 0 0 4px var(--ring, rgba(23,77,61, .35));
    --ui-lift: var(--hover-lift, 4px);
    --ui-t: var(--transition, 250ms cubic-bezier(.4, 0, .2, 1));
    --ui-gap: clamp(.75rem, 2vw, 1.25rem);
    --ui-pad-card: clamp(1.1rem, 2.4vw, 1.6rem);
}

/* 2. --------------------------------------------------------------- ACCESSIBILITY
   One consistent, always-visible focus indicator. Mouse users never see it
   (:focus-visible), keyboard users always do — including inside components
   that previously set `outline:none`.                                         */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--secondary, #174D3D);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 10px);
}
/* Never let a component silently remove the indicator. */
:where(.btn, .ui-btn, .card, .pcard, .nav-link):focus-visible { outline-offset: 3px; }

/* Screen-reader-only text (for icon-only controls). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr-only-focusable:focus, .sr-only-focusable:focus-visible {
    position: static; width: auto; height: auto; margin: 0; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
}

/* Respect reduced motion everywhere, once. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;   /* undo legacy infinite animations */
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 3. --------------------------------------------------------------------- BUTTONS
   Single source of truth. `.ui-btn` is the modern class; `.btn` is aliased so
   every existing template picks the new design up with no markup change.      */
/* Layout/behaviour applies to EVERY button, including the bespoke premium
   variants (.btn-3d, .btn-glow, .btn-grad, .btn-social) — these are shared,
   non-visual properties so they can never clobber a variant's look. */
.btn, .ui-btn {
    --btn-bg: var(--primary, #0B4E3D);
    --btn-fg: #fff;
    --btn-shadow: 0 10px 22px -12px rgba(11,78,61, .7);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.15;
    text-decoration: none; cursor: pointer; isolation: isolate;
    transition: transform var(--ui-t), box-shadow var(--ui-t), background var(--ui-t), border-color var(--ui-t), filter var(--ui-t);
}
/* Skin only the standard buttons. The bespoke premium variants keep their own
   background/shadow from premium.css (they are excluded here on purpose). */
.btn:where(:not(.btn-3d):not(.btn-glow):not(.btn-grad):not(.btn-social)), .ui-btn {
    padding: .72rem 1.35rem;
    border: 1px solid transparent; border-radius: var(--radius-sm, 10px);
    background: var(--btn-bg); color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
}
.btn svg, .ui-btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.btn:where(:not(.btn-3d):not(.btn-glow):not(.btn-grad):not(.btn-social)):hover,
.ui-btn:hover { transform: translateY(-2px); filter: brightness(1.06); color: var(--btn-fg); }
.btn:active, .ui-btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn:disabled, .btn.is-disabled,
.ui-btn[disabled], .ui-btn:disabled { opacity: .55; pointer-events: none; box-shadow: none; transform: none; }

/* variants — each only redefines the three custom properties */
.btn-primary   { --btn-bg: var(--primary, #0B4E3D); }
.btn-primary:hover { --btn-bg: var(--secondary, #174D3D); }
.btn-secondary { --btn-bg: var(--surface, #fff); --btn-fg: var(--primary, #0B4E3D); --btn-shadow: var(--shadow-sm); border-color: var(--border, #E5E7EB); }
.btn-secondary:hover { --btn-bg: var(--primary, #0B4E3D); --btn-fg: #fff; }
.btn-outline   { --btn-bg: transparent; --btn-fg: var(--primary, #0B4E3D); --btn-shadow: none; border-color: currentColor; }
.btn-outline:hover { --btn-bg: var(--primary, #0B4E3D); --btn-fg: #fff; border-color: transparent; }
.btn-ghost     { --btn-bg: transparent; --btn-fg: var(--text-soft, #374151); --btn-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--surface-2, #F4F8FC); --btn-fg: var(--text, #0B4E3D); }
.btn-success   { --btn-bg: var(--green, #2F8065); --btn-shadow: 0 10px 22px -12px rgba(47,128,101,.75); }
.btn-success:hover { --btn-bg: var(--green-dark, #1F5C48); }
.btn-danger    { --btn-bg: var(--danger, #DC2626); --btn-shadow: 0 10px 22px -12px rgba(220,38,38,.7); }
.btn-warning   { --btn-bg: var(--orange, #F15A24); --btn-shadow: 0 10px 22px -12px rgba(241,90,36,.7); }
.btn-info      { --btn-bg: var(--secondary, #174D3D); }
.btn-white     { --btn-bg: #fff; --btn-fg: var(--primary, #0B4E3D); }
/* the donate / hero CTA: gradient + 3D base edge */
.btn-donate, .btn-cta {
    --btn-bg: var(--grad-donate, linear-gradient(135deg, #F15A24, #E8C52E));
    box-shadow: 0 5px 0 #A85410, 0 14px 30px -10px rgba(241,90,36, .7);
}
.btn-donate:hover, .btn-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #A85410, 0 20px 40px -10px rgba(241,90,36, .85); }
.btn-donate:active, .btn-cta:active { transform: translateY(1px); box-shadow: 0 2px 0 #A85410; }
/* sizes + layout */
.btn-sm { padding: .48rem .85rem; font-size: .84rem; border-radius: var(--radius-sm, 9px); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.05rem; border-radius: var(--radius, 14px); }
.btn-block { display: flex; width: 100%; }
.btn-icon { padding: .6rem; aspect-ratio: 1; border-radius: 50%; }
/* loading state */
.btn.is-loading { color: transparent !important; pointer-events: none; }  /* hide label, keep width */
.btn.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 1.05em; height: 1.05em;
    border: 2px solid #fff; border-right-color: transparent; border-radius: 50%;
    animation: ui-spin .6s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 4. ----------------------------------------------------------------------- CARDS */
.ui-card {
    display: flex; flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--ui-t), box-shadow var(--ui-t), border-color var(--ui-t);
}
.ui-card:hover { transform: translateY(calc(var(--ui-lift) * -1)); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary, #0B4E3D) 35%, transparent); }
.ui-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.ui-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.ui-card:hover .ui-card__media img { transform: scale(1.06); }
.ui-card__body { padding: var(--ui-pad-card); display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ui-card__title { font-size: 1.12rem; font-weight: 800; line-height: 1.3; margin: 0; color: var(--primary, #0B4E3D); }
.ui-card__text { font-size: .9rem; color: var(--muted, #6B7280); line-height: 1.6; margin: 0; }
.ui-card__foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* responsive auto grid used by every listing page */
.ui-grid { display: grid; gap: var(--ui-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ui-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.ui-grid--tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* 5. ----------------------------------------------------------------------- FORMS */
.ui-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.ui-label { font-size: .86rem; font-weight: 650; color: var(--text-soft, #374151); }
.ui-label .req { color: var(--danger, #DC2626); }
.ui-input, .ui-select, .ui-textarea,
.form-control, .form-select, .form-textarea {
    width: 100%; padding: .68rem .85rem;
    border: 1.5px solid var(--border, #E5E7EB); border-radius: var(--radius-sm, 10px);
    background: var(--surface, #fff); color: var(--text, #0B4E3D);
    font: inherit; font-size: .94rem;
    transition: border-color var(--ui-t), box-shadow var(--ui-t), background var(--ui-t);
}
.ui-input::placeholder, .form-control::placeholder { color: var(--muted, #6B7280); opacity: .85; }
.ui-input:hover, .form-control:hover, .form-select:hover, .form-textarea:hover { border-color: color-mix(in srgb, var(--secondary, #174D3D) 45%, transparent); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus,
.form-control:focus, .form-select:focus, .form-textarea:focus {
    outline: none;                                  /* replaced by the ring below */
    border-color: var(--secondary, #174D3D);
    box-shadow: var(--ui-ring);
}
.ui-textarea, .form-textarea { min-height: 110px; resize: vertical; }
.ui-hint { font-size: .78rem; color: var(--muted, #6B7280); }
.ui-error { font-size: .8rem; color: var(--danger, #DC2626); font-weight: 600; }
.is-invalid, .ui-input[aria-invalid="true"] { border-color: var(--danger, #DC2626) !important; }
.is-valid { border-color: var(--green, #2F8065) !important; }
/* input with a leading icon */
.ui-input-icon { position: relative; display: block; }
.ui-input-icon > svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 1.05em; height: 1.05em; color: var(--muted); pointer-events: none; }
.ui-input-icon > .ui-input, .ui-input-icon > .form-control { padding-left: 2.5rem; }
/* checkbox / radio */
.ui-check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .92rem; }
.ui-check input { accent-color: var(--primary, #0B4E3D); width: 1.05rem; height: 1.05rem; }
/* actions row */
.ui-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; padding-top: 1.1rem; border-top: 1px solid var(--border); margin-top: .4rem; }

/* 6. ---------------------------------------------------------------------- TABLES
   Always wrapped so a wide table scrolls instead of breaking the page.        */
.ui-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius, 14px); background: var(--surface); }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.ui-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-2); color: var(--muted);
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    text-align: left; padding: .8rem 1rem; white-space: nowrap; border-bottom: 1px solid var(--border);
}
.ui-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border-soft, #EEF2F7); vertical-align: middle; }
.ui-table tbody tr { transition: background var(--ui-t); }
.ui-table tbody tr:hover { background: color-mix(in srgb, var(--primary, #0B4E3D) 4%, transparent); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
/* stack into cards on phones — needs data-label on each cell */
@media (max-width: 620px) {
    .ui-table--stack thead { display: none; }
    .ui-table--stack tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .7rem; padding: .3rem .6rem; }
    .ui-table--stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .45rem 0; }
    .ui-table--stack td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: .78rem; text-transform: uppercase; }
}

/* 7. ------------------------------------------------------------- BADGES & ALERTS */
.ui-badge, .badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .65rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; line-height: 1.2;
    background: color-mix(in srgb, var(--primary, #0B4E3D) 12%, transparent);
    color: var(--primary, #0B4E3D);
}
.badge-success, .ui-badge--success { background: color-mix(in srgb, var(--green, #2F8065) 15%, transparent); color: var(--green-dark, #1F5C48); }
.badge-warning, .ui-badge--warning { background: color-mix(in srgb, var(--orange, #F15A24) 16%, transparent); color: #9A5313; }
.badge-danger,  .ui-badge--danger  { background: color-mix(in srgb, var(--danger, #DC2626) 13%, transparent); color: #B91C1C; }
.badge-muted,   .ui-badge--muted   { background: var(--surface-2); color: var(--muted); }

.ui-alert, .alert {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .9rem 1.1rem; border-radius: var(--radius-sm, 10px);
    border: 1px solid; font-size: .92rem; line-height: 1.55;
    background: var(--surface-2); border-color: var(--border); color: var(--text-soft);
}
.ui-alert svg, .alert svg { flex: 0 0 auto; margin-top: .12rem; }
.alert-info,    .ui-alert--info    { background: color-mix(in srgb, var(--secondary, #174D3D) 8%, transparent);  border-color: color-mix(in srgb, var(--secondary, #174D3D) 28%, transparent); }
.alert-success, .ui-alert--success { background: color-mix(in srgb, var(--green, #2F8065) 10%, transparent);     border-color: color-mix(in srgb, var(--green, #2F8065) 32%, transparent); }
.alert-warning, .ui-alert--warning { background: color-mix(in srgb, var(--orange, #F15A24) 10%, transparent);    border-color: color-mix(in srgb, var(--orange, #F15A24) 34%, transparent); }
.alert-danger, .alert-error, .ui-alert--danger { background: color-mix(in srgb, var(--danger, #DC2626) 8%, transparent); border-color: color-mix(in srgb, var(--danger, #DC2626) 30%, transparent); }

/* 8. --------------------------------------------------------------- TABS & ACCORDION */
.ui-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.3rem; }
.ui-tab {
    appearance: none; border: 0; background: transparent; color: var(--muted);
    font: inherit; font-weight: 650; padding: .62rem 1rem; cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: color var(--ui-t), background var(--ui-t), border-color var(--ui-t);
}
.ui-tab:hover { color: var(--text); background: var(--surface-2); }
.ui-tab[aria-selected="true"], .ui-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.ui-tabpanel[hidden] { display: none; }

.ui-accordion { border: 1px solid var(--border); border-radius: var(--radius, 14px); overflow: hidden; background: var(--surface); }
.ui-accordion + .ui-accordion { margin-top: .6rem; }
.ui-accordion summary,
.ui-accordion .ui-acc-head {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: 1rem 1.2rem; cursor: pointer; font-weight: 700; color: var(--primary);
    background: var(--surface); border: 0; font: inherit; font-size: 1rem; text-align: left;
    transition: background var(--ui-t);
    list-style: none;
}
.ui-accordion summary::-webkit-details-marker { display: none; }
.ui-accordion summary::after {
    content: ""; margin-left: auto; width: .6rem; height: .6rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--ui-t);
}
.ui-accordion[open] summary::after { transform: rotate(-135deg); }
.ui-accordion summary:hover { background: var(--surface-2); }
.ui-accordion .ui-acc-body { padding: 0 1.2rem 1.15rem; color: var(--text-soft); line-height: 1.7; }

/* 9. ------------------------------------------------------- PAGINATION & BREADCRUMB */
.ui-pagination { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; margin-top: 2rem; }
.ui-pagination a, .ui-pagination span,
.pagination a, .pagination span {
    display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .7rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-soft); font-weight: 650; font-size: .9rem;
    text-decoration: none; transition: all var(--ui-t);
}
.ui-pagination a:hover, .pagination a:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.ui-pagination .is-active, .pagination .active, .pagination .current {
    background: var(--grad-brand, var(--primary)); color: #fff; border-color: transparent;
    box-shadow: 0 8px 18px -10px rgba(11,78,61, .7);
}
.ui-pagination .is-disabled, .pagination .disabled { opacity: .45; pointer-events: none; }

.ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.ui-breadcrumb a { color: inherit; text-decoration: none; }
.ui-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.ui-breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.ui-breadcrumb ol, .ui-breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }

/* 10. ------------------------------------------------- MODAL · DROPDOWN · TOOLTIP */
.ui-modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); width: 100%; }
.ui-modal::backdrop { background: rgba(11,78,61, .5); backdrop-filter: blur(4px); }
.ui-modal__panel {
    background: var(--surface); border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border);
    animation: ui-pop .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ui-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.ui-modal__head { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border); }
.ui-modal__head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; }
.ui-modal__body { padding: 1.3rem; }
.ui-modal__foot { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.3rem; border-top: 1px solid var(--border); background: var(--surface-2); }

.ui-dropdown { position: relative; display: inline-block; }
.ui-dropdown__menu {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60; min-width: 190px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px);
    box-shadow: var(--shadow-lg); padding: .35rem; opacity: 0; visibility: hidden;
    transform: translateY(-6px); transition: opacity var(--ui-t), transform var(--ui-t), visibility var(--ui-t);
}
.ui-dropdown.is-open .ui-dropdown__menu,
.ui-dropdown__menu[data-open] { opacity: 1; visibility: visible; transform: none; }
.ui-dropdown__item { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--text-soft); text-decoration: none; font-size: .9rem; }
.ui-dropdown__item:hover { background: var(--surface-2); color: var(--text); }

.ui-tip { position: relative; }
.ui-tip::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0;
    background: var(--primary); color: #fff; font-size: .74rem; font-weight: 600; white-space: nowrap;
    padding: .35rem .6rem; border-radius: 7px; opacity: 0; pointer-events: none;
    transition: opacity var(--ui-t); box-shadow: var(--shadow);
}
.ui-tip:hover::after, .ui-tip:focus-visible::after { opacity: 1; }

/* 11. --------------------------------------------------- EMPTY / LOADING STATES */
.ui-empty { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; color: var(--muted); }
.ui-empty__icon {
    width: 68px; height: 68px; margin: 0 auto 1.1rem; display: grid; place-items: center;
    border-radius: var(--radius-lg); color: var(--primary);
    background: color-mix(in srgb, var(--primary, #0B4E3D) 10%, transparent);
}
.ui-empty__icon svg { width: 30px; height: 30px; }
.ui-empty h3 { margin: 0 0 .35rem; color: var(--text); font-size: 1.1rem; }

.ui-skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.ui-skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
    animation: ui-shimmer 1.3s infinite;
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }
.ui-skeleton--text { height: .8rem; margin-bottom: .5rem; }
.ui-skeleton--title { height: 1.3rem; width: 60%; margin-bottom: .8rem; }
.ui-skeleton--media { aspect-ratio: 16 / 10; border-radius: var(--radius); }

/* 12. -------------------------------------------------------------- UTILITIES / FIXES
   Global guards against the overflow + layout-shift issues found in the audit. */
/* Contain stray wide children WITHOUT breaking position:sticky.
   `overflow-x:hidden` on html/body silently disables sticky descendants in
   Chrome/Safari — `clip` does not, so it is the correct guard here. */
html { overflow-x: clip; }
@supports not (overflow: clip) {                   /* older Safari/Firefox fallback */
    body { overflow-x: hidden; }
}
img, svg, video, iframe, canvas { max-width: 100%; }
img[width][height] { height: auto; }               /* keep the aspect ratio while reserving space */
/* long words / URLs must never widen a container */
p, li, dd, dt, h1, h2, h3, h4, h5, h6, .ui-card__text, .ui-card__title { overflow-wrap: break-word; }
/* any table that missed its wrapper still scrolls rather than breaking out */
table { max-width: 100%; }
/* consistent section rhythm */
.ui-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.ui-stack > * + * { margin-top: var(--ui-gap); }
.ui-center { margin-inline: auto; }

/* Print: drop chrome, keep content readable. */
@media print {
    .navbar, .site-header, .footer, .fab-stack, .back-to-top, .announcement-bar, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .ui-card, .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* =============================================================================
   13. ACCESSIBILITY REMEDIATION  (from the WCAG AA audit)
   Each rule below fixes a specific measured failure; ratios were computed with
   theme_contrast() and are noted inline.
   ============================================================================= */

/* 13.1 CRITICAL — the off-canvas drawer was hidden with transform alone, so it
   stayed in the tab order and the accessibility tree on every page. Hiding it
   with `visibility` removes it from both, and the slide animation still plays
   because visibility is transitioned alongside transform. */
.nav-drawer { transition: transform .35s cubic-bezier(.4,0,.2,1), visibility .35s linear; }
.nav-drawer:not(.is-open) { visibility: hidden; }
.nav-drawer.is-open { visibility: visible; }

/* 13.2 HIGH — the focus ring was a 35%-alpha wash (~1.9:1 on white).
   A solid 3px brand outline gives a clearly visible, AA-compliant indicator. */
:where(a, button, input, select, textarea, summary, [tabindex], .btn, .nav-link):focus-visible {
    outline: 3px solid var(--secondary, #174D3D);
    outline-offset: 2px;
}
/* On dark/branded surfaces the navy ring would disappear — use white there. */
.section-brand :focus-visible, .footer :focus-visible, .hx :focus-visible,
.nav-drawer :focus-visible, .pcard-strip :focus-visible {
    outline-color: #fff;
}

/* 13.3 HIGH — white text on the brand orange (2.91:1) and green (3.10:1) failed
   AA. Solid CTA fills use the AA-passing deeper shades; the lighter brand hues
   stay for decorative fills (gradients, badges' backgrounds, icons). */
.btn-donate, .btn-cta, .ui-btn--donate {
    --btn-bg: linear-gradient(135deg, #A85410 0%, #C2610F 100%);   /* 5.33:1 / 4.25:1 */
}
.btn-success, .ui-btn--success { --btn-bg: #1F5C48; }              /* 4.60:1 */
.btn-warning { --btn-bg: #A85410; }                                /* 5.33:1 */
.btn-accent  { background: #A85410 !important; }                   /* overrides legacy .btn-accent */

/* 13.4 HIGH — badge label colours on their own tinted backgrounds were 1.9:1
   and 3.0:1. These pairs are 5.05:1 and 5.88:1. */
.badge-accent,  .ui-badge--warning { background: rgba(241,90,36,.16); color: #8A4A11; }
.badge-success, .ui-badge--success { background: rgba(47,128,101,.16);  color: #2A6B1F; }
.alert-success { color: #2A6B1F; }

/* 13.5 MEDIUM — decorative icons must not be announced. Anything that is purely
   ornamental is hidden; icons that carry meaning keep an adjacent text label. */
.btn > svg, .ui-btn > svg, .pcard-badge > svg, .ui-badge > svg,
.footer-trust svg, .social-links svg { pointer-events: none; }

/* 13.6 MEDIUM — reduced motion must actually STOP infinite animations, not just
   run them at 0.01ms forever (which still burns a compositor frame budget). */
@media (prefers-reduced-motion: reduce) {
    .hx-blob, .hx-img, .marquee-track, .pulse,
    [class*="float"], [class*="shimmer"], .ui-skeleton::after {
        animation: none !important;
    }
    html { scroll-behavior: auto !important; }
}

/* 13.7 HIGH (responsive) — the OTP row overflowed every phone. Let the inputs
   shrink and wrap instead of forcing a fixed track. */
.otp-inputs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.otp-inputs input { width: clamp(2.4rem, 12vw, 3.25rem); min-width: 0; flex: 0 1 auto; }

/* 13.8 HIGH (responsive) — between 769px and 992px the desktop nav had no
   hamburger and overflowed. Show the drawer toggle across that band too.
   Raised 992 → 1100: seven top-level items plus search, theme toggle, Login and
   the Donate CTA do not fit a 1000px bar, so the CTA — the single most important
   control in the header — was being clipped off the right edge across the whole
   993–1100px band. The drawer now takes over before that happens. */
@media (max-width: 1100px) {
    .nav-menu { display: none; }
    .nav-toggle { display: inline-flex; }
}

/* 13.9 MEDIUM — reserve space for icons so they cannot cause layout shift while
   the icon script boots (previously zero-size <i> placeholders). */
[data-lucide] { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.18em; }

/* 13.10 MEDIUM — the fixed flash stack overlapped the sticky navbar. */
.flash-stack { top: calc(var(--header-h, 74px) + 1.25rem); }
@media (max-width: 640px) { .flash-stack { left: .75rem; right: .75rem; width: auto; } }

/* =============================================================================
   14. FOOTER REFINEMENT  (matches the approved reference design)
   Design-only: no markup changes, so every link/route keeps working.
   ============================================================================= */

/* 14.1 Persistent chevron bullet on every sitemap link. This is ONE static
   marker — the earlier bug was two markers appearing together on hover.
   The marker sits at low contrast and takes the hero's yellow on hover; a full
   orange chevron on all ~45 links made the sitemap the loudest thing on the
   page. Hover no longer switches font-weight either — that re-flowed the label
   under the cursor on every pass. */
.footer-premium .footer-col ul li { position: relative; }
.footer-premium .footer-col ul a {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .2rem 0; color: var(--f-ink-2); font-weight: 500; line-height: 1.5;
    transition: color .22s ease, transform .22s ease;
}
.footer-premium .footer-col ul a::before {
    content: ""; flex: 0 0 auto; width: .42rem; height: .42rem;
    border-right: 2px solid rgba(255,255,255,.42);
    border-bottom: 2px solid rgba(255,255,255,.42);
    transform: rotate(-45deg); transition: border-color .22s ease;
}
.footer-premium .footer-col ul a::after { content: none !important; }  /* kill the legacy 2nd marker */
.footer-premium .footer-col ul a:hover,
.footer-premium .footer-col ul a:focus-visible {
    color: #fff; transform: translateX(2px);
}
.footer-premium .footer-col ul a:hover::before,
.footer-premium .footer-col ul a:focus-visible::before { border-color: var(--f-accent); }

/* 14.2 Column headings — the hero's yellow → gold rule under each label. */
.footer-premium .footer-col h4 {
    color: #fff; font-size: .98rem; font-weight: 800; letter-spacing: .01em;
    position: relative; padding-bottom: .55rem; margin-bottom: .9rem;
}
.footer-premium .footer-col h4::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px;
    border-radius: 2px; background: linear-gradient(90deg, var(--f-accent), var(--f-gold));
}

/* 14.3 Newsletter block: joined pill field + solid accent CTA. */
.footer-newsletter {
    background: var(--f-glass); border: 1px solid var(--f-line);
    border-radius: var(--radius-lg, 20px); padding: clamp(1.2rem, 3vw, 1.8rem);
}
.footer-newsletter h3 { color: #fff; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; margin-bottom: .35rem; }
.footer-newsletter .newsletter-form { display: flex; gap: 0; margin-top: 1rem; flex-wrap: wrap; }
.footer-newsletter .newsletter-form input {
    flex: 1 1 200px; min-width: 0; border-radius: 999px 0 0 999px;
    border: 1px solid var(--f-line); border-right: 0;
    background: rgba(255,255,255,.07); color: #fff; padding: .85rem 1.2rem;
}
.footer-newsletter .newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.footer-newsletter .newsletter-form .btn {
    border-radius: 0 999px 999px 0; padding-inline: 1.5rem;
    background: var(--f-cta); color: #fff; border: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}
@media (max-width: 520px) {
    .footer-newsletter .newsletter-form input { border-radius: 999px; border-right: 1px solid var(--f-line); }
    .footer-newsletter .newsletter-form .btn { border-radius: 999px; width: 100%; margin-top: .5rem; }
}

/* 14.4 Brand column: a short rule under the logo lockup, in the hero's yellow. */
.footer-brand-col .nav-brand { padding-bottom: 1rem; position: relative; }
.footer-brand-col .nav-brand::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px;
    border-radius: 2px; background: linear-gradient(90deg, var(--f-accent), var(--f-gold));
}

/* 14.5 Trust strip: boxed icons, evenly divided, wraps cleanly on mobile. */
.footer-trust {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: .4rem 1rem; margin-top: 2rem; padding: 1.1rem 1.3rem;
    background: var(--f-glass); border: 1px solid var(--f-line);
    border-radius: var(--radius, 14px);
}
.footer-trust span {
    display: inline-flex; align-items: center; gap: .7rem;
    font-size: .88rem; font-weight: 600; color: var(--f-ink); line-height: 1.35;
}
.footer-trust span + span { border-left: 1px solid var(--f-line); padding-left: 1rem; }
.footer-trust svg {
    width: 2.1rem; height: 2.1rem; flex: 0 0 auto; padding: .45rem; border-radius: 10px;
    color: var(--f-accent); background: color-mix(in srgb, var(--f-accent) 14%, transparent);
}
@media (max-width: 700px) {
    .footer-trust span + span { border-left: 0; padding-left: 0; }
}

/* 14.6 Social pills — one uniform treatment, filling with the hero's yellow. */
.footer-premium .social-links a {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--f-glass); border: 1px solid var(--f-line); color: rgba(255,255,255,.86);
}
.footer-premium .social-links a:hover {
    background: var(--f-accent); border-color: transparent;
    color: var(--primary, #0B4E3D); transform: translateY(-2px);
}

/* =============================================================================
   15. PREMIUM ANNOUNCEMENT BAR
   Animated brand-gradient background, gradient-shimmer text, floating CSS
   particles and a pill CTA. Everything animates transform/opacity or
   background-position only (compositor-friendly), and the whole thing goes
   static under prefers-reduced-motion.
   ============================================================================= */
/* -----------------------------------------------------------------------------
   Announcement bar — a quiet ivory strip, not a light show.

   This previously ran a 300%-wide panning 4-stop gradient, a looping sheen
   sweep and eight floating particles, all above the fold and all animating
   forever. Three simultaneous infinite animations competed with the hero for
   attention and never stopped costing paint. It now reads as a calm editorial
   notice: warm ivory field, brand-green text, and a single pill CTA carrying
   the only colour. Motion is limited to hover.
   -------------------------------------------------------------------------- */
.announcement-bar.ann-premium {
    --ann-bg: var(--ivory, #FEFEF1);
    --ann-fg: var(--primary, #0B4E3D);
    position: relative; isolation: isolate;
    display: flex; align-items: center; gap: .75rem;
    padding: .68rem clamp(2.6rem, 5vw, 3.2rem) .68rem clamp(.9rem, 3vw, 1.4rem);
    background: var(--ann-bg); color: var(--ann-fg); text-align: left;
    border-bottom: 1px solid var(--border, #C1CCB3);
}
/* Admin picked a custom colour → honour it. */
.announcement-bar.ann-premium.ann-solid { background: var(--ann-bg); }

.announcement-bar.ann-premium .ann-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    flex-wrap: wrap; width: 100%; margin-inline: auto; max-width: var(--container, 1200px);
    font-size: .92rem; font-weight: 600; line-height: 1.4; letter-spacing: -.005em;
}

/* Pill CTA — the one saturated element in the strip.
   Yellow on ivory is only a 1.20:1 pair, so the pill had no discernible edge
   against the bar; the hairline gives it the 3:1 boundary a control needs. */
.announcement-bar.ann-premium .ann-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .48rem 1.15rem; border-radius: 999px;
    background: var(--yellow, #FFE987); color: var(--primary, #0B4E3D);
    font-weight: 800; font-size: .88rem; text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--primary, #0B4E3D) 55%, transparent);
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease;
}
.announcement-bar.ann-premium .ann-cta:hover {
    background: var(--gold, #E8C52E); transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(11,78,61,.45);
}
.announcement-bar.ann-premium .ann-cta:focus-visible {
    outline: 2px solid var(--primary, #0B4E3D); outline-offset: 2px;
}
.announcement-bar.ann-premium .ann-cta svg { width: 1em; height: 1em; transition: transform .2s ease; }
.announcement-bar.ann-premium .ann-cta:hover svg { transform: translateX(2px); }

/* Hand-drawn arrow pointing at the CTA — decorative, hidden from AT and on mobile. */
.ann-doodle { flex: none; width: 46px; height: 22px; color: var(--muted, #4B6754); opacity: .55; }
.ann-doodle svg { width: 100%; height: 100%; display: block; }
@media (max-width: 720px) { .ann-doodle { display: none; } }

/* "News" pill */
.ann-badge {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
    padding: .22rem .6rem; border-radius: 999px;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
    font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.ann-badge svg { width: .95em; height: .95em; }

/* The message reads as solid text in the bar's own ink.
   It was previously painted with a white→cream→green→blue gradient clipped
   through the glyphs and panned on an 8s loop. That was built for the old dark
   announcement bar; once the bar became a warm ivory strip the gradient
   rendered near-white letters on a near-white field — measured contrast about
   1.1:1, i.e. the notice was effectively invisible. Solid --ann-fg on --ann-bg
   is 9.67:1. The .ann-solid override that used to undo the gradient for
   admin-chosen colours is no longer needed: there is no gradient to undo. */
.ann-text {
    font-weight: 700; letter-spacing: .01em;
    color: var(--ann-fg); -webkit-text-fill-color: var(--ann-fg);
}

/* CTA pill */
.ann-cta {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
    padding: .32rem .85rem; border-radius: 999px;
    background: #fff; color: var(--primary, #0B4E3D) !important;   /* beats the generic footer/link colour */
    font-size: .8rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 4px 14px -4px rgba(0,0,0,.35);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ann-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); background: #FFF7ED; }
.ann-cta svg { width: 1em; height: 1em; }

/* close button — absolutely placed but with reserved padding so it can never
   sit on top of the message (the old bar overlapped on narrow screens) */
/* Tinted from the bar's own ink rather than white-on-white: the translucent
   white border and fill it used to carry were built for a dark bar and left the
   dismiss control with no visible edge on the ivory strip. */
.announcement-bar.ann-premium .ann-close {
    position: absolute; z-index: 3; right: clamp(.5rem, 2vw, .9rem); top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--ann-fg) 40%, transparent); border-radius: 50%;
    background: color-mix(in srgb, var(--ann-fg) 7%, transparent); color: var(--ann-fg);
    font-size: 1rem; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.announcement-bar.ann-premium .ann-close:hover { background: color-mix(in srgb, var(--ann-fg) 16%, transparent); transform: translateY(-50%) rotate(90deg); }
.announcement-bar.ann-premium .ann-close:focus-visible { outline: 2px solid var(--ann-fg); outline-offset: 2px; }

/* graceful dismiss */
.announcement-bar.is-dismissed {
    height: 0 !important; padding-block: 0; opacity: 0; overflow: hidden;
    transition: height .3s ease, padding .3s ease, opacity .2s ease;
}

@media (max-width: 640px) {
    .announcement-bar.ann-premium { padding-left: .75rem; }
    .announcement-bar.ann-premium .ann-inner { justify-content: flex-start; gap: .5rem; font-size: .82rem; }
    .ann-badge { display: none; }              /* keep the message + CTA readable */
}
@media (prefers-reduced-motion: reduce) {
    /* The panning background, the eight floating .ann-particles and the
       gradient-shimmer text this block used to switch off no longer exist, so
       only the CTA's hover lift is left to hold still. */
    .announcement-bar.ann-premium .ann-cta { transition: none; }
    .announcement-bar.ann-premium .ann-cta:hover { transform: none; }
    .announcement-bar.ann-premium .ann-close:hover { transform: translateY(-50%); }
}

/* =============================================================================
   16. CAUSE CARDS  (causes.php "Choose A Cause Close To Your Heart")
   Premium editorial treatment: soft patterned section, glass cards with a
   per-cause accent, gradient icon tile and clear dual CTAs.
   ============================================================================= */
.cause-grid {
    display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.cause-card {
    --cc: var(--primary, #0B4E3D);
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: clamp(1.6rem, 3vw, 2.1rem) clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.3rem, 2.5vw, 1.6rem);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: clamp(16px, 2vw, 22px);
    box-shadow: 0 1px 2px rgba(11,78,61,.04), 0 20px 44px -30px rgba(11,78,61,.45);
    transition: transform .28s cubic-bezier(.34,1.2,.64,1), box-shadow .28s ease, border-color .28s ease;
}
.cause-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--cc) 45%, transparent);
    box-shadow: 0 1px 2px rgba(11,78,61,.05), 0 34px 66px -30px color-mix(in srgb, var(--cc) 55%, transparent);
}
/* accent rule across the top */
.cause-card .cc-rule { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cc-grad, var(--cc)); z-index: 2; }
/* soft radial glow that blooms on hover */
.cause-card .cc-glow {
    position: absolute; z-index: -1; top: -40%; left: 50%; translate: -50% 0;
    width: 220px; height: 220px; border-radius: 50%; filter: blur(60px);
    background: var(--cc); opacity: 0; transition: opacity .35s ease;
}
.cause-card:hover .cc-glow { opacity: .18; }
/* gradient icon tile */
.cause-card .cc-icon {
    width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 1rem;
    border-radius: 18px; color: #fff; background: var(--cc-grad, var(--cc));
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--cc) 75%, transparent);
    transition: transform .3s cubic-bezier(.34,1.4,.64,1);
}
.cause-card .cc-icon svg { width: 27px; height: 27px; }
.cause-card:hover .cc-icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
/* typography */
.cause-card .cc-title {
    font-size: 1.12rem; font-weight: 800; line-height: 1.3; letter-spacing: -.012em;
    color: var(--primary, #0B4E3D); margin: 0 0 .45rem;
}
.cause-card:hover .cc-title { color: var(--cc); }
.cause-card .cc-text {
    font-size: .89rem; line-height: 1.65; color: var(--muted, #6B7280);
    margin: 0 0 1.25rem; max-width: 34ch;
}
/* CTAs */
.cause-card .cc-actions { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.cause-card .cc-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1.05rem; border-radius: 999px;
    font-size: .82rem; font-weight: 750; text-decoration: none; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cause-card .cc-btn svg { width: 1em; height: 1em; }
.cause-card .cc-btn-ghost {
    color: var(--cc); background: transparent;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 40%, transparent);
}
.cause-card .cc-btn-ghost:hover { background: color-mix(in srgb, var(--cc) 10%, transparent); transform: translateY(-2px); }
.cause-card .cc-btn-fill {
    color: #fff; background: var(--cc-grad, var(--cc));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cc) 75%, transparent);
}
.cause-card .cc-btn-fill:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -8px color-mix(in srgb, var(--cc) 85%, transparent); color: #fff; }

/* Section backdrop: faint brand mesh + dot grid so the cards sit on texture
   rather than flat white (no image request, so no extra page weight). */
.section-causes {
    position: relative; isolation: isolate;
    background:
        radial-gradient(60rem 30rem at 12% -10%, color-mix(in srgb, var(--primary,#0B4E3D) 7%, transparent), transparent 60%),
        radial-gradient(50rem 28rem at 92% 8%,  color-mix(in srgb, var(--green,#2F8065) 7%, transparent), transparent 60%),
        linear-gradient(180deg, var(--bg, #fff), var(--bg-alt, #F1F6FB));
}
.section-causes::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--primary,#0B4E3D) 14%, transparent) 1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* =============================================================================
   17. COLLAPSING NAV SEARCH  (icon → mini bar → optional voice)
   The always-open input was eating header width; it now starts as a single
   icon and expands only when invoked.
   ============================================================================= */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-trigger {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--border, #E5E7EB); border-radius: 50%;
    background: var(--surface, #fff); color: var(--text-soft, #374151); cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.nav-search-trigger:hover { color: var(--primary, #0B4E3D); border-color: var(--primary, #0B4E3D); transform: translateY(-1px); }
.nav-search-trigger svg { width: 18px; height: 18px; }

.nav-search-box {
    display: flex; align-items: center; gap: .4rem;
    width: 0; opacity: 0; visibility: hidden; padding: 0; overflow: hidden;
    border: 1px solid transparent; border-radius: 999px; background: var(--surface, #fff);
    transition: width .32s cubic-bezier(.22,1,.36,1), opacity .22s ease,
                visibility .32s linear, padding .32s ease, border-color .22s ease, box-shadow .22s ease;
}
.nav-search.is-open .nav-search-box {
    width: clamp(200px, 26vw, 320px); opacity: 1; visibility: visible;
    padding: .3rem .45rem .3rem .8rem;
    border-color: var(--border, #E5E7EB); box-shadow: var(--shadow-sm);
}
.nav-search.is-open .nav-search-trigger { display: none; }
.nav-search-box:focus-within { border-color: var(--secondary, #174D3D); box-shadow: 0 0 0 4px var(--ring); }
.nav-search-box .nsb-ico { display: inline-flex; color: var(--muted, #6B7280); flex: 0 0 auto; }
.nav-search-box .nsb-ico svg { width: 16px; height: 16px; }
.nav-search-box input {
    flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
    font: inherit; font-size: .9rem; color: var(--text, #0B4E3D); padding: .35rem 0;
}
.nav-search-box input::placeholder { color: var(--muted, #6B7280); }
.nsb-mic, .nsb-clear {
    flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--muted, #6B7280); cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nsb-mic:hover, .nsb-clear:hover { background: var(--surface-2, #F4F8FC); color: var(--primary, #0B4E3D); }
.nsb-mic svg, .nsb-clear svg { width: 15px; height: 15px; }
/* live mic state — pulsing ring while the browser is listening */
.nsb-mic.is-listening { background: var(--orange, #F15A24); color: #fff; animation: nsb-pulse 1.3s ease-in-out infinite; }
@keyframes nsb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241,90,36,.55); }
    50%      { box-shadow: 0 0 0 7px rgba(241,90,36,0); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-search-box { transition: none; }
    .nsb-mic.is-listening { animation: none; }
}
/* results panel */
.nav-search-panel {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 80;
    width: min(380px, 86vw); max-height: 60vh; overflow: auto;
    background: var(--surface, #fff); border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius, 14px); box-shadow: var(--shadow-lg); padding: .4rem;
}
@media (max-width: 860px) {
    .nav-search.is-open .nav-search-box { width: min(70vw, 260px); }
}

/* =============================================================================
   18. COLOURFUL MEGA MENU
   Each link gets a tinted icon tile; the palette cycles so a column reads as a
   set of distinct, scannable items rather than a grey list.
   ============================================================================= */
.mega-menu { border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-lg); overflow: hidden; }
.mega-link {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .62rem .7rem; border-radius: var(--radius-sm, 12px);
    color: var(--text-soft, #374151); text-decoration: none; position: relative;
    transition: background .2s ease, transform .2s ease, color .2s ease;
}
.mega-link:hover { background: var(--surface-2, #F4F8FC); transform: translateX(3px); }
/* Icon tiles — ONE treatment for every item. This used to cycle six hues
   through --mi-grad (navy, green, orange, cyan, purple, pink), so the header
   dropdown carried three colours that appear nowhere else in the brand and the
   icon set read as if it came from several families. A single green tint that
   fills solid on hover keeps the dropdown quiet and the icons consistent. */
.mega-link .mi {
    flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 11px;
    color: var(--primary, #0B4E3D);
    background: color-mix(in srgb, var(--primary, #0B4E3D) 10%, transparent);
    box-shadow: none;
    transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.4,.64,1);
}
.mega-link:hover .mi { background: var(--primary, #0B4E3D); color: #fff; transform: translateY(-2px); }
.mega-link .mi svg { width: 18px; height: 18px; }
.mega-link .mtxt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mega-link .mtxt strong { font-size: .92rem; font-weight: 700; color: var(--text, #151818); line-height: 1.3; }
.mega-link:hover .mtxt strong { color: var(--primary, #0B4E3D); }
.mega-link .mtxt small { font-size: .76rem; color: var(--muted, #4B6754); line-height: 1.45; }

/* feature strip at the foot of the mega panel */
.mega-feature {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin-top: .5rem; padding: 1rem 1.1rem;
    background: var(--grad-brand); color: #fff;
    border-radius: var(--radius, 14px);
}
.mega-feature img { border-radius: 10px; background: #fff; padding: 4px; flex: 0 0 auto; }
.mega-feature .mf-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.mega-feature .mf-text strong { font-size: .92rem; }
.mega-feature .mf-text span { font-size: .8rem; opacity: .88; }

/* =============================================================================
   19. [hidden] BASELINE
   Any component that sets an explicit `display` silently defeats the `hidden`
   attribute (this shipped a preview modal that opened on load and could not be
   closed). One guard makes `hidden` authoritative everywhere.
   ============================================================================= */
[hidden] { display: none !important; }

/* =============================================================================
   20. MAILBOX  (admin/email-mailbox.php)
   Three-pane mail client: rail · list · reading pane. Premium surfaces, clear
   unread hierarchy, smooth row/pane transitions, collapses cleanly to mobile.
   ============================================================================= */
.mbx-rail {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg, 18px); padding: .9rem; align-self: start;
    position: sticky; top: 96px;
}
/* Compose — the primary action, given real presence */
.mbx-compose {
    background: var(--grad-brand) !important;         /* beats the generic .btn skin */
    color: #fff !important; border: 0 !important;
    border-radius: 999px !important; padding: .85rem 1.2rem !important;
    font-size: .98rem !important; font-weight: 800 !important;
    box-shadow: 0 12px 26px -12px rgba(11,78,61,.75) !important;
    margin-bottom: 1rem;
}
.mbx-compose:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(11,78,61,.85) !important; }

.mbx-rail-sep {
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); padding: .9rem .6rem .4rem;
}
.mbx-folders { display: flex; flex-direction: column; gap: .15rem; }
.mbx-folder {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: 11px;
    color: var(--text-soft); font-size: .92rem; font-weight: 600; text-decoration: none;
    position: relative; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mbx-folder:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.mbx-folder .mf-ic { display: inline-flex; color: var(--muted); transition: color .18s ease; }
.mbx-folder .mf-ic svg { width: 18px; height: 18px; }
.mbx-folder:hover .mf-ic { color: var(--primary); }
.mbx-folder .mf-name { flex: 1; min-width: 0; }
.mbx-folder .mf-count {
    font-size: .72rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.mbx-folder.is-active {
    background: var(--grad-brand); color: #fff;
    box-shadow: 0 10px 20px -12px rgba(11,78,61,.8);
}
.mbx-folder.is-active .mf-ic { color: #fff; }
.mbx-folder.is-active .mf-count { background: rgba(255,255,255,.24); color: #fff; }

/* message list */
.mbx-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); overflow: hidden; }

/* reading pane */
/* sender card */
@keyframes ui-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* responsive: stack the three panes */
@media (max-width: 1100px) {
    .mbx-rail { position: static; }
}
@media (max-width: 860px) {
}

/* =============================================================================
   21. FIXES: mega-menu icon tiles + mailbox (corrected to the REAL class names)
   ============================================================================= */

/* 21.1 premium.css sets `.mega-link .mi { background:none !important }`, which
   kills the tile while the icon colour still applies — an invisible glyph on no
   background. The tile is restored with matching !important and an explicit size
   (that rule also sets width/height auto).

   One flat green tint, filling solid green on hover — matching §18 above. It
   previously painted `--mi-grad`, the six-hue cycle (navy/green/orange/cyan/
   purple/pink) that put off-palette colour in the header dropdown, and lit it
   with a navy drop shadow. */
.mega-link .mi {
    width: 40px !important; height: 40px !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--primary, #0B4E3D) 10%, transparent) !important;
    color: var(--primary, #0B4E3D) !important;
    display: grid !important; place-items: center;
    box-shadow: none;
    transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.4,.64,1);
}
.mega-link .mi svg { width: 19px !important; height: 19px !important; stroke-width: 2.1; }
.mega-link:hover .mi {
    background: var(--primary, #0B4E3D) !important; color: #fff !important;
    filter: none; transform: translateY(-2px);
}

/* 21.2 Mailbox — these are the class names the template actually renders
   (.mbx-item / .mbx-who / .mbx-subj / .mbx-prev / .mbx-when …). */
.mbx-toolbar {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .85rem 1rem; border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2), transparent);
}
.mbx-view-title { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 800; color: var(--primary); margin: 0; }
.mbx-view-title svg { color: var(--primary); }
.mbx-count {
    font-size: .72rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.mbx-search { position: relative; }
.mbx-search input {
    border: 1px solid var(--border); border-radius: 999px; padding: .55rem .9rem .55rem 2.3rem;
    background: var(--surface); font-size: .88rem; min-width: 0; width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.mbx-search input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 4px var(--ring); }
.mbx-search-ic { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mbx-search-ic svg { width: 16px; height: 16px; }

/* message rows */
.mbx-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--border-soft);
    transition: background .16s ease, box-shadow .16s ease;
}
.mbx-item:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }
.mbx-item.is-open { background: color-mix(in srgb, var(--primary) 8%, transparent); box-shadow: inset 3px 0 0 var(--primary); }
.mbx-item.is-unread { background: color-mix(in srgb, var(--secondary) 5%, transparent); }
.mbx-item.is-unread .mbx-who, .mbx-item.is-unread .mbx-subj { font-weight: 800; color: var(--primary); }
.mbx-item-main { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.mbx-who  { font-size: .9rem; font-weight: 600; color: var(--text); flex: 0 0 auto; min-width: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-subj { font-size: .9rem; color: var(--text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-prev { font-size: .86rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-when { margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
/* priority accent stripes */
.mbx-item.pr-high   { box-shadow: inset 3px 0 0 var(--orange, #F15A24); }
.mbx-item.pr-urgent { box-shadow: inset 3px 0 0 var(--danger, #DC2626); }
/* star / important toggles */
.mbx-star, .mbx-imp { background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; padding: .15rem; border-radius: 6px; transition: color .18s ease, transform .18s ease; }
.mbx-star:hover, .mbx-imp:hover { transform: scale(1.15); }
.mbx-star.is-on, .mbx-star.on { color: var(--orange, #F15A24); }
.mbx-star.is-on svg, .mbx-star.on svg { fill: currentColor; }
.mbx-imp.is-on, .mbx-imp.on { color: var(--orange, #F15A24); }

/* panes */
.mbx-list, .mbx-list-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); overflow: hidden; }
.mbx-bulkbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 860px) { .mbx-prev { display: none; } }

/* =============================================================================
   22. COLOURFUL CURSOR  (desktop / fine-pointer only)
   A crisp brand dot, a lagging halo, and a colour-cycling particle trail.
   Everything is transform/opacity on its own layer, and the whole effect is
   disabled for touch, coarse pointers and reduced-motion users.
   ============================================================================= */
.cursor-dot, .cursor-ring, .cursor-spark {
    position: fixed; top: 0; left: 0; z-index: 9999;
    pointer-events: none;                 /* never intercepts clicks */
    will-change: transform, opacity;
    contain: layout style paint;
}
.cursor-dot {
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: var(--orange, #F15A24);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--orange, #F15A24) 65%, transparent);
    transition: width .18s ease, height .18s ease, margin .18s ease, background .25s ease;
}
.cursor-ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--primary, #0B4E3D) 55%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--secondary,#174D3D) 12%, transparent), transparent 70%);
    backdrop-filter: blur(1px);
    transition: width .25s cubic-bezier(.34,1.4,.64,1), height .25s cubic-bezier(.34,1.4,.64,1),
                margin .25s cubic-bezier(.34,1.4,.64,1), border-color .25s ease, opacity .25s ease;
}
/* interactive targets: ring blooms, dot shrinks */
body.cursor-hot .cursor-ring {
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    border-color: color-mix(in srgb, var(--green, #2F8065) 75%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--green,#2F8065) 16%, transparent), transparent 70%);
}
body.cursor-hot .cursor-dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--green, #2F8065); }
/* click pulse */
body.cursor-press .cursor-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-color: var(--orange, #F15A24); }

/* trail sparks — hue set inline by JS from the brand palette */
.cursor-spark {
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
    background: var(--spark, #F15A24);
    box-shadow: 0 0 8px 1px var(--spark, #F15A24);
    animation: cursor-fade .75s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cursor-fade {
    0%   { opacity: .9; transform: translate3d(var(--x,0), var(--y,0), 0) scale(1); }
    100% { opacity: 0;  transform: translate3d(var(--x,0), calc(var(--y,0) + 26px), 0) scale(.2); }
}

/* Only ever active on a real mouse, and never when motion is reduced. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cursor-dot, .cursor-ring, .cursor-spark { display: none !important; }
}

/* =============================================================================
   23. PARTNERS & SPONSORS — a clean logo wall
   -----------------------------------------------------------------------------
   Muted by default, the organisation's own colour on hover, one quiet fade.

   This replaced a 3D glass marquee: cards floated on a 7s loop, scrolled
   infinitely on a 42s loop, tilted in perspective on hover, and cycled a
   six-hue gradient wash (navy, green, orange, cyan, purple, pink) that also
   coloured a gradient monogram and a white-on-gradient tooltip. Three of those
   hues are not in the palette, the white tooltip text measured 2.9–3.7:1, and
   the monogram name label 1.5:1. A supporter wall is also the one place on the
   page where the *supporter's* mark should carry the colour, not ours.
   ============================================================================= */
.section-partners { position: relative; isolation: isolate; overflow-x: clip; }
.section-partners .section-subtitle { max-width: 56ch; margin-inline: auto; }

/* One soft bloom, low enough to never compete with the marks. */
.pn-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.pn-b1 { width: 460px; height: 460px; top: -190px; left: -140px; opacity: .16;
         background: radial-gradient(circle, var(--yellow, #FFE987), transparent 70%); }
.pn-b2 { display: none; }

/* ---- The wall ----------------------------------------------------------- */
.pn-wall {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 1px;                                  /* hairlines between cells */
    background: var(--border, #C1CCB3);
    border: 1px solid var(--border, #C1CCB3);
    border-radius: var(--r-lg, 20px);
    overflow: hidden;                          /* clips the cells to the radius */
}
.pn-card {
    position: relative;
    display: grid; place-items: center;
    min-height: 132px; padding: 1.5rem 1.25rem;
    background: var(--surface, #fff);
    text-decoration: none;
    transition: background var(--dur, .3s) var(--ease-out, ease);
}
.pn-card:hover, .pn-card:focus-visible { background: var(--ivory, #FEFEF1); }
.pn-card:focus-visible { outline: 2px solid var(--primary, #0B4E3D); outline-offset: -2px; z-index: 2; }
.pn-inner { display: grid; place-items: center; gap: .6rem; text-align: center; }

/* Logos sit muted-green and desaturated, then come up in their own colour. */
.pn-logo {
    max-height: 54px; width: auto; object-fit: contain;
    filter: grayscale(1) opacity(.55);
    transition: filter var(--dur-slow, .6s) var(--ease-out, ease);
}
.pn-card:hover .pn-logo, .pn-card:focus-visible .pn-logo { filter: none; }

/* No logo uploaded — a flat monogram tile in the brand green. */
.pn-mono {
    width: 50px; height: 50px; display: grid; place-items: center; border-radius: var(--r-sm, 10px);
    background: color-mix(in srgb, var(--primary, #0B4E3D) 10%, transparent);
    color: var(--primary, #0B4E3D);
    font-size: 1.1rem; font-weight: 800; letter-spacing: .02em;
    transition: background var(--dur, .3s) var(--ease-out, ease), color var(--dur, .3s) var(--ease-out, ease);
}
.pn-card:hover .pn-mono, .pn-card:focus-visible .pn-mono {
    background: var(--primary, #0B4E3D); color: #fff;
}
.pn-name {
    font-size: .84rem; font-weight: 700; line-height: 1.35;
    color: var(--muted, #4B6754); max-width: 16ch;
    transition: color var(--dur, .3s) var(--ease-out, ease);
}
.pn-card:hover .pn-name, .pn-card:focus-visible .pn-name { color: var(--primary, #0B4E3D); }

/* An outbound mark, shown only where the row actually links out. */
.pn-out {
    position: absolute; top: .7rem; right: .7rem;
    width: 16px; height: 16px; color: var(--muted, #4B6754);
    opacity: 0; transform: translate(-2px, 2px);
    transition: opacity var(--dur, .3s) var(--ease-out, ease), transform var(--dur, .3s) var(--ease-out, ease);
}
.pn-card:hover .pn-out, .pn-card:focus-visible .pn-out { opacity: .75; transform: none; }

@media (max-width: 640px) {
    .pn-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pn-card { min-height: 116px; padding: 1.15rem .9rem; }
    .pn-logo { max-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-card, .pn-logo, .pn-mono, .pn-name, .pn-out { transition: none; }
}
/* =============================================================================
   FOOTER — FINISH LAYER (colour, state and lighting only)
   -----------------------------------------------------------------------------
   The footer field, ink and accents are declared once as --f-* custom
   properties on `.footer` (see the token block in tailwind.css). Everything
   here consumes them, so the footer can never drift away from the palette the
   hero slider is painted in: brand green field, yellow highlight, gold second
   accent, orange for the one call to action.

   What this replaced: a decorative layer running eleven simultaneous infinite
   animations below the fold — a panning mesh background, an SVG noise overlay,
   four blurred aurora blobs, a rotating conic "aurora ribbon", ten twinkling
   stars, a light sweep crossing the whole footer, an animated gradient border
   and idle pulse on the newsletter card, gradient-animated heading text, three
   flowing hairline dividers, bobbing contact icons and per-network neon social
   hovers. It also painted the footer navy while the hero was green.

   The composition is untouched — logo lockup, newsletter, five link columns,
   social row, trust strip, legal bar all keep their exact structure and
   spacing. Only the finish changed.
   ============================================================================= */

/* ---- Decorative layers that no longer exist ------------------------------
   The gradient hairline is the .footer-topline element and the soft blooms are
   part of the footer's own background gradient, so these pseudo-elements (and
   the ones the removed layers introduced) must not paint anything. */
.footer.footer-premium::before,
.footer.footer-premium::after,
.footer-premium .container:first-of-type::before,
.footer-premium .footer-newsletter::before,
.footer-premium .footer-newsletter::after { content: none; }

/* ---- Brand column -------------------------------------------------------- */
.footer-premium .footer-brand-col .footer-about-text { color: var(--f-ink); }
.footer-premium .footer-brand-col .brand-logo { border-radius: 12px; box-shadow: none; }
.footer-premium .footer-brand-col .brand-name small { color: var(--f-ink-2); }

/* ---- Contact rows — quiet glass tiles, yellow glyphs --------------------- */
.footer-premium .footer-contact li { color: var(--f-ink); }
.footer-premium .footer-contact .fc-ico {
    background: rgba(255,255,255,.07);
    border: 1px solid var(--f-line);
    color: var(--f-accent);
    box-shadow: none;
    animation: none;
}
.footer-premium .footer-contact li:hover .fc-ico { transform: none; }
.footer-premium .footer-contact a { color: var(--f-ink); }
.footer-premium .footer-contact a:hover { color: #fff; }

/* ---- Newsletter card ----------------------------------------------------- */
.footer-premium .footer-newsletter {
    background: var(--f-glass);
    border: 1px solid var(--f-line);
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: none;
}
.footer-premium .footer-newsletter:hover { transform: none; box-shadow: none; }
.footer-premium .footer-newsletter h3 { color: #fff; }
.footer-premium .footer-newsletter h3 svg { color: var(--f-accent); }
.footer-premium .footer-newsletter p { color: var(--f-ink); }

.footer-premium .newsletter-form input {
    background: rgba(255,255,255,.07);
    border-color: var(--f-line);
    color: #fff;
    box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.footer-premium .newsletter-form input::placeholder { color: rgba(255,255,255,.45); transform: none; }
.footer-premium .newsletter-form input:focus {
    background: rgba(255,255,255,.11);
    border-color: var(--f-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-accent) 20%, transparent);
}
.footer-premium .newsletter-form input:focus::placeholder { opacity: .6; transform: none; }

/* Both footer CTAs are the same solid accent. The page already carries an
   orange Donate in the navbar and in the hero; a shining, pulsing, gradient
   third variant made the footer the loudest of the three. */
.footer-premium .newsletter-form .btn,
.footer-premium .footer-newsletter .btn-glow {
    background: var(--f-cta);
    color: #fff;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
    animation: none;
    transition: background var(--transition), transform var(--transition);
}
.footer-premium .newsletter-form .btn:hover,
.footer-premium .footer-newsletter .btn-glow:hover {
    background: color-mix(in srgb, var(--f-cta) 88%, #000);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
}
.footer-premium .newsletter-form .btn::after,
.footer-premium .footer-newsletter .btn-glow::after { content: none; }

/* ---- Column headings — solid white with the yellow → gold rule ----------- */
.footer-premium h4 {
    color: #fff; -webkit-text-fill-color: #fff;
    background: none; animation: none;
}
.footer-premium h4::after {
    background: linear-gradient(90deg, var(--f-accent), var(--f-gold));
    box-shadow: none; animation: none;
}

/* ---- Sitemap links ------------------------------------------------------- */
.footer-premium .footer-col ul a { color: var(--f-ink-2); }
.footer-premium .footer-col ul a::before {
    background: none; box-shadow: none;
    border-right: 2px solid rgba(255,255,255,.42);
    border-bottom: 2px solid rgba(255,255,255,.42);
}
.footer-premium .footer-col ul a:hover { color: #fff; text-shadow: none; transform: translateX(2px); }
.footer-premium .footer-col ul a:hover::before { border-color: var(--f-accent); }

/* ---- Social row ---------------------------------------------------------- */
.footer-premium .social-links a {
    background: var(--f-glass);
    border: 1px solid var(--f-line);
    color: rgba(255,255,255,.86);
    box-shadow: none;
    animation: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.footer-premium .social-links a::after,
.footer-premium .social-links a::before { content: none; }
.footer-premium .social-links a:hover {
    background: var(--f-accent);
    color: var(--primary, #0B4E3D);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: none;
}

/* ---- Dividers — one flat hairline each, no travelling light -------------- */
.footer-premium .footer-top,
.footer-premium .footer-trust,
.footer-premium .footer-bottom { position: relative; }
.footer-premium .footer-top::after,
.footer-premium .footer-trust::before,
.footer-premium .footer-bottom::before { content: none; }
.footer-premium .footer-top { border-bottom: 1px solid var(--f-line); }
.footer-premium .footer-bottom { border-top: 1px solid var(--f-line); }

/* ---- Trust strip + legal bar -------------------------------------------- */
.footer-premium .footer-trust svg { color: var(--f-accent); filter: none; }
.footer-premium .footer-heart { color: var(--f-flame); filter: none; }
.footer-premium .footer-bottom p { color: var(--f-ink-2); }
.footer-premium .footer-bottom a,
.footer-premium .footer-legal a { color: var(--f-ink-2); }
.footer-premium .footer-bottom a:hover,
.footer-premium .footer-legal a:hover { color: #fff; }

/* ---- Footer widgets (admin-placed blocks) -------------------------------- */
.footer-premium .footer-widgets { border-top: 1px solid var(--f-line); }
.footer-premium .footer-widget a { color: var(--f-ink); }
.footer-premium .footer-widget a:hover { color: #fff; }
.footer-premium .footer-widget .widget-contact li { color: var(--f-ink); }

/* ---- Motion ------------------------------------------------------------
   Only two hover transitions and the link nudge remain, so there is nothing
   left to switch off beyond honouring the OS setting on those. */
@media (prefers-reduced-motion: reduce) {
    .footer-premium .social-links a,
    .footer-premium .footer-col ul a,
    .footer-premium .newsletter-form .btn,
    .footer-premium .footer-newsletter .btn-glow { transition: none; }
    .footer-premium .social-links a:hover,
    .footer-premium .footer-col ul a:hover,
    .footer-premium .newsletter-form .btn:hover,
    .footer-premium .footer-newsletter .btn-glow:hover { transform: none; }
}

/* =============================================================================
   FOOTER SITEMAP — automatic column count
   premium.css hardcoded 5 → 3 → 2 → 1 columns at fixed breakpoints, so any
   phone under 440px collapsed to a single very long list. `auto-fit` lets the
   grid choose the count from the space available, and the `min(100%, …)` guard
   means a track can never be wider than the container (no overflow).
     ≈360px content → 2 cols · ≈540px → 3 · ≈720px → 4 · ≥900px → 5
   ============================================================================= */
.footer-links-5 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
    align-items: start;
}
/* Override premium.css's fixed-count media queries (same specificity, later file). */
@media (max-width: 1100px) { .footer-links-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr)); } }
@media (max-width: 760px)  { .footer-links-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } }
@media (max-width: 440px)  { .footer-links-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; } }
/* Keep the long link lists readable when two columns get narrow. */
@media (max-width: 440px) {
    .footer-links-5 .footer-col ul a { font-size: .86rem; line-height: 1.45; }
    .footer-links-5 .footer-col h4 { font-size: .88rem; }
}

/* -----------------------------------------------------------------------------
   Footer sitemap: fill the gap left by a lone final column.
   With 5 columns in a 2-up grid the 5th lands alone on the last row, leaving the
   cell beside it empty. When that happens (last child in an ODD position) let it
   span the full width and flow its links into two sub-columns instead.
   `columns` has no effect on a flex container, so the list becomes `block` and
   the flex `gap` is replaced with per-item margin.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .footer-links-5 .footer-col:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .footer-links-5 .footer-col:last-child:nth-child(odd) > ul {
        display: block;
        columns: 2;
        column-gap: clamp(1rem, 5vw, 2rem);
    }
    .footer-links-5 .footer-col:last-child:nth-child(odd) > ul > li {
        break-inside: avoid;          /* never split a link across columns */
        -webkit-column-break-inside: avoid;
        margin-bottom: .5rem;         /* replaces the flex row-gap */
    }
}