/* ====================================================== DESKTOP HEADER SCROLL BEHAVIOR ====================================================== */

/* OVERRIDE Bootstrap default column behavior */
.header-navbar .navbar-nav.desktop-nav {
    display: flex;
    flex-direction: row;   /* 🔥 THIS FIXES IT */
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
}

#desktopHeader {
    position: sticky;
    top: 0;
    z-index: var(--bs-zindex-sticky);
    transition: transform 0.35s ease;
}

/* FULL HIDE */
.header-hidden {
    transform: translateY(-100%);
}

/* ---------------- COMPACT MODE ---------------- */
/* Hide topbar smoothly */
.header-compact .topbar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hide quick links smoothly */
.header-compact .quick-links {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    border: 0 !important;
    transition: all 0.3s ease;
}

/* Logo shrink */
.header-compact .header-logo img {
    max-height: 52px;
    transition: max-height 0.3s ease;
}

/* Normal logo */
.header-logo img {
    max-height: 80px;
    transition: max-height 0.3s ease;
}

/* ================= QUICK LINKS HOVER ================= */
/* ---------------------------------------------------------
   QUICK LINKS – ENHANCED HOVER & UX
--------------------------------------------------------- */

.quick-links a {
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.2s ease;
}

/* Text links */
.quick-links a.text-secondary {
    position: relative;
    padding: 4px 6px;
    border-radius: 4px;
}

/* Hover + Focus */
.quick-links a.text-secondary:hover,
.quick-links a.text-secondary:focus {
    color: var(--bs-info) !important;
    background-color: rgba(var(--bs-info-rgb), 0.08);
    transform: translateY(-1px);
}

/* Icon color sync */
.quick-links a.text-secondary:hover i,
.quick-links a.text-secondary:focus i {
    color: var(--bs-info) !important;
}

/* Underline slide effect */
.quick-links a.text-secondary::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--bs-info);
    transition: width 0.25s ease;
}

.quick-links a.text-secondary:hover::after {
    width: calc(100% - 12px);
}

/* Keyboard accessibility */
.quick-links a:focus-visible {
    outline: 2px solid var(--bs-info);
    outline-offset: 2px;
}

/* Active state (current page) */
.quick-links a.active {
    color: var(--bs-primary) !important;
    font-weight: 500;
}

/* Apply Now button */
.quick-links .btn-primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-links .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb), 0.3);
}


.quick-links a.text-secondary {
    position: relative;
}

.quick-links a.text-secondary::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: var(--bs-primary);
    transition: width 0.25s ease;
}

.quick-links a.text-secondary:hover::after {
    width: 100%;
}



/* ================= HEADER BASE ================= */

.header-navbar {
    display: flex;
    justify-content: flex-end;
}

/* FORCE SINGLE ROW + 2px SPACING */
.header-navbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    list-style: none;
}

.header-navbar .nav-item {
    position: relative;
}

/* ================= LINKS ================= */

.header-navbar .nav-link {
    padding: 0.55rem 0.75rem;
    font-weight: 500;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
}

.header-navbar .nav-link:hover,
.header-navbar .nav-link.active {
    color: var(--bs-primary);
}

/* ================= DROPDOWNS ================= */

.header-navbar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding: 0.25rem 0;
    z-index: 1050;
}

/* Show dropdown */
.header-navbar .nav-item:hover > .dropdown-menu {
    display: block;
}

/* 🔁 FLIP TOP-LEVEL DROPDOWN */
.header-navbar .dropdown-menu.open-left {
    left: auto;
    right: 0;
}

/* ================= DROPDOWN ITEMS ================= */

.header-navbar .dropdown-item {
    padding: 0.55rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
}

/* .header-navbar .dropdown-item:hover {
    background-color: var(--bs-info);
    color: var(--bs-light);
} */

.header-navbar .dropdown-item:hover {
    background-color: var(--bs-info);   /* Primary highlight color */
    color: var(--bs-light);             /* Text color on hover */
    border-radius: 0.25rem;             /* Rounded corners */
    padding-left: 1rem;                 /* Optional: slight padding for better spacing */
    padding-right: 1rem;
    transition: 
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease;            /* Smooth subtle movement */
    transform: translateX(2px);         /* Slight slide effect on hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}



/* ================= MULTI LEVEL ================= */

.dropdown-submenu {
    position: relative;
}

/* Default → open RIGHT */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    display: none;
}

/* 🔁 FLIP SUBMENU LEFT */
.dropdown-submenu > .dropdown-menu.open-left {
    left: auto;
    right: 100%;
}

/* Show submenu */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* ================= ARROWS ================= */

/* Default → right */
.dropdown-submenu > a::after {
    content: "▶";
    float: right;
    font-size: 0.65rem;
    opacity: 0.6;
}

/* Flip ← left */
.dropdown-submenu.arrow-left > a::after {
    content: "◀";
}




/* ******************************************************************* */


/* ================= MEGAMENU ================= */

.has-megamenu {
    position: static;
}

/* FULL WIDTH – FIXED TO VIEWPORT */
.header-navbar .megamenu {
    position: fixed;
    left: 0;
    right: 0;

    /* 🔥 IMPORTANT */
    top: var(--navbar-height);

    /* width: 100vw;
    max-width: 100vw; */
      width: 98%;
    max-width: 98%;
    margin-left: 1%;
    margin-right: 1%;

    display: none;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    z-index: 1050;
}

/* Show on hover */
.header-navbar .has-megamenu:hover > .megamenu {
    display: block;
}

/* Inner content */
.megamenu-row {
    /* max-width: 1200px; */
    margin: auto;
    padding: 1.75rem 2rem;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Column */
.megamenu-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Heading */
.megamenu-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--bs-dark);
}

/* Links */
.megamenu .dropdown-item {
    padding: 0.45rem 0;
}



/* *********************  Mobile Navbar: visible only on small screens *************************************** */
/* Sticky mobile navbar */
.mobile-navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
}

/* Navbar links */
.mobile-navbar .nav-link {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Submenu styling */
.mobile-navbar .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 1rem;
}

/* Show submenu */
.mobile-navbar .submenu.show {
    max-height: 1000px; /* large enough for animation */
}

/* Arrow styling */
.mobile-navbar .arrow {
    transition: transform 0.3s ease;
}

/* Rotate arrow when submenu open */
.mobile-navbar .submenu.show + .arrow,
.mobile-navbar .toggle-submenu.active .arrow {
    transform: rotate(90deg);
}

/* Nested indentation */
.mobile-navbar .submenu .submenu {
    padding-left: 1.5rem;
}
.mobile-navbar .submenu .submenu .submenu {
    padding-left: 2rem;
}

/* Scrollable menu if too tall */
.mobile-navbar .collapse {
    max-height: 80vh;
    overflow-y: auto;
}

/* Hamburger icon tweaks */
.mobile-navbar .navbar-toggler {
    border: none;
}