/**
 * Techrobotic — Brand Tokens + Header/Nav
 * Dark mode default. Same architecture as Techromatic's brand-tokens.css.
 */

:root {
    --mv-brand-primary: #3ACD48;
    --mv-brand-secondary: #3D3172;
}

/* Dark mode (default for Techrobotic) */
[data-theme="dark"],
:root:not([data-theme="light"]) {
    --mv-bg: #071A09;
    --mv-bg-elevated: #122e16;
    --mv-bg-surface: #163a1b;
    --mv-bg-badge: #1e4d24;
    --mv-bg-glass: rgba(7, 26, 9, 0.75);
    --mv-text: #FBFCEF;
    --mv-text-accent: #3ACD48;
    --mv-text-75: rgba(251, 252, 239, 0.75);
    --mv-text-60: rgba(251, 252, 239, 0.60);
    --mv-text-50: rgba(251, 252, 239, 0.50);
    --mv-text-40: rgba(251, 252, 239, 0.40);
    --mv-text-20: rgba(251, 252, 239, 0.20);
    --mv-border: rgba(251, 252, 239, 0.09);
    --mv-border-strong: rgba(251, 252, 239, 0.18);
}

/* Light mode (when user toggles) */
[data-theme="light"] {
    --mv-bg: #FBFCEF;
    --mv-bg-elevated: #f0f2e5;
    --mv-bg-surface: #f5f7ea;
    --mv-bg-badge: #BAD5BD;
    --mv-text: #0D2C11;
    --mv-text-accent: #3D3172;
    --mv-text-75: rgba(13, 44, 17, 0.75);
    --mv-text-60: rgba(13, 44, 17, 0.60);
    --mv-text-50: rgba(13, 44, 17, 0.50);
    --mv-text-40: rgba(13, 44, 17, 0.40);
    --mv-text-20: rgba(13, 44, 17, 0.20);
    --mv-border: rgba(13, 44, 17, 0.10);
    --mv-border-strong: rgba(13, 44, 17, 0.20);
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.mv-button--solid {
    background-color: var(--mv-brand-primary);
    color: #0D2C11;
    border-color: var(--mv-brand-primary);
}
.mv-button--solid:hover {
    background-color: #32b83e;
    border-color: #32b83e;
}

/* ═══════════════════════════════════════════════
   SITE WORDMARK
   ═══════════════════════════════════════════════ */
.site-branding .site-title {
    text-transform: lowercase;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.03em;
}

/* Hide theme toggle */
.theme-toggle { display: none !important; }

/* ═══════════════════════════════════════════════
   HEADER — nav centering + CTA
   Same architecture as Techromatic
   ═══════════════════════════════════════════════ */

/* Header pill — no shadow, subtle border, 1200px max */
.site-header {
    max-width: 1200px;
    box-shadow: none;
    border: 1px solid var(--mv-border);
}
.site-header.is-scrolled {
    box-shadow: none;
    border-color: var(--mv-border-strong);
}

/* Equal side zones */
.site-branding {
    flex: 1;
    pointer-events: none;
}
.site-branding > * {
    pointer-events: auto;
}
.site-header__actions {
    display: none;
}

/* Right-align nav links in the pill — desktop only */
@media (min-width: 1025px) {
    .main-navigation {
        flex: 1;
        justify-content: flex-end;
    }
    .main-navigation .menu {
        justify-content: flex-end;
    }
}

/* Nav link styling */
.main-navigation .menu-item > a {
    font-size: 14px;
    color: var(--mv-text-60);
}
.main-navigation .menu-item > a:hover {
    color: var(--mv-text);
}

/* Dropdown submenu */
.main-navigation .menu-item-has-children {
    position: relative;
}
/* Resources parent — looks non-clickable but hover still triggers dropdown */
.main-navigation .menu-item-has-children > a {
    cursor: default;
}
.main-navigation .menu-item-has-children > a:hover {
    background: none;
}
/* Invisible bridge so hover persists between parent and submenu */
.main-navigation .menu-item-has-children::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
}
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    padding: 8px;
    background: var(--mv-bg-glass, rgba(7, 26, 9, 0.75));
    border: 1px solid var(--mv-border);
    border-radius: 16px;
    backdrop-filter: blur(18px) saturate(200%);
    -webkit-backdrop-filter: blur(18px) saturate(200%);
    list-style: none;
    z-index: 100;
}
.main-navigation .menu-item-has-children:hover > .sub-menu {
    display: block;
}
.main-navigation .sub-menu .menu-item {
    border-bottom: none;
}
.main-navigation .sub-menu .menu-item > a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--mv-text-60);
    border-radius: 100px;
    white-space: nowrap;
}
.main-navigation .sub-menu .menu-item > a:hover {
    color: var(--mv-text);
    background: rgba(251, 252, 239, 0.05);
}

/* Hide CTA button everywhere — desktop and mobile */
.site-header__cta { display: none !important; }
.site-header__nav-cta { display: none !important; }

/* ═══════════════════════════════════════════════
   MOBILE NAV — same pattern as Techromatic
   Parent handles: hamburger, dropdown animation,
   glass panel, toggle logic. We override colors only.
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Reset equal-zones */
    .site-branding {
        flex: 0 0 auto;
        pointer-events: auto;
    }
    .site-header__actions {
        display: flex;
        flex: 0 0 auto;
        pointer-events: auto;
    }

    /* Dropdown menu padding */
    .main-navigation .menu {
        padding: 8px;
    }
    .main-navigation .menu-item {
        border-bottom: none;
    }
    .main-navigation .menu-item > a {
        border-radius: 100px;
        padding: 14px 20px;
    }
    .main-navigation .menu-item > a:hover {
        border-radius: 100px;
    }

    /* Mobile submenu — indent children under Resources */
    .main-navigation .sub-menu {
        display: block;
        position: static;
        transform: none;
        min-width: 0;
        padding: 0 0 0 20px;
        margin: 0;
        background: none;
        border: none;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        list-style: none;
    }
    .main-navigation .sub-menu .menu-item > a {
        padding: 12px 20px;
    }
}