/* OD Theme Toggle + Global Theme Styles */

/* ==========================================================================
   Global Theme (Standard)
   ========================================================================== */

html[data-od-theme-mode="standard"] {
    --od-bg: #ffffff;
    --od-text: #0f172a;
    --od-muted: #64748b;
    --od-surface: #f8fafc;
    --od-surface-2: #ffffff;
    --od-border: #e5e7eb;
    --od-link: #2563eb;
    --od-link-hover: #1d4ed8;
    --od-ring: rgba(37, 99, 235, 0.35);
}

html[data-od-theme="light"][data-od-theme-mode="standard"] {
    color-scheme: light;
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] {
    color-scheme: dark;
    --od-bg: #0b1220;
    --od-text: #e2e8f0;
    --od-muted: #94a3b8;
    --od-surface: #0f172a;
    --od-surface-2: #111c33;
    --od-border: rgba(148, 163, 184, 0.22);
    --od-link: #60a5fa;
    --od-link-hover: #93c5fd;
    --od-ring: rgba(96, 165, 250, 0.45);
}

html[data-od-theme-mode="standard"] body {
    background-color: var(--od-bg);
    color: var(--od-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

html[data-od-theme-mode="standard"] a {
    color: var(--od-link);
    transition: color 0.2s ease;
}

html[data-od-theme-mode="standard"] a:hover {
    color: var(--od-link-hover);
}

html[data-od-theme-mode="standard"] hr {
    border-color: var(--od-border);
}

html[data-od-theme-mode="standard"] input,
html[data-od-theme-mode="standard"] textarea,
html[data-od-theme-mode="standard"] select {
    background-color: var(--od-surface);
    color: var(--od-text);
    border-color: var(--od-border);
}

html[data-od-theme-mode="standard"] input:focus,
html[data-od-theme-mode="standard"] textarea:focus,
html[data-od-theme-mode="standard"] select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--od-ring);
}

/* Code blocks */
html[data-od-theme-mode="standard"] pre {
    background: var(--od-surface);
    color: var(--od-text);
    padding: 12px 14px;
    border: 1px solid var(--od-border);
    border-radius: 12px;
    overflow: auto;
}

/* Inline code
   NOTE: Some page builders output empty <code> nodes in content.
   Avoid styling all <code> globally (padding/border makes those nodes visible as small boxes). */
/* Hide truly empty code tags (common with some page builders) */
html[data-od-theme-mode="standard"] code:empty {
    display: none !important;
}

html[data-od-theme-mode="standard"] :is(p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6) code:not(:empty) {
    background: var(--od-surface);
    color: var(--od-text);
    padding: 2px 6px;
    border: 1px solid var(--od-border);
    border-radius: 8px;
}

/* Don't double-style code inside pre */
html[data-od-theme-mode="standard"] pre code {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* Some plugins/themes incorrectly wrap form controls inside <code>. Neutralize it. */
html[data-od-theme-mode="standard"] form code {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* ==========================================================================
   Global Theme (Force)
   ========================================================================== */

html[data-od-theme="dark"][data-od-theme-mode="force"] {
    color-scheme: dark;
    /* Keep background light before invert so it becomes dark after filter */
    background: #fff;
    filter: invert(1) hue-rotate(180deg);
}

html[data-od-theme="dark"][data-od-theme-mode="force"] img,
html[data-od-theme="dark"][data-od-theme-mode="force"] video,
html[data-od-theme="dark"][data-od-theme-mode="force"] iframe,
html[data-od-theme="dark"][data-od-theme-mode="force"] svg,
html[data-od-theme="dark"][data-od-theme-mode="force"] picture,
html[data-od-theme="dark"][data-od-theme-mode="force"] canvas {
    filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   Toggle Button (Floating + Inline)
   ========================================================================== */

.od-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.85);
    color: rgba(15, 23, 42, 0.95);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    line-height: 1;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(10px);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .od-theme-toggle {
    background: rgba(15, 23, 42, 0.72);
    color: rgba(226, 232, 240, 0.95);
    border-color: rgba(148, 163, 184, 0.25);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.od-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.16);
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .od-theme-toggle:hover {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

.od-theme-toggle:active {
    transform: translateY(0);
}

.od-theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--od-ring), 0 14px 30px rgba(0, 0, 0, 0.12);
}

.od-theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
}

.od-theme-toggle__text {
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
}

/* Floating positioning */
.od-theme-toggle--floating {
    z-index: 999999;
}

.od-theme-toggle--floating.od-theme-toggle--fixed {
    position: fixed;
}

.od-theme-toggle--floating.od-theme-toggle--scroll {
    position: absolute;
}

.od-theme-toggle--bottom-left {
    left: 16px;
    bottom: 16px;
}

.od-theme-toggle--bottom-right {
    right: 16px;
    bottom: 16px;
}

.od-theme-toggle--top-left {
    left: 16px;
    top: 16px;
}

.od-theme-toggle--top-right {
    right: 16px;
    top: 16px;
}

@media (max-width: 480px) {
    .od-theme-toggle {
        padding: 10px 12px;
        gap: 8px;
    }
    .od-theme-toggle__text {
        font-size: 12px;
    }
}

/* ==========================================================================
   Astra Theme - Header / Menu (Standard Dark Mode)
   ========================================================================== */

/* Astra (free) primary header background stays light by default. Override it in OD dark mode. */
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-bar,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .site-primary-header-wrap,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .ast-builder-grid-row-container {
    background-color: var(--od-surface) !important;
    color: var(--od-text) !important;
    border-color: var(--od-border) !important;
}

/* Branding */
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .site-title a,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .site-title a:visited,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .site-description {
    color: var(--od-text) !important;
}

/* Menu links */
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .ast-nav-menu > .menu-item > .menu-link {
    color: var(--od-text) !important;
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:hover,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link:focus,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu > .menu-item:hover > .menu-link {
    color: var(--od-link-hover) !important;
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu > .current-menu-item > .menu-link,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu > .current-menu-ancestor > .menu-link {
    color: var(--od-link) !important;
}

/* Dropdowns */
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu .sub-menu {
    background-color: var(--od-surface-2) !important;
    border-color: var(--od-border) !important;
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu .sub-menu .menu-link {
    background-color: transparent !important;
    color: var(--od-text) !important;
}

html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu .sub-menu .menu-link:hover,
html[data-od-theme="dark"][data-od-theme-mode="standard"] .ast-primary-header-bar .main-header-menu .sub-menu .menu-item:hover > .menu-link {
    color: var(--od-link-hover) !important;
    background-color: rgba(96, 165, 250, 0.12) !important;
}