/**
 * Homepage Hero Banner - 600px Immersive Layout
 * Glassmorphism Overlays for Modern Spatial Design
 *
 * This stylesheet implements the 2026 "Half-Fold" hero layout with
 * frosted glass panels that overlay the bottom of the banner.
 */

/* ============================================
   HOMEPAGE HERO BANNER - 600px
   ============================================ */

/* LCARS Spine - Vertical bars on left and right */
body.page-home .lcars-spine {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background: linear-gradient(180deg,
        var(--lcars-orange) 0%,
        var(--lcars-orange) 70%,
        var(--lcars-gold) 100%
    );
    z-index: 4000; /* Above everything including frame overlay (3000) */
    border-radius: 0 0 18px 0;
}

body.page-home .lcars-spine::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
    background: linear-gradient(180deg,
        var(--lcars-blue) 0%,
        var(--lcars-blue) 70%,
        rgba(153, 204, 255, 0.6) 100%
    );
    z-index: 4000;
    border-radius: 0 0 0 18px;
}

/* Allow site container and terminal view to be full-width for banner */
body.page-home .lcars-terminal-view,
body.page-home .site-container {
    max-width: none !important;
    padding: 0 !important;
    overflow-x: visible !important;
}

body.page-home .site-header {
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Constrain main content to ~1500px while banner stays full-width */
body.page-home .lcars-container {
    max-width: 1500px;
}

body.page-home main#main-content {
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
    z-index: 2000; /* Ensure content scrolls OVER the fixed banner (z-index 1000) */
}

/* Override default banner height for homepage only */
body.page-home .header-banner,
body.page-home .stf-banner {
    height: 600px;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100vw !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000; /* Above content, below navigation - consistent with other pages */
}

/* Ensure no gap at top - remove any body spacing on homepage */
body.page-home {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden; /* Prevent horizontal scroll from full-width banner */
}

/* Ensure site-header doesn't create gap on homepage */
body.page-home .site-header {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure banner image container is flush to top and properly sized */
body.page-home .stf-banner-image {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 600px !important; /* Match banner height, not 100vh */
    margin: 0 !important;
    padding: 0 !important;
    z-index: -1 !important;
}

/* Ensure banner image fills container properly */
body.page-home .stf-banner-image img,
body.page-home .stf-banner-image picture {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important; /* Center focal point in safe zone */
}

/* Hide standard navigation on homepage - use LCARS frame instead */
body.page-home .lcars-nav,
body.page-home .mobile-nav-container {
    display: none !important;
}

/* Banner container for glassmorphism overlap */
/* Apply to all pages - ensure consistent spacing matching index page */
.homepage-hero-container,
main#main-content .homepage-hero-container,
.lcars-home-layout .homepage-hero-container,
.lcars-container .homepage-hero-container {
    position: relative;
    width: calc(100% + 120px); /* Compensate for parent padding: 80px left + 40px right */
    max-width: 1500px; /* Constrain content width */
    margin-left: -80px !important; /* Negative margin to break out of parent left padding */
    margin-right: -40px !important; /* Negative margin to break out of parent right padding */
    margin-top: 0;
    margin-bottom: 40px;
    z-index: 2000; /* Above fixed banner (z-index 1) so panel can overlay and blur */
    /* Position container to overlap fixed banner - Revealed focal point */
    padding-top: 250px !important; /* Reduces vertical gap between menu and content panel - matches index page */
    padding-left: 0 !important; /* Ensure no left padding that would offset the panel */
    padding-right: 0 !important; /* Ensure no right padding that would offset the panel */
}

/* Add a margin to the very last section to ensure it clears the footer */
footer.lcars-footer {
    position: relative;
    z-index: 3000; /* Higher than content to 'close' the terminal */
}

.hero-content-container {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    z-index: 2000;
}

/* Hero panel positioning when included in header (non-homepage pages) */
.site-header .hero-content-container {
    position: absolute;
    top: 250px; /* Position to overlap banner bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1500px;
    z-index: 2000;
    pointer-events: none; /* Allow clicks to pass through to banner */
}

.site-header .hero-content-container .hero-content-panel {
    pointer-events: auto; /* Re-enable clicks on panel content */
}

/* Hero panel positioning when included in main content (homepage style) */
main#main-content .hero-content-container {
    padding-top: 250px !important;
    margin-bottom: 40px;
}

/* ============================================
   GLASSMORPHISM CONTENT PANELS
   ============================================ */

.hero-glass-panel {
    background: rgba(2, 44, 94, var(--lcars-glass-opacity)); /* LCARS Deep Blue with transparency */
    backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
    -webkit-backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
    border: 1px solid var(--lcars-glass-border);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    z-index: 10;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Main hero content - overlaps banner bottom with blur effect */
.hero-content-panel {
    /* Base background (fallback for browsers without backdrop-filter) */
    background: linear-gradient(135deg, rgba(2, 44, 94, 0.85) 0%, rgba(0, 0, 0, 0.9) 100%);
    border: 1px solid rgba(255, 153, 0, 0.4); /* LCARS Orange border */
    border-left: 5px solid var(--lcars-orange);
    border-radius: 0 15px 15px 0;
    padding: 30px; /* Reduced from 40px to close gap */
    margin-left: 0 !important; /* Changed from 60px - center the panel properly */
    margin-right: 0 !important; /* Changed from 60px - center the panel properly */
    position: relative;
    z-index: 2000; /* Above fixed banner (z-index 1000) so it overlays and blurs the banner */
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 153, 0, 0.4),
        0 0 20px rgba(255, 153, 0, 0.2); /* Enhanced shadow with glow */
    /* Panel overlaps bottom 120px of the 600px fixed banner - container handles positioning */
    margin-top: 0; /* Container margin-top positions it correctly */
    max-width: 100%; /* Ensure it doesn't overflow */
    width: 100%; /* Ensure full width within container */
    
    /* Performance optimization */
    will-change: backdrop-filter;
    transform: translateZ(0); /* Hardware acceleration */
    
    /* Loading state - fade in */
    opacity: 0;
    animation: fadeInOverlay 0.6s ease forwards;
}

/* Glassmorphism effect (progressive enhancement) */
@supports (backdrop-filter: blur(20px)) {
    .hero-content-panel {
        backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
        -webkit-backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
    }
    
    /* Enhanced blur after page load */
    .hero-content-panel.loaded {
        backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
        -webkit-backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
    }
}

/* Fade-in animation */
@keyframes fadeInOverlay {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Title styling for glass panels - Enhanced readability */
.hero-content-panel h1 {
    color: var(--lcars-orange);
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    letter-spacing: 0.15em;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    /* Enhanced contrast - semi-transparent background behind text */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    /* Ensures WCAG AA contrast (4.5:1) */
}

.hero-content-panel .tagline {
    color: var(--lcars-gold);
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    font-style: italic;
    margin-bottom: 25px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    /* Enhanced readability */
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 15px;
    border-radius: 5px;
    display: inline-block;
}

.hero-content-panel p {
    color: var(--lcars-blue-bell);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    /* Enhanced readability for paragraphs */
    background: rgba(0, 0, 0, 0.25);
    padding: 8px 12px;
    border-radius: 5px;
    display: inline-block;
}

/* CTA Button enhancement for glass panels */
.hero-content-panel .lcars-button {
    margin-top: 20px;
    font-size: 1.4rem;
    padding: 18px 50px;
    box-shadow: 0 4px 16px rgba(255, 153, 0, 0.4);
    transition: all 0.3s ease;
}

.hero-content-panel .lcars-button:hover {
    box-shadow: 0 6px 24px rgba(255, 153, 0, 0.6);
    transform: translateY(-2px);
}

/* ============================================
   SIDEBAR GLASS PANELS
   ============================================ */

.glass-panel-sidebar {
    background: rgba(2, 44, 94, var(--lcars-glass-opacity));
    backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
    -webkit-backdrop-filter: blur(var(--lcars-glass-blur)) saturate(var(--lcars-glass-saturate));
    border: 1px solid var(--lcars-glass-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.glass-panel-sidebar h2 {
    color: var(--lcars-gold);
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ============================================
   SAFE ZONE GUIDANCE (600px banner)
   ============================================ */

/*
 * With 600px banner height for 1920x1080 source:
 * - Top crop: 240px (0-240px hidden)
 * - VISIBLE ZONE: 240px-840px (center 600px)
 * - Bottom crop: 840-1080px hidden
 *
 * Safe zone for key elements: 340px-740px from top
 * This leaves 100px padding top/bottom within visible area
 */

/* ============================================
   RESPONSIVE BEHAVIOR
   ============================================ */

@media (max-width: 1200px) {
    /* Banner height adjustments apply to all pages - handled in lcars-header.css */
    /* Container positioning for all pages with hero panels */
    .hero-content-panel {
        margin-left: 0; /* Changed from 40px - center properly */
        margin-right: 0; /* Changed from 40px - center properly */
        padding: 30px;
        margin-top: 0; /* Container handles positioning */
    }

    .hero-content-panel h1 {
        font-size: 2.2rem;
    }

    .hero-content-panel .tagline {
        font-size: 1.2rem;
    }
}

@media (max-width: 900px) {
    /* Banner height adjustments apply to all pages - handled in lcars-header.css */
    /* Container positioning for all pages with hero panels */
    .hero-content-panel {
        margin-left: 0; /* Changed from 20px - center properly */
        margin-right: 0; /* Changed from 20px - center properly */
        padding: 25px;
        margin-top: 0; /* Container handles positioning */
    }

    .hero-content-panel h1 {
        font-size: 1.8rem;
    }

    .hero-content-panel .tagline {
        font-size: 1rem;
    }

    .hero-content-panel p {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    /* Banner height adjustments apply to all pages - handled in lcars-header.css */
    /* Container positioning for all pages with hero panels */
    .hero-content-panel {
        margin-left: 0; /* Changed from 15px - center properly */
        margin-right: 0; /* Changed from 15px - center properly */
        padding: 20px;
        border-left-width: 3px;
        margin-top: 0; /* Container handles positioning */
    }

    .hero-content-panel h1 {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
    }

    .hero-content-panel .tagline {
        font-size: 0.9rem;
    }

    .hero-content-panel p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .hero-content-panel .lcars-button {
        font-size: 1.1rem;
        padding: 14px 30px;
    }

    /* Significantly reduce blur on mobile for performance */
    .hero-content-panel,
    .hero-glass-panel,
    .glass-panel-sidebar {
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        /* Increase background opacity to compensate for less blur */
        background: linear-gradient(135deg, rgba(2, 44, 94, 0.92) 0%, rgba(0, 0, 0, 0.95) 100%);
    }
    
    /* Disable glassmorphism on very low-end devices or reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .hero-content-panel {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            background: rgba(2, 44, 94, 0.95) !important;
        }
    }
    
    /* Larger touch targets and text on mobile */
    .hero-content-panel h1 {
        font-size: 1.8rem;
        padding: 12px 18px; /* Larger touch target */
    }
    
    .hero-content-panel .tagline {
        font-size: 1rem;
        padding: 10px 14px;
    }
    
    .hero-content-panel p {
        font-size: 0.95rem;
        padding: 10px 14px;
    }
}

/* ============================================
   DEPTH & LAYERING EFFECTS
   ============================================ */

/* Subtle parallax-ready classes */
.hero-layer-background {
    position: relative;
    z-index: 1;
}

.hero-layer-midground {
    position: relative;
    z-index: 10;
}

.hero-layer-foreground {
    position: relative;
    z-index: 20;
}

/* Glow effect for interactive elements */
.glass-panel-glow {
    position: relative;
}

.glass-panel-glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.1), rgba(153, 204, 255, 0.1));
    border-radius: 15px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-panel-glow:hover::after {
    opacity: 1;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure text remains readable if backdrop-filter isn't supported */
@supports not (backdrop-filter: blur(20px)) {
    .hero-content-panel,
    .hero-glass-panel,
    .glass-panel-sidebar {
        background: rgba(2, 44, 94, 0.92); /* Increase opacity */
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .hero-content-panel {
        background: rgba(0, 0, 0, 0.95);
        border-color: var(--lcars-orange);
    }

    .hero-content-panel h1,
    .hero-content-panel .tagline {
        text-shadow: none;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-content-panel {
        animation: none;
        opacity: 1;
    }
    
    .hero-content-panel .lcars-button {
        transition: none;
    }

    .hero-content-panel .lcars-button:hover {
        transform: none;
    }
}