/*
 * Warm Theme (Light Mode) Styling Layer
 * -------------------------------------
 * Purpose: Decoupled "Skin" layer for the Light Mode theme.
 * Strategy: Overrides default (Dark Mode) styles when body.light-mode is active.
 *
 * Architecture:
 * - Managed under ITCSS Standards (Phase 4 Optimization)
 * - Contains NO layout/structure; ONLY colors, backgrounds, and visual skinning.
 */

/* ==========================================
   Light Mode Design Philosophy:
   - "Clean Luxury": High contrast, neutral backgrounds, vibrant accents.
   - Depth over Borders: Use shadows to define hierarchy.
   ========================================== */

body.light-mode {
    /* --- Palette: Clean Slate & Vibrant Orange --- */
    --accent-warm: #EA580C;
    /* International Orange (High Visibility) */
    --accent-warm-light: #F97316;
    /* Lighter Orange for Hover */
    --accent-warm-dark: #C2410C;
    /* Deep Orange for Active */

    /* Backgrounds */
    --bg-page: #F1F5F9;
    /* Slate 100 - Cool Neutral Page BG */
    --bg-card: #FFFFFF;
    /* Pure White - Component BG */
    --bg-overlay: rgba(255, 255, 255, 0.9);
    /* Glassy White */

    /* Typography */
    --text-primary: #0F172A;
    /* Slate 900 - Headings (Sharp Black) */
    --text-secondary: #475569;
    /* Slate 600 - Body Text */
    --text-muted: #94A3B8;
    /* Slate 400 - Meta Info */

    /* Borders & Shadows */
    --border-subtle: #E2E8F0;
    /* Slate 200 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* ==========================================
   Global Overrides
   ========================================== */

/* Remove Dark Mode Stars/Canvas in Light Mode if visible */
body.light-mode canvas {
    opacity: 0.1 !important;
    /* Subtle texture instead of black void */
    mix-blend-mode: multiply;
}

/* Page Background */
body.light-mode #product-container,
body.light-mode #projects-section,
body.light-mode #lightwinner-section,
body.light-mode #values-section,
body.light-mode #about-section {
    background-color: var(--bg-page) !important;
    background-image: none !important;
    /* Remove rustic texture */
}

/* Links */
body.light-mode a {
    color: var(--text-primary);
    transition: color 0.2s ease;
}

body.light-mode a:hover {
    color: var(--accent-warm);
}

/* ==========================================
   Navigation
   ========================================== */

/* Nav Links */
body.light-mode .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

body.light-mode .nav-link:hover {
    color: var(--accent-warm) !important;
    background: transparent;
}

body.light-mode .nav-link.active {
    color: var(--accent-warm) !important;
    font-weight: 700;
    background: transparent;
    border-bottom: 2px solid var(--accent-warm);
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
}

/* Mobile Menu Trigger */
body.light-mode #mobile-nav-trigger {
    color: var(--text-primary);
}

/* ==========================================
   Sidebar (Filters)
   ========================================== */

body.light-mode .category-sidebar {
    background: var(--bg-card);
    border-right: 1px solid var(--border-subtle);
    box-shadow: none;
    /* Flat design for sidebar */
    backdrop-filter: none;
}

body.light-mode .cat-group h3,
body.light-mode .sidebar-section h3 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 700;
    letter-spacing: 0.5px;
}

body.light-mode .cat-group li {
    color: var(--text-secondary);
    border-radius: 6px;
    margin-bottom: 2px;
}

body.light-mode .cat-group li:hover {
    background: #F8FAFC;
    color: var(--accent-warm);
}

body.light-mode .cat-group li.active {
    background: #FFF7ED;
    /* Very light orange tint */
    color: var(--accent-warm);
    border-left: 3px solid var(--accent-warm);
    font-weight: 600;
}

/* Count Badge */
body.light-mode .cat-count {
    background: #F1F5F9;
    color: var(--text-muted);
    border: none;
    font-size: 0.75rem;
}

body.light-mode .cat-group li.active .cat-count {
    background: #FED7AA;
    color: var(--accent-warm-dark);
}

/* ==========================================
   Product Cards - Clean & Depth
   ========================================== */

body.light-mode .product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    border-radius: 12px;
    /* Softer corners */
    backdrop-filter: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

body.light-mode .product-card:hover {
    border-color: var(--accent-warm-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    /* Lift effect */
}

/* Image Area */
body.light-mode .card-image {
    background: #F8FAFC;
    /* Slight contrast for image container */
    border-bottom: 1px solid var(--border-subtle);
}

/* Typography in Card */
body.light-mode .card-info h3 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

body.light-mode .desc,
body.light-mode .card-info p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

body.light-mode .specs {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
    margin-top: 12px;
}

body.light-mode .spec-item,
body.light-mode .specs span {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

body.light-mode .badge {
    background: var(--accent-warm);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.3);
}

/* ==========================================
   Controls (Search, Filter, Sort)
   ========================================== */

/* Search Input */
body.light-mode #product-search-input {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

body.light-mode #product-search-input:focus {
    border-color: var(--accent-warm);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
    outline: none;
}

body.light-mode #product-search-input::placeholder {
    color: var(--text-muted);
}

/* Dropdowns */
body.light-mode .suggestions-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
}

body.light-mode .suggestion-item {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

body.light-mode .suggestion-item:hover {
    background: #F8FAFC;
    color: var(--accent-warm);
}

/* Buttons */
body.light-mode .sort-btn,
body.light-mode .reset-filter,
body.light-mode .browse-all-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

body.light-mode .sort-btn:hover,
body.light-mode .reset-filter:hover,
body.light-mode .browse-all-btn:hover {
    border-color: var(--accent-warm);
    color: var(--accent-warm);
    background: white;
}

body.light-mode .sort-btn.active {
    background: var(--accent-warm);
    color: white;
    border-color: var(--accent-warm);
    box-shadow: var(--shadow-sm);
}

/* ==========================================
   Product Modal (Detail View)
   ========================================== */

/* Overlay - Clean Light Glass */
body.light-mode .product-modal-overlay {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) !important;
}

/* Modal Content - White Box */
body.light-mode .product-modal-content {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    /* Deep elegant shadow */
    border-radius: 20px;
}

body.light-mode .modal-info-section {
    background: #FFFFFF;
}

/* Typography within Modal */
body.light-mode .modal-header-group h2 {
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.light-mode .modal-desc {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Specs Box */
body.light-mode .modal-specs {
    background: #F8FAFC;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
}

body.light-mode .spec-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.light-mode .spec-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* CTA Button */
body.light-mode .modal-cta {
    background: var(--accent-warm);
    color: white;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 50px;
    /* Pill shape */
    transition: transform 0.2s, box-shadow 0.2s;
}

body.light-mode .modal-cta:hover {
    background: var(--accent-warm-dark);
    box-shadow: 0 10px 25px -5px rgba(234, 88, 12, 0.4);
    transform: translateY(-2px);
}

/* Navigation Arrows in Modal */
body.light-mode .prod-nav {
    background: white;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

body.light-mode .prod-nav:hover {
    border-color: var(--accent-warm);
    color: var(--accent-warm);
}

/* Close Button */
body.light-mode .modal-close {
    background: #F1F5F9;
    color: var(--text-secondary);
}

body.light-mode .modal-close:hover {
    background: #E2E8F0;
    color: var(--text-primary);
}

/* ==========================================
   Projects Section (Cards)
   RESTRICTED TO DESKTOP: Mobile cards are always image-based (require dark mode styles)
   ========================================== */
@media (min-width: 1025px) {

    /* Desktop Project Cards: Text must be WHITE because background is IMAGE */
    body.light-mode .project-card {
        background: #000;
        /* Dark background behind image */
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: var(--shadow-md);
    }

    body.light-mode .project-card:hover {
        box-shadow: var(--shadow-lg);
        border-color: var(--accent-warm);
    }

    /* Project Text - Force White with Shadow for Legibility */
    body.light-mode .proj-title {
        color: #FFFFFF !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    }

    body.light-mode .proj-desc {
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
    }

    /* Category Tag - High Contrast Mobile Style adopted for Desktop too */
    body.light-mode .proj-category {
        background: rgba(255, 152, 0, 0.85) !important;
        color: #FFFFFF !important;
        border: 1px solid #ff9800 !important;
        box-shadow: 0 0 10px rgba(255, 152, 0, 0.4) !important;
    }
}

/* ==========================================
   Bug Fixes & Utilities (Preserved)
   ========================================== */

/* Fix: Video loading black screen */
body.light-mode .media-slide {
    background: #F8FAFC !important;
    /* Clean placeholder */
}

/* Transparent Backgrounds where needed */
body.light-mode .media-slide video,
body.light-mode .video-pre-roll,
body.light-mode .modal-media-section,
body.light-mode .lw-cust-video-wrapper,
body.light-mode .video-wrapper,
body.light-mode #global-player-stage,
body.light-mode #lw-stage-placeholder,
body.light-mode .theater-stage,
body.light-mode .static-poster {
    background: transparent !important;
}

/* Video Pre-roll Text */
body.light-mode .video-pre-roll {
    color: var(--text-muted) !important;
}

/* FIX: Navbar Light Mode Override */
body.light-mode #global-navbar {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !important;
}

body.light-mode #global-navbar::after {
    display: none !important;
    opacity: 0 !important;
}

body.light-mode #global-navbar.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* --- MIGRATED FROM SECTIONS.CSS (START) --- */

/* --- GLOBAL & MISC MIGRATION (Step 24-30) --- */

/* ====================================
   FIX ALL LIGHT TEXT - GLOBAL OVERRIDES
   ==================================== */

/* Section Titles - Force Dark Color */
body.light-mode .section-title,
body.light-mode #values-section .section-title,
body.light-mode #about-section .section-title,
body.light-mode #contact .section-title {
    color: #2C2C2C !important;
    background: none !important;
    -webkit-text-fill-color: #2C2C2C !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    opacity: 1 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* About Stats Numbers - Force Dark Color */
body.light-mode .stat-value {
    color: #d67e2e !important;
    background: none !important;
    -webkit-text-fill-color: #d67e2e !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: none !important;
}

body.light-mode .stat-label {
    color: #5d4037 !important;
}

/* Contact Info - All Text Elements */
body.light-mode .contact-info i {
    color: #d67e2e !important;
}

body.light-mode .contact-info a,
body.light-mode .contact-info span {
    color: #4A4A4A !important;
    -webkit-text-fill-color: #4A4A4A !important;
}

/* Social Section */
body.light-mode .social-section h4 {
    color: #5d4037 !important;
}

/* ====================================
   CONTACT PAGE ENHANCEMENTS
   ==================================== */

/* Make Address More Prominent */
body.light-mode .contact-info .contact-detail {
    color: #2C2C2C !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    -webkit-text-fill-color: #2C2C2C !important;
}

/* Simplify Social Media Icons */
body.light-mode .s-icon {
    background: rgba(214, 126, 46, 0.12) !important;
    color: #d67e2e !important;
    border: 1.5px solid rgba(214, 126, 46, 0.3) !important;
    transition: all 0.3s ease !important;
}

body.light-mode .s-icon:hover {
    background: linear-gradient(135deg, #d67e2e, #ff9800) !important;
    color: #fff !important;
    border-color: #d67e2e !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(214, 126, 46, 0.3) !important;
}

/* === USER FIX: CONTACT HEADER GAP === */
/* Reduce top padding for Contact section to match others */
/* applied globally but specifically for layout tuning */


/* === USER FIX: MODAL SPECS VISUALS === */
/* Better appearance for specs box in Light Mode */
body.light-mode .modal-specs {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: none !important;
    padding: 30px 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px 10px !important;
}

body.light-mode .spec-label {
    color: #999 !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
}

body.light-mode .spec-value {
    color: #222 !important;
    font-weight: 700 !important;
    margin-top: 5px !important;
}

body.light-mode .spec-item.placeholder .spec-label {
    color: #ccc !important;
}

/* FIX: Custom Cursor Visibility in Light Mode */
body.light-mode #custom-cursor {
    border-color: #00eaff !important;
    /* Lightwinner Cyan */
    box-shadow: 0 0 8px rgba(0, 234, 255, 0.6) !important;
    background-color: rgba(0, 234, 255, 0.1) !important;
    /* Slight tint to make it more visible */
}

/* === CONTACT SECTION === */
body.light-mode .contact-info,
body.light-mode .contact-form-container {
    background: linear-gradient(160deg,
            rgba(255, 250, 245, 0.92) 0%,
            rgba(255, 255, 255, 0.88) 100%) !important;
    backdrop-filter: blur(25px) !important;
    border: 1.5px solid rgba(214, 126, 46, 0.2) !important;
    box-shadow: 0 12px 35px rgba(93, 64, 55, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.light-mode #hero h1,
body.light-mode .glitch-text {
    color: #b0b0b0 !important;
    /* Elegant light silver base */
    background: none !important;
    -webkit-text-fill-color: #b0b0b0 !important;
    text-shadow: none !important;
    position: relative !important;
    isolation: isolate !important;
    /* Create new stacking context */
}

body.light-mode .glitch-text::before,
body.light-mode .glitch-text::after {
    opacity: 0.9 !important;
    z-index: 10 !important;
    /* Force to VERY TOP of the silver base */
    pointer-events: none;
}

.light-mode #hero .hero-tagline {
    color: #444 !important;
    /* Darker grey */
    text-shadow: none !important;
    font-weight: 500 !important;
}

body.light-mode #contact h2.section-title {
    color: #1A1A1A !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #1A1A1A !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background: none !important;
}

body.light-mode .contact-info p,
body.light-mode .contact-detail {
    color: #4A4A4A !important;
    -webkit-text-fill-color: #4A4A4A !important;
}

body.light-mode .contact-detail i {
    color: #d67e2e !important;
}



/* === VALUES SECTION === */
/* === VALUES SECTION - FROSTED GLASS TRANSITION V7.0 === */
body.light-mode .value-card {
    background: rgba(255, 255, 255, 0.45) !important;
    /* Premium Transparency */
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

body.light-mode .value-card:hover {
    border-color: rgba(214, 126, 46, 0.4) !important;
    box-shadow: 0 15px 40px rgba(93, 64, 55, 0.25),
        0 0 30px rgba(214, 126, 46, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-10px) !important;
}

body.light-mode .value-card h3 {
    color: #1A1A1A !important;
    text-shadow: none !important;
    /* CRITICAL: Override transparent text-fill */
    -webkit-text-fill-color: #1A1A1A !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background: none !important;
}

body.light-mode .value-card p {
    color: #4A4A4A !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #4A4A4A !important;
}

body.light-mode .value-icon {
    color: #d67e2e !important;
    filter: drop-shadow(0 2px 4px rgba(214, 126, 46, 0.3)) !important;
}

body.light-mode .about-text .section-title,
body.light-mode .about-text .lead {
    color: #1A1A1A !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    -webkit-text-fill-color: #1A1A1A !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background: none !important;
}

body.light-mode .about-content p,
body.light-mode .about-text p {
    color: #4A4A4A !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #4A4A4A !important;
}

body.light-mode .about-content strong,
body.light-mode .about-content em {
    color: #2C2C2C !important;
    -webkit-text-fill-color: #2C2C2C !important;
}

body.light-mode .about-btn {
    background: linear-gradient(135deg,
            rgba(214, 126, 46, 0.15) 0%,
            rgba(214, 126, 46, 0.08) 100%) !important;
    border: 1.5px solid rgba(214, 126, 46, 0.4) !important;
    color: #5d4037 !important;
    text-shadow: none !important;
}

body.light-mode .about-btn:hover {
    background: linear-gradient(135deg,
            #d67e2e 0%,
            #ff9800 100%) !important;
    border-color: #d67e2e !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(214, 126, 46, 0.35) !important;
}

/* === EFFECTS: LIGHT MODE OVERRIDES === */

/* Flashlight effect is disabled in light mode for clarity */
body.light-mode #flashlight-overlay {
    opacity: 0;
    pointer-events: none;
}

body.light-mode #flashlight-tint {
    opacity: 0;
}

/* === JOURNAL ACCORDION: LIGHT MODE OVERRIDES === */
body.light-mode .j-continent-header {
    background: rgba(214, 126, 46, 0.08) !important;
    border-left-color: rgba(214, 126, 46, 0.4) !important;
    color: #5d4037 !important;
}

body.light-mode .j-continent-header:hover {
    background: rgba(214, 126, 46, 0.15) !important;
    border-left-color: #d67e2e !important;
}

body.light-mode .j-country-header {
    background: rgba(214, 126, 46, 0.03) !important;
    color: #6d4c41 !important;
    border-left: 2px solid transparent !important;
}

body.light-mode .j-country-header:hover {
    background: rgba(214, 126, 46, 0.1) !important;
}

body.light-mode .j-log-item {
    color: rgba(93, 64, 55, 0.8) !important;
}

body.light-mode .j-log-item:hover {
    color: #d67e2e !important;
    background: rgba(214, 126, 46, 0.1) !important;
    border-left-color: #d67e2e !important;
}

body.light-mode .j-log-item.active {
    background: rgba(214, 126, 46, 0.2) !important;
    color: #d67e2e !important;
    border-left-color: #d67e2e !important;
}

body.light-mode .log-card-item.highlighted,
body.light-mode .log-card-item.selected {
    background: rgba(214, 126, 46, 0.15) !important;
    border-left-color: #d67e2e !important;
    box-shadow: 0 0 20px rgba(214, 126, 46, 0.3), 0 4px 12px rgba(214, 126, 46, 0.1) !important;
}