/* =========================================================
   MegVolt Tech Website
   Version: 0.2 — Modular Rebuild

   File:
   /assets/css/header.css

   Purpose:
   - Global dark corporate header
   - Desktop navigation
   - Request a Quote CTA
   - Mobile navigation
   - Mobile menu toggle

   Dependency:
   /assets/css/main.css
   ========================================================= */


/* =========================================================
   1. SITE HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    width: 100%;

    background: rgba(17, 17, 17, 0.97);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   2. HEADER CONTAINER
   ========================================================= */

.site-header__container {
    display: flex;
    align-items: center;

    min-height: 86px;
}


/* =========================================================
   3. BRAND / LOGO
   ========================================================= */

.site-brand {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    margin-right: clamp(2rem, 3vw, 4rem);
}

.site-brand__logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 205px;
    max-height: 58px;

    object-fit: contain;
}


/* =========================================================
   4. DESKTOP NAVIGATION
   ========================================================= */

.site-nav {
    display: flex;
    align-items: center;

    flex: 1 1 auto;

    min-width: 0;
}

.site-nav__list {
    display: flex;
    align-items: center;

    gap: clamp(1.1rem, 1.7vw, 2rem);

    list-style: none;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 86px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;

    white-space: nowrap;

    transition:
        color var(--transition-fast);
}


/* Red underline */

.site-nav__link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: var(--color-red);

    transform: scaleX(0);
    transform-origin: center;

    transition:
        transform var(--transition-base);
}


.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--color-white);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
    transform: scaleX(1);
}


/* =========================================================
   5. HEADER ACTIONS
   ========================================================= */

.site-header__actions {
    display: flex;
    align-items: center;

    gap: var(--space-4);

    flex: 0 0 auto;

    margin-left: auto;

    padding-left: clamp(1.25rem, 2vw, 2.5rem);
}

.site-header__quote {
    min-height: 46px;

    padding-inline: 1.4rem;

    white-space: nowrap;

    box-shadow:
        0 7px 20px rgba(215, 25, 32, 0.23);
}

.site-header__quote:hover {
    box-shadow:
        0 9px 26px rgba(215, 25, 32, 0.34);
}


/* =========================================================
   6. MOBILE MENU TOGGLE
   ========================================================= */

.site-nav-toggle {
    display: none;

    position: relative;

    width: 46px;
    height: 46px;

    padding: 0;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    color: var(--color-white);

    background: transparent;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.site-nav-toggle:hover {
    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        rgba(255, 255, 255, 0.4);
}

.site-nav-toggle__line {
    display: block;

    width: 21px;
    height: 2px;

    background: currentColor;

    transition:
        transform var(--transition-base),
        opacity var(--transition-fast);
}


/* Open-state hamburger animation */

.site-nav-toggle.is-active .site-nav-toggle__line:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.site-nav-toggle.is-active .site-nav-toggle__line:nth-child(2) {
    opacity: 0;
}

.site-nav-toggle.is-active .site-nav-toggle__line:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   7. MOBILE NAVIGATION
   ========================================================= */

.mobile-nav {
    display: none;

    width: 100%;

    background: #111111;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28);
}

.mobile-nav.is-open {
    display: block;
}

.mobile-nav .container {
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
}

.mobile-nav__list {
    list-style: none;

    margin-bottom: var(--space-5);
}

.mobile-nav__list li {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.mobile-nav__link {
    display: flex;
    align-items: center;

    min-height: 52px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.95rem;
    font-weight: 650;

    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
    color: var(--color-white);

    padding-left: 5px;
}

.mobile-nav__quote {
    width: 100%;
}


/* =========================================================
   8. INTERMEDIATE DESKTOP
   ========================================================= */

@media (max-width: 1360px) {

    .site-brand {
        margin-right: 2rem;
    }

    .site-brand__logo {
        max-width: 180px;
        max-height: 54px;
    }

    .site-nav__list {
        gap: 1.2rem;
    }

    .site-nav__link {
        font-size: 0.82rem;
    }

    .site-header__actions {
        padding-left: 1.5rem;
    }

    .site-header__quote {
        padding-inline: 1.15rem;
    }

}


/* =========================================================
   9. TABLET / MOBILE NAV BREAKPOINT
   ========================================================= */

@media (max-width: 1180px) {

    .site-header__container {
        min-height: 76px;
    }

    .site-brand {
        margin-right: auto;
    }

    .site-brand__logo {
        max-width: 185px;
        max-height: 52px;
    }

    .site-nav {
        display: none;
    }

    .site-header__actions {
        margin-left: auto;
        padding-left: var(--space-4);
    }

    .site-nav-toggle {
        display: flex;
    }

}


/* =========================================================
   10. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .site-header__container {
        min-height: 70px;
    }

    .site-brand__logo {
        max-width: 160px;
        max-height: 46px;
    }

    .site-header__quote {
        display: none;
    }

    .site-header__actions {
        padding-left: var(--space-3);
    }

    .site-nav-toggle {
        width: 44px;
        height: 44px;
    }

}


/* =========================================================
   11. SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .site-brand__logo {
        max-width: 145px;
        max-height: 42px;
    }

    .site-header__container {
        min-height: 66px;
    }

    .site-nav-toggle {
        width: 42px;
        height: 42px;
    }

}