/*
 * Site header
 *
 * Extracted from the inline <style> blocks that used to sit in
 * template-parts/header-homev2.php and header-top-bar.php. Those were re-sent
 * on every page load, uncached and unminifiable. The only dynamic values were
 * three colours, which the template now emits as custom properties:
 *
 *   --pahla-primary        the brand colour
 *   --pahla-sec-nav-text   secondary navigation text
 *   --pahla-header-text    header text / icons
 *
 * Rule order is preserved from the originals: top bar first, then the three
 * header blocks in the order they appeared.
 */

.top-bar-v2 .flex-1 {
        flex: 1;
    }

    .top-bar-v2 .flex-2 {
        flex: 2;
    }

    .promo-slider-container {
        position: relative;
        height: 20px;
        overflow: hidden;
    }

    .promo-slider-track {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: top 0.5s ease-in-out;
    }


                                    #header-search-cat-dropdown {
                                        width: 150px;
                                        cursor: pointer;
                                        font-size: 13px;
                                        color: #666;
                                        appearance: none;
                                        /* Custom arrow if needed, but form-select handles it usually */
                                        padding-right: 25px;
                                        /* Space for arrow */
                                    }

                                    #header-search-cat-dropdown:focus {
                                        outline: none;
                                        box-shadow: none;
                                    }
                                

        /* Global Overflow Fix */
        body {
            overflow-x: hidden;
            max-width: 100%;
            position: relative;
        }

        /* Drawer Base (Shared) */
        .drawer-menu-custom {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .drawer-menu-custom li {
            border-bottom: 1px solid #f2f5f8;
            position: relative;
        }

        .drawer-menu-custom>li:last-child {
            border-bottom: 0;
        }

        .drawer-menu-custom li a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 13px 20px;
            color: #2b3b4f;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            /* An edge bar rather than a padding shift, so nothing reflows
               under the pointer as you move down the list. */
            border-left: 3px solid transparent;
            transition: background .18s ease, color .18s ease, border-color .18s ease;
        }

        .drawer-menu-custom li a:hover,
        .drawer-menu-custom li a:focus-visible {
            background: #f7faff;
            color: var(--pahla-primary);
            border-left-color: var(--pahla-primary);
        }

        .drawer-menu-custom li.current-menu-item>a {
            color: var(--pahla-primary);
            border-left-color: var(--pahla-primary);
            background: #f7faff;
        }

        /* Dropdown Toggles */
        .drawer-dropdown-toggle {
            width: 40px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;
            border-left: 1px solid #f5f5f5;
            cursor: pointer;
            z-index: 5;
        }

        .drawer-dropdown-toggle i {
            transition: transform 0.3s ease;
            font-size: 12px;
            color: #999;
        }

        .drawer-dropdown-toggle.active i {
            transform: rotate(180deg);
            color: var(--pahla-primary);
        }

        /* Submenus */
        .drawer-menu-custom .dropdown-menu,
        .drawer-menu-custom .sub-menu {
            display: none;
            position: static !important;
            float: none !important;
            width: 100% !important;
            box-shadow: none !important;
            border: none;
            background: #fcfcfc;
            margin: 0;
            padding: 0;
            transform: none !important;
        }

        .drawer-menu-custom .dropdown-menu.show,
        .drawer-menu-custom .sub-menu.show {
            display: block;
        }

        .drawer-menu-custom .dropdown-menu li a,
        .drawer-menu-custom .sub-menu li a {
            padding-left: 35px;
            font-weight: 400;
            color: #555;
            font-size: 13px;
        }

        .drawer-menu-custom .dropdown-menu li li a,
        .drawer-menu-custom .sub-menu li li a {
            padding-left: 50px;
        }

        /* GLOBAL DRAWER STYLING */
        .global-drawer,
        .desktop-drawer,
        .mobile-drawer {
            position: fixed;
            top: 0;
            left: 0;
            width: 330px;
            max-width: 86vw;
            /* dvh so the panel is not cut off by mobile browser chrome. */
            height: 100dvh;
            background: #fff;
            z-index: 999999;
            /* transform rather than `left`: it is composited, so the slide
               cannot stutter against a layout pass mid-animation. */
            transform: translateX(-100%);
            transition: transform .32s cubic-bezier(.22, 1, .36, 1);
            box-shadow: 8px 0 32px rgba(15, 32, 58, .18);
            overflow-y: auto;
            /* Stops the page behind scrolling once the drawer hits its end. */
            overscroll-behavior: contain;
            visibility: hidden;
        }

        @media (max-width: 576px) {

            .global-drawer,
            .mobile-drawer {
                width: 300px;
            }
        }

        .global-drawer.active,
        .desktop-drawer.active,
        .mobile-drawer.active {
            transform: translateX(0);
            visibility: visible;
        }

        .drawer-close i {
            transition: transform 0.4s ease;
            font-size: 1.2rem;
        }

        .drawer-close:hover i {
            transform: rotate(90deg);
            color: var(--pahla-primary);
        }

        .drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 18px 20px;
            border-bottom: 1px solid #edf1f5;
            background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .drawer-close {
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #dbe4ef;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            color: #5a6b80;
            transition: border-color .2s ease, color .2s ease;
        }

        .drawer-close:hover {
            border-color: var(--pahla-primary);
            color: var(--pahla-primary);
        }

        .drawer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 20, 33, .45);
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
            z-index: 999998;
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s ease, visibility .3s ease;
        }

        .drawer-backdrop.active {
            opacity: 1;
            visibility: visible;
        }
    

        /* Main Nav Links */
        /* Main Nav Links & Layout */
        .secondary-nav ul {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
            width: 100%;
        }

        /* Push the last item to the right */
        .secondary-nav .nav>li:last-child {
            margin-left: auto;
        }

        .secondary-nav li {
            list-style: none;
        }

        .secondary-nav a,
        .secondary-nav .menu-item a {
            color: var(--pahla-sec-nav-text) !important;
            font-weight: 700 !important;
            /* BOLD */
            font-size: 14px;
            padding: 0 18px;
            text-transform: uppercase;
            /* UPPERCASE */
            letter-spacing: 0.5px;
            text-decoration: none;
            display: inline-block;
            transition: color 0.2s;
        }

        .secondary-nav a:hover,
        .secondary-nav .menu-item a:hover {
            color: var(--pahla-primary) !important;
        }

        /* Dropdown Indicators */
        .secondary-nav .menu-item-has-children>a {
            padding-right: 5px !important;
            display: inline-flex !important;
            align-items: center;
        }

        .secondary-nav .menu-item-has-children>a::after {
            content: '\f078';
            /* fa-chevron-down */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            margin-left: 8px;
            font-size: 11px;
            color: #bbb;
        }

        /* Dropdowns for Main Nav */
        .secondary-nav .menu-item {
            position: relative;
        }

        /* Dropdown Menu Style */
        .secondary-nav .sub-menu,
        .secondary-nav .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            /* Sized to its widest item rather than a fixed 220px. At 220px,
               minus 50px of link padding, a name like "American Football
               Uniforms" had 170px for text that needs about 230px, so every
               longer category wrapped onto two lines. */
            width: max-content;
            min-width: 220px;
            max-width: min(420px, 90vw);
            /* Matches the bar it drops out of, rather than being fixed white. */
            background: var(--pahla-sec-nav-bg, #fff);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
            padding: 15px 0;
            z-index: 1000;
            border-radius: 0 0 8px 8px;
            list-style: none;
            margin: 0;
        }

        /* Now that the panel grows to fit, the last item's dropdown would hang
           off the right edge -- anchor that one to the right instead. */
        .secondary-nav .nav>li:last-child>.sub-menu,
        .secondary-nav .nav>li:last-child>.dropdown-menu {
            left: auto;
            right: 0;
        }

        .secondary-nav .menu-item:hover>.sub-menu,
        .secondary-nav .menu-item:hover>.dropdown-menu {
            display: block;
            animation: fadeInPos 0.2s ease-out;
        }

        .secondary-nav .sub-menu li a {
            display: block;
            padding: 10px 25px;
            white-space: nowrap;
            /* Follows the bar's text colour, so it stays readable whether the
               dropdown ends up light or dark. */
            color: var(--pahla-sec-nav-text, #555);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: background .2s ease, color .2s ease, padding-left .2s ease;
        }

        .secondary-nav .sub-menu li a:hover,
        .secondary-nav .sub-menu li a:focus-visible {
            /* A tint of the text colour rather than a fixed grey: on a light
               panel it darkens, on a dark one it lightens, so one rule works
               for any background the user picks. */
            background: color-mix(in srgb, var(--pahla-sec-nav-text, #555) 12%, transparent);
            color: var(--pahla-primary);
            padding-left: 30px;
        }

        @keyframes fadeInPos {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- Vertical Mega Menu Core Styles --- */
        .vertical-menu-dropdown {
            display: none;
            border-top: 1px solid #eee;
        }

        .vertical-menu-wrapper:hover .vertical-menu-dropdown {
            display: block;
        }

        /* Top Level Items */
        .vertical-menu-list>li {
            position: static;
            /* Vital for full-height flyout alignment */
            border-bottom: 1px solid #eee;
        }

        .vertical-menu-list {
            position: relative;
            /* Context for submenu positioning */
        }

        .vertical-menu-list>li:last-child {
            border-bottom: none;
        }

        .vertical-menu-list>li>a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            color: #555;
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            transition: 0.2s;
        }

        .vertical-menu-list>li>a:hover {
            color: var(--pahla-primary);
            background-color: #f8f8f8;
            padding-left: 25px;
        }

        /* Add arrow if children exist */
        .vertical-menu-list>li.menu-item-has-children>a::after {
            content: '\f054';
            /* fa-chevron-right */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 10px;
            color: #ccc;
        }

        /* --- The Mega FLYOUT Panel --- */
        .vertical-menu-list>li>ul.sub-menu {
            display: none;
            /* Hidden by default */
            position: absolute;
            top: 0;
            /* Aligns with top of .vertical-menu-list */
            left: 100%;
            /* Right side */
            width: 800px;
            /* Fixed wide width for layout */
            min-height: 100%;
            /* Matches height of the department list, but is allowed to grow.
               Do NOT set `height: 100%` here: this panel is a multi-column box
               (column-count below), and a fixed height forces any content that
               does not fit into *extra* columns that run off the right-hand
               side of the panel. With a short department list the panel becomes
               only ~100px tall and the level-3 links spill sideways instead of
               stacking under their heading. */
            background: #fff;
            box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            border-left: 1px solid #eee;
            border-top: 2px solid var(--pahla-primary);
            /* Dynamic Primary Color Border */
            z-index: 101;

            /* Column Layout */
            column-count: 3;
            column-gap: 30px;
            align-content: start;
        }

        /* Show Flyout on Hover */
        .vertical-menu-list>li:hover>ul.sub-menu {
            display: block;
        }

        /* Level 2 Items (Column Headers) */
        .vertical-menu-list>li>ul.sub-menu>li {
            break-inside: avoid;
            /* Prevent split columns */
            margin-bottom: 25px;
            display: block;
        }

        .vertical-menu-list>li>ul.sub-menu>li>a {
            font-weight: 700;
            color: #333;
            font-size: 14px;
            margin-bottom: 10px;
            display: block;
            text-decoration: none;
            border-bottom: 1px solid #eee;
            /* Electro style underline */
            padding-bottom: 8px;
        }

        /* Level 3 Items (The Links) */
        .vertical-menu-list>li>ul.sub-menu>li>ul.sub-menu {
            padding-left: 0;
            list-style: none;
            margin-top: 10px;
        }

        .vertical-menu-list>li>ul.sub-menu>li>ul.sub-menu>li {
            margin-bottom: 5px;
        }

        .vertical-menu-list>li>ul.sub-menu>li>ul.sub-menu>li>a {
            color: #777;
            font-size: 13px;
            text-decoration: none;
            transition: color 0.2s;
        }

        .vertical-menu-list>li>ul.sub-menu>li>ul.sub-menu>li>a:hover {
            color: var(--pahla-primary);
        }

        .site-header-v2 .nav-link {
            color: var(--pahla-header-text) !important;
            font-weight: 500;
            font-size: 0.9rem;
            margin: 0 10px;
        }

        /* The drawer panel is white whatever the header palette is, so its links
           must NOT take the header's text colour. The drawer markup sits inside
           .site-header-v2 and WP_Bootstrap_Navwalker puts .nav-link on every
           link, so the rule above was reaching in and painting them
           --pahla-header-text -- which on a dark header is white, and the whole
           menu went white on white. It uses !important, so outranking it takes
           !important back. */
        .site-header-v2 .global-drawer .nav-link,
        .site-header-v2 .desktop-drawer .nav-link,
        .site-header-v2 .mobile-drawer .nav-link,
        .global-drawer .drawer-menu-custom li a,
        .desktop-drawer .drawer-menu-custom li a,
        .mobile-drawer .drawer-menu-custom li a {
            color: #2b3b4f !important;
            margin: 0;
        }

        .site-header-v2 .global-drawer .nav-link:hover,
        .site-header-v2 .global-drawer .nav-link:focus-visible,
        .global-drawer .drawer-menu-custom li a:hover,
        .global-drawer .drawer-menu-custom li a:focus-visible,
        .global-drawer .drawer-menu-custom li.current-menu-item>a,
        .desktop-drawer .drawer-menu-custom li a:hover,
        .mobile-drawer .drawer-menu-custom li a:hover {
            color: var(--pahla-primary) !important;
        }

        /* Sub-items are deliberately lighter than top-level ones, which is the
           only thing marking the depth once they are indented. The rule above
           matches them too (li a is any depth), so restore it afterwards. */
        .global-drawer .drawer-menu-custom .dropdown-menu li a,
        .global-drawer .drawer-menu-custom .sub-menu li a,
        .desktop-drawer .drawer-menu-custom .dropdown-menu li a,
        .desktop-drawer .drawer-menu-custom .sub-menu li a,
        .mobile-drawer .drawer-menu-custom .dropdown-menu li a,
        .mobile-drawer .drawer-menu-custom .sub-menu li a {
            color: #555 !important;
        }

        .global-drawer .drawer-menu-custom .dropdown-menu li a:hover,
        .global-drawer .drawer-menu-custom .sub-menu li a:hover {
            color: var(--pahla-primary) !important;
        }

        /* The chevron on a parent item is a sibling of the link, so it misses
           the rules above and would keep the header colour. */
        .global-drawer .drawer-dropdown-toggle i,
        .desktop-drawer .drawer-dropdown-toggle i,
        .mobile-drawer .drawer-dropdown-toggle i {
            color: #6b7a8d;
        }

        /* Drawer Styles */
        .mobile-drawer {
            position: fixed;
            top: 0;
            left: -300px;
            width: 280px;
            height: 100vh;
            background: #fff;
            z-index: 10005;
            transition: left 0.3s ease;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            visibility: hidden;
        }

        .mobile-drawer.active {
            left: 0;
            visibility: visible;
        }



        .drawer-menu-custom li {
            border-bottom: 1px solid #f1f1f1;
        }

        .drawer-menu-custom li a {
            display: block;
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
        }

        .drawer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10004;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
        }


/* ------------------------------------------------------------------
   Sizing and behaviour driven by the Customizer (Header > Main Header Bar).
   Values arrive as custom properties from the header template.
   ------------------------------------------------------------------ */
.site-header-v2 {
    padding: 0;
    margin: 0;
}

.site-header-v2 .header-inner-flex {
    height: var(--pahla-header-height, 70px);
}

/* Logo is capped by both the setting and the bar, so raising the logo height
   can never push it out of the header. */
.site-header-v2 .header-logo .custom-logo,
.site-header-v2 .header-logo img {
    max-height: min(var(--pahla-logo-height, 48px), calc(var(--pahla-header-height, 70px) - 12px));
    width: auto;
}

.site-header-v2 .mobile-logo img {
    max-height: calc(var(--pahla-logo-height, 48px) * 0.8);
    width: auto;
}

.site-header-v2.is-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* The shadow was an on/off .has-shadow class pinned to one fixed value. It is
   now a strength chosen in the Customizer, written into --pahla-header-shadow
   on the element itself; `none` is a real box-shadow value, so no class is
   needed to switch it off. The old class is still honoured below for any
   header markup that has not been updated. */
.site-header-v2 {
    box-shadow: var(--pahla-header-shadow, none);
}

.site-header-v2.has-shadow:not([style*="--pahla-header-shadow"]) {
    box-shadow: 0 2px 10px rgba(15, 32, 58, 0.10);
}

/* ------------------------------------------------------------------
   Full-screen search

   style.css gives this z-index: 20, but the mobile header sits at 1000
   and a sticky header at 1020 -- so the header painted straight over the
   overlay and its close button, which is why the X appeared to be stuck
   underneath the header bar. It has to sit above the whole header stack,
   and above the drawer (999999) since search can be opened from it.
   ------------------------------------------------------------------ */
body .full-screen-search {
    z-index: 1000010;
}

/* A proper tap target, clear of the notch on phones that have one. */
body .full-screen-search .search-close {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

body .full-screen-search .search-close:hover {
    background: #fff;
    border-color: #fff;
    color: #111;
    transform: rotate(90deg);
}

body .full-screen-search .search-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* The field is 3rem in home-v1-premium.css, which overflows a phone. */
@media (max-width: 575px) {
    body .full-screen-search .search-input {
        font-size: 1.6rem !important;
    }

    body .full-screen-search .search-close {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}