/* Light mode variables (default) */
:root {
    /* Page defaults */
    --bg-page: white;
    --text-page: black;

    /* Flatly colors */
    --bs-success: #00bc8c;
    --bs-info: #3498db;
    --bs-warning: #f39c12;
    --bs-danger: #e74c3c;

    --bs-success-text-emphasis: #004b38;
    --bs-info-text-emphasis: #153d58;
    --bs-warning-text-emphasis: #613e07;
    --bs-danger-text-emphasis: #5c1e18;

    --bs-success-bg-subtle: #ccf2e8;
    --bs-info-bg-subtle: #d6eaf8;
    --bs-warning-bg-subtle: #fdebd0;
    --bs-danger-bg-subtle: #fadbd8;

    --bs-success-border-subtle: #99e4d1;
    --bs-info-border-subtle: #aed6f1;
    --bs-warning-border-subtle: #fad7a0;
    --bs-danger-border-subtle: #f5b7b1;

    /* Default links */
    --link-color: var(--bs-success);
    --link-hover-color: var(--bs-success-text-emphasis);

    /* Navbar */
    --navbar-bg: white;
    --navbar-text: black;
    --navbar-link: black;
    --navbar-link-hover: var(--bs-success);
    --navbar-brand: black;

    /* Block 1 */
    --block1-bg: var(--bs-info-border-subtle);
    --block1-text:  black;
    --block1-border: black;
    --block1-link: var(--bs-info);
    --block1-link-hover: var(--bs-warning);
    --block1-btn-bg: var(--bs-info);
    --block1-btn-border: black;
    --block1-btn-text: white;
    --block1-btn-hover-bg: var(--bs-info-text-emphasis);
    --block1-btn-hover-border: var(--bs-info);
    --block1-btn-hover-text: white;

    /* Block 2 */
    --block2-bg: var(--bs-warning-border-subtle);
    --block2-text:  black;
    --block2-border: black;
    --block2-link: var(--bs-warning);
    --block2-link-hover: var(--bs-danger);
    --block2-btn-bg: var(--bs-warning);
    --block2-btn-border: black;
    --block2-btn-text: white;
    --block2-btn-hover-bg: var(--bs-warning-text-emphasis);
    --block2-btn-hover-border: var(--bs-warning);
    --block2-btn-hover-text: white;

    /* Block 3 */
    --block3-bg: var(--bs-danger-border-subtle);
    --block3-text:  black;
    --block3-border: black;
    --block3-link: var(--bs-danger);
    --block3-link-hover: var(--bs-info);
    --block3-btn-bg: var(--bs-danger);
    --block3-btn-border: black;
    --block3-btn-text: white;
    --block3-btn-hover-bg: var(--bs-danger-text-emphasis);
    --block3-btn-hover-border: var(--bs-danger);
    --block3-btn-hover-text: white;
}

/* Dark mode overrides */
.quarto-dark {
    /* Page defaults */
    --bg-page:  #121212;
    --text-page:  white;

    /* Darkly colors */
    --bs-success-text-emphasis: #66d7ba;
    --bs-info-text-emphasis: #85c1e9;
    --bs-warning-text-emphasis: #f8c471;
    --bs-danger-text-emphasis: #f1948a;

    --bs-success-bg-subtle: #00261c;
    --bs-info-bg-subtle: #0a1e2c;
    --bs-warning-bg-subtle: #311f04;
    --bs-danger-bg-subtle: #2e0f0c;

    --bs-success-border-subtle: #007154;
    --bs-info-border-subtle: #1f5b83;
    --bs-warning-border-subtle: #925e0b;
    --bs-danger-border-subtle: #8b2e24;

    /* Navbar */
    --navbar-bg:  #1A1A1A;
    --navbar-text: white;
    --navbar-link: white;
    --navbar-link-hover: var(--bs-success);
    --navbar-brand: white;

    /* Block 1 */
    --block1-bg: var(--bs-info-border-subtle);
    --block1-text:  white;
    --block1-border: white;
    --block1-link: var(--bs-info-text-emphasis);
    --block1-link-hover: var(--bs-warning);
    --block1-btn-bg: var(--bs-info);
    --block1-btn-border: white;
    --block1-btn-text: white;
    --block1-btn-hover-bg: var(--bs-info-text-emphasis);
    --block1-btn-hover-border: var(--bs-info);
    --block1-btn-hover-text: black;

    /* Block 2 */
    --block2-bg: var(--bs-warning-border-subtle);
    --block2-text:  white;
    --block2-border: white;
    --block2-link: var(--bs-warning-text-emphasis);
    --block2-link-hover: var(--bs-danger);
    --block2-btn-bg: var(--bs-warning);
    --block2-btn-border: white;
    --block2-btn-text: white;
    --block2-btn-hover-bg: var(--bs-warning-text-emphasis);
    --block2-btn-hover-border: var(--bs-warning);
    --block2-btn-hover-text: black;

    /* Block 3 */
    --block3-bg: var(--bs-danger-border-subtle);
    --block3-text:  white;
    --block3-border: white;
    --block3-link: var(--bs-danger-text-emphasis);
    --block3-link-hover: var(--bs-info);
    --block3-btn-bg: var(--bs-danger);
    --block3-btn-border: white;
    --block3-btn-text: white;
    --block3-btn-hover-bg: var(--bs-danger-text-emphasis);
    --block3-btn-hover-border: var(--bs-danger);
    --block3-btn-hover-text: black;
}

/* Base page styles */
body {
    background-color: var(--bg-page);
    color: var(--text-page);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Make links inherit font weight from parent (fixes issue with bold links) */
a {
    font-weight: inherit;
}

.block-1 {
    background-color: var(--block1-bg);
    color: var(--block1-text);
    border: 2px dashed var(--block1-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.block-1 a {
    color: var(--block1-link) !important;
    text-decoration-color: var(--block1-link) !important;
    text-decoration: underline;
}
.block-1 a:hover {
    color: var(--block1-link-hover) !important;
    text-decoration: none;
}
.block-1 .btn {
    background-color: var(--block1-btn-bg);
    border: 2px dashed var(--block1-btn-border);
    color: var(--block1-btn-text) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-1 .btn:hover {
    color: var(--block1-btn-hover-text) !important;
    background-color: var(--block1-btn-hover-bg);
    border: 2px dashed var(--block1-btn-hover-border);
}

.block-2 {
    background-color: var(--block2-bg);
    color: var(--block2-text);
    border: 2px dashed var(--block2-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.block-2 a {
    color: var(--block2-link) !important;
    text-decoration-color: var(--block2-link) !important;
    transition: color 0.2s ease;
}
.block-2 a:hover {
    color: var(--block2-link-hover) !important;
    text-decoration: none;
}
.block-2 .btn {
    background-color: var(--block2-btn-bg);
    border: 2px dashed var(--block2-btn-border);
    color: var(--block2-btn-text) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-2 .btn:hover {
    color: var(--block2-btn-hover-text) !important;
    background-color: var(--block2-btn-hover-bg);
    border: 2px dashed var(--block2-btn-hover-border);
}

.block-3 {
    background-color: var(--block3-bg);
    color: var(--block3-text);
    border: 2px dashed var(--block3-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.block-3 a {
    color: var(--block3-link) !important;
    text-decoration-color: var(--block3-link) !important;;
    transition: color 0.2s ease;
}
.block-3 a:hover {
    color: var(--block3-link-hover) !important;
    text-decoration: none;
}
.block-3 .btn {
    background-color: var(--block3-btn-bg);
    border: 2px dashed var(--block3-btn-border);
    color: var(--block3-btn-text) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.block-3 .btn:hover {
    color: var(--block3-btn-hover-text) !important;
    background-color: var(--block3-btn-hover-bg);
    border: 2px dashed var(--block3-btn-hover-border);
}

/* Smooth transitions for all interactive elements */
a, button, .btn {
    transition: all 0.2s ease;
}

/* Optional: Add a subtle box-shadow on hover for depth */
.block-1 .btn:hover,
.block-2 .btn:hover,
.block-3 .btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

/* Navbar background */
.navbar, .navbar.bg-light, .navbar.bg-dark {
    background-color: var(--navbar-bg) !important;
}

/* Navbar brand */
.navbar-brand, .navbar-brand:hover {
    color: var(--navbar-brand) !important;
}
.navbar-brand:hover {
    color: var(--navbar-link-hover) !important;
}
.navbar {
    border-bottom: 1px solid lightslategray !important;
}

/* Hover state */
.quarto-color-scheme-toggle:hover .bi,
.quarto-color-scheme-toggle:hover .bi-sun-fill,
.quarto-color-scheme-toggle:hover .bi-moon-fill,
.quarto-color-scheme-toggle:hover .bi-sun,
.quarto-color-scheme-toggle:hover .bi-moon {
    color: var(--navbar-link-hover) !important;
}

.quarto-color-scheme-toggle .bi {
    color: var(--navbar-link) !important;
}

/* Navbar links */
.navbar-nav .nav-link {
    color: var(--navbar-link) !important;
}
.navbar-nav .nav-link:hover {
    color: var(--navbar-link-hover) !important;
}

/* Active nav item */
.navbar-nav .nav-link.active {
    color: var(--navbar-link-hover) !important;
    font-weight: 600;
}

/* Mobile menu button */
.navbar-toggler {
    border-color: var(--navbar-link) !important;
}

/* Mobile menu button icon (light/dark aware) */
@media (prefers-color-scheme: dark) {
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}
@media (prefers-color-scheme: light) {
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}

/* Default page links */
a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: var(--link-color);
    text-decoration-color: var(--link-underline-color);
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: var(--link-hover-color);
}