/* Dark Mode Styles for Yuri Forge */
/* These styles override the default light theme when dark mode is active */

/* Dark mode state */
body.dark-mode {
    background-color: #1a1a1a;
    color: #FFF;
}

body.dark-mode #cs-navigation {
    background-color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(255, 105, 180, 0.2);
}

body.dark-mode .cs-li-link {
    color: #FFF;
}

body.dark-mode .cs-li-link:hover,
body.dark-mode .cs-li-link.cs-active {
    color: #FFB6C1;
}

body.dark-mode .cs-drop-ul {
    background-color: #2a2a2a;
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2);
}

body.dark-mode .cs-drop-link {
    color: #FFF;
}

body.dark-mode .cs-drop-link:hover {
    color: #FFB6C1;
}

body.dark-mode #hero-855 {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 50%, #4a4a4a 100%);
}

body.dark-mode .cs-topper {
    color: #FFB6C1;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.5),
                 -0.5px -0.5px 0 rgba(0, 0, 0, 0.5),
                 0.5px -0.5px 0 rgba(0, 0, 0, 0.5),
                 -0.5px 0.5px 0 rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.4);
}

body.dark-mode .cs-title {
    color: #FFC0CB;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.5),
                 -0.5px -0.5px 0 rgba(0, 0, 0, 0.5),
                 0.5px -0.5px 0 rgba(0, 0, 0, 0.5),
                 -0.5px 0.5px 0 rgba(0, 0, 0, 0.5),
                 0 1px 2px rgba(0, 0, 0, 0.4);
}

body.dark-mode .cs-text {
    color: #FFF;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.4),
                 -0.5px -0.5px 0 rgba(0, 0, 0, 0.4),
                 0.5px -0.5px 0 rgba(0, 0, 0, 0.4),
                 -0.5px 0.5px 0 rgba(0, 0, 0, 0.4),
                 0 1px 1px rgba(0, 0, 0, 0.3);
}

body.dark-mode .cs-button-solid {
    background-color: #FF69B4;
    color: #1a1a1a;
}

body.dark-mode .cs-button-solid:hover {
    background-color: #FF1493;
    box-shadow: 0 10px 20px rgba(255, 20, 147, 0.4);
}

body.dark-mode .cs-button-solid.cs-secondary {
    background-color: transparent;
    color: #FFB6C1;
    border-color: #FFB6C1;
}

body.dark-mode .cs-button-solid.cs-secondary:hover {
    background-color: #FFB6C1;
    color: #1a1a1a;
}

body.dark-mode .cs-button-transparent {
    background-color: transparent;
    color: #FFB6C1;
    border-color: #FFB6C1;
}

body.dark-mode .cs-button-transparent:hover {
    background-color: #FFB6C1;
    color: #1a1a1a;
}

body.dark-mode .cs-picture img {
    box-shadow: 0 20px 40px rgba(255, 105, 180, 0.3);
}

/* Cherry blossom animations in dark mode */
body.dark-mode .falling-blossom {
    background: #FFB6C1;
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.5);
}

body.dark-mode .heart {
    background: #FF69B4;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}

body.dark-mode .heart::before,
body.dark-mode .heart::after {
    background: #FF69B4;
}

body.dark-mode .blossom {
    filter: brightness(1.2);
}

/* Services section dark mode */
body.dark-mode #services-966 {
    background-color: #1a1a1a;
}

body.dark-mode #services-966 .cs-content .cs-title {
    color: #FFC0CB;
}

body.dark-mode #services-966 .cs-content .cs-text {
    color: #FFF;
}

body.dark-mode .cs-item {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2);
}

body.dark-mode .cs-item:hover {
    box-shadow: 0 15px 40px rgba(255, 105, 180, 0.3);
}

body.dark-mode .cs-link {
    color: #FFF;
}

body.dark-mode .cs-h3 {
    color: #FFB6C1;
    text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.5),
                 -0.5px -0.5px 0 rgba(0, 0, 0, 0.5),
                 0.5px -0.5px 0 rgba(0, 0, 0, 0.5),
                 -0.5px 0.5px 0 rgba(0, 0, 0, 0.5),
                 0 1px 1px rgba(0, 0, 0, 0.4);
}

body.dark-mode .cs-item-text {
    color: #FFF;
}

body.dark-mode .cs-fake-link {
    color: #FFB6C1;
}

body.dark-mode .cs-background {
    background-color: rgba(255, 105, 180, 0.9);
}

body.dark-mode .cs-icon-wrapper {
    background-color: #FF69B4;
}

/* Footer dark mode */
body.dark-mode #cs-footer-840 {
    background-color: #2a2a2a;
}

body.dark-mode .cs-logo-group .cs-text {
    color: #FFF;
}

body.dark-mode .cs-header {
    color: #FFB6C1;
}

body.dark-mode .cs-link {
    color: #FFF;
}

body.dark-mode .cs-link:hover {
    color: #FFB6C1;
}

body.dark-mode .cs-bottom {
    border-top-color: rgba(255, 105, 180, 0.3);
}

body.dark-mode .cs-credit {
    color: #FFF;
}

body.dark-mode .cs-credit-link {
    color: #FFB6C1;
}

body.dark-mode .cs-bottom-link {
    color: #FFF;
}

body.dark-mode .cs-bottom-link:hover {
    color: #FFB6C1;
}

/* Scroll effect in dark mode */
body.dark-mode.scroll #cs-navigation {
    background-color: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
}

/* Neon effect in dark mode */
body.dark-mode .neon {
    color: #FFB6C1;
}

body.dark-mode .neon span {
    animation: neonGlowDark 2s ease-in-out infinite alternate;
}

@keyframes neonGlowDark {
    from {
        text-shadow: 0 0 5px #FFB6C1, 0 0 10px #FFB6C1, 0 0 15px #FF69B4;
    }
    to {
        text-shadow: 0 0 10px #FFB6C1, 0 0 20px #FFB6C1, 0 0 30px #FF69B4, 0 0 40px #FF1493;
    }
}

/* Enhanced cherry blossom glow in dark mode */
body.dark-mode .blossoms {
    filter: brightness(1.3);
}

/* Dark mode specific animations */
body.dark-mode .falling-blossom {
    animation: fallingDark 8s linear infinite;
}

@keyframes fallingDark {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

body.dark-mode .heart {
    animation: floatDark 6s ease-in-out infinite;
}

@keyframes floatDark {
    0%, 100% {
        transform: translateY(0) rotate(45deg);
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    50% {
        transform: translateY(-20px) rotate(45deg);
        box-shadow: 0 5px 20px rgba(255, 105, 180, 0.8);
    }
}

/* Dark mode transitions */
body.dark-mode *,
body.dark-mode *::before,
body.dark-mode *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode specific hover states */
body.dark-mode .cs-button-solid.cs-white {
    background-color: #2a2a2a;
    color: #FFB6C1;
    border: 2px solid #FFB6C1;
}

body.dark-mode .cs-button-solid.cs-white:hover {
    background-color: #FFB6C1;
    color: #1a1a1a;
}

/* Mobile menu dark mode */
body.dark-mode .cs-box .cs-line {
    background-color: #FFB6C1;
}

body.dark-mode .cs-dropdown .cs-drop-icon {
    filter: brightness(0) invert(1);
}

/* Dark mode logo adjustments */
body.dark-mode .cs-logo img {
    filter: brightness(1.1);
}

/* Dark mode SVG filters */
body.dark-mode img[src*=".svg"] {
    filter: brightness(1.2) contrast(1.1);
}

body.dark-mode .cs-icon {
    filter: brightness(0) invert(1);
}

/* Dark mode specific backgrounds */
body.dark-mode .cs-wave path {
    fill: #3a3a3a;
}

body.dark-mode .cs-footer-swoosh path {
    fill: #2a2a2a;
}

/* Enhanced accessibility in dark mode */
@media (prefers-reduced-motion: reduce) {
    body.dark-mode .falling-blossom,
    body.dark-mode .heart,
    body.dark-mode .neon span {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    body.dark-mode {
        background-color: #000;
        color: #FFF;
    }
    
    body.dark-mode .cs-button-solid {
        border: 2px solid #FFF;
    }
    
    body.dark-mode .cs-item {
        border: 1px solid #666;
    }
}