/* =====================================================================
   GYNACEM SEEDS — Navigation / Header CSS
   Shared styling for the site header, mega menu dropdowns, and the
   mobile navigation drawer. Loaded after tailwind.css + styles.css.
   ===================================================================== */

/* ---------- Topbar & Header shell ---------- */
.site-topbar { background: var(--dark-green); color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; }
.site-header { transition: all 0.3s ease; }
.site-header .header-inner { background: transparent; }
.site-header.scrolled .header-inner {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(18, 61, 7, 0.1);
}
.site-header.scrolled { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(18px); }

/* Inner pages fixed header offset & solid background */
body.header-solid { padding-top: 110px; }
body.header-solid .site-header {
    background: var(--dark-green);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
    body.header-solid { padding-top: 72px; }
}

/* ---------- Nav link color states (transparent header) ---------- */
.site-header:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.92); }
.site-header:not(.scrolled) .nav-link:hover,
.site-header:not(.scrolled) .nav-link-active {
    color: #FFFFFF;
    background: var(--primary-green);
    box-shadow: 0 4px 14px rgba(31, 93, 13, 0.35);
}
.site-header:not(.scrolled) .header-logo-text { color: #FFFFFF; }
.site-header:not(.scrolled) .header-logo-text:last-child { color: rgba(255, 255, 255, 0.65); }
.site-header:not(.scrolled) .header-inner button,
.site-header:not(.scrolled) .header-inner > div > div > a { color: #FFFFFF; }
.site-header:not(.scrolled) .header-inner button:hover,
.site-header:not(.scrolled) .header-inner > div > div > a:hover { color: #FFFFFF; }
.site-header:not(.scrolled) .nav-item .btn-primary { background: var(--primary-green); color: #FFFFFF !important; }
.site-header:not(.scrolled) .nav-item .btn-primary:hover { background: var(--dark-green); }

/* ---------- Nav link color states (scrolled header) ---------- */
.site-header.scrolled .nav-link { color: var(--dark-text); }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link-active {
    color: #FFFFFF !important;
    background: var(--primary-green);
    box-shadow: 0 4px 14px rgba(31, 93, 13, 0.35);
}
.site-header.scrolled .header-inner button,
.site-header.scrolled .header-inner > div > div > a { color: var(--dark-text); }
.site-header.scrolled .header-inner button:hover,
.site-header.scrolled .header-inner > div > div > a:hover { color: var(--primary-green); }

/* =====================================================================
   UNIVERSAL MEGA MENU SYSTEM (Click + Hover-preview)
   ===================================================================== */
.nav-item { position: relative; }
.nav-chevron { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* Mega Toggle Button States */
.nav-link {
    position: relative;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
}

/* Green underline & Active state when mega menu is open */
.nav-mega-active,
.site-header:not(.scrolled) .nav-mega-active,
.site-header.scrolled .nav-mega-active {
    color: var(--primary-green) !important;
    background: var(--agri-light) !important;
}

.nav-mega-active .nav-chevron {
    transform: rotate(180deg) !important;
    color: var(--primary-green) !important;
}

.nav-mega-active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--primary-green);
    border-radius: 9999px;
}

/* Keyboard focus visibility */
.nav-link:focus-visible,
.mobile-sub-toggle:focus-visible,
#menuToggle:focus-visible,
.search-trigger:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* Universal Mega Panel Positioning & Smooth Slide-Down Animation */
.universal-mega-panel {
    width: 94vw;
    max-width: 1360px;
    transform: translate(-50%, -10px);
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1050;
}

.universal-mega-panel.mega-panel-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
}

/* Mega Panel Box Shadow & Elevation */
.universal-mega-panel > div {
    max-height: 76vh;
    box-shadow: 0 25px 60px -12px rgba(20, 40, 10, 0.22), 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Mega Submenu Links Styling */
.universal-mega-panel a { text-decoration: none; }
.universal-mega-panel a:hover { background-color: var(--agri-light); }
.universal-mega-panel a:hover span { color: var(--primary-green); }

/* Active submenu link (current page) */
.universal-mega-panel a.mega-link-active {
    background-color: var(--agri-light);
    color: #0E3A0E;
}
.universal-mega-panel a.mega-link-active span { color: #0E3A0E; }

/* Custom internal scrollbar for mega menu */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--soft-bg); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--primary-green); border-radius: 10px; }

/* =====================================================================
   MOBILE NAV DRAWER + ACCORDION
   ===================================================================== */
.mobile-sub-panel { transition: all 0.25s ease; }
.mobile-sub-toggle[aria-expanded="true"] [data-sub-indicator] { color: var(--gold); }
#mobileMenu nav a:hover {
    background: var(--primary-green) !important;
    color: #FFFFFF !important;
    border-radius: 0.75rem;
}