/* =========================
   Theme tokens (Light default)
   ========================= */
:root {
    /* Brand */
    --club-green: #0f5132;
    --club-green-2: #0c4128;
    --club-cream: #f6fbf8;

    /* Surfaces */
    --page-bg: #eef6f1; /* matches the bottom of the landing gradient */

    /* Text */
    --text: #0b1d14;
    --muted: rgba(0, 0, 0, 0.60);

    /* UI tokens */
    --border-soft: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(15, 81, 50, 0.15);
    --hover-soft: rgba(15, 81, 50, 0.08);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-blur: blur(8px);

    /* Links */
    --link: var(--club-green);
    --link-hover: var(--club-green-2);
}

/* =========================
   Base
   ========================= */
html,
body {
    height: 100%;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--text);
}

/* =========================
   Light-mode chessboard landing background
   ========================= */
.bg-chess-light {
    position: relative;
    /*min-height: 100vh;*/
    min-height: 100svh;
    overflow: hidden;

    /* Base wash */
    background:
            radial-gradient(1100px 760px at 18% 4%, rgba(15,81,50,0.10), transparent 60%),
            radial-gradient(900px 760px at 88% 78%, rgba(0,0,0,0.04), transparent 62%),
            linear-gradient(180deg, #ffffff 0%, var(--club-cream) 35%, var(--page-bg) 100%);

    color: var(--text);
}

/* Top layer: crisper chessboard (more visible near the top) */
.bg-chess-light::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: 0;

    background-image:
            linear-gradient(45deg, rgba(15,81,50,0.11) 25%, transparent 25%),
            linear-gradient(-45deg, rgba(15,81,50,0.11) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, rgba(15,81,50,0.11) 75%),
            linear-gradient(-45deg, transparent 75%, rgba(15,81,50,0.11) 75%);

    background-size: 64px 64px;
    background-position: 0 0, 0 32px, 32px -32px, -32px 0;

    /* Less blur near top */
    filter: blur(4px);
    opacity: 0.58;
    transform: scale(1.05);
    mix-blend-mode: multiply;

    /* Fade out as we go down */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 55%, transparent 82%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 55%, transparent 82%);
}

/* Bottom layer: heavier blur that increases down the page (keeps pattern visible but softer) */
.bg-chess-light::after {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: 0;
    pointer-events: none;

    background:
        /* blurred chessboard again */
            linear-gradient(45deg, rgba(15,81,50,0.10) 25%, transparent 25%),
            linear-gradient(-45deg, rgba(15,81,50,0.10) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, rgba(15,81,50,0.10) 75%),
            linear-gradient(-45deg, transparent 75%, rgba(15,81,50,0.10) 75%),
                /* subtle depth + vignette */
            radial-gradient(1200px 900px at 50% 92%, rgba(0,0,0,0.05), rgba(0,0,0,0.10)),
            linear-gradient(180deg, transparent 62%, var(--page-bg) 100%);

    background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px, auto, auto;
    background-position: 0 0, 0 32px, 32px -32px, -32px 0, 0 0, 0 0;

    filter: blur(18px);
    opacity: 0.46;
    transform: scale(1.06);

    /* Increase influence toward the bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.95) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.95) 100%);
}

.bg-chess-light > * {
    position: relative;
    z-index: 1;
}

/* =========================
   Navbar + buttons
   ========================= */
.bg-club {
    background: var(--club-green) !important;
}

.btn-club {
    background: var(--club-green);
    border-color: var(--club-green);
    font-weight: 600;
    color: #fff;
}

.btn-club:hover {
    background: var(--club-green-2);
    border-color: var(--club-green-2);
    color: #fff;
}

/* Glass card (used anywhere) */
.glass-card-light {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); /* Safari */
    border: 1px solid var(--border-strong);
}

/* =========================
   Footer (global)
   ========================= */
.site-footer {
    border-top: 1px solid var(--border-soft);
    background: var(--page-bg);
}

/*.site-footer .fw-semibold { letter-spacing: .2px; }*/

.footer-link,
.footer-icon {
    color: var(--link);
    text-decoration: none;
    font-weight: 500;
}

.footer-link:hover,
.footer-icon:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* =========================
   Dark theme (Bootstrap 5.3: data-bs-theme="dark")
   ========================= */
:root[data-bs-theme="dark"] {
    --page-bg: #07140f;
    --club-cream: #0b1d14;
    --club-green: #1a6b46;
    --club-green-2: #14593b;

    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.70);

    --border-soft: rgba(255,255,255,0.10);
    --border-strong: rgba(159,224,193,0.16);
    --hover-soft: rgba(159,224,193,0.10);

    --glass-bg: rgba(18, 28, 23, 0.72);

    --link: #9fe0c1;
    --link-hover: #b9f1d7;
}

/* ✅ Fix: target the real elements (html is :root) */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background: var(--page-bg);
    color: var(--text);
}

/* Dark-mode chessboard landing background (same structure as light) */
:root[data-bs-theme="dark"] .bg-chess-light {
    background:
            radial-gradient(1100px 760px at 18% 4%, rgba(159,224,193,0.08), transparent 60%),
            radial-gradient(900px 760px at 88% 78%, rgba(0,0,0,0.30), transparent 62%),
            linear-gradient(180deg, #06110d 0%, #081812 35%, var(--page-bg) 100%);

    color: var(--text);
}

/* Top layer: crisper chessboard */
:root[data-bs-theme="dark"] .bg-chess-light::before {
    background-image:
            linear-gradient(45deg, rgba(159,224,193,0.085) 25%, transparent 25%),
            linear-gradient(-45deg, rgba(159,224,193,0.085) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, rgba(159,224,193,0.085) 75%),
            linear-gradient(-45deg, transparent 75%, rgba(159,224,193,0.085) 75%);

    filter: blur(4px);
    opacity: 0.50;
    mix-blend-mode: screen;

    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 55%, transparent 82%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 55%, transparent 82%);
}

/* Bottom layer: heavier blur + depth */
:root[data-bs-theme="dark"] .bg-chess-light::after {
    background:
            linear-gradient(45deg, rgba(159,224,193,0.075) 25%, transparent 25%),
            linear-gradient(-45deg, rgba(159,224,193,0.075) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, rgba(159,224,193,0.075) 75%),
            linear-gradient(-45deg, transparent 75%, rgba(159,224,193,0.075) 75%),
            radial-gradient(1200px 900px at 50% 92%, rgba(0,0,0,0.45), rgba(0,0,0,0.78)),
            linear-gradient(180deg, transparent 62%, var(--page-bg) 100%);

    background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px, auto, auto;
    background-position: 0 0, 0 32px, 32px -32px, -32px 0, 0 0, 0 0;

    filter: blur(18px);
    opacity: 0.44;
    transform: scale(1.06);

    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.95) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0.95) 100%);
}

/* Navbar in dark */
:root[data-bs-theme="dark"] .bg-club {
    background: #062015 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

:root[data-bs-theme="dark"] .navbar .nav-link,
:root[data-bs-theme="dark"] .navbar-brand {
    color: rgba(255,255,255,0.90) !important;
}

:root[data-bs-theme="dark"] .navbar .nav-link:hover {
    color: #ffffff !important;
    opacity: 1;
}

/* Outline button harmony */
:root[data-bs-theme="dark"] .btn-outline-success {
    color: var(--link);
    border-color: rgba(159,224,193,0.45);
}
:root[data-bs-theme="dark"] .btn-outline-success:hover {
    background: rgba(159,224,193,0.12);
    border-color: rgba(159,224,193,0.65);
    color: #eafff6;
}

/* Glass card in dark */
:root[data-bs-theme="dark"] .glass-card-light {
    border-color: var(--border-strong);
    color: var(--text);
}

/* Make muted text consistent */
:root[data-bs-theme="dark"] .text-muted {
    color: var(--muted) !important;
}

/* Inputs */
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select {
    background: rgba(10, 18, 14, 0.75);
    border-color: rgba(255,255,255,0.10);
    color: var(--text);
}
:root[data-bs-theme="dark"] .form-control::placeholder {
    color: rgba(255,255,255,0.55);
}

/* Footer in dark */
:root[data-bs-theme="dark"] .site-footer {
    background: rgba(6, 16, 13, 0.9);
    border-top-color: rgba(255,255,255,.08);
    color: var(--muted);
}

/* Cards: increase separation in dark mode (avoid merging with background) */
:root[data-bs-theme="dark"] .card {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.11);
    color: var(--text);
}

/* Stronger surface for your main cards */
:root[data-bs-theme="dark"] .page-card,
:root[data-bs-theme="dark"] .section-card {
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}


/* =========================
   Home landing (dark): ensure the small feature cards are visible
   - The hero background is "busy" (chessboard + blur), so give cards a stronger surface
   ========================= */
:root[data-bs-theme="dark"] .bg-chess-light .card:not(.glass-card-light){
    background: rgba(18, 28, 23, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

/* If those 3 cards use a custom class, this strengthens them too */
:root[data-bs-theme="dark"] .bg-chess-light .option-card{
    background: rgba(18, 28, 23, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.50);
}

/* =========================
   Knight theme toggle (inline SVG) — badge + label
   ========================= */
.knight-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .38rem .62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    opacity: .95;
    line-height: 1;
    position: relative;
    overflow: visible;
    transition:
            background-color .18s ease,
            border-color .18s ease,
            transform .18s ease,
            opacity .18s ease,
            box-shadow .18s ease,
            color .18s ease;
}

/* Label (text next to icon) */
.knight-toggle .knight-label{
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    color: currentColor;
}

/* Active */
.knight-toggle:active{ transform: scale(.98); }

/* Focus (base) */
.knight-toggle:focus{ outline: none; }

/* =========================
   Navbar-specific styling
   ========================= */

/* Light mode on navbar (bg-club): crisp black + subtle pill */
:root:not([data-bs-theme="dark"]) #siteNavbar .knight-toggle{
    color: rgba(0, 0, 0, 0.88);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.24);
}

:root:not([data-bs-theme="dark"]) #siteNavbar .knight-toggle:hover{
    color: rgba(0, 0, 0, 0.98);
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.34);
}

:root:not([data-bs-theme="dark"]) #siteNavbar .knight-toggle:focus-visible{
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, 0.25);
}

/* Dark mode: warm ivory pill */
:root[data-bs-theme="dark"] #siteNavbar .knight-toggle{
    color: rgba(255, 248, 230, 0.95);
    background: rgba(255, 248, 230, 0.08);
    border-color: rgba(255, 248, 230, 0.16);
}

:root[data-bs-theme="dark"] #siteNavbar .knight-toggle:hover{
    color: rgba(255, 248, 230, 1);
    background: rgba(255, 248, 230, 0.14);
    border-color: rgba(255, 248, 230, 0.22);
}

:root[data-bs-theme="dark"] #siteNavbar .knight-toggle:focus-visible{
    box-shadow: 0 0 0 .25rem rgba(255, 248, 230, 0.26);
}

/* =========================
   Icon crossfade + motion
   ========================= */
.knight-icon-wrap{
    position: relative;
    width: 20px;
    height: 20px;
    transition: transform .18s ease;
}

.knight-toggle:hover .knight-icon-wrap{
    transform: scale(1.05);
}

.knight-icon{
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
    transform-origin: 50% 60%;
    transition: opacity .18s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}

/* Crossfade states:
   Light mode: outline visible, filled hidden
   Dark mode:  filled visible, outline hidden */
:root:not([data-bs-theme="dark"]) .knight-outline{ opacity: 1; transform: rotate(0deg) scale(1); }
:root:not([data-bs-theme="dark"]) .knight-filled { opacity: 0; transform: rotate(-8deg) scale(.92); }

:root[data-bs-theme="dark"] .knight-outline{ opacity: 0; transform: rotate(8deg) scale(.92); }
:root[data-bs-theme="dark"] .knight-filled { opacity: 1; transform: rotate(0deg) scale(1); }

/* =========================
   Checkmate-style click animation
   ========================= */
.knight-toggle::after{
    content: "";
    position: absolute;
    inset: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    transform: translate(-50%, -50%) scale(.6);
    opacity: 0;
    pointer-events: none;
}

.knight-toggle.is-mate{
    animation: mate-snap 280ms cubic-bezier(.2,.9,.2,1);
}

.knight-toggle.is-mate::after{
    animation: mate-ring 420ms ease-out;
}

@keyframes mate-snap{
    0%   { transform: scale(1); }
    35%  { transform: translateY(-1px) scale(1.06); }
    70%  { transform: scale(.98); }
    100% { transform: scale(1); }
}

@keyframes mate-ring{
    0%   { opacity: .45; transform: translate(-50%, -50%) scale(.6); }
    60%  { opacity: .18; }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.6); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .knight-toggle,
    .knight-icon,
    .knight-icon-wrap{ transition: none !important; }
    .knight-toggle.is-mate,
    .knight-toggle.is-mate::after{ animation: none !important; }
}

/* Mobile spacing */
@media (max-width: 991.98px){
    .knight-toggle{ padding: .32rem .55rem; }
}

/* Hide label on very small screens */
@media (max-width: 360px){
    .knight-toggle .knight-label{ display: none; }
}

/* =========================
   Inside pages (Lessons, 404, etc.)
   ========================= */
.page-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border-soft);
}
:root[data-bs-theme="dark"] .page-header {
    background: rgba(18, 28, 23, 0.60);
}

.page-card { border-radius: 18px; }

/* Soft success badge */
.badge-soft-success {
    background-color: rgba(15,81,50,.12);
    color: #0f5132;
    border: 1px solid rgba(15,81,50,.25);
    font-weight: 600;
}
:root[data-bs-theme="dark"] .badge-soft-success {
    background-color: rgba(159,224,193,.15);
    color: #9fe0c1;
    border-color: rgba(159,224,193,.35);
}

/* =========================
   Lessons (inside page style)
   ========================= */
.lessons-side { top: 1rem; }

.lessons-nav .list-group-item {
    padding: .75rem .25rem;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: .5rem;
}
.lessons-nav .list-group-item:hover { background: var(--hover-soft); }

.section-card { border-radius: 18px; }

.lessons-acc .accordion-item {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    margin-bottom: .75rem;
}

.lessons-acc .accordion-button { font-weight: 600; }

.checklist { padding-left: 1.15rem; margin-bottom: 0; }
.checklist li { margin-bottom: .45rem; }

.option-card {
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 14px 16px;
}
:root[data-bs-theme="dark"] .option-card {
    background: rgba(18, 28, 23, 0.55);
}


/* =========================
   404 helper
   ========================= */
.error-mark {
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-size: clamp(3.25rem, 6vw, 5rem);
    color: rgba(15,81,50,.22);
}
:root[data-bs-theme="dark"] .error-mark { color: rgba(159,224,193,.22); }

/* ===== Sticky navbar with dim-on-scroll ===== */
.navbar-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background-color .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
}


/* When scrolled: dim + blur */
.navbar-sticky.is-scrolled.bg-club {
    background: rgba(15, 81, 50, 0.86) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
}

/* Dark mode scrolled style */
:root[data-bs-theme="dark"] .navbar-sticky.is-scrolled.bg-club {
    background: rgba(6, 16, 13, 0.85) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}


/* White CTA block (used on homepage side section) */
.lessons-cta {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* Dark mode version (important) */
:root[data-bs-theme="dark"] .lessons-cta {
    background: rgba(18, 28, 23, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Lessons CTA – featured (both modes) */
.lessons-cta--featured{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 81, 50, 0.18);
}

.lessons-cta--featured::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
            radial-gradient(600px 180px at 15% 15%, rgba(15, 81, 50, 0.10), transparent 60%),
            radial-gradient(420px 160px at 85% 30%, rgba(15, 81, 50, 0.08), transparent 55%);
    pointer-events: none;
}

:root[data-bs-theme="dark"] .lessons-cta--featured{
    border-color: rgba(255, 248, 230, 0.14);
}

:root[data-bs-theme="dark"] .lessons-cta--featured::before{
    background:
            radial-gradient(600px 180px at 15% 15%, rgba(255, 248, 230, 0.10), transparent 60%),
            radial-gradient(420px 160px at 85% 30%, rgba(255, 248, 230, 0.07), transparent 55%);
}



/* Lessons inset panels: consistent sub-card surface (both modes) */
.lesson-inset{
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.10) !important;
}

.lesson-inset:hover{
    background: rgba(0, 0, 0, 0.03);
}

:root[data-bs-theme="dark"] .lesson-inset{
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12) !important;
}

:root[data-bs-theme="dark"] .lesson-inset:hover{
    background: rgba(255, 255, 255, 0.08);
}



:root[data-bs-theme="dark"] .form-select {
    /* Ensure native controls render for dark UI */
    color-scheme: dark;

    /* Force a light chevron icon */
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-bs-theme="dark"] .form-select:focus {
    box-shadow: 0 0 0 .25rem rgba(159, 224, 193, .25); /* optional, matches your mint */
}