/* ============================================================
   Rood IT Services — Theme Stylesheet
   Light mode improvements + dark mode overrides
   ============================================================ */

:root {
    color-scheme: light;
}

.dark {
    color-scheme: dark;
}

html {
    background-color: #f8faf8;
}

body {
    min-height: 100vh;
    background-image:
        radial-gradient(circle at top left, rgba(199, 234, 222, 0.45), transparent 32%),
        radial-gradient(circle at top right, rgba(253, 236, 207, 0.38), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 248, 0.96));
    background-attachment: fixed;
    transition: background-color 220ms ease, color 220ms ease;
}

/* ============================================================
   LIGHT MODE — Contrast & Readability Improvements
   ============================================================ */

/* Footer body text: text-slate-500 (#64748b) fails WCAG AA on white (~4.3:1).
   Bump to slate-600 equivalent (#475569) for 7.6:1 ratio. */
footer .text-slate-500,
footer p.text-slate-500 {
    color: #475569 !important;
}

/* Nav inactive links: text-slate-600 is fine but this ensures they're crisp */
nav .text-slate-600 {
    color: #3d4d5c !important;
}

/* Card visual separation: white cards (#fff) on near-white sections (#eaf2ee)
   !important needed: Tailwind CDN injects <style> after this <link> */
.bg-surface-container-lowest {
    box-shadow: 0 1px 4px rgba(42, 52, 50, 0.08), 0 0 0 1px rgba(42, 52, 50, 0.05) !important;
}

.bg-surface-container-low,
.bg-surface-container,
.bg-surface-container-high,
.bg-surface-container-highest {
    box-shadow: 0 12px 28px rgba(42, 52, 50, 0.05), 0 0 0 1px rgba(42, 52, 50, 0.03);
}

/* About page editorial overlay card */
.bg-white\/90 {
    box-shadow: 0 8px 24px rgba(42, 52, 50, 0.12) !important;
}

.bg-white,
.bg-white\/50 {
    box-shadow: 0 10px 24px rgba(42, 52, 50, 0.08);
}

nav.fixed,
.bg-surface-container-lowest,
.bg-surface-container-low,
.bg-surface-container,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-white,
.bg-white\/50,
.bg-white\/90,
footer {
    transition:
        background-color 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

/* ============================================================
   DARK MODE — Base
   ============================================================ */

.dark html {
    background-color: #0f1b18;
}

.dark body {
    background-color: #0f1b18;
    color: #d4e8e3;
    background-image:
        radial-gradient(circle at top left, rgba(29, 56, 50, 0.62), transparent 30%),
        radial-gradient(circle at top right, rgba(45, 32, 16, 0.34), transparent 24%),
        linear-gradient(180deg, rgba(15, 27, 24, 0.98), rgba(10, 18, 16, 1));
}

/* ============================================================
   DARK MODE — Navigation
   ============================================================ */

/* About, contact, schools-parishes navs use bg-white/70 (no dark: variant) */
.dark nav.fixed {
    background-color: rgba(10, 18, 16, 0.85) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(158, 207, 195, 0.08);
    box-shadow: none;
}

/* Services page uses .glass-nav class */
.dark .glass-nav {
    background-color: rgba(10, 18, 16, 0.85) !important;
}

/* Nav text overrides for pages without dark: variants */
.dark nav a.text-emerald-900,
.dark nav a.text-emerald-700 {
    color: #9ecfc3 !important;
}
.dark nav a.border-emerald-700 {
    border-color: #9ecfc3 !important;
}
.dark nav .text-emerald-900 {
    color: #d4e8e3 !important;
}
.dark nav a.text-slate-600,
.dark nav a.text-slate-600:not(:hover) {
    color: #8faaa5 !important;
}

/* Toggle button icon */
.dark button.material-symbols-outlined.text-emerald-800,
.dark button.material-symbols-outlined.text-slate-600,
.dark button.material-symbols-outlined.text-on-surface-variant {
    color: #9ecfc3 !important;
}

/* ============================================================
   DARK MODE — Page Background & Surfaces
   ============================================================ */

.dark .bg-background {
    background-color: #0f1b18 !important;
}
.dark .bg-surface {
    background-color: #0f1b18 !important;
}
.dark .bg-surface-bright {
    background-color: #1a2623 !important;
}
.dark .bg-surface-dim {
    background-color: #0a1210 !important;
}
.dark .bg-surface-container-lowest {
    background-color: #131f1c !important;
    box-shadow: none !important;
    border: 1px solid rgba(158, 207, 195, 0.07);
}
.dark .bg-surface-container-low {
    background-color: #1a2623 !important;
}
.dark .bg-surface-container {
    background-color: #212e2a !important;
}
.dark .bg-surface-container-high {
    background-color: #283530 !important;
}
.dark .bg-surface-container-highest {
    background-color: #2f3d39 !important;
}
.dark .bg-surface-variant {
    background-color: #2a3530 !important;
}

.dark .bg-white {
    background-color: #131f1c !important;
    box-shadow: none !important;
    border: 1px solid rgba(158, 207, 195, 0.08);
}

.dark .bg-white\/50 {
    background-color: rgba(19, 31, 28, 0.82) !important;
    box-shadow: none !important;
    border: 1px solid rgba(158, 207, 195, 0.08);
}

.dark .bg-white\/5 {
    background-color: rgba(212, 232, 227, 0.06) !important;
}

.dark .bg-black\/5 {
    background-color: rgba(4, 11, 10, 0.26) !important;
}

/* ============================================================
   DARK MODE — Primary Color
   ============================================================ */

.dark .bg-primary {
    background-color: #7ecfbe !important;
}
.dark .hover\:bg-primary-dim:hover {
    background-color: #5db8a5 !important;
}
.dark .text-primary {
    color: #7ecfbe !important;
}
.dark .text-on-primary {
    color: #012018 !important;
}
.dark .bg-primary-container {
    background-color: #0f3328 !important;
}
.dark .text-on-primary-container {
    color: #aee0d2 !important;
}
.dark .text-primary-fixed {
    color: #c7eade !important;
}
.dark .bg-primary-fixed {
    background-color: #1d3832 !important;
}
/* Opacity modifier variants */
.dark .bg-primary\/10 {
    background-color: rgba(158, 207, 195, 0.12) !important;
}
.dark .bg-primary-container\/30 {
    background-color: rgba(29, 56, 50, 0.4) !important;
}
.dark .shadow-primary\/10 {
    --tw-shadow-color: rgba(158, 207, 195, 0.12);
}

/* ============================================================
   DARK MODE — Secondary Color
   ============================================================ */

.dark .bg-secondary-container {
    background-color: #2a3530 !important;
}
.dark .text-on-secondary-container {
    color: #c5d5ce !important;
}
.dark .text-secondary {
    color: #a0b5af !important;
}
.dark .bg-secondary\/10 {
    background-color: rgba(160, 181, 175, 0.12) !important;
}

/* ============================================================
   DARK MODE — Tertiary Color
   ============================================================ */

.dark .bg-tertiary-container {
    background-color: #2d2010 !important;
}
.dark .text-on-tertiary-container {
    color: #e8d5b3 !important;
}
.dark .text-tertiary {
    color: #c8a97c !important;
}
.dark .bg-tertiary {
    background-color: #8c6c44 !important;
}
.dark .text-on-tertiary {
    color: #130f08 !important;
}
.dark .hover\:bg-tertiary-dim:hover {
    background-color: #755632 !important;
}
.dark .bg-tertiary\/10 {
    background-color: rgba(200, 169, 124, 0.12) !important;
}
.dark .bg-tertiary-container\/30 {
    background-color: rgba(45, 32, 16, 0.44) !important;
}
.dark .border-tertiary\/10 {
    border-color: rgba(200, 169, 124, 0.18) !important;
}

/* ============================================================
   DARK MODE — Text Colors
   ============================================================ */

.dark .text-on-background {
    color: #d4e8e3 !important;
}
.dark .text-on-surface {
    color: #d4e8e3 !important;
}
.dark .text-on-surface-variant {
    color: #8faaa5 !important;
}
.dark .text-on-secondary-fixed-variant {
    color: #9fb7b1 !important;
}
.dark .text-on-tertiary-fixed-variant {
    color: #d4c1a0 !important;
}

/* ============================================================
   DARK MODE — Outline & Border
   ============================================================ */

.dark .border-outline-variant,
.dark .divide-outline-variant {
    border-color: #3d4e49 !important;
}

.dark .border-outline-variant\/10,
.dark .border-outline-variant\/20,
.dark .border-white\/10 {
    border-color: rgba(158, 207, 195, 0.12) !important;
}

/* ============================================================
   DARK MODE — Tailwind Slate (footer, misc)
   ============================================================ */

.dark .bg-slate-900,
.dark .bg-slate-950 {
    background-color: #0d1915 !important;
}
.dark .bg-slate-50 {
    background-color: #0d1915 !important;
}
.dark .bg-slate-100 {
    background-color: #131f1c !important;
}
.dark .bg-slate-200 {
    background-color: #1a2623 !important;
}
.dark .bg-slate-800\/50 {
    background-color: rgba(19, 31, 28, 0.5) !important;
}
.dark .text-slate-400 {
    color: #8faaa5 !important;
}
.dark .text-slate-500 {
    color: #7a9e99 !important;
}
.dark .border-slate-100 {
    border-color: rgba(158, 207, 195, 0.08) !important;
}
.dark .border-slate-200 {
    border-color: rgba(158, 207, 195, 0.12) !important;
}
.dark .border-slate-200\/50 {
    border-color: rgba(158, 207, 195, 0.1) !important;
}

/* ============================================================
   DARK MODE — Tailwind Emerald (footer, headings, accents)
   ============================================================ */

/* Footer headings and brand names */
.dark .text-emerald-900 {
    color: #d4e8e3 !important;
}
.dark .text-emerald-800 {
    color: #b8e0d4 !important;
}
.dark .text-emerald-700 {
    color: #9ecfc3 !important;
}
.dark .text-emerald-600 {
    color: #8bc4b7 !important;
}
.dark .text-emerald-300 {
    color: #b8e0d4 !important;
}
.dark .text-emerald-200,
.dark .text-emerald-100 {
    color: #d4e8e3 !important;
}
.dark .border-b-2.border-emerald-700 {
    border-color: #9ecfc3 !important;
}

/* ============================================================
   DARK MODE — About page specific (editorial overlay, white cards)
   ============================================================ */

.dark .bg-white\/90 {
    background-color: rgba(19, 31, 28, 0.95) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark .editorial-shadow,
.dark .shadow-sm,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
}

/* ============================================================
   DARK MODE — Inverse Surface (tags, chips)
   ============================================================ */

.dark .bg-inverse-surface {
    background-color: #d4e8e3 !important;
}
.dark .text-inverse-on-surface {
    color: #0f1b18 !important;
}

/* ============================================================
   DARK MODE — Hover states
   ============================================================ */

.dark .hover\:bg-surface-container-highest:hover {
    background-color: #2f3d39 !important;
}
.dark .hover\:bg-surface-container-high:hover {
    background-color: #2b3834 !important;
}
.dark .hover\:bg-emerald-50\/50:hover {
    background-color: rgba(158, 207, 195, 0.1) !important;
}
.dark .hover\:bg-emerald-900\/50:hover {
    background-color: rgba(10, 18, 16, 0.5) !important;
}
.dark .hover\:text-emerald-800:hover,
.dark .hover\:text-emerald-600:hover,
.dark .hover\:text-emerald-300:hover {
    color: #d4e8e3 !important;
}

/* ============================================================
   DARK MODE — CTA / green accent sections
   ============================================================ */

/* Schools & Parishes green card */
.dark .bg-emerald-900 {
    background-color: #0f1b18 !important;
}
.dark .bg-emerald-950 {
    background-color: #0a1210 !important;
}

.dark .mix-blend-multiply {
    mix-blend-mode: normal !important;
}

/* ============================================================
   DARK MODE — Selection highlight
   ============================================================ */

.dark ::selection {
    background-color: #1d3832;
    color: #b8e0d4;
}