/* ==========================================================================
   Navigation Styles (Kizhakku News Redesign)
   ========================================================================== */

.main-navigation-bar {
    background-color: var(--theme-gold, #C9A500);
    position: sticky;
    top: 0;
    z-index: 999;
    border-top: 1px solid rgba(255, 220, 50, 0.3);
    border-bottom: 3px solid var(--theme-accent, #8B0030);
    box-shadow: 0 2px 12px rgba(180, 140, 0, 0.3);
}

.main-navigation-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.nav-wrapper-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

/* Horizontal Primary Menu (Desktop) */
.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.primary-menu > li {
    position: relative;
}

.primary-menu > li > a {
    display: block;
    padding: 8px 14px;
    color: #111111 !important;
    font-family: var(--theme-font-heading);
    font-weight: 750;
    font-size: 0.88rem;
    letter-spacing: 0.1px;
    transition: var(--theme-transition);
    text-shadow: none;
}

.primary-menu > li > a:hover {
    color: var(--theme-accent, #8B0030) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.primary-menu > li > a.is-active,
.primary-menu > li.is-active > a,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-category-item > a,
.primary-menu > li.current_page_item > a,
.primary-menu > li.current-menu-ancestor > a {
    color: var(--theme-accent, #8B0030) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid var(--theme-accent, #8B0030) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

/* Multi-level & 3-Dots Dropdowns Overlay Box (Maroon Background, White Text, Yellow Category Lines) */
.primary-menu ul.sub-menu,
.primary-menu li.more-menu-item > ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #8B0030 !important; /* Maroon background */
    background: linear-gradient(145deg, #8B0030 0%, #5E0020 100%) !important;
    border: 2px solid #FFD700 !important; /* Yellow border line around box shape */
    border-top: 3px solid #FFD700 !important;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 6px 0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    border-radius: 8px !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 99999 !important;
}

.primary-menu li:hover > ul.sub-menu,
.primary-menu li.focus > ul.sub-menu,
.primary-menu li.more-menu-item:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* More Menu Item submenu alignment */
.primary-menu li.more-menu-item > ul.sub-menu {
    right: 0 !important;
    left: auto !important;
}

/* Yellow line between category items in dropdown box */
.primary-menu ul.sub-menu li {
    border-bottom: 1.5px solid #FFD700 !important; /* Yellow line between categories! */
}

.primary-menu ul.sub-menu li:last-child {
    border-bottom: none !important;
}

.primary-menu ul.sub-menu a,
.primary-menu li.more-menu-item ul.sub-menu a {
    display: block;
    padding: 11px 18px !important;
    color: #ffffff !important; /* Inside text is white */
    font-size: 0.9rem !important;
    font-weight: 750 !important;
    font-family: var(--theme-font-heading), sans-serif;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.primary-menu ul.sub-menu a:hover,
.primary-menu ul.sub-menu li.current-menu-item > a,
.primary-menu li.more-menu-item ul.sub-menu a:hover {
    background-color: rgba(255, 215, 0, 0.22) !important; /* Hover yellow glow tint */
    color: #FFD700 !important; /* Yellow text on hover */
    padding-left: 22px !important;
}

/* Mobile Toggle Hamburger button (Far Left) */
.menu-toggle {
    display: block; /* Visible on desktop as well to match Kizhakku layout if needed, or mobile only */
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 12px;
    position: relative;
}

.menu-toggle-box {
    display: inline-block;
    width: 20px;
    height: 14px;
    position: relative;
}

.menu-toggle-inner,
.menu-toggle-inner::before,
.menu-toggle-inner::after {
    width: 20px;
    height: 2.5px;
    background-color: #111111;
    position: absolute;
    transition: transform 0.15s ease, background-color 0.15s ease;
    border-radius: 2px;
}

.menu-toggle-inner {
    top: 50%;
    transform: translateY(-50%);
}

.menu-toggle-inner::before {
    content: "";
    top: -6px;
}

.menu-toggle-inner::after {
    content: "";
    bottom: -6px;
}

/* Open state for burger icon */
.menu-toggle[aria-expanded="true"] .menu-toggle-inner {
    background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-inner::before {
    transform: translate3d(0, 6px, 0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-inner::after {
    transform: translate3d(0, -6px, 0) rotate(-45deg);
}

/* Search Trigger Button (Far Right) */
.nav-search-trigger {
    background: transparent !important;
    border: none !important;
    color: #111111 !important;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    transition: var(--theme-transition);
    box-shadow: none !important;
}

.nav-search-trigger:hover,
.nav-search-trigger:focus,
.nav-search-trigger:active {
    background: transparent !important;
    border: none !important;
    color: #FFE0A0 !important;
    box-shadow: none !important;
}

/* Mobile Drawer Styles */
.mobile-navigation-drawer {
    position: fixed;
    top: 0;
    left: -100%; /* Side drawer on the left side */
    width: 320px;
    height: 100vh;
    background: linear-gradient(180deg, var(--theme-primary, #540016) 0%, var(--theme-accent, #8B0030) 100%);
    box-shadow: var(--theme-shadow-lg);
    z-index: 9999;
    padding: 24px 20px calc(80px + env(safe-area-inset-bottom, 0px)) 20px;
    transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
}

/* Google Search Box Style inside Mobile Side Navigation Drawer (Mobile Responsive Only) */
.drawer-search-container {
    display: none; /* Hidden on Desktop view */
    width: 100%;
    margin-bottom: 22px;
}

.drawer-google-search-form {
    width: 100%;
    margin: 0;
}

.drawer-google-search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 28px;
    padding: 5px 6px 5px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.25s ease;
    width: 100%;
    box-sizing: border-box;
}

.drawer-google-search-box:focus-within {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border-color: #ffffff;
    transform: translateY(-1px);
}

.drawer-google-search-box .google-search-icon {
    flex-shrink: 0;
    margin-right: 8px;
}

.drawer-google-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #202124 !important;
    font-size: 0.9rem !important;
    font-family: inherit;
    padding: 4px 0 !important;
    box-shadow: none !important;
    width: 100%;
}

.drawer-google-search-input::placeholder {
    color: #70757a !important;
    font-size: 0.85rem;
}

.drawer-google-search-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--theme-accent, #8B0030);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    padding: 0;
    margin-left: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.drawer-google-search-btn:hover,
.drawer-google-search-btn:focus {
    background: var(--theme-primary, #540016);
    transform: scale(1.06);
}

.mobile-navigation-drawer.is-active {
    left: 0;
}

.mobile-navigation-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-navigation-drawer li {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-navigation-drawer a {
    display: block;
    padding: 14px 0;
    color: var(--theme-surface);
    font-family: var(--theme-font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.mobile-navigation-drawer a:hover {
    color: var(--theme-accent);
}

.mobile-navigation-drawer ul.sub-menu {
    display: none;
    padding-left: 20px;
}

.mobile-navigation-drawer ul.sub-menu a {
    font-size: 0.95rem;
    text-transform: none;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.7);
}

.mobile-navigation-drawer .dropdown-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--theme-surface);
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

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

/* ==========================================================================
   Dark Red & Yellow Solid Color Theme Overrides (No Gradients)
   ========================================================================== */
body.theme-dark-red-yellow .main-navigation-bar {
    border-top: 1px solid var(--theme-gold) !important;
}

body.theme-dark-red-yellow .primary-menu > li > a {
    color: #111111 !important;
    text-shadow: none !important;
}

body.theme-dark-red-yellow .primary-menu > li > a:hover {
    color: var(--theme-accent) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

body.theme-dark-red-yellow .primary-menu > li > a.is-active,
body.theme-dark-red-yellow .primary-menu > li.is-active > a {
    color: var(--theme-accent) !important;
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 2.5px solid var(--theme-accent) !important;
}

body.theme-dark-red-yellow .primary-menu ul.sub-menu,
body.theme-dark-red-yellow .primary-menu li.more-menu-item > ul.sub-menu {
    background-color: #8B0030 !important;
    background: linear-gradient(145deg, #8B0030 0%, #5E0020 100%) !important;
    border: 2px solid #FFD700 !important;
    border-top: 3px solid #FFD700 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    border-radius: 8px !important;
}

body.theme-dark-red-yellow .primary-menu ul.sub-menu li {
    border-bottom: 1.5px solid #FFD700 !important;
}

body.theme-dark-red-yellow .primary-menu ul.sub-menu li:last-child {
    border-bottom: none !important;
}

body.theme-dark-red-yellow .primary-menu ul.sub-menu a {
    color: #FFFFFF !important;
    font-weight: 750 !important;
}

body.theme-dark-red-yellow .primary-menu ul.sub-menu a:hover {
    color: #FFD700 !important;
    background-color: rgba(255, 215, 0, 0.2) !important;
}

body.theme-dark-red-yellow .menu-toggle-inner,
body.theme-dark-red-yellow .menu-toggle-inner::before,
body.theme-dark-red-yellow .menu-toggle-inner::after {
    background-color: #111111 !important;
}

body.theme-dark-red-yellow .nav-search-trigger {
    color: #111111 !important;
    background: transparent !important;
    border: none !important;
}

body.theme-dark-red-yellow .nav-search-trigger:hover,
body.theme-dark-red-yellow .nav-search-trigger:focus {
    color: var(--theme-accent) !important;
    background: transparent !important;
}

body.theme-dark-red-yellow .mobile-navigation-drawer {
    background: var(--theme-accent) !important;
}

body.theme-dark-red-yellow .mobile-navigation-drawer a {
    color: #FFFFFF !important;
}

body.theme-dark-red-yellow .mobile-navigation-drawer a:hover {
    color: var(--theme-gold) !important;
}

/* Disable scrollable method in top category header bar (No scrolling / No scrollbars) */
.primary-menu-scroll-wrapper,
.primary-menu {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.primary-menu-scroll-wrapper::-webkit-scrollbar,
.primary-menu::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   Category 3-Dots Button & Floating Maroon Overlay Box (Header-Side Overlay)
   ========================================================================== */

/* Anchor header container for absolute floating dropdown overlay */
.main-navigation-bar .container {
    position: relative !important;
}

/* Anchor 3-dots item for hover popup overlay */
.primary-menu li.menu-item-3dots {
    position: relative !important;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
}

/* 3-Dots Menu Icon: Clean Icon ONLY (No Border Box, No Background Box, No pointing cursor line) */
.nav-3dots-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1;
    height: 36px;
    box-shadow: none !important;
    align-self: center;
    transition: color 0.15s ease, transform 0.15s ease;
    outline: none !important;
}

.nav-3dots-btn:hover,
.nav-3dots-btn:focus,
.nav-3dots-btn.is-active,
.primary-menu li.menu-item-3dots:hover .nav-3dots-btn {
    background: transparent !important;
    color: var(--theme-accent, #8B0030) !important;
    border: none !important;
    box-shadow: none !important;
    transform: scale(1.18);
}

.nav-3dots-btn .dots-svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

/* ==========================================================================
   Vertical 3-Dots Menu Dropdown (Matches Tamil Nadu Child Categories Styling & Hover Behavior)
   ========================================================================== */
.header-3dots-container {
    position: relative !important;
}

.header-3dots-container .category-overlay-modal,
.primary-menu li.menu-item-3dots .category-overlay-modal {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 220px !important;
    width: max-content !important;
    max-width: 90vw !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: all 0.2s ease !important;
    z-index: 999999 !important;
}

/* Invisible bridge so mouse moving from 3-dots button into dropdown never loses hover */
.header-3dots-container .category-overlay-modal::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

/* Open on Hover (Same method as Tamil Nadu category) & Click Active */
.header-3dots-container:hover .category-overlay-modal,
.header-3dots-container:focus-within .category-overlay-modal,
.header-3dots-container .category-overlay-modal:hover,
.header-3dots-container .category-overlay-modal.is-active,
.primary-menu li.menu-item-3dots:hover .category-overlay-modal,
.primary-menu li.menu-item-3dots .category-overlay-modal.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Dropdown Container: Maroon Background, Yellow Border (Identical to Tamil Nadu child categories container) */
.header-3dots-container ul.sub-menu,
.primary-menu li.menu-item-3dots ul.sub-menu {
    background-color: #8B0030 !important; /* Maroon background */
    background: linear-gradient(145deg, #8B0030 0%, #5E0020 100%) !important;
    border: 2px solid #FFD700 !important; /* Yellow border line around box shape */
    border-top: 3px solid #FFD700 !important;
    min-width: 220px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    border-radius: 8px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Category Items in 3-Dots Dropdown */
.header-3dots-container ul.sub-menu li,
.primary-menu li.menu-item-3dots ul.sub-menu li {
    border-bottom: 1.5px solid #FFD700 !important; /* Yellow line between categories! */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.header-3dots-container ul.sub-menu li:last-child,
.primary-menu li.menu-item-3dots ul.sub-menu li:last-child {
    border-bottom: none !important;
}

/* Category Links in 3-Dots Dropdown (White text, padding) */
.header-3dots-container ul.sub-menu a,
.primary-menu li.menu-item-3dots ul.sub-menu a {
    display: block !important;
    padding: 11px 18px !important;
    color: #ffffff !important; /* Inside text is white */
    font-size: 0.9rem !important;
    font-weight: 750 !important;
    font-family: var(--theme-font-heading), sans-serif !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Hover style and behavior: Identical to Tamil Nadu child categories */
.header-3dots-container ul.sub-menu a:hover,
.header-3dots-container ul.sub-menu li.current-menu-item > a,
.header-3dots-container ul.sub-menu li.is-active > a,
.primary-menu li.menu-item-3dots ul.sub-menu a:hover,
.primary-menu li.menu-item-3dots ul.sub-menu li.current-menu-item > a,
.primary-menu li.menu-item-3dots ul.sub-menu li.is-active > a {
    background-color: rgba(255, 215, 0, 0.22) !important; /* Hover yellow glow tint */
    color: #FFD700 !important; /* Yellow text on hover */
    padding-left: 22px !important; /* Slide right animation */
}

/* Sub-flyout if an additional category has its own child categories */
.header-3dots-container ul.sub-menu li.has-dropdown > ul.sub-menu,
.primary-menu li.menu-item-3dots ul.sub-menu li.has-dropdown > ul.sub-menu {
    position: absolute !important;
    top: 0 !important;
    right: 100% !important;
    left: auto !important;
    margin-right: 4px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(10px) !important;
    transition: all 0.2s ease !important;
}

.header-3dots-container ul.sub-menu li.has-dropdown:hover > ul.sub-menu,
.primary-menu li.menu-item-3dots ul.sub-menu li.has-dropdown:hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.header-3dots-container:hover .nav-3dots-btn {
    color: var(--theme-accent, #800813) !important;
}

/* Hide overflow items beyond 8 on desktop in primary menu */
.primary-menu > li.menu-item-overflow-3dots {
    display: none !important;
}

@media screen and (max-width: 576px) {
    .category-overlay-modal {
        right: 10px !important;
        width: 270px !important;
    }
}

/* Mobile Sidebar Drawer LIVE Vibrating Button Animation */
@keyframes drawerLiveVibrate {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    15% {
        transform: scale(1.03) rotate(-1.5deg);
    }
    30% {
        transform: scale(1.03) rotate(1.5deg);
    }
    45% {
        transform: scale(1.03) rotate(-1.5deg);
    }
    60% {
        transform: scale(1.03) rotate(0deg);
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

.drawer-live-btn {
    animation: drawerLiveVibrate 1.4s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.drawer-live-btn:hover {
    background-color: #D00000 !important;
}

.drawer-live-btn .live-dot-pulse {
    animation: livePulseDot 0.8s infinite alternate ease-in-out;
}

@keyframes livePulseDot {
    0% {
        opacity: 0.4;
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        transform: scale(1.25);
    }
}

/* Category Dropdown and Chevron Rotations */
.primary-menu li:hover > a .dropdown-chevron {
    transform: rotate(180deg);
}

.mobile-navigation-drawer .dropdown-toggle.is-active svg {
    transform: rotate(180deg);
}

.mobile-navigation-drawer .dropdown-toggle svg {
    transition: transform 0.2s ease;
}

/* Hide mobile dropdown toggle buttons in the main navigation on desktop */
.primary-menu .dropdown-toggle {
    display: none !important;
}

/* Mobile Submenu styles in the mobile drawer */
.mobile-navigation-drawer ul.sub-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media screen and (min-width: 992px) {
    /* Prevent clipping of dropdown and category overlay modal inside scroll wrapper on desktop */
    .main-navigation-bar .primary-menu-scroll-wrapper {
        overflow: visible !important;
    }
    /* On desktop, hide categories starting from 9th on the top bar (shown in 3-dots menu) */
    .primary-menu > li.menu-item-overflow-3dots {
        display: none !important;
    }
}

@media screen and (max-width: 991px) {
    /* In mobile top bar, show all categories in horizontal scrollable bar */
    .main-navigation-bar .primary-menu-scroll-wrapper,
    .primary-menu-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }
    .main-navigation-bar .primary-menu-scroll-wrapper::-webkit-scrollbar,
    .primary-menu-scroll-wrapper::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .primary-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        gap: 8px !important;
    }

    /* Ensure all categories, including 9th+, show on mobile horizontal scrollable bar */
    .primary-menu > li,
    .primary-menu > li.menu-item-overflow-3dots {
        display: inline-flex !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
    }
    
    /* Disable chevrons and submenus inside primary scrollable menu on mobile/tablet */
    .primary-menu-scroll-wrapper .sub-menu {
        display: none !important;
    }
    .primary-menu-scroll-wrapper .dropdown-toggle {
        display: none !important;
    }
    .primary-menu-scroll-wrapper .dropdown-chevron {
        display: none !important;
    }
    
    /* Hide the desktop standalone 3-dots button on mobile/tablet */
    .header-3dots-container {
        display: none !important;
    }
}

@media screen and (min-width: 992px) {
    /* Districts Category Mega Menu Dropdown */
    .primary-menu li.category-districts,
    .primary-menu li.mega-dropdown-menu {
        position: relative;
    }
    
    .primary-menu li.category-districts > ul.sub-menu,
    .primary-menu li.mega-dropdown-menu > ul.sub-menu {
        display: grid !important;
        grid-template-rows: repeat(8, minmax(0, auto)) !important;
        grid-auto-flow: column !important;
        grid-column-gap: 20px !important;
        grid-row-gap: 2px !important;
        width: max-content !important;
        min-width: 820px !important; /* Fits 5 columns comfortably */
        padding: 15px 18px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(10px) !important;
        box-sizing: border-box !important;
    }

    .primary-menu li.category-districts:hover > ul.sub-menu,
    .primary-menu li.mega-dropdown-menu:hover > ul.sub-menu {
        transform: translateX(-50%) translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure the individual links inside the mega-menu display nicely */
    .primary-menu li.category-districts > ul.sub-menu li,
    .primary-menu li.mega-dropdown-menu > ul.sub-menu li {
        width: 145px !important; /* Each column element gets a consistent width */
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .primary-menu li.category-districts > ul.sub-menu a,
    .primary-menu li.mega-dropdown-menu > ul.sub-menu a {
        padding: 6px 8px !important;
        font-size: 0.82rem !important;
        display: block !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }
}