/* ── CSS Custom Properties ───────────────────────────────────────────── */
:root {
  --color-primary:        #1A4A8A;
  --color-primary-dark:   #122F5C;
  --color-primary-light:  #2E6DB4;
  --color-secondary:      #2E86C1;
  --color-teal:           #17A589;
  --color-teal-dark:      #0E7A64;
  --color-donate:         #C0392B;
  --color-donate-hover:   #96281B;
  --color-bg-light:       #EBF5FB;
  --color-bg-section:     #F4F8FB;
  --color-text:           #1C2833;
  --color-text-muted:     #6B7280;
  --color-border:         #D1E3F5;
  --color-white:          #FFFFFF;
  --color-success:        #17A589;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;

  --shadow-sm:  0 1px 3px rgba(26,74,138,.08);
  --shadow-md:  0 4px 16px rgba(26,74,138,.12);
  --shadow-lg:  0 8px 32px rgba(26,74,138,.18);

  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --section-py: 5rem;

  /* Motion tokens — respected throughout */
  --motion-fast:   150ms;
  --motion-base:   300ms;
  --motion-slow:   600ms;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Fixed navbar height — used to push page content below it */
  --navbar-height: 72px;
}

/* ── Reset & Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Spacer div rendered by base.html below the fixed navbar (except hero page) */
.navbar-spacer { height: var(--navbar-height); }

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

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

/* ── Shared Section ─────────────────────────────────────────────────── */
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin-inline: auto;
}

/* ── Page Header ────────────────────────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-light) 100%);
  padding: 3.5rem 0 2.5rem;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-header .breadcrumb-item a { color: rgba(255,255,255,.75); text-decoration: none; }
.page-header .breadcrumb-item.active { color: var(--color-white); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }

.page-header-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: .5rem;
  line-height: 1.15;
}

.page-header-subtitle {
  color: rgba(255,255,255,.85);
  font-size: 1.1rem;
  margin-bottom: 0;
}

.page-header-meta { color: rgba(255,255,255,.8); font-size: .9rem; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary-brand {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.btn-primary-brand:hover, .btn-primary-brand:focus-visible {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,74,138,.35);
}

.btn-outline-primary-brand {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.btn-outline-primary-brand:hover, .btn-outline-primary-brand:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-donate {
  background-color: var(--color-donate);
  border-color: var(--color-donate);
  color: var(--color-white);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-base) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.btn-donate:hover, .btn-donate:focus-visible {
  background-color: var(--color-donate-hover);
  border-color: var(--color-donate-hover);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(192,57,43,.35);
}

/* ── News Cards ─────────────────────────────────────────────────────── */
.news-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

.news-card-img { width: 100%; height: 210px; object-fit: cover; }

.news-card-img-placeholder {
  width: 100%; height: 210px;
  background: var(--color-bg-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--color-primary-light);
}

.news-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; flex: 1;
}

.news-card-title { font-size: 1.05rem; font-weight: 700; margin: .5rem 0; line-height: 1.4; }
.news-card-title a { color: var(--color-text); text-decoration: none; }
.news-card-title a:hover { color: var(--color-primary); }

.news-card-excerpt { color: var(--color-text-muted); font-size: .88rem; flex: 1; margin-bottom: 1rem; }
.news-card-footer { margin-top: auto; }
.news-card-date { font-size: .8rem; color: var(--color-text-muted); }

.read-more { font-size: .875rem; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.read-more:hover { color: var(--color-primary-dark); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.news-badge {
  display: inline-block;
  padding: .2rem .75rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.news-badge--news  { background: var(--color-bg-light); color: var(--color-primary); }
.news-badge--event { background: #FEF3C7; color: #92400E; }

/* ── Form elements ──────────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }

.form-control, .form-select {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  font-size: .95rem;
  transition: border-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
  background-color: var(--color-white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,74,138,.15);
  outline: none;
}

.contact-form-card, .membership-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}

.form-card-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-bg-light);
}

.field-error {
  font-size: .82rem;
  color: #DC2626;
  margin-top: .3rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* ── Empty State ────────────────────────────────────────────────────── */
.empty-state-icon { font-size: 4rem; color: var(--color-border); }

/* ═══════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — utility animation system
   Elements start invisible; JS adds .is-visible when they enter viewport.
   prefers-reduced-motion: all animations disabled instantly.
   ═══════════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity var(--motion-slow) var(--ease-out),
              transform var(--motion-slow) var(--ease-out);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger delays for card groups */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.15s; }
.stagger-3 { transition-delay: 0.25s; }
.stagger-4 { transition-delay: 0.35s; }

/* Slide-in for hero/header elements (CSS keyframe, not observer-based) */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-in {
  animation: slideInUp 0.7s var(--ease-out) both;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .slide-in { animation: none !important; opacity: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS — animates #main-content on every navigation.
   .pt-enter fires on page load (CSS keyframe — no JS needed for entry).
   JS adds .pt-exit before navigating away, then follows the link.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-14px); }
}

#main-content.pt-enter {
  animation: pageEnter 0.42s var(--ease-out) both;
}

#main-content.pt-exit {
  animation: pageExit 0.26s var(--ease-out) both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #main-content.pt-enter,
  #main-content.pt-exit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Page transition overlay — covers the white body during navigation ──
   Starts opaque on each page load, fades out immediately.
   JS makes it opaque again before navigating away.
   ────────────────────────────────────────────────────────────────────── */
#page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-primary-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out);
}
#page-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #page-overlay { transition: none !important; }
}