/*
FILE: layout.css
RESPONSIBILITY: Spatial structure for Vertex Nexus 360 architecture
PHASE: B2 — ASSETS SKELETON
ROLE: Layout infrastructure (container, side-nav, mode plane)

CRITICAL RULES:
✓ Spatial structure only
✓ Define: app container, side-nav layout, mode plane
✗ NO component-specific styles
✗ NO mode-specific styles
✗ NO content styling
*/

/* ============================================================================
   VERTEX APP CONTAINER
   ============================================================================
   Purpose: Outermost container for the entire application
   Behavior: Full viewport, houses side-nav + mode plane
   ========================================================================= */

.vertex-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    /* Ensure we sit above any residual theme elements */
    z-index: 10;
}

/* ============================================================================
   GENERATEPRESS LAYOUT OVERRIDES (CRITICAL FIX - STEP 2)
   ============================================================================
   Purpose: Neutralize parent theme containers that constrain the canvas
   ========================================================================= */

.site,
.site-content,
.content-area,
.inside-article,
.entry-content,
.inside-main-content,
.grid-container,
#primary,
#content,
.main-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Hide all GeneratePress chrome (header, footer, nav, etc.) */
.site-header,
.site-footer,
.generate-back-to-top,
.entry-meta,
.paging-navigation,
.main-navigation,
#site-navigation,
#mobile-header,
.top-bar,
.footer-widgets,
.menu-toggle,
#primary-menu,
.secondary-navigation {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ============================================================================
   SIDE NAVIGATION — FIXED LAYOUT (STEP 3 - CORRECTED)
   ============================================================================
   Purpose: Fixed navigation panel (always visible)
   Position: Fixed to left edge, full viewport height
   Admin Bar: Offset when WP admin bar is present
   ========================================================================= */

.side-nav,
nav.side-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background-color: var(--color-surface-dark);
    border-right: var(--border-width-1) solid var(--color-border-dark);
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Admin bar offset — when WP admin bar is visible */
body.admin-bar .side-nav,
body.admin-bar nav.side-nav {
    top: 32px;
    height: calc(100vh - 32px);
}

@media (max-width: 782px) {

    body.admin-bar .side-nav,
    body.admin-bar nav.side-nav {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/* Side navigation scrollbar styling */
.side-nav::-webkit-scrollbar {
    width: 6px;
}

.side-nav::-webkit-scrollbar-track {
    background: transparent;
}

.side-nav::-webkit-scrollbar-thumb {
    background: var(--color-gray-600);
    border-radius: var(--radius-full);
}

.side-nav::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* ============================================================================
   MODE PLANE CONTAINER
   ============================================================================
   Purpose: Houses all mode sections simultaneously
   Behavior: Offset by side-nav width (220px), full remaining viewport
   ========================================================================= */

.mode-plane,
#mode-container {
    position: relative;
    margin-left: 220px;
    width: calc(100vw - 220px);
    height: 100vh;
    overflow: hidden;
}

/* Admin bar offset for mode plane */
body.admin-bar .mode-plane,
body.admin-bar #mode-container {
    height: calc(100vh - 32px);
}

@media (max-width: 782px) {

    body.admin-bar .mode-plane,
    body.admin-bar #mode-container {
        height: calc(100vh - 46px);
    }
}

/* ============================================================================
   MODE ZONES — INDIVIDUAL MODE CONTAINERS
   ============================================================================
   Purpose: Each mode occupies the full mode-plane
   Visibility: Controlled by JavaScript via data-mode attributes
   Default: All hidden except active mode
   ========================================================================= */

.mode-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity var(--duration-normal) var(--ease-in-out);
    scroll-behavior: smooth;
}

/* Active mode visibility */
body[data-mode="nexus"] #mode-nexus,
body[data-mode="operations"] #mode-operations,
body[data-mode="services"] #mode-services,
body[data-mode="industries"] #mode-industries,
body[data-mode="protocol"] #mode-protocol,
body[data-mode="trust"] #mode-trust,
body[data-mode="engage"] #mode-engage {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================================
   SCROLL REVEAL ANIMATIONS (STEP 4)
   ============================================================================
   Purpose: Trigger animations when zones enter viewport via scroll.js
   Class: .is-visible is added by JavaScript on scroll
   ========================================================================= */

/* Default state for zone content (before scroll reveal) */
.zone .content-container,
.zone .grid-container,
.zone .card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

/* Revealed state (triggered by .is-visible class) */
.zone.is-visible .content-container,
.zone.is-visible .grid-container,
.zone.is-visible .card,
[id^="mode-"].is-visible .content-container,
[id^="mode-"].is-visible .grid-container,
[id^="mode-"].is-visible .card {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for cards */
.zone.is-visible .card:nth-child(1) {
    transition-delay: 0ms;
}

.zone.is-visible .card:nth-child(2) {
    transition-delay: 100ms;
}

.zone.is-visible .card:nth-child(3) {
    transition-delay: 200ms;
}

.zone.is-visible .card:nth-child(4) {
    transition-delay: 300ms;
}

.zone.is-visible .card:nth-child(5) {
    transition-delay: 400ms;
}

.zone.is-visible .card:nth-child(6) {
    transition-delay: 500ms;
}

/* Mode zone scrollbar styling */
.mode-zone::-webkit-scrollbar {
    width: 8px;
}

.mode-zone::-webkit-scrollbar-track {
    background: var(--color-surface-secondary);
}

.mode-zone::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
}

.mode-zone::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* ============================================================================
   ZONE ARCHITECTURE — 4 VERTICAL ZONES PER MODE
   ============================================================================
   Purpose: Each mode contains 4 vertically stacked zones
   Structure: ENTRY → PRIMARY → DEEP → CLOSURE
   Behavior: Vertical scroll within mode container
   ========================================================================= */

.zone {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* Each zone occupies at least full viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-16) var(--space-8);
}

/* Zone variants */
.zone-entry {
    background-color: var(--color-surface-primary);
}

.zone-primary {
    background-color: var(--color-surface-secondary);
}

.zone-deep {
    background-color: var(--color-surface-tertiary);
}

.zone-closure {
    background-color: var(--color-surface-primary);
}

/* ============================================================================
   SIDE NAVIGATION — INTERNAL STRUCTURE
   ============================================================================
   Purpose: Layout for side-nav components
   Structure: Header → Nav items → Footer (if needed)
   ========================================================================= */

.side-nav-header {
    padding: var(--space-6);
    border-bottom: var(--border-width-1) solid var(--color-border-dark);
}

.side-nav-body {
    flex: 1;
    padding: var(--space-4) 0;
    overflow-y: auto;
}

.side-nav-footer {
    padding: var(--space-6);
    border-top: var(--border-width-1) solid var(--color-border-dark);
    margin-top: auto;
}

/* Navigation items layout */
.nav-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
    color: var(--color-text-inverse);
}

.nav-item:hover {
    background-color: var(--color-brand-accent);
}

.nav-item.active {
    background-color: var(--color-interactive-default);
    font-weight: var(--font-weight-semibold);
}

/* Navigation item icon placeholder */
.nav-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation item label */
.nav-item-label {
    flex: 1;
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
}

/* ============================================================================
   CONTENT CONTAINERS — MAXIMUM WIDTH CONSTRAINTS
   ============================================================================
   Purpose: Constrain content width within zones for readability
   Usage: Apply to content blocks within zones
   ========================================================================= */

.content-container {
    width: 100%;
    max-width: var(--max-width-7xl);
    /* 1280px */
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.content-container-narrow {
    width: 100%;
    max-width: var(--max-width-4xl);
    /* 896px */
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.content-container-wide {
    width: 100%;
    max-width: var(--max-width-full);
    /* 100% */
    margin: 0 auto;
    padding: 0 var(--space-8);
}

/* ============================================================================
   RESPONSIVE LAYOUT — BREAKPOINTS
   ============================================================================
   Purpose: Mobile and tablet adaptations
   Behavior: Collapse side-nav, adjust mode plane
   ========================================================================= */

/* Tablet and below (< 1024px) */
@media (max-width: 1024px) {
    .side-nav {
        width: 180px;
        /* Even narrower on tablet */
    }

    .mode-plane {
        margin-left: 180px;
        width: calc(100vw - 180px);
    }

    .zone {
        padding: var(--space-12) var(--space-6);
    }

    .content-container,
    .content-container-narrow {
        padding: 0 var(--space-6);
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .vertex-container {
        flex-direction: column;
    }

    .side-nav {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: auto;
        max-height: 60px;
        flex-direction: row;
        border-right: none;
        border-top: var(--border-width-1) solid var(--color-border-dark);
        overflow-x: auto;
        overflow-y: hidden;
        z-index: var(--z-nav);
    }

    .mode-plane,
    #mode-container {
        margin-left: 0;
        margin-bottom: 60px;
        /* Offset for bottom nav */
        width: 100vw;
        height: calc(100vh - 60px);
    }

    /* Admin bar + mobile nav offset */
    body.admin-bar .mode-plane,
    body.admin-bar #mode-container {
        height: calc(100vh - 60px - 46px);
    }

    /* STEP 5: Mobile GP overrides */
    .site,
    .site-content,
    .content-area,
    .inside-article,
    .entry-content,
    .inside-main-content,
    .grid-container {
        max-width: 100vw !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .side-nav-header,
    .side-nav-footer {
        display: none;
        /* Hide on mobile */
    }

    .side-nav-body {
        padding: 0;
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .nav-items {
        flex-direction: row;
        padding: 0;
        gap: 0;
        width: 100%;
    }

    .nav-item {
        flex: 1;
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-2);
        border-radius: 0;
        justify-content: center;
        text-align: center;
    }

    .nav-item-label {
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    .zone {
        min-height: calc(100vh - 60px);
        padding: var(--space-8) var(--space-4);
    }

    .content-container,
    .content-container-narrow,
    .content-container-wide {
        padding: 0 var(--space-4);
    }
}

/* Small mobile (< 480px) */
@media (max-width: 480px) {
    .nav-item-label {
        font-size: 0.625rem;
        /* 10px */
    }

    .nav-item-icon {
        width: 20px;
        height: 20px;
    }

    .zone {
        padding: var(--space-6) var(--space-3);
    }
}

/* ============================================================================
   GRID SYSTEM — OPTIONAL LAYOUT UTILITIES
   ============================================================================
   Purpose: Flexible grid for content organization within zones
   Usage: Apply to containers within zones
   ========================================================================= */

.grid-container {
    display: grid;
    gap: var(--space-6);
}

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

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

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

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

@media (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 768px) {

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

/* Flexbox utilities for zone content */
.flex-container {
    display: flex;
    gap: var(--space-6);
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

/* ============================================================================
   END OF LAYOUT.CSS
   ============================================================================
   
   CRITICAL VALIDATION:
   ✓ Spatial structure defined (container, side-nav, mode plane)
   ✓ Mode zone visibility system implemented
   ✓ 4-zone vertical architecture scaffolded
   ✓ Responsive breakpoints included
   ✓ Grid/flex utilities provided
   ✗ NO component-specific styles
   ✗ NO mode-specific visual styling
   
   Next Phase: B3 — modes.css (Mode-specific styling)
   ========================================================================= */