/* =============================================================================
   deploy.build — Navigation Design System

   Design: Clean, premium glassmorphism nav matching the modern hero section.
   Subtle hover effects, refined transitions, no heavy borders or raised buttons.
   Consistent across all 14 pages via single CSS import.
   ============================================================================= */

:root {
    /* --- NAV PALETTE --- */
    --nav-text: #4D5B7C;
    --nav-text-hover: #000C2A;
    --nav-text-active: #0069FF;
    --nav-border: #E2E8F0;
    --nav-surface: rgba(255, 255, 255, 0.85);
    --nav-surface-scrolled: rgba(255, 255, 255, 0.95);

    /* --- MOTION --- */
    --nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --nav-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
   1. NAV BAR — Clean frosted glass
   ========================================= */
header.nav.glass-nav {
    background: var(--nav-surface) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    /* Remove any previous background-image overrides */
    background-image: none !important;
}

/* Scrolled state — slightly more opaque, stronger shadow */
header.nav.glass-nav.scrolled {
    background: var(--nav-surface-scrolled) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}

/* =========================================
   2. NAV LINKS — Clean text with underline hover
   No raised buttons, no borders, no bevels
   ========================================= */
.nav-links > a,
.nav-links .nav-dropdown-btn {
    position: relative;
    padding: 6px 12px !important;
    border-radius: 8px;

    /* Clean flat surface — no gradients, no borders */
    background: transparent;
    border: none;
    box-shadow: none;

    /* Clean text styling */
    color: var(--nav-text) !important;
    text-shadow: none;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: -0.01em;

    /* Smooth transitions */
    transition: color 0.2s ease, background 0.2s ease !important;
}

/* Hover: subtle background tint, text darkens */
.nav-links > a:hover,
.nav-links .nav-dropdown-btn:hover {
    color: var(--nav-text-hover) !important;
    background: rgba(0, 0, 0, 0.03);
    /* Remove all transforms and box shadows from old style */
    transform: none;
    box-shadow: none;
    text-shadow: none;
}

/* Active/Pressed: blue tint */
.nav-links > a:active,
.nav-links .nav-dropdown-btn:active {
    color: var(--nav-text-active) !important;
    background: rgba(59, 130, 246, 0.05);
    transform: none;
    box-shadow: none;
    text-shadow: none;
}

/* =========================================
   3. DROPDOWN PANEL — Clean floating card
   Subtle shadow, no industrial textures
   ========================================= */
.nav-links .nav-dropdown {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform-origin: top center;

    transition:
        opacity 0.2s ease,
        transform 0.25s var(--nav-ease),
        visibility 0.2s !important;
}

/* Hidden state: slight fade-down */
.group:not(:hover) .nav-dropdown {
    transform: translateX(-50%) translateY(-4px) !important;
}

/* Open state: slides into position */
.group:hover .nav-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

/* Dropdown inner container — clean white card */
.nav-dropdown > div {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    padding: 6px !important;
}

/* Dropdown link items — clean list */
.nav-dropdown a {
    position: relative;
    border-radius: 8px !important;
    border: none !important;
    padding: 8px 12px !important;
    color: var(--nav-text) !important;
    font-size: 13px !important;
    font-weight: 500;
    transition: all 0.15s ease !important;
    overflow: hidden;
}

/* Dropdown link hover: light blue tint */
.nav-dropdown a:hover {
    background: rgba(59, 130, 246, 0.05) !important;
    color: var(--nav-text-active) !important;
    padding-left: 12px !important;
    box-shadow: none !important;
    text-shadow: none;
}

/* Dropdown icon color on parent hover */
.nav-dropdown-btn .material-symbols-outlined {
    transition: transform 0.2s ease, color 0.2s ease;
}

.group:hover .nav-dropdown-btn .material-symbols-outlined {
    color: var(--nav-text-active);
    transform: rotate(180deg);
    filter: none;
}

/* =========================================
   4. MOBILE HAMBURGER — Clean minimal button
   ========================================= */
button.nav-hamburger {
    background: transparent !important;
    border: 1px solid var(--nav-border) !important;
    border-radius: 8px !important;
    padding: 6px !important;
    box-shadow: none !important;
    color: #334155;
    transition: all 0.15s ease !important;
}

button.nav-hamburger:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: #CBD5E1 !important;
}

button.nav-hamburger:active {
    transform: scale(0.96) !important;
    background: rgba(0, 0, 0, 0.05) !important;
    box-shadow: none !important;
}

button.nav-hamburger:active .material-symbols-outlined {
    color: var(--nav-text-active) !important;
    filter: none;
}

/* =========================================
   5. MOBILE MENU OVERLAY — Clean panel
   ========================================= */
.nav-links.open {
    background: rgba(255, 255, 255, 0.98) !important;
    background-image: none !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--nav-border);
}

/* Mobile menu links — clean list items */
.nav-links.open a {
    display: block;
    padding: 14px 16px !important;
    margin-bottom: 2px;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    border: none;
    color: #334155 !important;
    text-shadow: none;
    font-size: 16px !important;
    font-weight: 500;
    transition: all 0.15s ease !important;
}

.nav-links.open a:hover {
    background: rgba(59, 130, 246, 0.05);
    color: var(--nav-text-active) !important;
}

.nav-links.open a:active {
    transform: none;
    background: rgba(59, 130, 246, 0.08);
    box-shadow: none;
    color: var(--nav-text-active) !important;
    text-shadow: none;
}

/* =========================================
   6. DEPLOY NOW BUTTON — Clean CTA
   Matches the hero primary button style
   ========================================= */
header.nav .flex.items-center.gap-3 a[href*="get-started"] {
    background: linear-gradient(to bottom, #0069FF, #1433D6) !important;
    border: none !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(59, 130, 246, 0.25) !important;
    text-shadow: none;
    transition: all 0.2s ease !important;
}

header.nav .flex.items-center.gap-3 a[href*="get-started"]:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 16px rgba(59, 130, 246, 0.3) !important;
}

header.nav .flex.items-center.gap-3 a[href*="get-started"]:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 6px rgba(59, 130, 246, 0.2) !important;
}

/* =========================================
   7. SIGN IN LINK — Clean text button
   ========================================= */
header.nav a[href*="login"] {
    color: var(--nav-text) !important;
    text-shadow: none;
    padding: 6px 12px !important;
    border-radius: 8px;
    border: none;
    transition: all 0.15s ease !important;
}

header.nav a[href*="login"]:hover {
    color: var(--nav-text-hover) !important;
    background: rgba(0, 0, 0, 0.03);
    border-color: transparent;
    text-shadow: none;
}

/* =========================================
   8. LOGO — Clean, no engraving
   ========================================= */
header.nav .text-lg.font-bold {
    color: #0F172A !important;
    text-shadow: none;
}

header.nav .size-8 {
    box-shadow: none !important;
}

/* =========================================
   9. PERSPECTIVE for dropdown
   ========================================= */
header.nav .group {
    perspective: none;
}

/* =========================================
   10. STATUS WIDGET — Clean minimal pill
   Retains the green beacon + text slide
   interaction but with refined styling
   ========================================= */

:root {
    --status-bg: #FFFFFF;
    --status-surface: #FFFFFF;
    --status-border: #E2E8F0;
    --status-highlight: #CBD5E1;
    --status-accent-green: #22C55E;
    --status-accent-glow: rgba(34, 197, 94, 0.3);
    --status-text-main: #334155;
    --status-text-muted: #94A3B8;
}

.status-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 10px;
    background: var(--status-bg);
    border: 1px solid var(--status-border);
    border-radius: 9999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: none;
    user-select: none;
}

.status-widget:hover {
    border-color: var(--status-highlight);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: none;
}

/* Scanning laser — made more subtle */
.status-scanline {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.015),
        transparent
    );
    transform: skewX(-20deg);
    pointer-events: none;
    animation: status-scan 8s linear infinite;
}

/* Beacon orb */
.status-beacon {
    position: relative;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-beacon-core {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--status-accent-green);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 6px var(--status-accent-glow);
}

.status-beacon-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--status-accent-green);
    opacity: 0.4;
    animation: status-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Text slide interaction */
.status-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 14px;
    overflow: hidden;
    position: relative;
}

.status-text-primary,
.status-text-secondary {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    white-space: nowrap;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.status-text-primary {
    color: var(--status-text-main);
    letter-spacing: -0.01em;
}

.status-text-secondary {
    position: absolute;
    top: 100%;
    left: 0;
    color: var(--status-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.status-widget:hover .status-text-primary {
    transform: translateY(-150%);
    opacity: 0.4;
}

.status-widget:hover .status-text-secondary {
    transform: translateY(-100%);
    color: var(--status-text-main);
}

/* Animations */
@keyframes status-pulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes status-scan {
    0% { left: -100%; }
    15% { left: 200%; }
    100% { left: 200%; }
}

/* =========================================
   11. ACCESSIBILITY: Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .nav-links > a,
    .nav-links .nav-dropdown-btn,
    button.nav-hamburger,
    .nav-dropdown a,
    .nav-links.open a {
        transition-duration: 0.01ms !important;
    }
    .status-beacon-ring {
        animation: none;
    }
    .status-scanline {
        animation: none;
        display: none;
    }
}