/* Light charity palette. Keep the reference layout and original photographs. */
:root {
  --blue: #193b76;
  --deep-blue: #003874;
  --heading: #193b76;
  --text: #475569;
  --bg: #fffefb;
  --paper: #ffffff;
  --green: #237044;
  --line: #dbe4ed;
  color-scheme: light;
}
body { color: #172d45; }
p { color: var(--text); }
.site-header {
  background: #fff;
  background-image: none;
  color: var(--blue);
  box-shadow: 0 3px 16px #17375812;
  border-bottom: 1px solid #e5edf4;
}
.contact-bar, .contact-links a { color: #fff; }
.nav-link.active { background: #edf4fc; border-bottom-color: var(--blue); }
.home .nav-link.active { background: #edf4fc; }
.nav-link:hover { background: #f1f6fb; }
.menu-toggle { color: var(--blue); }
.drawer-brand, .mobile-affiliates { border-color: var(--line); }
.hero-content h1, .hero-content p { color: #fff; }
.hero-overlay { background: linear-gradient(90deg, #091f39b3, #091f3973); }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hero-actions .hero-button { margin-top: 0; min-width: 210px; }
.hero-help { background: #12345680; border: 2px solid #fff; color: #fff; }
.hero-help:hover { background: #193b76; }
.slide-arrow { color: #fff; }
.button { transition: background-color .18s ease, box-shadow .18s ease; }
.button:hover { filter: none; box-shadow: 0 4px 14px #16395b24; }
.button-blue, .story-grid .button { background: var(--blue); color: #fff; border-color: var(--blue); }
.button-green { background: var(--green); color: #fff; }
.button-light { background: #fff; color: #173b70; border-color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #1974bb; }
.stats { background: var(--bg); }
.services-section { background: #eef5fb; }
.service-card { background: #fff; border-color: #d9e5ef; box-shadow: 0 6px 24px #15385708; }
.service-card { transition: box-shadow .22s ease; }
.service-card.reveal { transition: opacity .55s ease, transform .55s ease, box-shadow .22s ease; }
@media (hover: hover) and (pointer: fine) {
  .service-card:hover { box-shadow: 0 10px 26px #172d4533, 0 3px 8px #172d4526; }
}
.service-heading { background: #e6f2fc; color: #155d8a; }
.service-card.self .service-heading { background: #edf7ef; color: var(--green); }
.service-card.self .service-list .icon { color: var(--green); }
.service-list h4 { color: #172d45; font-weight: 600; }
.service-list p { color: #526277; font-size: 14px; line-height: 22px; }
.story-image { box-shadow: 0 8px 28px #16395915; }
.volunteer-section { background: #edf6f0; }
.volunteer-section h2 { color: var(--heading); }
.volunteer-section p { color: #415d50; }
.volunteer-section .button { background: var(--blue); color: #fff; border-color: var(--blue); }
.page-banner, .page-banner.events, .page-banner.donation {
  background: #eaf3fc;
  color: var(--blue);
}
.page-banner.booking { background: #edf7ef; color: #205639; }
.page-banner p { color: #3c536e; }
.page-banner.booking p { color: #365d46; }
.page-banner:before { opacity: .06; }
.green-heading { color: var(--green); }
.chips.green-chips span { background: #e4f3e8; color: #205e38; }
.chips span { background: #eaf2fb; color: #2a4c70; }
.fees-card { border-color: #d4e6d9; box-shadow: 0 6px 24px #2056390a; }
.fees-heading { background: #edf7ef; }
.fees-heading h2 { color: #205639; }
.fees-list > div { border-bottom-color: #e4ebe6; }
.fees-list h3 { color: #183a2a; }
.fees-list dd { color: #205e38; font-weight: 700; }
.booking-start { background: #f0f8f2; }
.booking-start h3 { color: #205639; }
.donation-card { border-color: #d9e5f1; box-shadow: 0 6px 24px #1538570a; }
.donation-card-title { background: #eaf3fc; color: var(--blue); }
.bank-heading, .account-owner { color: #193b76; }
.bank-details > div { background: #f1f6fc; }
.bank-details dd { color: #163b6c; }
.receipt-instruction a, .prose a { color: #145c9c; }
.tax-notice { background: #eff7fc; border-color: #cddfeb; color: #185b86; }
.tax-notice p { color: #36546d; }
.events-tabs { border-color: var(--line); }
.events-tabs a.active { color: var(--blue); border-color: var(--blue); background: #edf4fc; }
.empty-events > .icon { color: #6685a2; }
.empty-events h2 { color: #274a6c; }
.event-card { background: #fff; border-color: #d7e3f0; box-shadow: 0 6px 24px #15385708; }
.event-state { background: #eaf2fb; color: #244d78; border-color: #d3e2f1; }
.event-subtitle { color: #2c4661; }
.event-facts { background: #edf4fc; }
.event-facts dt { color: #526d89; }
.event-facts dd { color: #183c65; }
.event-description p { color: #344b62; font-weight: 500; }
.event-details { background: #f7fafc; border-color: #dbe5ee; }
.event-details summary { color: #24476b; }
.event-partners .chips span { background: #edf4fc; color: #365674; border-color: #d7e3f0; white-space: normal; }
.event-contacts a { color: #145c9c; border-color: #b8d3e8; }
.site-footer { background: #12243b; color: #c7d5e5; }
.site-footer p { color: #c7d5e5; }
.site-footer h2 { color: #fff; }
.footer-bottom { border-color: #ffffff24; }
@media (max-width: 899px) {
  #primary-navigation { background: #fff; color: #193b76; }
  .menu-backdrop:not([hidden]) { background: #102b4680; }
}
@media (max-width: 599px) {
  .hero-actions { gap: 12px; }
  .hero-actions .hero-button { min-width: 180px; font-size: 16px; line-height: 24px; padding: 10px 24px; }
}

/* Progressive enhancement: content remains visible without JavaScript. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible, .reveal:focus-within { opacity: 1; transform: none; }
.page-ready { animation: kb-fade-in .4s ease both; }
@keyframes kb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kb-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* Native cross-page fades in browsers that support view transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: kb-fade-out .16s ease both; }
::view-transition-new(root) { animation: kb-fade-in .24s ease both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .reveal, .page-ready { opacity: 1; transform: none; animation: none; }
}