/**
 * Homepage LCARS Navigation Frame Overlay
 *
 * Creates a functional LCARS "elbow" frame that overlays the banner
 * with glassmorphism effects and contains navigation links.
 *
 * Frame sits at top-left of 1500px content area while banner is 1920px.
 */

/* ============================================
   LCARS ELBOW FRAME - TOP LEFT
   ============================================ */

/* Frame container - Fixed as one unit */
.lcars-frame-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 4000; /* As per your investigation */
    pointer-events: none; /* Allows interaction with ships behind it */
}

/* Homepage uses 600px banner - adjust frame height - REMOVED for unified 100vh */

/* Let clicks pass through except for actual interactive bits */
.lcars-frame-overlay * {
    pointer-events: none;
}

.lcars-frame-overlay a,
.lcars-frame-overlay button {
    pointer-events: auto;
}

/* Elbow Corner - Connect the Top Bar to the Vertical Spine */
.lcars-frame-elbow {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px; /* Spine width + gap */
    height: 100px;
    background: var(--lcars-orange);
    border-radius: 30px 0 0 0; /* Authentic LCARS curve */
    pointer-events: auto;
}

/* Horizontal Top Bar - The Navigation Bar MUST be fixed to the top */
.lcars-frame-horizontal {
    position: absolute;
    top: 0;
    left: 80px; /* Starts after the elbow */
    right: 0;
    height: 40px;
    background: var(--lcars-glass-bg);
    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-bottom: 3px solid var(--lcars-orange);
    pointer-events: auto;
}


/* Vertical Left Bar - Section Context */
.lcars-frame-vertical {
    position: absolute;
    top: 100px; /* Start below the elbow */
    left: 0;
    width: 80px; /* Matches elbow width */
    height: calc(100vh - 100px); /* Full viewport height minus elbow */
    background: linear-gradient(180deg, var(--lcars-orange) 0%, var(--lcars-gold) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 0 0 30px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
}

/* ============================================
   NAVIGATION BUTTONS IN TOP BAR
   ============================================ */

.lcars-frame-nav {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 100%;
    overflow: visible; /* Remove overflow clipping - dropdowns need to extend below */
    white-space: nowrap;
}

/* Base Navigation Link Style */
.lcars-frame-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    height: 36px;
    color: #000;
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 18px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Command Group - Orange (Core Information) */
.lcars-frame-nav a.nav-command {
    background: rgba(255, 153, 0, 0.9);
    border: 1px solid rgba(255, 102, 0, 0.5);
}

.lcars-frame-nav a.nav-command:hover {
    background: rgba(255, 153, 0, 1);
    box-shadow: 0 0 12px rgba(255, 153, 0, 0.6);
    filter: brightness(1.05); /* subtle "active" - no lift */
}

/* Science Group - Blue/Purple (Support & World-Building) */
.lcars-frame-nav a.nav-science {
    background: rgba(153, 153, 255, 0.9);
    border: 1px solid rgba(99, 99, 255, 0.5);
}

.lcars-frame-nav a.nav-science:hover {
    background: rgba(153, 153, 255, 1);
    box-shadow: 0 0 12px rgba(153, 153, 255, 0.6);
    filter: brightness(1.05); /* subtle "active" - no lift */
}

/* Operations Group - Gold (External Links) */
.lcars-frame-nav a.nav-operations {
    background: rgba(255, 204, 102, 0.9);
    border: 1px solid rgba(255, 153, 0, 0.5);
}

.lcars-frame-nav a.nav-operations:hover {
    background: rgba(255, 204, 102, 1);
    box-shadow: 0 0 12px rgba(255, 204, 102, 0.6);
    filter: brightness(1.05); /* subtle "active" - no lift */
}

/* Primary CTA Button - Emphasized */
.lcars-frame-nav a.primary-cta {
    background: rgba(255, 102, 0, 1);
    font-size: 0.85rem;
    padding: 0 20px;
    height: 40px;
    border: 2px solid rgba(255, 153, 0, 0.8);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.4);
}

.lcars-frame-nav a.primary-cta:hover {
    background: rgba(255, 153, 0, 1);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.6);
    filter: brightness(1.05); /* subtle "active" - no lift */
}

.lcars-frame-nav a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.lcars-frame-nav a:active {
    filter: brightness(0.95);
}

/* Enhanced tooltip styling for immersive experience */
.lcars-frame-nav a[title],
.lcars-frame-nav button[title] {
    cursor: help;
    position: relative;
}

/* Tooltip appears on hover with slight delay for better UX */
.lcars-frame-nav a[title]:hover::after,
.lcars-frame-nav button[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.9);
    color: var(--lcars-gold);
    font-size: 0.7rem;
    font-family: var(--lcars-mono);
    white-space: nowrap;
    border: 1px solid var(--lcars-orange);
    border-radius: 4px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-out 0.3s forwards;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   DROPDOWN NAVIGATION
   ============================================ */

/* Dropdown Group Container */
.lcars-nav-group {
    position: relative;
    display: inline-block;
}

/* Dropdown Trigger Button */
.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 15px;
    height: 36px;
    color: #000;
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: rgba(255, 153, 0, 0.9);
    border: 1px solid rgba(255, 102, 0, 0.5);
}

.nav-dropdown-trigger:hover {
    background: rgba(255, 153, 0, 1);
    box-shadow: 0 0 12px rgba(255, 153, 0, 0.6);
    filter: brightness(1.05); /* subtle "active" - no lift */
}

.nav-dropdown-trigger:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.nav-dropdown-trigger.nav-science {
    background: rgba(153, 153, 255, 0.9);
    border: 1px solid rgba(99, 99, 255, 0.5);
}

.nav-dropdown-trigger.nav-science:hover {
    background: rgba(153, 153, 255, 1);
    box-shadow: 0 0 12px rgba(153, 153, 255, 0.6);
    filter: brightness(1.05); /* subtle "active" - no lift */
}

.dropdown-arrow {
    font-size: 0.6rem;
    transition: transform 0.2s ease;
}

.nav-dropdown-trigger[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Glassmorphism Dropdown Panel */
.lcars-dropdown {
    display: none;
    position: absolute;
    top: 42px; /* Below trigger button */
    left: 0;
    min-width: 200px;
    background: var(--lcars-glass-bg);
    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-left: 4px solid var(--lcars-orange);
    border-radius: 0 0 10px 10px;
    padding: 8px;
    z-index: 3001; /* Even higher to ensure dropdown appears above frame overlay */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    flex-direction: column;
    gap: 4px;
}

/* Fallback: Show dropdown on hover if JavaScript hasn't set inline style (for no-JS users) */
.lcars-nav-group:hover .lcars-dropdown:not([style]),
.lcars-nav-group:focus-within .lcars-dropdown:not([style]) {
    display: flex;
}

.lcars-dropdown a {
    display: block;
    color: var(--lcars-blue-bell);
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.lcars-dropdown a:hover {
    background: rgba(255, 153, 0, 0.2);
    border-color: var(--lcars-orange);
    color: var(--lcars-gold);
    transform: translateX(4px);
}

.lcars-dropdown a:focus-visible {
    outline: 2px solid var(--lcars-orange);
    outline-offset: 2px;
}

/* ============================================
   VERTICAL BAR CONTENT
   ============================================ */

.lcars-section-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    color: #000;
    text-transform: uppercase;
    margin-top: 20px;
}

.lcars-system-status {
    margin-top: auto;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcars-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 255, 0, 0.8);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    animation: pulse-status 2s infinite;
}

@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.lcars-status-indicator.warning {
    background: rgba(255, 204, 102, 0.9);
    box-shadow: 0 0 8px rgba(255, 204, 102, 0.6);
}

/* ============================================
   SYSTEM ID / DIAGNOSTIC CODE
   ============================================ */

.lcars-frame-diagnostic {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%; /* so it always centers inside the bar */
    text-align: center;
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: 0.05em;
    line-height: 1.2;
}

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

@media (max-width: 1200px) {
    .lcars-frame-vertical {
        width: 50px;
        height: 600px;
    }

    .lcars-frame-elbow {
        width: 50px;
        height: 45px;
    }

    .lcars-frame-horizontal {
        left: 50px;
        height: 45px;
        padding-left: 8px;
    }

    .lcars-frame-nav a {
        padding: 0 10px;
        font-size: 0.7rem;
        height: 32px;
    }

    .lcars-frame-nav a.primary-cta {
        padding: 0 12px;
        font-size: 0.75rem;
        height: 36px;
    }

    .lcars-frame-diagnostic {
        width: 100%; /* still centers inside the bar */
        font-size: 0.6rem;
    }
}

/* Hide standard desktop navigation when LCARS frame is present */
.site-header:has(.lcars-frame-overlay) .lcars-nav {
    display: none !important;
}

/* Fallback for browsers that don't support :has() */
.site-header .lcars-frame-overlay ~ * .lcars-nav {
    display: none !important;
}

/* Keep mobile navigation visible - it's separate */
@media (max-width: 900px) {
    /* Hide frame overlay on tablets/mobile - use standard navigation instead */
    .lcars-frame-overlay {
        display: none;
    }
    
    /* Show standard nav on mobile when frame is hidden */
    .lcars-nav {
        display: block !important;
    }
}

/* ============================================
   GLASSMORPHISM FALLBACK
   ============================================ */

/* Ensure readability if backdrop-filter isn't supported */
@supports not (backdrop-filter: blur(15px)) {
    .lcars-frame-horizontal {
        background: rgba(255, 102, 0, 0.95);
    }

    .lcars-frame-vertical,
    .lcars-frame-elbow {
        background: rgba(255, 102, 0, 0.95);
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .lcars-frame-horizontal,
    .lcars-frame-vertical,
    .lcars-frame-elbow {
        background: rgba(255, 102, 0, 1);
        border: 2px solid #000;
    }

    .lcars-frame-nav a {
        background: rgba(255, 153, 0, 1);
        border: 2px solid #000;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .lcars-frame-nav a,
    .lcars-status-indicator {
        transition: none;
        animation: none;
    }

    .lcars-frame-nav a:hover {
        filter: none;
    }

    .lcars-dropdown a {
        transition: none;
    }

    .lcars-dropdown a:hover {
        transform: none;
    }
}