/* import bootstrap_overide.css */
@import url('bootstrap_override.css');

/* ===========================================================================
   DESIGN TOKENS — Grace City Church Learning Center
   Extracted from brand: Burnt Sienna · Deep Charcoal · Warm Cream
   =========================================================================== */

:root {

  /* ── 1. BRAND RUST — Burnt Sienna (signature church color) ───────────── */
  --color-rust-50:   #fdf3ee;
  --color-rust-100:  #fae3d5;
  --color-rust-200:  #f4c4a8;
  --color-rust-300:  #ec9d72;
  --color-rust-400:  #e3713c;
  --color-rust-500:  #c75420;   /* base — matches logo bg */
  --color-rust-600:  #a3400f;
  --color-rust-700:  #82320d;   /* deep rust */
  --color-rust-800:  #6b280c;
  --color-rust-900:  #4e1d09;
  --color-rust-950:  #2e1005;

  /* ── 2. CHARCOAL — Deep Dark (dark logo variant) ─────────────────────── */
  --color-charcoal-50:   #f4f4f4;
  --color-charcoal-100:  #e8e8e8;
  --color-charcoal-200:  #d0d0d0;
  --color-charcoal-300:  #ababab;
  --color-charcoal-400:  #828282;
  --color-charcoal-500:  #5e5e5e;
  --color-charcoal-600:  #474747;
  --color-charcoal-700:  #363636;
  --color-charcoal-800:  #272727;   /* base — matches dark logo bg */
  --color-charcoal-900:  #1a1a1a;
  --color-charcoal-950:  #0d0d0d;

  /* ── 3. CREAM / STONE — Warm Neutral (logo lettering & off-whites) ───── */
  --color-cream-50:   #fdfcf9;
  --color-cream-100:  #f9f6f0;
  --color-cream-200:  #f2ebe0;
  --color-cream-300:  #e6d9c8;
  --color-cream-400:  #d4be9e;
  --color-cream-500:  #bfa07a;   /* base — warm stone */
  --color-cream-600:  #a07e55;
  --color-cream-700:  #7d6040;
  --color-cream-800:  #5c4630;
  --color-cream-900:  #3b2d1f;
  --color-cream-950:  #1e160e;

  /* ── SEMANTIC ALIASES (light mode) ──────────────────────────────────── */
  --color-bg:          var(--color-cream-50);
  --color-bg-card:     #ffffff;
  --color-text:        var(--color-charcoal-800);   /* dark text on light bg */
  --color-text-muted:  var(--color-charcoal-500);   /* readable muted text   */
  --color-border:      var(--color-cream-200);
  --color-link:        var(--color-rust-600);
  --color-link-hover:  var(--color-rust-700);

  /* ── .text-cream / .text-stone — adaptive text utilities ────────────── */
  /* Light mode: dark enough to read on the cream page background.         */
  /* Overridden to warm cream inside always-dark surfaces (nav, footer,    */
  /* hero) — see the surface overrides block below.                        */
  --text-cream: var(--color-charcoal-800);
  --text-stone: var(--color-charcoal-600);

  /* ── BOOTSTRAP OVERRIDES (light mode) ───────────────────────────────── */
  --bs-body-color:          var(--color-text);
  --bs-body-color-rgb:      39, 39, 39;             /* charcoal-800 */
  --bs-heading-color:       var(--color-text);
  --bs-emphasis-color:      var(--color-charcoal-900);
  --bs-secondary-color:     var(--color-charcoal-400);
  --bs-tertiary-color:      var(--color-charcoal-300);
  --bs-secondary-bg:        var(--color-cream-100);
  --bs-tertiary-bg:         var(--color-cream-200);

  /* ── GRADIENTS ───────────────────────────────────────────────────────── */

  /* Hero — rich rust to deep dark (brand statement) */
  --gradient-hero:
    linear-gradient(135deg, var(--color-rust-700) 0%, var(--color-charcoal-900) 100%);

  /* Brand — classic rust sweep */
  --gradient-brand:
    linear-gradient(135deg, var(--color-rust-400) 0%, var(--color-rust-700) 100%);

  /* Dark — charcoal depth for nav / footers */
  --gradient-dark:
    linear-gradient(180deg, var(--color-charcoal-800) 0%, var(--color-charcoal-950) 100%);

  /* Warm — cream to stone for cards / sections */
  --gradient-warm:
    linear-gradient(160deg, var(--color-cream-50) 0%, var(--color-cream-200) 100%);

  /* Page background — subtle warm wash */
  --gradient-page:
    linear-gradient(160deg, var(--color-cream-50) 0%, #ffffff 50%, var(--color-rust-50) 100%);

  /* Dark overlay for banner / hero images */
  --gradient-overlay:
    linear-gradient(180deg, transparent 0%, rgba(26, 10, 5, 0.80) 100%);
}

/********** Global Styles **********/

body {
  /* Subtle dot-grid texture layered over the page gradient.
     Uses radial-gradient — works in every browser, no SVG filter quirks.
     Light: warm-brown dots at 7% opacity on cream.
     Dark:  white dots at 4% opacity on charcoal (overridden below). */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle, rgba(80, 40, 10, 0.07) 1px, transparent 1px),
    var(--gradient-page);
  background-size: 20px 20px, cover;
  background-attachment: fixed, fixed;
  color: var(--color-text);
}

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

/********** Dark Mode ***********/

/* System preference — applies when no manual choice has been saved */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         var(--color-charcoal-950);
    --color-bg-card:    var(--color-charcoal-900);
    --color-text:       var(--color-cream-100);
    --color-text-muted: var(--color-cream-400);
    --color-border:     var(--color-charcoal-700);
    --color-link:       var(--color-rust-400);
    --color-link-hover: var(--color-rust-300);

    --gradient-page:
      linear-gradient(160deg, var(--color-charcoal-950) 0%, var(--color-charcoal-900) 60%, #1e0e07 100%);

    --bs-body-color-rgb:  249, 246, 240;
    --bs-emphasis-color:  var(--color-cream-50);
    --bs-secondary-color: rgba(249, 246, 240, 0.65);
    --bs-tertiary-color:  rgba(249, 246, 240, 0.40);
    --bs-secondary-bg:    var(--color-charcoal-800);
    --bs-tertiary-bg:     var(--color-charcoal-700);

    /* Dark mode — restore cream text utilities to their warm values */
    --text-cream: var(--color-cream-300);
    --text-stone: var(--color-cream-400);
  }
  body {
    background-image:
      radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      var(--gradient-page);
    background-size: 20px 20px, cover;
  }
}

/* Manual toggle — data-theme attribute set by JS, overrides system preference */
html[data-theme="dark"] {
  --color-bg:         var(--color-charcoal-950);
  --color-bg-card:    var(--color-charcoal-900);
  --color-text:       var(--color-cream-100);
  --color-text-muted: var(--color-cream-400);
  --color-border:     var(--color-charcoal-700);
  --color-link:       var(--color-rust-400);
  --color-link-hover: var(--color-rust-300);

  --gradient-page:
    linear-gradient(160deg, var(--color-charcoal-950) 0%, var(--color-charcoal-900) 60%, #1e0e07 100%);

  --bs-body-color-rgb:  249, 246, 240;
  --bs-emphasis-color:  var(--color-cream-50);
  --bs-secondary-color: rgba(249, 246, 240, 0.65);
  --bs-tertiary-color:  rgba(249, 246, 240, 0.40);
  --bs-secondary-bg:    var(--color-charcoal-800);
  --bs-tertiary-bg:     var(--color-charcoal-700);

  /* Dark mode — restore cream text utilities to their warm values */
  --text-cream: var(--color-cream-300);
  --text-stone: var(--color-cream-400);
}
html[data-theme="dark"] body {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    var(--gradient-page);
  background-size: 20px 20px, cover;
}

/* Explicit light — overrides a dark system preference when user toggles to light */
html[data-theme="light"] {
  --color-bg:         var(--color-cream-50);
  --color-bg-card:    #ffffff;
  --color-text:       var(--color-charcoal-800);
  --color-text-muted: var(--color-charcoal-500);
  --color-border:     var(--color-cream-200);
  --color-link:       var(--color-rust-600);
  --color-link-hover: var(--color-rust-700);

  --gradient-page:
    linear-gradient(160deg, var(--color-cream-50) 0%, #ffffff 50%, var(--color-rust-50) 100%);

  --bs-body-color-rgb:  39, 39, 39;
  --bs-emphasis-color:  var(--color-charcoal-900);
  --bs-secondary-color: var(--color-charcoal-400);
  --bs-tertiary-color:  var(--color-charcoal-300);
  --bs-secondary-bg:    var(--color-cream-100);
  --bs-tertiary-bg:     var(--color-cream-200);
}
html[data-theme="light"] body {
  background-image:
    radial-gradient(circle, rgba(80, 40, 10, 0.07) 1px, transparent 1px),
    var(--gradient-page);
  background-size: 20px 20px, cover;
}

/* ── Always-dark surfaces — keep .text-cream / .text-stone light ─────────
   These elements always render on dark backgrounds regardless of page theme,
   so the text-cream/text-stone variables must stay warm and light inside them.
   ──────────────────────────────────────────────────────────────────────── */
.navbar,
footer,
.hero-section,
[style*="gradient-dark"],
.bg-dark,
.bg-charcoal {
  --text-cream: var(--color-cream-300);
  --text-stone: var(--color-cream-400);
}


/********** Print Styles ***********/

@media print {
  /* Hide interactive / decorative elements */
  .no-print,
  .navbar,
  .modal,
  .btn,
  footer {
    display: none !important;
  }

  /* Show print-only elements (section headings inside tabs) */
  .print-only {
    display: block !important;
  }

  /* Make all Bootstrap tab panes visible */
  .tab-pane {
    display: block !important;
    opacity: 1 !important;
  }

  /* Remove shadows and expand container */
  .card {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }

  .container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  body {
    background: #fff !important;
    font-size: 12px !important;
  }

  /* Expand collapse rows in report tables */
  .collapse:not(.show) {
    display: table-row !important;
  }

  /* Avoid page breaks inside table rows */
  tr {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}