/* ============================================================================
   Public Website Rendering Engine — PREMIUM THEME (Frontend Phase 7, v2.1).
   ----------------------------------------------------------------------------
   Rebuilt on the Phase-6 design language so every module page served by the Site
   engine (donate, volunteer, certificates, gallery, reports, search, errors, …)
   matches the homepage / SDS pages exactly — one polished international-NGO
   platform. All existing .site-* and Bootstrap class names are preserved, so no
   view or controller changes are needed. Nothing here touches business logic.
   ============================================================================ */

:root {
  /* Phase-6 premium palette (fixed, matches home.css / theme.css) */
  /* Core brand palette (Premium Light) — mirrors premium.css. */
  --sp-primary: #C61F26;       /* links / secondary accent (text-safe) */
  --sp-primary-700: #A81920;
  --sp-primary-900: #7E1418;
  --sp-teal: #D89B2D;          /* decorative gold */
  --sp-saffron: #F05A28;       /* primary / Donate */
  --sp-saffron-600: #D94A1E;
  --sp-success: #2E8B57;
  --sp-bg: #FAF8F3;
  --sp-ink: #1E1E1E;
  --sp-body: #555555;
  --sp-muted: #6E6459;
  --sp-line: #ECE3D6;
  --sp-radius: 20px;
  --sp-radius-sm: 14px;
  --sp-shadow: 0 18px 48px -12px rgba(30, 20, 12, 0.16), 0 6px 16px -8px rgba(30, 20, 12, 0.10);
  --sp-shadow-lg: 0 40px 80px -24px rgba(30, 20, 12, 0.26);
  --sp-gradient: linear-gradient(125deg, #1E1E1E 0%, #7E2417 52%, #C1381C 115%);
  --sp-gradient-warm: linear-gradient(120deg, #F5732E 0%, #F05A28 100%);
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Brand accent stays CMS-configurable (layout injects --site-accent after this),
     but defaults to the premium primary so links match. */
  --site-accent: var(--sp-primary);
  --site-accent-contrast: #ffffff;
  --site-ink: var(--sp-ink);
  --site-muted: var(--sp-muted);
  --site-section-y: clamp(3.5rem, 7vw, 6rem);
  --site-radius: var(--sp-radius);
}

/* ------------------------------------------------------------------- BASE -- */
.site-body {
  color: var(--sp-body); background: var(--sp-bg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.002em;
}
.site-body :is(h1, h2, h3, h4, h5, h6) { color: var(--sp-ink); font-weight: 800; letter-spacing: -0.02em; }
.site-body h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.14; }
a { color: var(--sp-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sp-primary-700); }
.text-muted { color: var(--sp-muted) !important; }
.container { max-width: 1200px; }

/* Accessibility ------------------------------------------------ */
.site-skip { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--sp-primary); color: #fff; padding: .5rem .9rem; border-radius: 999px; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30, 20, 12, .4); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* Reveal animations (toggled by site.js) */
[data-animate] { opacity: 0; transition: opacity .7s var(--sp-ease), transform .7s var(--sp-ease); will-change: opacity, transform; }
[data-animate].is-visible { opacity: 1; transform: none; }
[data-animate="fade-up"], [data-animate=""] { transform: translateY(28px); }
[data-animate="zoom-in"] { transform: scale(.95); }
[data-animate="slide-left"] { transform: translateX(30px); }
[data-animate-delay="1"] { transition-delay: .08s; } [data-animate-delay="2"] { transition-delay: .16s; } [data-animate-delay="3"] { transition-delay: .24s; }

/* ----------------------------------------------------------------- HEADER -- */
.site-topbar { background: var(--sp-primary-900); color: rgba(255,255,255,.82); padding: .4rem 0; font-size: .82rem; }
.site-topbar a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-topbar a:hover { color: #fff; }
.site-header { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 0 rgba(198,31,38,.08); }
.site-header.is-scrolled { box-shadow: 0 8px 30px -14px rgba(198,31,38,.28); }
.site-header .navbar { padding-block: .6rem; }
.site-brand-text { font-weight: 800; color: var(--sp-primary); font-size: 1.2rem; letter-spacing: -0.02em; }
.site-logo { max-height: 46px; width: auto; }
.site-menu--header .nav-link { font-weight: 600; color: var(--sp-ink); border-radius: 999px; padding: .4rem .9rem !important; position: relative; transition: color .2s var(--sp-ease); }
.site-menu--header .nav-link:hover, .site-menu--header .nav-link:focus, .site-menu--header .nav-link.active { color: var(--sp-primary); }
.site-menu--header .nav-link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--sp-saffron); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sp-ease); }
.site-menu--header .nav-link:hover::after, .site-menu--header .nav-link.active::after { transform: scaleX(1); }
.site-cta-link { background: var(--sp-gradient-warm); color: #3b2400 !important; border-radius: 999px; padding: .5rem 1.2rem !important; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(245,158,11,.55); }
.site-mega-menu { min-width: min(680px, 92vw); border: 0; border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow); }
.site-search .form-control { border-radius: 999px; border-color: var(--sp-line); }
.site-search { position: relative; }
.site-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 1080; max-height: 320px; overflow: auto; border: 0; border-radius: var(--sp-radius-sm); box-shadow: var(--sp-shadow); }

/* ----------------------------------------------------------- PAGE HEADER --- */
/* Premium banner applied to every inner page's header block. */
.site-page-header { position: relative; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(180deg, #FBF3E8 0%, var(--sp-bg) 100%); border-bottom: 1px solid var(--sp-line); margin-bottom: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.site-page-header::before { content: ""; position: absolute; right: -6%; top: -40%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(216,155,45,.12), transparent 70%); pointer-events: none; }
.site-page-title { font-weight: 800; letter-spacing: -0.02em; color: var(--sp-ink); font-size: clamp(2rem, 4.2vw, 3rem); position: relative; }
.site-page-header .lead, .site-page-subtitle { color: var(--sp-muted); font-size: clamp(1.02rem, 2vw, 1.25rem); max-width: 66ch; }
.site-page-header .breadcrumb { margin-bottom: .75rem; }

/* --------------------------------------------------------------- SECTIONS -- */
.site-section { padding: var(--site-section-y) 0; }
.site-section--tint { background: linear-gradient(180deg, #fff, var(--sp-bg)); }
.site-section-title { font-weight: 800; letter-spacing: -0.02em; margin-bottom: 2rem; font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
.site-section-overline { display: inline-flex; align-items: center; gap: 8px; color: var(--sp-teal); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: .75rem; }
.site-section-overline::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--sp-saffron); }

/* ------------------------------------------------------------------ HERO --- */
.site-hero { position: relative; min-height: 62vh; display: flex; align-items: center; color: #fff; background: var(--sp-gradient); isolation: isolate; overflow: hidden; }
.site-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.site-hero-img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.site-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,41,67,.35), rgba(8,41,67,.72)); }
.site-hero-inner { position: relative; padding: clamp(3rem, 8vw, 6rem) 0; }
.site-hero-title { font-size: clamp(2.2rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.06; }
.site-hero-sub { max-width: 640px; color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 2vw, 1.3rem); }

/* --------------------------------------------------------------- BUTTONS --- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .01em; transition: transform .25s var(--sp-ease), box-shadow .25s var(--sp-ease), background .25s var(--sp-ease), filter .25s; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.05rem; }
.btn-primary { background: var(--sp-primary); border-color: var(--sp-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--sp-primary-700); border-color: var(--sp-primary-700); transform: translateY(-2px); box-shadow: var(--sp-shadow); }
.btn-outline-primary, .btn-outline-secondary { border-color: var(--sp-line); color: var(--sp-primary); border-width: 1.5px; }
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--sp-shadow); }
.btn-success { background: var(--sp-success); border-color: var(--sp-success); }
.site-btn-accent, .btn-accent { background: var(--sp-gradient-warm); color: #3b2400; border: none; box-shadow: 0 10px 24px -10px rgba(245,158,11,.55); }
.site-btn-accent:hover, .site-btn-accent:focus, .btn-accent:hover { color: #3b2400; transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(245,158,11,.7); }

/* -------------------------------------------------------------------- CARDS */
.card { border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: 0 1px 2px rgba(16,30,54,.06); overflow: clip; transition: transform .4s var(--sp-ease), box-shadow .4s var(--sp-ease), border-color .4s var(--sp-ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--sp-shadow); border-color: transparent; }
.card .card-img-top, .card img { transition: transform .6s var(--sp-ease); }
.card:hover .card-img-top { transform: scale(1.06); }
.card-body { padding: 1.4rem; }
.card-title { font-weight: 700; letter-spacing: -0.01em; }
/* Cards that are just containers (forms, info) shouldn't lift distractingly. */
.card.card--static:hover, .site-widget.card:hover, form .card:hover { transform: none; box-shadow: var(--sp-shadow); }

/* Widgets */
.site-widget { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1.5rem; box-shadow: 0 1px 2px rgba(16,30,54,.06); }
.site-widget-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; color: var(--sp-ink); }

/* Stats */
.site-stat { text-align: center; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 2rem 1.25rem; transition: transform .4s var(--sp-ease), box-shadow .4s var(--sp-ease); }
.site-stat:hover { transform: translateY(-4px); box-shadow: var(--sp-shadow); }
.site-stat-icon { font-size: 2rem; color: var(--sp-teal); }
.site-stat-value { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; background: var(--sp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.site-stat-label { color: var(--sp-muted); }

/* Testimonials / timeline */
.site-testimonial { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1.75rem; box-shadow: 0 1px 2px rgba(16,30,54,.06); }
.site-timeline-item { border-left: 3px solid var(--sp-line); padding: 0 0 1.75rem 1.5rem; position: relative; }
.site-timeline-item::before { content: ""; position: absolute; left: -9px; top: .2rem; width: 15px; height: 15px; border-radius: 50%; background: var(--sp-gradient); box-shadow: 0 0 0 4px rgba(198,31,38,.12); }
.site-timeline-year { font-weight: 800; color: var(--sp-primary); }

/* --------------------------------------------------------------- CTA BANDS */
.site-cta { position: relative; overflow: hidden; background: var(--sp-gradient); color: #fff; border-radius: clamp(20px, 3vw, 32px); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem); box-shadow: var(--sp-shadow-lg); text-align: center; }
.site-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 15% 0%, rgba(245,158,11,.26), transparent 55%); }
.site-cta > * { position: relative; }
.site-cta--volunteer { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-900)); }
.site-cta-title { font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.site-cta .btn-light, .site-cta .site-btn-accent { color: var(--sp-primary); }

/* Suggested donation amounts / chips */
.site-amount, .site-amount-btn { border-radius: 999px; border: 1.5px solid var(--sp-line); padding: .7rem 1.3rem; font-weight: 700; color: var(--sp-primary); background: #fff; transition: all .25s var(--sp-ease); }
.site-amount:hover, .site-amount.active, .site-amount-btn:hover, .site-amount-btn.active { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); transform: translateY(-2px); box-shadow: var(--sp-shadow); }
/* Security / trust badges */
.site-trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--sp-muted); }
.site-trust-badge i { color: var(--sp-success); }

/* ---------------------------------------------------- GALLERY (Pinterest) -- */
.site-album-grid { columns: 4 240px; column-gap: 18px; }
.site-album-grid > * { break-inside: avoid; margin-bottom: 18px; }
.site-gallery-figure { border-radius: var(--sp-radius-sm); overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(16,30,54,.08); }
.site-gallery-img { width: 100%; height: auto; display: block; cursor: zoom-in; transition: transform .6s var(--sp-ease); }
.site-gallery-figure:hover .site-gallery-img { transform: scale(1.06); }
.site-gallery-figure::after { content: "\F52A"; font-family: "bootstrap-icons"; position: absolute; right: 12px; bottom: 10px; color: #fff; opacity: 0; transform: translateY(6px); transition: .3s var(--sp-ease); text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.site-gallery-figure:hover::after { opacity: 1; transform: none; }
.site-lightbox-overlay { position: fixed; inset: 0; background: rgba(8,15,26,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.site-lightbox-overlay img { max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: var(--sp-shadow-lg); }

/* ------------------------------------------------------------ PAGE / RICH -- */
.site-page-title { font-weight: 800; }
.site-richtext, .site-rich-text { font-size: 1.12rem; line-height: 1.8; color: var(--sp-body); }
.site-richtext :is(h2, h3), .site-rich-text :is(h2, h3) { margin-top: 1.8rem; color: var(--sp-ink); }
.site-richtext img, .site-rich-text img { max-width: 100%; height: auto; border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); margin-block: 1.2rem; }
.site-richtext blockquote, .site-rich-text blockquote { border-left: 4px solid var(--sp-saffron); background: #FBF3E8; border-radius: 10px; padding: 1rem 1.4rem; margin: 1.4rem 0; }
.site-richtext :is(p, li) { max-width: 74ch; }

/* Forms */
.form-control, .form-select { border-radius: 12px; border-color: var(--sp-line); padding: .6rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 3px rgba(198,31,38,.15); }
.input-group .form-control:first-child { border-start-start-radius: 12px; border-end-start-radius: 12px; }

/* --------------------------------------------------------------- BREADCRUMB */
.site-breadcrumb { background: transparent; }
.site-breadcrumb .breadcrumb { font-size: .85rem; }
.site-breadcrumb .breadcrumb-item a { color: var(--sp-muted); text-decoration: none; }
.site-breadcrumb .breadcrumb-item a:hover { color: var(--sp-primary); }
.site-breadcrumb .breadcrumb-item.active { color: var(--sp-ink); font-weight: 600; }

/* ----------------------------------------------------------------- FOOTER -- */
.site-footer { background: var(--sp-primary-900); color: rgba(255,255,255,.72); }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer :is(h2, h3, h4) { color: #fff; }
.site-footer h3 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.site-footer-brand { color: #fff; font-weight: 800; letter-spacing: -0.02em; }
.site-footer .text-muted { color: rgba(255,255,255,.6) !important; }
.site-social-link { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.82); transition: background .25s, color .25s, transform .25s var(--sp-ease); }
.site-social-link:hover { background: var(--sp-saffron); color: #3b2400; border-color: transparent; transform: translateY(-2px); }
.site-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); }

/* --------------------------------------------------------- BACK-TO-TOP ----- */
.site-totop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; background: var(--sp-gradient); color: #fff; border: none; border-radius: 50%; width: 46px; height: 46px; box-shadow: var(--sp-shadow); transition: transform .25s var(--sp-ease); }
.site-totop:hover { transform: translateY(-3px); color: #fff; }

/* ----------------------------------------------------------------- ERRORS -- */
.site-error { text-align: center; padding: clamp(3rem, 10vw, 7rem) 0; }
.site-error-code { font-size: clamp(5rem, 16vw, 10rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; background: var(--sp-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-error-icon { font-size: 4rem; color: var(--sp-saffron); }
.site-error-title { font-weight: 800; margin-top: .5rem; }
.site-error-text { color: var(--sp-muted); max-width: 52ch; margin: .75rem auto 1.75rem; font-size: 1.1rem; }
.site-error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- RESPONSIVE */
@media (max-width: 991.98px) { .site-album-grid { columns: 2 180px; } }
@media (max-width: 575.98px) { .site-album-grid { columns: 1; } .site-hero { min-height: 54vh; } }