/* assets/styles/layout.css */

/* Mobile First Layout */

/* Utility Classes */
.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* Top Bar (3-Section Layout) */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-md);
    z-index: var(--z-nav);
    /* Glass border is applied by .glass-bar */
    border-bottom: 1px solid var(--glass-border);
}

.nav-left {
    flex: 0 0 auto;
    /* Do not shrink, do not grow. Just fit content. */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-right: var(--space-md);

    /* Ensure Logo stays above Mobile Overlay */
    position: relative;
    z-index: calc(var(--z-overlay) + 10);
}

.logo-text {
    display: block;
    /* Ensure block model for whitespace behavior if needed */
    white-space: nowrap !important;
    /* Force single line */
    font-family: var(--font-main);
    font-weight: 700;
    font-size: var(--text-lg);
    text-decoration: none;
    color: var(--text-color);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    /* Prevent crushing by nav-center */
}


/* Removed redundant .nav-center styles */

/* Monochrome Nav Glow - Combined */
.nav-link.active {
    opacity: 1;
    font-weight: 500;
    color: var(--text-color);
    text-shadow: 0 0 10px var(--text-color);
}

[data-theme="light"] .nav-center .nav-link.active {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


/* Mobile Toggle Button */
.mobile-only {
    display: flex;
}


.nav-center::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

/* Scroll Shadow/Mask (Optional, but keeping simple for now) */

.nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-md);
}

.nav-links-group {
    display: none;
    /* Mobile hidden by default */
    align-items: center;
    gap: var(--space-md);
}

.nav-link {
    font-size: var(--text-sm);
    font-weight: 300;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nav-link:hover {
    opacity: 1;
}

.nav-link.active {
    opacity: 1;
    font-weight: 500;
    text-shadow: 0 0 10px var(--text-color);
}

@media (min-width: 768px) {
    .nav-links-group {
        display: flex;
        /* Show on desktop */
        gap: var(--space-lg);
        /* gap-8 equivalent */
    }

    .mobile-only {
        display: none !important;
    }

    #main-nav.open {
        /* Reset mobile menu state on resize */
        position: static;
        width: auto;
        height: auto;
        background: none;
        backdrop-filter: none;
        padding: 0;
    }
}

/* Mobile Fullscreen Menu for #main-nav */
@media (max-width: 767px) {
    .nav-links-group {
        display: none;
    }

    /* When OPEN: Fullscreen Overlay */
    #main-nav.open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        /* Light Mode Override for background if needed, but Keeping Dark Base for now as requested? 
           Actually, usually Light Mode overlay should be light? 
           SR reference implies specific style. User said: 
           "Light Mode: Menu text must be BLACK(#000). (Currently invisible)" 
           This implies the background might be white or light in light mode?
           Or the text is black on dark bg? Let's check theme.
           If theme is light, usually background is light. 
           Let's use var(--bg-color) or similar dynamic background?
           Let's stick to simple overrides. */
        background: var(--bg-color);
        /* Dynamic Theme Background */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Vertically Centered */
        align-items: flex-start;
        /* Left Aligned Text */
        z-index: var(--z-overlay);
        padding: 0 0 0 40px;
        /* Left Padding */
        gap: 0;
    }

    #main-nav.open .nav-links-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
        align-items: flex-start;
    }

    #main-nav.open .nav-link {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        opacity: 0.5;
        display: block;
        padding: 5px 0;
        transition: opacity 0.3s, transform 0.3s;
        color: var(--text-color);
    }

    #main-nav.open .nav-link:hover,
    #main-nav.open .nav-link.active {
        opacity: 1;
        transform: translateX(10px);
    }

    /* THEME VISIBILITY ENFORCEMENT */
    [data-theme="light"] #main-nav.open .nav-link {
        color: #000000 !important;
    }

    [data-theme="dark"] #main-nav.open .nav-link {
        color: #FFFFFF !important;
    }

    /* Mobile Toggle Button Positioning (Absolute in Overlay) */
    #main-nav.open .mobile-only {
        position: absolute;
        top: 0;
        right: var(--space-md);
        /* Match Header Padding */
        height: var(--header-height);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: calc(var(--z-overlay) + 20);
        /* Highest priority */
    }

    /* Controls inside Overlay (Theme Toggle moves to bottom left) */
    #main-nav.open .nav-ctl:not(.mobile-only) {
        position: absolute;
        bottom: 80px;
        left: 40px;
        transform: scale(1.0);
    }
}


/* Grid System (Tailwind Simulation) */
.grid {
    display: grid !important;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

/* Mobile Grid Overrides (Force 1 column) */
@media (max-width: 768px) {

    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    /* Allow override with specific mobile class if needed, but defaults to stack */
    .mobile-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Aspect Ratio Fixes */
.aspect-square {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
}

.aspect-video {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
}

.object-cover {
    object-fit: cover !important;
}

.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

/* Navigation Controls (Theme/Lang Buttons) */
.nav-ctl {
    background: none;
    border: 1px solid var(--glass-border);
    /* Subtle border */
    border-radius: 4px;
    /* Minimal pill */
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: var(--text-xs);
    text-transform: uppercase;
    transition: all 0.3s ease;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Ensure icon/text align */
    min-width: 32px;
    height: 32px;
}

.nav-ctl:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-color);
}

#lava-lamp {
    /* UI Layer */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-canvas);
    pointer-events: none;
    /* Ensure clicks pass through to content */
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: var(--z-nav);

    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-container {
    width: 100%;
    height: 100%;
    max-width: 600px;
    /* Constrain on desktop */

    display: flex;
    justify-content: space-around;
    /* Shop - Archive - Cart */
    align-items: center;
}

/* Main Content Area */
main {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    flex: 1;
    /* Grow to fill space */
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-lg);
    /* Removed nav-height calculation */
    padding-left: var(--space-md);
    padding-right: var(--space-md);

    display: flex;
    flex-direction: column;
    gap: var(--space-lg);

    /* Centered content */
    align-items: center;
}

/* Grid for Cards if needed */
.grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    width: 100%;
    max-width: 600px;
}

@media (min-width: 768px) {
    .grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}