/**
 * Dark Mode Toggle Styles
 * 
 * Provides styling for the dark mode toggle button and theme transitions.
 * Integrates with the WeFoodies theme design system.
 * 
 * @since 1.0.0
 */

/**
 * Dark Mode Toggle Button
 */
.wefoodies-dark-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--wefoodies-surface-color);
    border: 1px solid var(--wefoodies-border-color);
    border-radius: var(--wefoodies-border-radius);
    color: var(--wefoodies-text-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    
    &:hover {
        background: var(--wefoodies-primary-color);
        border-color: var(--wefoodies-primary-color);
        color: var(--wefoodies-background-color);
        transform: translateY(-1px);
        box-shadow: var(--wefoodies-hover-shadow);
    }
    
    &:focus {
        outline: 2px solid var(--wefoodies-primary-color);
        outline-offset: 2px;
    }
    
    &:active {
        transform: translateY(0);
    }
}

/**
 * Floating Toggle Button
 */
.wefoodies-dark-mode-toggle--floating {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 0.75rem;
    border-radius: 50%;
    box-shadow: var(--wefoodies-hover-shadow);
    
    .wefoodies-dark-mode-toggle__text {
        display: none;
    }
    
    @media (max-width: 768px) {
        top: 15px;
        right: 15px;
        padding: 0.6rem;
    }
}

/**
 * Toggle Button Icons
 */
.wefoodies-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
    transition: all 0.2s ease;
}

.wefoodies-icon--sun,
.wefoodies-icon--moon {
    position: absolute;
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

/* Light theme - show sun icon */
.theme-light .wefoodies-dark-mode-toggle .wefoodies-icon--sun {
    position: relative;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Dark theme - show moon icon */
.theme-dark .wefoodies-dark-mode-toggle .wefoodies-icon--moon {
    position: relative;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/**
 * Toggle Button Text
 */
.wefoodies-dark-mode-toggle__text {
    position: relative;
    overflow: hidden;
    
    .wefoodies-text--light,
    .wefoodies-text--dark {
        display: block;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .wefoodies-text--dark {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Light theme text */
.theme-light .wefoodies-dark-mode-toggle {
    .wefoodies-text--light {
        opacity: 1;
        transform: translateY(0);
    }
    
    .wefoodies-text--dark {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Dark theme text */
.theme-dark .wefoodies-dark-mode-toggle {
    .wefoodies-text--light {
        opacity: 0;
        transform: translateY(-20px);
    }
    
    .wefoodies-text--dark {
        position: relative;
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Theme Transition Effects
 */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Enhanced transitions for theme-aware elements */
.wp-block-wefoodies-foodtruck-query,
.wefoodies-foodtruck-item,
.wefoodies-modern-taxonomy-filters,
.wefoodies-modern-canton-filter {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/**
 * Dark Mode Specific Adjustments
 */
.theme-dark {
    /* Adjust form elements for dark mode */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    textarea,
    select {
        background: var(--wefoodies-surface-color);
        border-color: var(--wefoodies-border-color);
        color: var(--wefoodies-text-color);
        
        &:focus {
            border-color: var(--wefoodies-primary-color);
            box-shadow: 0 0 0 2px rgba(157, 212, 209, 0.2);
        }
    }
    
    /* Adjust WordPress core blocks */
    .wp-block-button__link {
        background: var(--wefoodies-primary-color);
        color: var(--wefoodies-background-color);
        
        &:hover {
            background: var(--wefoodies-accent-color);
        }
    }
    
    /* Adjust navigation elements */
    .wp-block-navigation a {
        color: var(--wefoodies-text-color);
        
        &:hover {
            color: var(--wefoodies-primary-color);
        }
    }
    
    /* Adjust separators and borders */
    .wp-block-separator,
    hr {
        border-color: var(--wefoodies-border-color);
    }
    
    /* Adjust code blocks */
    code,
    pre {
        background: var(--wefoodies-surface-color);
        color: var(--wefoodies-text-color);
        border-color: var(--wefoodies-border-color);
    }
    
    /* Adjust tables */
    table {
        border-color: var(--wefoodies-border-color);
        
        th,
        td {
            border-color: var(--wefoodies-border-color);
        }
        
        th {
            background: var(--wefoodies-surface-color);
        }
        
        tbody tr:nth-child(even) {
            background: rgba(42, 42, 42, 0.3);
        }
    }
}

/**
 * Light Mode Specific Adjustments
 */
.theme-light {
    /* Ensure light mode compatibility */
    .wp-block-button__link {
        background: var(--wefoodies-primary-color);
        color: var(--wefoodies-background-color);
    }
}

/**
 * Accessibility Improvements
 */
@media (prefers-reduced-motion: reduce) {
    .wefoodies-dark-mode-toggle,
    .wefoodies-icon,
    .wefoodies-dark-mode-toggle__text * {
        transition: none;
    }
    
    html,
    body,
    .wp-block-wefoodies-foodtruck-query,
    .wefoodies-foodtruck-item {
        transition: none;
    }
}

/**
 * High Contrast Mode Support
 */
@media (prefers-contrast: high) {
    .wefoodies-dark-mode-toggle {
        border-width: 2px;
        
        &:focus {
            outline-width: 3px;
        }
    }
    
    .theme-dark {
        --wefoodies-border-color: #666666;
        --wefoodies-text-color: #ffffff;
        --wefoodies-background-color: #000000;
    }
    
    .theme-light {
        --wefoodies-border-color: #333333;
        --wefoodies-text-color: #000000;
        --wefoodies-background-color: #ffffff;
    }
}

/**
 * Print Styles
 */
@media print {
    .wefoodies-dark-mode-toggle {
        display: none;
    }
    
    /* Force light mode for printing */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
}

/**
 * Mobile Responsive Adjustments
 */
@media (max-width: 768px) {
    .wefoodies-dark-mode-toggle {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        
        .wefoodies-icon {
            width: 1rem;
            height: 1rem;
        }
    }
    
    .wefoodies-dark-mode-toggle--floating {
        .wefoodies-icon {
            width: 1.1rem;
            height: 1.1rem;
        }
    }
}

/**
 * Integration with WordPress Admin Bar
 */
body.admin-bar .wefoodies-dark-mode-toggle--floating {
    top: 52px;
    
    @media (max-width: 782px) {
        top: 66px;
    }
}

/**
 * Custom Property Fallbacks
 */
:root {
    --wefoodies-dark-mode-transition-duration: 0.3s;
    --wefoodies-dark-mode-transition-timing: ease;
}

/* Ensure theme variables are available */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --wefoodies-border-radius: 16px;
    --wefoodies-grid-gap: 1.5rem;
}