/* =========================================================
   NEXA TECH LAB — HEADER & NAVIGATION
   Project: Welcome Oven
   File: header.css

   Includes:
   - Sticky header
   - Desktop navigation
   - Products mega menu
   - Header CTA
   - Mobile navigation
   - Mobile menu button
   ========================================================= */


/* =========================================================
   1. HEADER BASE
   ========================================================= */

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

    width: 100%;

    background-color: var(--color-white);

    box-shadow: var(--shadow-header);
}


/* =========================================================
   2. HEADER INNER
   ========================================================= */

.ntl-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 82px;

    gap: 32px;
}


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

.ntl-header-logo {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    flex-shrink: 0;

    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: var(--font-weight-bold);

    line-height: 1;
}

.ntl-logo {
    display: block;
    width: auto;
    height: 48px;
    max-width: 180px;
    object-fit: contain;
}

/* Logo — Primary */

.ntl-logo-primary {
    color: var(--color-primary);
}


/* Logo — Secondary */

.ntl-logo-secondary {
    color: var(--color-secondary);
}


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

.ntl-desktop-nav {
    display: flex;
    align-items: center;

    margin-left: auto;
}


.ntl-nav-list {
    display: flex;
    align-items: center;

    gap: 4px;
}


.ntl-nav-item {
    position: relative;
}


/* =========================================================
   5. NAVIGATION LINKS
   ========================================================= */

.ntl-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 48px;
    padding: 10px 13px;

    color: var(--color-dark-grey);

    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-medium);

    white-space: nowrap;

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal);
}


.ntl-nav-link:hover {
    color: var(--color-primary);
}


/* =========================================================
   6. NAVIGATION DROPDOWN TOGGLE
   ========================================================= */

.ntl-nav-dropdown-toggle {
    background: transparent;
}


/* Dropdown Icon */

.ntl-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    color: var(--color-primary);

    font-size: 18px;
    font-weight: var(--font-weight-regular);

    line-height: 1;

    transition:
        transform var(--transition-normal),
        color var(--transition-normal);
}


/* Active dropdown */

.ntl-nav-item--has-mega-menu.is-open
.ntl-dropdown-icon {
    transform: rotate(45deg);
}


.ntl-nav-item--has-mega-menu.is-open
.ntl-nav-dropdown-toggle {
    color: var(--color-primary);
}

/* =========================================================
   ACTIVE NAVIGATION
   ========================================================= */

.ntl-nav-link.active {
    color: #F58220;
}

.ntl-nav-link.active::after {
    width: 100%;
}

/* =========================================================
   7. HEADER CTA
   ========================================================= */

.ntl-header-actions {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


/* =========================================================
   8. MEGA MENU
   ========================================================= */

.ntl-mega-menu {
    position: fixed;

    top: 82px;
    left: 0;

    z-index: var(--z-dropdown);

    width: 100%;

    background-color: var(--color-white);

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);
}


/* Mega menu open */

.ntl-nav-item--has-mega-menu.is-open
.ntl-mega-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   9. MEGA MENU INNER
   ========================================================= */

.ntl-mega-menu-inner {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(0, 1.6fr);

    gap: 60px;

    padding-block: 48px;
}


/* =========================================================
   10. MEGA MENU INTRO
   ========================================================= */

.ntl-mega-menu-intro {
    max-width: 360px;
}


.ntl-mega-menu-intro h2 {
    margin-bottom: 18px;

    font-size: 30px;
}


.ntl-mega-menu-intro p {
    margin-bottom: 28px;

    color: var(--color-dark-grey);

    font-size: 16px;
}


/* =========================================================
   11. MEGA MENU PRODUCT LIST
   ========================================================= */

.ntl-mega-menu-products {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}


/* =========================================================
   12. MEGA MENU PRODUCT ITEM
   ========================================================= */

.ntl-mega-product {
    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        24px;

    align-items: center;

    gap: 16px;

    padding: 20px;

    background-color: var(--color-white);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);

    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.ntl-mega-product:hover {
    background-color: var(--color-light-grey);

    border-color:
        rgba(15, 76, 129, 0.25);

    transform: translateY(-2px);

    box-shadow:
        var(--shadow-card);
}


/* =========================================================
   13. MEGA MENU PRODUCT NUMBER
   ========================================================= */

.ntl-mega-product-number {
    color: var(--color-secondary);

    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}


/* =========================================================
   14. MEGA MENU PRODUCT CONTENT
   ========================================================= */

.ntl-mega-product-content {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.ntl-mega-product-content strong {
    color: var(--color-black);

    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
}


.ntl-mega-product-content span {
    color: var(--color-dark-grey);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   15. MEGA MENU ARROW
   ========================================================= */

.ntl-mega-product-arrow {
    color: var(--color-primary);

    font-size: 20px;

    transition:
        transform var(--transition-normal),
        color var(--transition-normal);
}


.ntl-mega-product:hover
.ntl-mega-product-arrow {
    color: var(--color-secondary);

    transform: translateX(4px);
}


/* =========================================================
   16. MOBILE MENU TOGGLE
   ========================================================= */

.ntl-mobile-menu-toggle {
    display: none;

    position: relative;

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

    gap: 5px;

    width: 46px;
    height: 46px;

    padding: 0;

    background-color: transparent;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);

    cursor: pointer;
}


/* Hamburger Lines */

.ntl-mobile-menu-toggle span {
    display: block;

    width: 22px;
    height: 2px;

    background-color: var(--color-primary);

    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal);
}


/* =========================================================
   17. MOBILE MENU TOGGLE — ACTIVE
   ========================================================= */

.ntl-mobile-menu-toggle.is-active
span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.ntl-mobile-menu-toggle.is-active
span:nth-child(2) {
    opacity: 0;
}


.ntl-mobile-menu-toggle.is-active
span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   18. MOBILE NAVIGATION
   ========================================================= */

.ntl-mobile-navigation {
    display: none;
}


/* =========================================================
   19. MOBILE PRODUCT LIST
   ========================================================= */

.ntl-mobile-products-list {
    display: none;

    padding: 8px 0 8px 20px;

    border-left:
        2px solid var(--color-secondary);
}


.ntl-mobile-nav-item--products.is-open
.ntl-mobile-products-list {
    display: block;
}


/* =========================================================
   20. MOBILE PRODUCTS TOGGLE
   ========================================================= */

.ntl-mobile-products-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 16px 0;

    color: var(--color-dark-grey);

    background-color: transparent;

    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--font-weight-medium);

    text-align: left;
}


.ntl-mobile-dropdown-icon {
    color: var(--color-primary);

    font-size: 22px;

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


.ntl-mobile-nav-item--products.is-open
.ntl-mobile-dropdown-icon {
    transform: rotate(45deg);
}


/* =========================================================
   21. TABLET / MOBILE
   ========================================================= */

@media (max-width: 1100px) {

    .ntl-header-inner {
        min-height: 76px;
    }


    /* Hide Desktop Navigation */

    .ntl-desktop-nav,
    .ntl-header-actions {
        display: none;
    }


    /* Show Mobile Toggle */

    .ntl-mobile-menu-toggle {
        display: flex;
    }


    /* Mobile Navigation */

    .ntl-mobile-navigation {
        display: block;

        position: fixed;

        top: 76px;
        left: 0;

        z-index: var(--z-dropdown);

        width: 100%;
        height: calc(100vh - 76px);

        padding-block: 20px;

        overflow-y: auto;

        background-color: var(--color-white);

        border-top: 1px solid var(--color-border);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity var(--transition-normal),
            visibility var(--transition-normal),
            transform var(--transition-normal);
    }


    /* Mobile Navigation Open */

    .ntl-mobile-navigation.is-open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }


    /* Mobile Navigation List */

    .ntl-mobile-nav-list {
        display: flex;
        flex-direction: column;
    }


    /* Mobile Links */

    .ntl-mobile-nav-list > li > a {
        display: flex;
        align-items: center;

        width: 100%;

        padding: 16px 0;

        color: var(--color-dark-grey);

        border-bottom:
            1px solid var(--color-border);

        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: var(--font-weight-medium);

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


    .ntl-mobile-nav-list > li > a:hover {
        color: var(--color-primary);
    }


    /* Mobile CTA */

    .ntl-mobile-nav-cta {
        padding-top: 24px;
    }


    /* Mobile Product Links */

    .ntl-mobile-products-list li a {
        display: block;

        padding: 10px 0;

        color: var(--color-dark-grey);

        font-size: 15px;

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


    .ntl-mobile-products-list li a:hover {
        color: var(--color-primary);
    }

}


/* =========================================================
   22. SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {

    .ntl-header-inner {
        min-height: 70px;
    }


    .ntl-header-logo {
        font-size: 21px;
    }


    .ntl-mobile-navigation {
        top: 70px;

        height: calc(100vh - 70px);
    }

}