/* ================================================================
   Study Reformed - Classic & Scholarly Theme
   ================================================================ */

/* -- Light Mode Palette (Classic - default) -- */
:root {
    --wm-primary: #6B2737;
    --wm-primary-hover: #522030;
    --wm-primary-rgb: 107, 39, 55;
    --wm-secondary: #4A5568;
    --wm-secondary-hover: #3D4654;
    --wm-accent: #B8860B;
    --wm-accent-hover: #9A7209;
    --wm-accent-light: #D4A843;
    --wm-accent-rgb: 184, 134, 11;

    --wm-body-bg: #FAF6F1;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #E8E0D8;
    --wm-border: #DDD5CC;
    --wm-code-bg: #F0EBE4;

    --wm-text: #2D2A26;
    --wm-text-muted: #6B6560;

    --wm-success: #2D6A4F;
    --wm-danger: #A4243B;

    --wm-navbar-bg: #2D2A26;

    /* Override Bootstrap variables */
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 107, 39, 55;
    --bs-secondary: var(--wm-secondary);
    --bs-secondary-rgb: 74, 85, 104;
    --bs-success: var(--wm-success);
    --bs-danger: var(--wm-danger);

    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 250, 246, 241;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 45, 42, 38;
    --bs-border-color: var(--wm-border);

    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 107, 39, 55;
    --bs-link-hover-color: var(--wm-primary-hover);

    --bs-body-font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236B6560'/%3E%3C/svg%3E");
}

/* -- Dark Mode Palette -- */
[data-bs-theme="dark"] {
    --wm-primary: #D4899A;
    --wm-primary-hover: #E0A0B0;
    --wm-primary-rgb: 212, 137, 154;
    --wm-secondary: #A0AEC0;
    --wm-accent: #D4A843;
    --wm-accent-hover: #E0BC5C;
    --wm-accent-light: #D4A843;

    --wm-body-bg: #1A1816;
    --wm-card-bg: #242220;
    --wm-card-border: #3D3835;
    --wm-border: #3D3835;
    --wm-code-bg: #2A2725;

    --wm-text: #E8E0D8;
    --wm-text-muted: #9B9590;

    --wm-success: #52B788;
    --wm-danger: #E07A8A;

    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 212, 137, 154;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 26, 24, 22;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 232, 224, 216;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 212, 137, 154;
    --bs-link-hover-color: var(--wm-primary-hover);

    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%239B9590'/%3E%3C/svg%3E");
}

/* ================================================================
   Color Schemes
   ================================================================ */

/* -- Ocean -- */
[data-color-scheme="ocean"] {
    --wm-primary: #1B4965;
    --wm-primary-hover: #143B52;
    --wm-primary-rgb: 27, 73, 101;
    --wm-secondary: #5A7D8F;
    --wm-secondary-hover: #4A6A7A;
    --wm-accent: #2A9D8F;
    --wm-accent-hover: #228176;
    --wm-accent-light: #52B5A5;
    --wm-accent-rgb: 42, 157, 143;
    --wm-body-bg: #F5F9FA;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #D6E3E8;
    --wm-border: #C8D8DE;
    --wm-code-bg: #E8F0F2;
    --wm-text: #1A2A32;
    --wm-text-muted: #5A6F78;
    --wm-navbar-bg: #1A2A32;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 27, 73, 101;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 245, 249, 250;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 26, 42, 50;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 27, 73, 101;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="ocean"][data-bs-theme="dark"] {
    --wm-primary: #7EB8D0;
    --wm-primary-hover: #96CAE0;
    --wm-primary-rgb: 126, 184, 208;
    --wm-secondary: #90AFC0;
    --wm-accent: #52B5A5;
    --wm-accent-hover: #6FC8BA;
    --wm-accent-light: #52B5A5;
    --wm-accent-rgb: 82, 181, 165;
    --wm-body-bg: #141D22;
    --wm-card-bg: #1C2830;
    --wm-card-border: #2E4050;
    --wm-border: #2E4050;
    --wm-code-bg: #1E2C35;
    --wm-text: #DEE8ED;
    --wm-text-muted: #8A9DA8;
    --wm-navbar-bg: #1A2A32;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 126, 184, 208;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 20, 29, 34;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 222, 232, 237;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 126, 184, 208;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* -- Forest -- */
[data-color-scheme="forest"] {
    --wm-primary: #2D5016;
    --wm-primary-hover: #234010;
    --wm-primary-rgb: 45, 80, 22;
    --wm-secondary: #5C6B4F;
    --wm-secondary-hover: #4D5A42;
    --wm-accent: #C07D1A;
    --wm-accent-hover: #A06A14;
    --wm-accent-light: #D4993D;
    --wm-accent-rgb: 192, 125, 26;
    --wm-body-bg: #F7F5F0;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #DDD8CE;
    --wm-border: #D0CBBC;
    --wm-code-bg: #ECE8DF;
    --wm-text: #2A2820;
    --wm-text-muted: #68645A;
    --wm-navbar-bg: #1E2218;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 45, 80, 22;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 247, 245, 240;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 42, 40, 32;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 45, 80, 22;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="forest"][data-bs-theme="dark"] {
    --wm-primary: #8FBF75;
    --wm-primary-hover: #A5D08E;
    --wm-primary-rgb: 143, 191, 117;
    --wm-secondary: #A0AE90;
    --wm-accent: #D4993D;
    --wm-accent-hover: #E0AD55;
    --wm-accent-light: #D4993D;
    --wm-accent-rgb: 212, 153, 61;
    --wm-body-bg: #181A14;
    --wm-card-bg: #222418;
    --wm-card-border: #3A3D30;
    --wm-border: #3A3D30;
    --wm-code-bg: #262820;
    --wm-text: #E0DED6;
    --wm-text-muted: #969488;
    --wm-navbar-bg: #1E2218;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 143, 191, 117;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 24, 26, 20;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 224, 222, 214;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 143, 191, 117;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* -- Stone -- */
[data-color-scheme="stone"] {
    --wm-primary: #4A4440;
    --wm-primary-hover: #3A3430;
    --wm-primary-rgb: 74, 68, 64;
    --wm-secondary: #6B6560;
    --wm-secondary-hover: #5A5450;
    --wm-accent: #B5703C;
    --wm-accent-hover: #9A5F30;
    --wm-accent-light: #CB8C5A;
    --wm-accent-rgb: 181, 112, 60;
    --wm-body-bg: #F5F3F0;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #E0DCD6;
    --wm-border: #D4CFC8;
    --wm-code-bg: #EEEBE6;
    --wm-text: #2E2C28;
    --wm-text-muted: #787068;
    --wm-navbar-bg: #2A2826;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 74, 68, 64;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 245, 243, 240;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 46, 44, 40;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 74, 68, 64;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="stone"][data-bs-theme="dark"] {
    --wm-primary: #B0A8A0;
    --wm-primary-hover: #C0B8B0;
    --wm-primary-rgb: 176, 168, 160;
    --wm-secondary: #908880;
    --wm-accent: #CB8C5A;
    --wm-accent-hover: #D8A06E;
    --wm-accent-light: #CB8C5A;
    --wm-accent-rgb: 203, 140, 90;
    --wm-body-bg: #1A1918;
    --wm-card-bg: #242220;
    --wm-card-border: #3D3835;
    --wm-border: #3D3835;
    --wm-code-bg: #2A2725;
    --wm-text: #E0DCD6;
    --wm-text-muted: #989088;
    --wm-navbar-bg: #2A2826;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 176, 168, 160;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 26, 25, 24;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 224, 220, 214;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 176, 168, 160;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* -- Royal -- */
[data-color-scheme="royal"] {
    --wm-primary: #4A2060;
    --wm-primary-hover: #3A1850;
    --wm-primary-rgb: 74, 32, 96;
    --wm-secondary: #5C5070;
    --wm-secondary-hover: #4C4260;
    --wm-accent: #C8963C;
    --wm-accent-hover: #B08030;
    --wm-accent-light: #D8AE5C;
    --wm-accent-rgb: 200, 150, 60;
    --wm-body-bg: #F8F5FA;
    --wm-card-bg: #FFFFFF;
    --wm-card-border: #E2D8E8;
    --wm-border: #D6CCE0;
    --wm-code-bg: #F0EAF4;
    --wm-text: #2A2430;
    --wm-text-muted: #6A6075;
    --wm-navbar-bg: #221E28;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 74, 32, 96;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 248, 245, 250;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 42, 36, 48;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 74, 32, 96;
    --bs-link-hover-color: var(--wm-primary-hover);
}

[data-color-scheme="royal"][data-bs-theme="dark"] {
    --wm-primary: #C098D8;
    --wm-primary-hover: #D0AEE4;
    --wm-primary-rgb: 192, 152, 216;
    --wm-secondary: #A090B8;
    --wm-accent: #D8AE5C;
    --wm-accent-hover: #E4C070;
    --wm-accent-light: #D8AE5C;
    --wm-accent-rgb: 216, 174, 92;
    --wm-body-bg: #1A161E;
    --wm-card-bg: #24202A;
    --wm-card-border: #3D3548;
    --wm-border: #3D3548;
    --wm-code-bg: #2A2530;
    --wm-text: #E4DCE8;
    --wm-text-muted: #9890A0;
    --wm-navbar-bg: #221E28;
    --bs-primary: var(--wm-primary);
    --bs-primary-rgb: 192, 152, 216;
    --bs-body-bg: var(--wm-body-bg);
    --bs-body-bg-rgb: 26, 22, 30;
    --bs-body-color: var(--wm-text);
    --bs-body-color-rgb: 228, 220, 232;
    --bs-border-color: var(--wm-border);
    --bs-link-color: var(--wm-primary);
    --bs-link-color-rgb: 192, 152, 216;
    --bs-link-hover-color: var(--wm-primary-hover);
}

/* ================================================================
   Typography
   ================================================================ */

body {
    font-family: var(--bs-body-font-family);
    transition: background-color 0.3s ease, color 0.3s ease;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ================================================================
   Bootstrap Component Overrides (Sass-compiled values)
   ================================================================ */

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--wm-primary);
    --bs-btn-border-color: var(--wm-primary);
    --bs-btn-hover-bg: var(--wm-primary-hover);
    --bs-btn-hover-border-color: var(--wm-primary-hover);
    --bs-btn-active-bg: var(--wm-primary-hover);
    --bs-btn-active-border-color: var(--wm-primary-hover);
    --bs-btn-disabled-bg: var(--wm-primary);
    --bs-btn-disabled-border-color: var(--wm-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--wm-primary);
    --bs-btn-border-color: var(--wm-primary);
    --bs-btn-hover-bg: var(--wm-primary);
    --bs-btn-hover-border-color: var(--wm-primary);
    --bs-btn-active-bg: var(--wm-primary);
    --bs-btn-active-border-color: var(--wm-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--wm-secondary);
    --bs-btn-border-color: var(--wm-secondary);
    --bs-btn-hover-bg: var(--wm-secondary);
    --bs-btn-hover-border-color: var(--wm-secondary);
}

/* Text utilities */
.text-primary { color: var(--wm-primary) !important; }
.text-secondary { color: var(--wm-secondary) !important; }

/* Background utilities */
.bg-primary { background-color: var(--wm-primary) !important; }

/* Badges */
.text-bg-primary {
    background-color: var(--wm-primary) !important;
    color: #fff !important;
}

.text-bg-secondary {
    background-color: var(--wm-secondary) !important;
    color: #fff !important;
}

/* Border */
.border-primary { border-color: var(--wm-primary) !important; }
.border-primary-subtle { border-color: color-mix(in srgb, var(--wm-primary) 25%, var(--bs-body-bg)) !important; }

/* ================================================================
   Links & Transitions
   ================================================================ */

a {
    transition: color 0.15s ease;
}

.btn {
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--wm-primary-rgb), 0.25);
}

.btn-primary:active,
.btn-outline-primary:active {
    transform: translateY(0);
}

/* Breadcrumb links */
.breadcrumb-item a {
    color: var(--wm-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--wm-primary);
}

/* ================================================================
   Navbar
   ================================================================ */

.navbar {
    background-color: var(--wm-navbar-bg) !important;
    border-bottom: 2px solid var(--wm-accent);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    color: #FAF6F1 !important;
}

.navbar-brand:hover {
    color: var(--wm-accent-light) !important;
}

.navbar .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition: color 0.15s ease;
}

.navbar .nav-link:hover {
    color: var(--wm-accent-light) !important;
}

/* Search form in navbar */
.navbar .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #FAF6F1;
    font-size: 0.875rem;
}

.navbar .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--wm-accent-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--wm-accent-rgb), 0.25);
}

.navbar .form-control::placeholder {
    color: rgba(250, 246, 241, 0.5);
}

.navbar .form-select {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #FAF6F1;
    font-size: 0.875rem;
}

/* Appearance dropdown */
#appearance-dropdown {
    border-color: rgba(255, 255, 255, 0.2);
    color: #FAF6F1;
    font-size: 1rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

#appearance-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--wm-accent-light);
}

#appearance-dropdown::after {
    display: none;
}

.appearance-menu {
    min-width: 200px;
    padding: 0.5rem 0;
}

.scheme-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(128, 128, 128, 0.3);
    flex-shrink: 0;
}

.scheme-check {
    display: none;
}

.scheme-option.active .scheme-check {
    display: inline;
}

.scheme-option.active {
    font-weight: 500;
}

/* Collapsed navbar: right-justify all items */
@media (max-width: 991.98px) {
    .navbar-collapse .navbar-nav {
        align-items: flex-end;
    }

    .navbar-collapse .navbar-nav .nav-link,
    .navbar-collapse .navbar-nav .nav-item {
        text-align: right;
    }

    .navbar-collapse form.d-flex {
        justify-content: flex-end;
    }

    .navbar-collapse .dropdown {
        align-self: flex-end;
    }
}

/* ================================================================
   Cards
   ================================================================ */

.card {
    border: 1px solid var(--wm-card-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
}

.card-header {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    border-bottom: 1px solid var(--wm-card-border);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem 1.5rem;
}

/* Featured card */
.card-featured {
    border-left: 4px solid var(--wm-accent) !important;
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* List group items */
.list-group-item {
    border-color: var(--wm-card-border);
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.list-group-item-action:hover {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    padding-left: calc(var(--bs-list-group-item-padding-x) + 4px);
}

/* ================================================================
   Hero Section
   ================================================================ */

.hero-section {
    background: linear-gradient(
        180deg,
        var(--bs-body-bg) 0%,
        color-mix(in srgb, var(--wm-primary) 6%, var(--bs-body-bg)) 100%
    );
    border-bottom: 1px solid var(--wm-border);
}

.hero-bg-pattern {
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='40' height='40'%3E%3Cpath d='M20,0 L40,20 L20,40 L0,20 Z' fill='none' stroke='%236B2737' stroke-width='0.5'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%236B2737'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

[data-bs-theme="dark"] .hero-bg-pattern {
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='40' height='40'%3E%3Cpath d='M20,0 L40,20 L20,40 L0,20 Z' fill='none' stroke='%23D4899A' stroke-width='0.5'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23D4899A'/%3E%3C/svg%3E");
}

.hero-section h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--wm-primary);
}

/* Ornamental divider */
.ornamental-divider {
    display: block;
    margin: 0 auto;
}

/* Heading flourish */
.heading-flourish {
    display: block;
    margin: 0 auto;
}

/* Section headings */
.section-heading {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wm-border);
}

/* ================================================================
   Feature card icons
   ================================================================ */

.feature-icon {
    display: block;
    margin: 0 auto 1rem;
}

/* ================================================================
   Footer
   ================================================================ */

.site-footer {
    background-color: color-mix(in srgb, var(--wm-primary) 3%, var(--bs-body-bg));
    border-top: 1px solid var(--wm-border);
}

.footer-link {
    color: var(--wm-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

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

[data-bs-theme="dark"] .site-footer {
    background-color: color-mix(in srgb, var(--wm-primary) 5%, var(--bs-body-bg));
}

/* ================================================================
   Catechism Text Styling
   ================================================================ */

.question-text {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    line-height: 1.7;
}

.answer-text {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    line-height: 1.8;
}

/* Confession section headers (e.g., Second Helvetic all-caps headers) */
.confession-section-header {
    color: var(--wm-primary);
    letter-spacing: 0.02em;
}

/* Commentary */
.commentary-text {
    font-size: 0.95rem;
    line-height: 1.8;
}

.commentary-text p {
    margin-bottom: 1.25rem;
}

.fisher-subquestions .border-start {
    border-color: var(--wm-secondary) !important;
}

.fisher-subquestions p {
    font-size: 0.93rem;
    line-height: 1.6;
}

/* Scripture text */
.esv-text {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    font-size: 0.93rem;
    line-height: 1.8;
    color: var(--bs-body-color);
}

.scripture-ref {
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

.scripture-ref:hover {
    color: var(--wm-primary-hover) !important;
}

.scripture-passage .border-start {
    border-color: var(--wm-primary) !important;
}

/* User highlights */
mark.user-highlight {
    background-color: #fff3cd;
    border-radius: 2px;
    padding: 0 1px;
    cursor: pointer;
}

mark.user-highlight:hover {
    background-color: #ffe69c;
}

[data-bs-theme="dark"] mark.user-highlight {
    background-color: #664d03;
    color: #fff;
}

[data-bs-theme="dark"] mark.user-highlight:hover {
    background-color: #997404;
}

/* User annotations (inline comments) */

/* Wrapper that holds annotatable content + right-side margin notes */
.annotation-wrapper {
    position: relative;
}

.annotation-margin {
    position: absolute;
    top: 0;
    right: -220px;
    width: 200px;
}

.annotation-note {
    position: absolute;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 6px 8px;
    border-left: 2px solid var(--wm-accent);
    background: color-mix(in srgb, var(--wm-accent) 6%, var(--bs-body-bg));
    border-radius: 0 4px 4px 0;
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    word-wrap: break-word;
    max-height: 4.5em;
    overflow: hidden;
}

.annotation-note:hover,
.annotation-note.active {
    background: color-mix(in srgb, var(--wm-accent) 15%, var(--bs-body-bg));
    border-left-color: var(--wm-primary);
}

.annotation-note .annotation-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

mark.user-annotation {
    background-color: color-mix(in srgb, var(--wm-accent) 20%, transparent);
    border-bottom: 2px solid var(--wm-accent);
    border-radius: 2px;
    padding: 0 1px;
    cursor: pointer;
    position: relative;
}

mark.user-annotation:hover,
mark.user-annotation.active {
    background-color: color-mix(in srgb, var(--wm-accent) 35%, transparent);
}

[data-bs-theme="dark"] mark.user-annotation {
    background-color: color-mix(in srgb, var(--wm-accent) 25%, transparent);
}

[data-bs-theme="dark"] .annotation-note {
    background: color-mix(in srgb, var(--wm-accent) 10%, var(--bs-body-bg));
}

[data-bs-theme="dark"] .annotation-note:hover,
[data-bs-theme="dark"] .annotation-note.active {
    background: color-mix(in srgb, var(--wm-accent) 20%, var(--bs-body-bg));
}

/* On screens too narrow for the margin, stack notes below */
@media (max-width: 1399.98px) {
    .annotation-margin {
        position: static;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--wm-border, #dee2e6);
    }
    .annotation-note {
        position: static;
        max-height: none;
    }
    .annotation-note .annotation-note-text {
        -webkit-line-clamp: unset;
    }
}

.annotation-popover {
    background: var(--wm-card-bg, #fff);
    border: 1px solid var(--wm-border, #dee2e6);
    border-radius: 8px;
    padding: 12px;
    max-width: 320px;
    z-index: 1060;
    position: absolute;
}

.annotation-popover-header {
    border-bottom: 1px solid var(--wm-border, #dee2e6);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.annotation-popover textarea {
    font-family: var(--bs-body-font-family);
    font-size: 0.875rem;
}

/* ================================================================
   Navigation Components
   ================================================================ */

/* Tabs */
.nav-tabs .nav-link {
    transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-tabs .nav-link.active {
    color: var(--wm-primary);
    border-bottom-color: var(--wm-primary);
    font-weight: 500;
}

/* Accordion */
.accordion-button {
    transition: background-color 0.2s ease;
}

.accordion-button:not(.collapsed) {
    color: var(--wm-primary);
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
}

/* Topic accordion */
#topic-accordion .accordion-item {
    scroll-margin-top: 1rem;
}

#topic-accordion .accordion-button {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
}

#topic-accordion .accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    color: var(--wm-primary);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

#topic-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);
}

#topic-accordion .accordion-body {
    padding: 1rem 1.25rem 1.5rem;
}

#topic-accordion .accordion-body .list-group-item {
    font-size: 0.93rem;
}

/* ================================================================
   Form Styling
   ================================================================ */

.form-control-override {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

/* Allow annotation margin to overflow into padding on wide screens */
@media (min-width: 1400px) {
    #section-mode-content {
        padding-right: 220px;
    }
}

/* ================================================================
   Focus Styles
   ================================================================ */

:focus-visible {
    outline: 2px solid var(--wm-primary);
    outline-offset: 2px;
}

.nav-link:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--wm-primary);
    outline-offset: 2px;
    box-shadow: none;
}

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

@media print {
    nav.navbar, footer, form,
    .breadcrumb, .highlight-popover, .annotation-popover,
    .ornamental-divider, .heading-flourish,
    .hero-bg-pattern { display: none !important; }
    mark.user-annotation { background: none !important; border: none !important; }
    .annotation-margin { display: none !important; }
    .tab-content > .tab-pane { display: block !important; opacity: 1 !important; }
    .accordion-collapse { display: block !important; height: auto !important; }
    .nav-tabs { display: none !important; }
    .card { break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; }
    .commentary-text { break-inside: avoid; }
    body { color: #000 !important; background: #fff !important; }

    a { color: #000 !important; text-decoration: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
    .container { max-width: 100% !important; }
}

/* ================================================================
   Supporter Badge
   ================================================================ */
.supporter-badge {
    background: linear-gradient(135deg, var(--wm-accent), var(--wm-accent-light));
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15em 0.35em;
    border-radius: 0.25rem;
    vertical-align: middle;
}

.supporter-badge i {
    font-size: 0.65rem;
}

/* ================================================================
   Full-width page bands
   ================================================================ */

.page-band {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}

.page-band-content {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 575.98px) {
    .page-band-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Column separator — applied to grid columns site-wide */
.col-separator {
    border-left: 2px solid color-mix(in srgb, var(--wm-primary) 25%, transparent);
    padding-left: 1.5rem !important;
}

/* ── Sidebar toggle ── */
.sidebar-hide-btn {
    background: none;
    border: none;
    padding: 0.1rem 0.3rem;
    color: var(--wm-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sidebar-hide-btn:hover {
    opacity: 1;
    color: var(--wm-primary);
}

.sidebar-show-tab {
    position: absolute;
    left: 0;
    top: 1.75rem;
    z-index: 10;
    width: auto;
    background: var(--wm-bg);
    border: 1px solid var(--wm-border);
    border-left: 2px solid var(--wm-primary);
    border-radius: 0 0.25rem 0.25rem 0;
    padding: 0.5rem 0.25rem;
    color: var(--wm-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    transition: color 0.15s;
}
.sidebar-show-tab:hover {
    color: var(--wm-primary);
    border-color: var(--wm-primary);
}

/* When sidebar is hidden */
#nav-col.sidebar-hidden {
    display: none !important;
}
#main-col.sidebar-expanded {
    flex: 0 0 100%;
    max-width: 100%;
}

.page-band-header {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wm-border);
}

.page-band-featured {
    background-color: color-mix(in srgb, var(--wm-accent) 7%, var(--bs-body-bg));
    border-top: 2px solid color-mix(in srgb, var(--wm-accent) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wm-accent) 15%, transparent);
}

.page-band-muted {
    background-color: color-mix(in srgb, var(--wm-primary) 4%, var(--bs-body-bg));
    border-top: 1px solid var(--wm-border);
    border-bottom: 1px solid var(--wm-border);
}

/* ================================================================
   Flat sidebar (replaces card-based sidebar)
   ================================================================ */

.flat-sidebar {
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.flat-section-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wm-text-muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--wm-border);
    margin-bottom: 0.5rem;
}

/* Flat tradition toggles on home page */
.tradition-toggle.active {
    color: var(--wm-primary);
    font-weight: 500;
}

/* ================================================================
   Question-detail sidebar alignment
   ================================================================ */

/* ================================================================
   See-also preview panel
   ================================================================ */
.see-also-preview-panel {
    position: sticky;
    top: 1rem;
}

.see-also-link.active {
    font-weight: 700;
    text-decoration: underline;
}

.btn-close-sm {
    font-size: 0.6rem;
}

#preview-answer {
    font-size: 0.95rem;
    line-height: 1.7;
}

#preview-title {
    font-size: 0.95rem;
}

/* ── Tradition filter ── */
.doc-tradition-hidden {
    display: none !important;
}

.tradition-check {
    visibility: hidden;
}

/* ── Chapter / Section view mode ── */
.chapter-mode-item {
    cursor: pointer;
    border: none !important;
    border-bottom: 1px solid var(--wm-border) !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.5rem !important;
    margin-bottom: 0 !important;
    transition: background-color 0.15s;
}

.chapter-mode-item:last-child {
    border-bottom: none !important;
}

.chapter-mode-item .chapter-item-title {
    font-size: 1rem;
    margin-bottom: 0.15rem !important;
    color: var(--wm-primary);
}

.chapter-mode-item .answer-text {
    font-size: 0.92rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.chapter-mode-item .answer-text p {
    margin-bottom: 0.25rem;
}

.chapter-mode-item:hover {
    background-color: rgba(var(--wm-primary-rgb), 0.04);
}

#chapter-mode-content > h4 {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--wm-primary);
}