/* Theme Switch Styles */
:root {
    /* Light theme variables */
    --color-body-light: #f5f5f7;
    --color-text-light-theme: #333333;
    --color-text-dark-light-theme: #000000;
    --color-border-light: rgba(0, 0, 0, 0.1);
    --color-btn-light: #e1e1e1;
    --color-gray-9-light: #444444;
}

/* Light theme class that will be toggled */
body.light-theme {
    background-color: var(--color-body-light);
    color: var(--color-text-light-theme);
}

/* Add transition properties to body for smooth theme switching */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Elements that should animate during theme transition */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, ul, ol, dl, a, .text-pretitle,
.main-nav a, .mobile-home-link a, 
.timeline__timeframe, .testimonial-slider__cite strong, 
.testimonial-slider__cite span, .folio-list__item-link,
.folio-list__item-cat, .contact-links, .contact-social,
.s-footer, .header-mobile, .btn, .timeline::before {
    transition: all 0.5s ease;
}

/* Theme switch container */
.theme-switch-wrapper {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 200;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-gray-9);
    transition: .4s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--color-1);
}

input:checked + .slider:before {
    transform: translateX(30px);
}

/* Icons for the switch */
.slider .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: white;
    opacity: 0; /* Hide both icons by default */
    transition: opacity 0.3s ease;
}

.slider .icon-moon {
    left: 8px;
    opacity: 1; /* Show moon icon in dark mode (default) */
}

.slider .icon-sun {
    right: 8px;
    opacity: 0; /* Hide sun icon in dark mode */
}

/* When in light mode (checked), swap visibility */
input:checked + .slider .icon-moon {
    opacity: 0; /* Hide moon icon in light mode */
}

input:checked + .slider .icon-sun {
    opacity: 1; /* Show sun icon in light mode */
}

/* Light theme overrides */
body.light-theme {
    background-color: var(--color-body-light);
}

body.light-theme .s-header {
    background-color: var(--color-body-light);
}

body.light-theme .main-nav ul {
    background-color: var(--color-body-light);
    border-color: var(--color-border-light);
}

body.light-theme .main-nav li {
    border-color: var(--color-border-light);
}

body.light-theme .main-nav a,
body.light-theme .mobile-home-link a {
    color: var(--color-text-dark-light-theme);
}

/* Adding yellow color for selected navbar items in light mode */
body.light-theme .main-nav .current a {
    color: #EABE7B;
    background-color: var(--color-btn-light);
}

body.light-theme .mobile-menu-toggle span,
body.light-theme .mobile-menu-toggle span::before,
body.light-theme .mobile-menu-toggle span::after {
    background-color: var(--color-text-dark-light-theme);
}

/* Adding styles for clicked state of mobile menu toggle in light mode */
body.light-theme .mobile-menu-toggle.is-clicked span {
    background-color: transparent;
}

body.light-theme .mobile-menu-toggle.is-clicked span::before,
body.light-theme .mobile-menu-toggle.is-clicked span::after {
    background-color: #000000; /* Making the lines white when menu is clicked in light mode */
    height: 2px; /* Match the thickness from styles.css */ /* Adding shadow for better visibility */
}

body.light-theme .header-mobile {
    background-color: var(--color-body-light);
    border-bottom-color: var(--color-border-light);
}

body.light-theme h1, 
body.light-theme h2, 
body.light-theme h3, 
body.light-theme h4, 
body.light-theme h5, 
body.light-theme h6,
body.light-theme .h1, 
body.light-theme .h2, 
body.light-theme .h3, 
body.light-theme .h4, 
body.light-theme .h5, 
body.light-theme .h6 {
    color: var(--color-text-dark-light-theme);
}

body.light-theme p, 
body.light-theme ul, 
body.light-theme ol, 
body.light-theme dl {
    color: var(--color-text-light-theme);
}

body.light-theme .text-pretitle {
    color: var(--color-text-dark-light-theme);
}

body.light-theme .text-pretitle.with-line::before {
    background-color: rgba(0, 0, 0, 0.5);
}

body.light-theme .intro-social a {
    color: var(--color-text-light-theme);
}

body.light-theme .intro-social a:focus,
body.light-theme .intro-social a:hover {
    color: var(--color-1);
}

body.light-theme .intro-scrolldown svg path {
    fill: var(--color-text-dark-light-theme);
}

/* Timeline and expertise sections */
body.light-theme .timeline::before {
    background-color: var(--color-border-light);
}

body.light-theme .timeline__timeframe {
    color: var(--color-text-light-theme);
}

body.light-theme .timeline__bullet {
    background-color: var(--color-1);
}

/* Making recommendation names black in light mode */
body.light-theme .testimonial-slider__cite strong {
    color: #000000;
}

/* Making recommendation company positions visible in light mode, including on hover */
body.light-theme .testimonial-slider__cite span {
    color: #333333;
}

body.light-theme .testimonial-slider__slide:hover .testimonial-slider__cite span {
    color: #333333; /* Keep the span text dark on hover in light mode */
}

/* Making slide buttons (pagination bullets) visible in light mode */
body.light-theme .testimonials .swiper-pagination-bullet {
    background: #444444;
    opacity: 0.4;
}

body.light-theme .testimonials .swiper-pagination-bullet-active {
    background: var(--color-1);
    opacity: 1;
}

/* Portfolio items */
body.light-theme .folio-list__item-link {
    color: var(--color-text-dark-light-theme);
}

body.light-theme .folio-list__item-text {
    border-color: var(--color-border-light);
}

body.light-theme .folio-list__item-cat {
    color: var(--color-text-light-theme);
}

body.light-theme .folio-list__proj-link svg path {
    fill: var(--color-text-dark-light-theme);
}

/* Contact section */
body.light-theme .contact-top,
body.light-theme .contact-bottom {
    border-color: var(--color-border-light);
}

body.light-theme .contact-links,
body.light-theme .contact-social {
    color: var(--color-text-light-theme);
}

body.light-theme .contact-links a,
body.light-theme .contact-social a {
    color: var(--color-text-light-theme);
}

/* Footer */
body.light-theme .s-footer {
    color: var(--color-text-light-theme);
}

body.light-theme .s-footer a {
    color: var(--color-text-dark-light-theme);
}

body.light-theme .ss-go-top a {
    background-color: var(--color-body-light);
    border-color: var(--color-text-dark-light-theme);
}

body.light-theme .ss-go-top svg path {
    fill: var(--color-text-dark-light-theme);
}

/* Responsive adjustments */
@media screen and (max-width: 800px) {
    .theme-switch-wrapper {
        top: 15px;
        right: 80px;
    }
}

@media screen and (max-width: 600px) {
    .theme-switch {
        width: 50px;
        height: 26px;
    }
    
    .slider:before {
        height: 18px;
        width: 18px;
    }
    
    input:checked + .slider:before {
        transform: translateX(24px);
    }
}