/* Modern styling for both light and dark themes using Furo's CSS variables */

/* Custom color variables */
:root {
    --color-light-bg-primary: #f8f8fa;
    --color-light-bg-secondary: #f0e6f6;
    --color-light-bg-tertiary: #f7e6f6;
    --color-light-bg-blue: #e6f0fa;
    --color-light-text: #2d2d2d;
    --color-light-border: #ececec;
    --color-light-brand: #a72264;
    --color-light-brand-dark: #7d174b;
    --color-light-accent: #f0b3e0;
    --color-light-shadow: rgba(167, 34, 100, 0.07);
    --color-light-shadow-sm: rgba(167, 34, 100, 0.04);
    --color-light-shadow-md: rgba(167, 34, 100, 0.06);
    --color-light-shadow-lg: rgba(167, 34, 100, 0.08);
    --color-light-shadow-xl: rgba(167, 34, 100, 0.14);
    --color-light-white: #fff;
    
    --color-dark-bg-primary: #2a2a2a;
    --color-dark-bg-secondary: #3a2a3a;
    --color-dark-bg-tertiary: #2a3a3a;
    --color-dark-text: #e5e5e5;
    --color-dark-border: #404040;
    --color-dark-brand: #e6a3d3;
    --color-dark-shadow: rgba(230, 163, 211, 0.15);
    --color-dark-shadow-sm: rgba(230, 163, 211, 0.08);
    --color-dark-shadow-md: rgba(230, 163, 211, 0.12);
    --color-dark-shadow-lg: rgba(230, 163, 211, 0.12);
    --color-dark-shadow-xl: rgba(230, 163, 211, 0.2);
    --color-dark-black: #000;
}

/* Sidebar version styling - works with both themes */
.sidebar-version {
    display: flex;
    color: var(--color-brand-primary);
    font-size: 1rem;
    text-align: left;
    padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 8px;
    margin-bottom: 1em;
    transition: background 0.3s;
}

.sidebar-version:visited {
    color: var(--color-brand-primary);
}

/* Simple responsive banner classes */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* Sidebar brand styling */
.sidebar-brand {
    border-radius: 8px;
    transition: background 0.3s;
}

/* Light theme sidebar styles */
[data-theme="light"] .sidebar-version {
    background: linear-gradient(90deg, var(--color-light-bg-primary) 0%, var(--color-light-bg-secondary) 100%);
    box-shadow: 0 1px 4px var(--color-light-shadow);
}

[data-theme="light"] .sidebar-brand {
    background: var(--color-light-bg-primary);
    box-shadow: 0 1px 4px var(--color-light-shadow);
}

/* Dark theme sidebar styles */
[data-theme="dark"] .sidebar-version {
    background: linear-gradient(90deg, var(--color-dark-bg-primary) 0%, var(--color-dark-bg-secondary) 100%);
    box-shadow: 0 1px 4px var(--color-dark-shadow);
}

[data-theme="dark"] .sidebar-brand {
    background: var(--color-dark-bg-primary);
    box-shadow: 0 1px 4px var(--color-dark-shadow);
}

/* Sidebar navigation enhancements */
.sidebar-tree .sidebar-tree__item {
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}

/* Light theme navigation */
[data-theme="light"] .sidebar-tree .sidebar-tree__item:hover,
[data-theme="light"] .sidebar-tree .sidebar-tree__item--current {
    background: linear-gradient(90deg, var(--color-light-bg-tertiary) 0%, var(--color-light-bg-blue) 100%);
    color: var(--color-light-brand);
    box-shadow: 0 2px 8px var(--color-light-shadow-md);
}

/* Dark theme navigation */
[data-theme="dark"] .sidebar-tree .sidebar-tree__item:hover,
[data-theme="dark"] .sidebar-tree .sidebar-tree__item--current {
    background: linear-gradient(90deg, var(--color-dark-bg-secondary) 0%, var(--color-dark-bg-tertiary) 100%);
    color: var(--color-brand-primary);
    box-shadow: 0 2px 8px var(--color-dark-shadow-md);
}

/* Card-like effect for content blocks */
div.admonition, .sd-card {
    border-radius: 12px;
    border: none;
    transition: box-shadow 0.2s;
}

/* Light theme cards */
[data-theme="light"] div.admonition,
[data-theme="light"] .sd-card {
    background: linear-gradient(120deg, var(--color-light-white) 80%, var(--color-light-bg-tertiary) 100%);
    box-shadow: 0 2px 16px var(--color-light-shadow-lg);
}

[data-theme="light"] div.admonition:hover,
[data-theme="light"] .sd-card:hover {
    box-shadow: 0 6px 24px var(--color-light-shadow-xl);
}

/* Dark theme cards */
[data-theme="dark"] div.admonition,
[data-theme="dark"] .sd-card {
    background: linear-gradient(120deg, var(--color-dark-bg-primary) 80%, var(--color-dark-bg-secondary) 100%);
    box-shadow: 0 2px 16px var(--color-dark-shadow-md);
}

[data-theme="dark"] div.admonition:hover,
[data-theme="dark"] .sd-card:hover {
    box-shadow: 0 6px 24px var(--color-dark-shadow-xl);
}

/* Modern typography using Furo's color variables */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-brand-primary);
    line-height: 1.15;
}

h1 {
    font-size: 2.6rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.4rem;
}

h4, h5, h6 {
    font-size: 1.1rem;
}

/* Light theme text shadows */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
    text-shadow: 0 1px 0 var(--color-light-white), 0 2px 8px var(--color-light-shadow-sm);
}

/* Dark theme text shadows */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    text-shadow: 0 1px 0 var(--color-dark-black), 0 2px 8px var(--color-dark-shadow-sm);
}

/* Code blocks: Modern, with subtle background and rounded corners */
.highlight, pre, code {
    border-radius: 8px !important;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', 'Consolas', monospace;
    transition: background 0.2s;
}

/* Light theme code blocks */
[data-theme="light"] .highlight,
[data-theme="light"] pre,
[data-theme="light"] code {
    background: var(--color-light-bg-primary) !important;
    color: var(--color-light-text);
    box-shadow: 0 1px 4px var(--color-light-shadow-sm);
}

[data-theme="light"] .highlight:hover,
[data-theme="light"] pre:hover,
[data-theme="light"] code:hover {
    background: var(--color-light-bg-secondary) !important;
}

/* Dark theme code blocks */
[data-theme="dark"] .highlight,
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--color-dark-bg-primary) !important;
    color: var(--color-dark-text);
    box-shadow: 0 1px 4px var(--color-dark-shadow-sm);
}

[data-theme="dark"] .highlight:hover,
[data-theme="dark"] pre:hover,
[data-theme="dark"] code:hover {
    background: var(--color-dark-bg-secondary) !important;
}

/* Inline code: match code blocks */
.rst-content code, .docutils.literal.notranslate {
    border-radius: 8px;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', 'Consolas', monospace;
    transition: background 0.2s;
}

/* Light theme inline code */
[data-theme="light"] .rst-content code,
[data-theme="light"] .docutils.literal.notranslate {
    background: var(--color-light-bg-primary) !important;
    color: var(--color-light-text);
    box-shadow: 0 1px 4px var(--color-light-shadow-sm);
}

/* Dark theme inline code */
[data-theme="dark"] .rst-content code,
[data-theme="dark"] .docutils.literal.notranslate {
    background: var(--color-dark-bg-primary) !important;
    color: var(--color-dark-text);
    box-shadow: 0 1px 4px var(--color-dark-shadow-sm);
}

/* Links: colored, but no underline */
a {
    text-decoration: none;
    transition: color 0.2s;
}

/* Light theme links */
[data-theme="light"] a {
    color: var(--color-light-brand);
}

[data-theme="light"] a:hover,
[data-theme="light"] a:focus {
    color: var(--color-light-brand-dark);
    background: var(--color-light-bg-tertiary);
}

/* Dark theme links */
[data-theme="dark"] a {
    color: var(--color-brand-primary);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: var(--color-light-accent);
    background: var(--color-dark-bg-secondary);
}

/* Table styling with gradient background */
table.docutils {
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

/* Light theme tables */
[data-theme="light"] table.docutils {
    background: linear-gradient(120deg, var(--color-light-white) 80%, var(--color-light-bg-tertiary) 100%);
    box-shadow: 0 1px 8px var(--color-light-shadow-md);
}

[data-theme="light"] table.docutils th,
[data-theme="light"] table.docutils td {
    border: 0.2px solid var(--color-light-border);
    border-left: none;
    border-right: none;
}

[data-theme="light"] table.docutils th {
    background: var(--color-light-bg-secondary);
    color: var(--color-light-brand);
    font-weight: 600;
    border-top: 1px solid var(--color-light-border);
    border-bottom: 1px solid var(--color-light-border);
}

/* Dark theme tables */
[data-theme="dark"] table.docutils {
    background: linear-gradient(120deg, var(--color-dark-bg-primary) 80%, var(--color-dark-bg-secondary) 100%);
    box-shadow: 0 1px 8px var(--color-dark-shadow-md);
}

[data-theme="dark"] table.docutils th,
[data-theme="dark"] table.docutils td {
    border: 0.2px solid var(--color-dark-border);
    border-left: none;
    border-right: none;
    color: var(--color-dark-text);
}

[data-theme="dark"] table.docutils th {
    background: var(--color-dark-bg-secondary);
    color: var(--color-brand-primary);
    font-weight: 600;
    border-top: 1px solid var(--color-dark-border);
    border-bottom: 1px solid var(--color-dark-border);
}

/* Improve spacing for lists */
ul, ol {
    margin-bottom: 1.2em;
    padding-left: 2em;
}

/* Add subtle fade-in animation for main content */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

main, .content, .document {
    animation: fadeIn 0.7s cubic-bezier(.4,0,.2,1);
}

/* Responsive tweaks for mobile */
@media (max-width: 700px) {
    .sidebar-version {
        font-size: 0.95rem;
        padding: 0.7em 1em;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.3rem;
    }
    .highlight, pre, code {
        font-size: 0.95em;
    }
}

/* Custom scrollbar for a modern touch */
::-webkit-scrollbar {
    width: 8px;
}

/* Light theme scrollbar */
[data-theme="light"] ::-webkit-scrollbar {
    background: var(--color-light-bg-secondary);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--color-light-brand);
    border-radius: 8px;
}

/* Dark theme scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    background: var(--color-dark-bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-brand-primary);
    border-radius: 8px;
}

/* Add a subtle shadow to the sidebar for depth */
.sidebar {
    transition: box-shadow 0.3s;
}

/* Light theme sidebar shadow */
[data-theme="light"] .sidebar {
    box-shadow: 2px 0 12px var(--color-light-shadow);
}

/* Dark theme sidebar shadow */
[data-theme="dark"] .sidebar {
    box-shadow: 2px 0 12px var(--color-dark-black);
}

/* Gradient background for dropdown/FAQ blocks */
details,
.sd-dropdown,
.myst-dropdown {
    border-radius: 12px;
    border: none;
    margin-bottom: 1.2em;
    padding: 0.7em 1.2em;
    transition: box-shadow 0.2s;
}

/* Light theme dropdowns */
[data-theme="light"] details,
[data-theme="light"] .sd-dropdown,
[data-theme="light"] .myst-dropdown {
    background: linear-gradient(120deg, var(--color-light-white) 80%, var(--color-light-bg-tertiary) 100%);
    box-shadow: 0 2px 16px var(--color-light-shadow-lg);
}

[data-theme="light"] details[open],
[data-theme="light"] .sd-dropdown[open],
[data-theme="light"] .myst-dropdown[open] {
    box-shadow: 0 6px 24px var(--color-light-shadow-xl);
}

/* Dark theme dropdowns */
[data-theme="dark"] details,
[data-theme="dark"] .sd-dropdown,
[data-theme="dark"] .myst-dropdown {
    background: linear-gradient(120deg, var(--color-dark-bg-primary) 80%, var(--color-dark-bg-secondary) 100%);
    box-shadow: 0 2px 16px var(--color-dark-shadow-md);
}

[data-theme="dark"] details[open],
[data-theme="dark"] .sd-dropdown[open],
[data-theme="dark"] .myst-dropdown[open] {
    box-shadow: 0 6px 24px var(--color-dark-shadow-xl);
}