/* Dark Mode Styles */
[data-theme="dark"] {
    --color-white: #000;
    --color-lighter-gray: rgb(255 255 255 / 0.1);
    --color-light-gray: #333;
    --color-mid-gray: #666;
    --color-dark-gray: #ccc;
    --color-darker-gray: #fff;
    --color-black: #fff;
    --color-primary-text: #fff;
    --color-secondary-text: rgb(255 255 255 / 0.7);
    --color-border: rgb(255 255 255 / 0.15);
    --color-dark-border: rgb(255 255 255 / 0.3);
    --background-color: #1a1a1a;
}

/* Force dark backgrounds on all major containers */
[data-theme="dark"] html {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] * {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .verse-box {
    border-left-color: #fff !important;
    color: #fff !important;
}

[data-theme="dark"] body {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

[data-theme="dark"] .gh-navigation {
    background-color: #010101 !important;
    color: #fff !important;
}

[data-theme="dark"] .gh-navigation-inner {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-navigation-actions {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-navigation :is(.gh-navigation-logo, a:not(.gh-button), .gh-icon-button) {
    color: inherit;
}

[data-theme="dark"] .gh-navigation-inner.gh-inner,
[data-theme="dark"] .gh-navigation-actions
{
    background: #010101 !important;
}

[data-theme="dark"] .gh-card {
    background-color: transparent;
}

[data-theme="dark"] .gh-card-link:hover {
    opacity: 1;
}

[data-theme="dark"] .gh-card-title {
    color: #fff !important;
}

[data-theme="dark"] .gh-card-excerpt {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .gh-card-meta {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .gh-container {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-main {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-viewport {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-outer {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-inner {
    background-color: #1a1a1a !important;
}

/* Exception for phone-add-outer */
[data-theme="dark"] .phone-add-outer .gh-inner {
    background-color: inherit !important;
}

/* Latest videos section */
[data-theme="dark"] .gh-container .gh-feed {
    background-color: #1a1a1a !important;
}

/* Add our site to homescreen section */
[data-theme="dark"] .phone-add-outer .gh-inner {
    background-color: transparent !important;
}

[data-theme="dark"] .gh-article {
    color: var(--color-primary-text);
}

[data-theme="dark"] .gh-content {
    color: var(--color-primary-text);
}

[data-theme="dark"] header#gh-navigation {
    background: #010101 !important;
}

[data-theme="dark"] .greybg, [data-theme="dark"] .greybg .gh-inner {
    background: #010101 !important;
}

[data-theme="dark"] .gh-content h1,
[data-theme="dark"] .gh-content h2,
[data-theme="dark"] .gh-content h3,
[data-theme="dark"] .gh-content h4,
[data-theme="dark"] .gh-content h5,
[data-theme="dark"] .gh-content h6 {
    color: var(--color-primary-text);
}

[data-theme="dark"] .gh-content a {
    color: var(--ghost-accent-color);
}

[data-theme="dark"] .gh-content blockquote {
    border-left-color: var(--ghost-accent-color);
}

[data-theme="dark"] .gh-content pre {
    background: var(--color-light-gray);
    color: var(--color-primary-text);
}

[data-theme="dark"] .gh-content :not(pre) > code {
    background: var(--color-light-gray);
    color: var(--color-primary-text);
}

[data-theme="dark"] .gh-footer {
    color: var(--color-darker-gray);
}

[data-theme="dark"] .gh-footer a:not(.gh-button) {
    color: inherit;
}

[data-theme="dark"] .gh-cta-inner {
    background-color: #333 !important;
}

[data-theme="dark"] .gh-about {
    background-color: #333 !important;
}

[data-theme="dark"] .gh-form {
    background-color: #333 !important;
}

[data-theme="dark"] .gh-header {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-header-inner {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-featured {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-featured-inner {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-footer {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-footer-bar {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-footer-signup {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .gh-form-input {
    color: var(--color-primary-text);
}

[data-theme="dark"] .gh-form-input::placeholder {
    color: var(--color-secondary-text);
}

[data-theme="dark"] .gh-dropdown {
    background-color: var(--background-color);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .gh-dropdown li a {
    color: var(--color-primary-text) !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    border-radius: 50%;
    color: var(--color-darker-gray);
    transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
    background-color: var(--color-lighter-gray);
    border-color: var(--color-dark-border);
}

.dark-mode-toggle svg {
    width: 18px;
    height: 18px;
}

[data-theme="dark"] .dark-mode-toggle {
    color: var(--color-primary-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background-color: var(--color-lighter-gray);
}

[data-theme="dark"] .gh-footer, [data-theme="dark"] .gh-footer .gh-inner, [data-theme="dark"] .gh-footer-bar, [data-theme="dark"] .gh-footer-signup {
    background-color: #010101 !important;
}


[data-theme="dark"] .gh-button:hover,
[data-theme="dark"] .yt-btn:hover,
[data-theme="dark"] .gh-btn:hover,
button[data-portal="recommendations"]:hover {
    background: #fff !important;
    opacity: 1 !important;
}

button#dark-mode-toggle {
    border: 0 !important;
}


[data-theme="dark"] .battle-lines-section .gh-inner, .battle-lines-section .gh-inner {
    background: linear-gradient(45deg, hsl(0 0 2%), hsl(0 0 14%)) !important;
    box-shadow: inset 0 1px 2px #ffffff25, 0 1px 2px #00000040, 0 4px 8px #00000055;
}