/* =========================================================
   Paramount Looms - targeted responsive navbar fix
   Scope: header/nav only. Existing site layout/theme untouched.
========================================================= */

/* Keep the supplied logo proportional and crisp. */
.brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    overflow: visible;
}

.brand img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    max-height: 67px;
    object-fit: contain;
    object-position: left center;
}

/* The menu backdrop must disappear completely after closing. */
.nav-backdrop {
    z-index: 1490 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nav-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ---------------------------------------------------------
   LAPTOP / DESKTOP
   Keep the full navigation visible, including compact laptop
   widths. Tablet touch devices are overridden below.
--------------------------------------------------------- */
@media (min-width: 981px) {
    .nav-wrap {
        min-width: 0;
        flex-wrap: nowrap;
    }

    .mobile-toggle {
        display: none !important;
    }

    .main-nav {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .nav-cta {
        display: inline-flex !important;
        flex: 0 0 auto;
    }
}

/* Standard laptop widths: reduce spacing instead of hiding nav. */
@media (min-width: 981px) and (max-width: 1280px) {
    .nav-wrap {
        gap: 9px;
    }

    .brand {
        width: 154px;
        min-width: 154px;
    }

    .brand img {
        width: 154px;
        max-width: 154px;
        max-height: 58px;
    }

    .main-nav {
        gap: 0 !important;
        min-width: 0;
    }

    .nav-link {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 10.5px !important;
        letter-spacing: 0 !important;
    }

    .dropdown-toggle {
        gap: 3px !important;
    }

    .dropdown-toggle i {
        margin-left: 1px !important;
        font-size: 7px !important;
    }

    .nav-cta {
        min-height: 43px !important;
        padding: 0 11px !important;
        gap: 7px !important;
        font-size: 10px !important;
        white-space: nowrap;
    }

    .nav-cta i {
        font-size: 9px;
    }
}

/* Extra compact treatment for small laptop browser widths. */
@media (min-width: 981px) and (max-width: 1080px) {
    .nav-wrap {
        gap: 5px;
    }

    .brand {
        width: 128px;
        min-width: 128px;
    }

    .brand img {
        width: 128px;
        max-width: 128px;
        max-height: 49px;
    }

    .nav-link {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 9.4px !important;
    }

    .nav-cta {
        min-height: 40px !important;
        padding: 0 8px !important;
        gap: 5px !important;
        font-size: 9px !important;
    }

    .nav-cta i {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   TABLET + MOBILE
   Width <= 980px always uses menu. Touch-first tablets up to
   1280px also use the menu, while laptops retain full nav.
--------------------------------------------------------- */
@media (max-width: 980px), (max-width: 1280px) and (hover: none) and (pointer: coarse) {
    .nav-wrap {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .brand {
        width: 180px;
        min-width: 180px;
        margin-right: auto;
    }

    .brand img {
        width: 180px;
        max-width: 180px;
        height: auto;
    }

    .nav-cta {
        display: inline-flex !important;
        flex: 0 0 auto;
        order: 2;
        min-height: 42px;
        padding: 0 14px;
        gap: 8px;
        white-space: nowrap;
    }

    .mobile-toggle {
        display: grid !important;
        flex: 0 0 43px;
        width: 43px;
        height: 43px;
        margin-left: 0 !important;
        order: 3;
        position: relative;
        z-index: 1602;
    }

    .main-nav {
        position: fixed !important;
        z-index: 1600 !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(360px, 88vw) !important;
        max-width: 88vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 78px 18px 28px !important;
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #071a37 !important;
        box-shadow: -18px 0 42px rgba(0,0,0,.28) !important;
        transform: translateX(110%) !important;
        transition: transform .28s ease !important;
    }

    .main-nav.open {
        transform: translateX(0) !important;
    }

    .main-nav > .nav-link,
    .main-nav > .nav-dropdown > .nav-link {
        display: flex !important;
        width: 100% !important;
        min-height: 54px;
        align-items: center;
        justify-content: space-between;
        padding: 13px 6px !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        color: #eef4ff !important;
        font-size: 13px !important;
        text-align: left;
    }

    .main-nav > .nav-link::after,
    .main-nav > .nav-dropdown > .nav-link::after {
        display: none !important;
    }

    .nav-dropdown {
        display: block !important;
        width: 100%;
    }

    .main-nav .dropdown-menu,
    .main-nav .product-mega,
    .main-nav .compact-menu,
    .main-nav .company-menu {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px !important;
        display: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
        box-shadow: none !important;
        background: #122544 !important;
    }

    .main-nav .nav-dropdown.open > .dropdown-menu,
    .main-nav .nav-dropdown.open:hover > .dropdown-menu {
        display: block !important;
    }

    .main-nav .nav-dropdown:not(.open):hover > .dropdown-menu {
        display: none !important;
    }

    .main-nav .dropdown-kicker {
        color: #ff9b8e !important;
    }

    .main-nav .compact-menu > a,
    .main-nav .product-mega > a {
        color: #e9eef6 !important;
        border-color: rgba(255,255,255,.08) !important;
    }

    .main-nav .compact-menu > a:hover,
    .main-nav .product-mega > a:hover {
        background: rgba(255,255,255,.06) !important;
        color: #fff !important;
    }

    .main-nav .product-mega .menu-icon {
        background: rgba(255,255,255,.08) !important;
        color: #ff9b8e !important;
    }

    .main-nav .product-mega small {
        color: #acb8ca !important;
    }

    .main-nav .dropdown-toggle i {
        transition: transform .2s ease;
    }

    .main-nav .nav-dropdown.open > .dropdown-toggle i {
        transform: rotate(180deg);
    }
}

@media (max-width: 767px) {
    .nav-wrap {
        min-height: 70px;
        gap: 8px;
    }

    .brand {
        width: 142px;
        min-width: 142px;
    }

    .brand img {
        width: 142px;
        max-width: 142px;
        max-height: 53px;
    }

    .nav-cta {
        min-height: 39px;
        padding: 0 10px;
        font-size: 9.5px;
        gap: 6px;
    }

    .nav-cta i {
        width: 18px;
        height: 18px;
        font-size: 7px;
    }

    .mobile-toggle {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    .main-nav {
        width: min(330px, 88vw) !important;
        max-width: 88vw !important;
        padding: 72px 14px 24px !important;
    }
}

@media (max-width: 575px) {
    .nav-wrap {
        gap: 6px;
    }

    .brand {
        width: 126px;
        min-width: 126px;
    }

    .brand img {
        width: 126px;
        max-width: 126px;
        max-height: 47px;
    }

    .nav-cta {
        width: auto !important;
        height: 37px !important;
        min-height: 37px !important;
        padding: 0 9px !important;
        border-radius: 4px !important;
    }

    .nav-cta span {
        display: inline !important;
    }

    .nav-cta i {
        display: none !important;
    }

    .mobile-toggle {
        flex-basis: 37px;
        width: 37px;
        height: 37px;
        min-height: 37px;
    }

    .main-nav {
        width: min(310px, 88vw) !important;
        max-width: 88vw !important;
        padding: 68px 12px 22px !important;
    }
}

@media (max-width: 360px) {
    .brand {
        width: 116px;
        min-width: 116px;
    }

    .brand img {
        width: 116px;
        max-width: 116px;
    }

    .nav-cta {
        padding: 0 7px !important;
        font-size: 9px !important;
    }
}