/**
 * SeedHub Header Styles
 * F3.1 - Professional Header with Mega Menu
 */

/* ========================================= TOP UTILITY BAR ========================================= */

.top-bar { width: 100%; background: var(--primary-dark); color: rgba(255, 255, 255, 0.9); font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.top-bar-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 14px; }
.top-bar-left span, .top-bar-right a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.88); transition: var(--transition-fast); }
.top-bar-right a:hover { color: var(--white); }
.top-bar-left i, .top-bar-right i { font-size: 10px; color: var(--secondary); }
.top-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.2); }

/* ========================================= MAIN HEADER ========================================= */

.site-header { position: relative; z-index: 1000; width: 100%; background: var(--white); border-bottom: 1px solid var(--border-light); }
.site-header.sticky { position: fixed; top: 0; left: 0; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); animation: headerSlideDown 0.3s ease; }
@keyframes headerSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 35px; }

/* ========================================= LOGO ========================================= */

.site-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-image { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 13px; overflow: hidden; background: var(--primary); box-shadow: 0 6px 16px rgba(23, 107, 58, 0.18);  transition: var(--transition); }
.logo-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-logo:hover .logo-image { transform: rotate(0deg) scale(1.05); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { color: var(--text-dark); font-size: 24px; font-weight: 800; letter-spacing: -0.8px; }
.logo-name span { color: var(--primary); }
.logo-text small { margin-top: 4px; color: var(--text-muted); font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

/* ========================================= HEADER SEARCH ========================================= */

.header-search { position: relative; flex: 1; max-width: 580px; display: flex; align-items: center; }
.header-search > i { position: absolute; left: 18px; color: var(--text-muted); font-size: 15px; z-index: 1; }
.header-search input { width: 100%; height: 50px; padding: 0 120px 0 48px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 14px; color: var(--text-dark); transition: var(--transition-fast); }
.header-search input:focus { background: var(--white); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(23, 107, 58, 0.08); }
.header-search button { position: absolute; right: 6px; height: 38px; padding: 0 20px; color: var(--white); background: var(--primary); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; transition: var(--transition); }
.header-search button:hover { background: var(--primary-dark); }

/* ========================================= DESKTOP MENU TOGGLE ========================================= */

.desktop-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 17px; flex-shrink: 0; color: var(--white); background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; transition: var(--transition); }
.desktop-menu-toggle:hover, .desktop-menu-toggle[aria-expanded="true"] { color: var(--text-dark); background: var(--secondary); border-color: var(--secondary); }
.desktop-menu-toggle i { font-size: 14px; }

/* ========================================= MOBILE MENU TOGGLE ========================================= */

.mobile-menu-toggle { display: none; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text-dark); border-radius: 50%; transition: var(--transition); }
.mobile-menu-toggle:hover { background: var(--light-green); }
.mobile-menu-toggle span { display: block; width: 19px; height: 2px; background: currentColor; border-radius: 5px; transition: var(--transition); }
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========================================= HEADER ACTIONS ========================================= */

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-action { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text); border-radius: 50%; transition: var(--transition-fast); }
.header-action:hover { color: var(--primary); background: var(--light-green); }
.header-action > i { font-size: 17px; }
.action-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; color: var(--white); background: var(--primary); border: 2px solid var(--white); border-radius: var(--radius-pill); font-size: 8px; font-weight: 800; line-height: 1; }
.wishlist-count { background: var(--secondary-dark); }

/* ========================================= ACCOUNT ACTION ========================================= */

.account-action { display: flex; align-items: center; gap: 9px; margin-left: 6px; padding-left: 13px; border-left: 1px solid var(--border); transition: var(--transition-fast); }
.account-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--light-green); border-radius: 50%; transition: var(--transition); }
.account-action:hover .account-icon { color: var(--white); background: var(--primary); }
.account-icon i { font-size: 15px; }
.account-text { display: flex; flex-direction: column; line-height: 1.1; }
.account-text small { color: var(--text-muted); font-size: 9px; font-weight: 500; }
.account-text strong { margin-top: 3px; color: var(--text-dark); font-size: 12px; font-weight: 700; }
.account-action:hover .account-text strong { color: var(--primary); }

/* ========================================= ACCOUNT DROPDOWN ========================================= */

.account-dropdown { position: relative; cursor: pointer; }
.account-dropdown .account-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 220px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); z-index: 100; }
.account-dropdown:hover .account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.account-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--text); font-size: 13px; font-weight: 500; transition: var(--transition-fast); border-bottom: 1px solid var(--border-light); }
.account-menu a:last-child { border-bottom: none; }
.account-menu a i { width: 18px; color: var(--primary); font-size: 13px; text-align: center; }
.account-menu a:hover { background: var(--light-green); color: var(--primary); }
.account-menu hr { margin: 0; border: none; border-top: 1px solid var(--border-light); }

/* ========================================= MOBILE SEARCH ========================================= */

.mobile-search { display: none; padding: 10px 0; background: var(--white); border-top: 1px solid var(--border-light); }
.mobile-search form { position: relative; display: flex; align-items: center; }
.mobile-search form > i { position: absolute; left: 14px; color: var(--text-muted); font-size: 13px; z-index: 1; }
.mobile-search input { height: 45px; padding: 0 90px 0 40px; border-radius: var(--radius-sm); font-size: 13px; background: var(--background); }
.mobile-search button { position: absolute; right: 5px; height: 35px; padding: 0 13px; color: var(--white); background: var(--primary); border-radius: 7px; font-size: 11px; font-weight: 700; }

/* ========================================= PRIMARY NAVIGATION ========================================= */

.primary-nav { position: absolute; z-index: 1100; top: 120px; left: 0; width: 100%; max-height: 0; background: var(--white); border-bottom: 1px solid var(--border-light); box-shadow: 0 18px 35px rgba(12, 28, 18, 0.14); opacity: 0; visibility: hidden; overflow: hidden; transform: translateY(-10px); transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.32s ease, visibility 0.32s ease; }
.primary-nav.is-open { max-height: 620px; opacity: 1; visibility: visible; transform: translateY(0); overflow: visible; }
.site-header.sticky + .mobile-search + .primary-nav { position: fixed; top: 82px; }
.nav-wrapper { min-height: 54px; display: flex; align-items: center; gap: 5px; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 54px; padding: 0 14px; color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; background: transparent; border: none; transition: var(--transition-fast); cursor: pointer; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 0; height: 2px; margin: auto; background: var(--primary); transition: var(--transition); }
.nav-link:hover, .nav-link.active { color: var(--primary); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link i { font-size: 10px; margin-top: 1px; }
.categories-trigger i:first-child { font-size: 14px; }
.nav-item { position: relative; }
.nav-dropdown .nav-link i:last-child { transition: var(--transition); }
.nav-dropdown:hover .nav-link i:last-child { transform: rotate(180deg); }
.nav-link-badge { position: relative; }
.nav-badge { position: absolute; top: 10px; right: 4px; padding: 2px 5px; color: var(--white); background: var(--secondary-dark); border-radius: 3px; font-size: 7px; font-weight: 800; line-height: 1; }

/* ========================================= MEGA MENU ========================================= */

.mega-menu { position: absolute; top: calc(100% - 1px); left: 0; min-width: 900px; max-height: 0; padding: 0; background: var(--white); border: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; overflow: hidden; transition: opacity var(--transition), visibility var(--transition), max-height var(--transition); z-index: 100; }
.nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu { opacity: 1; visibility: visible; max-height: 600px; }
.mega-menu-inner { padding: 25px; }
.mega-menu-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 200px; color: var(--text-muted); font-size: 13px; }
.mega-menu-loading i { font-size: 18px; color: var(--primary); }
.mega-menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; }
.mega-menu-column { padding-right: 20px; }
.mega-menu-title { display: block; margin-bottom: 12px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.mega-menu-column a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text); font-size: 13px; font-weight: 500; transition: var(--transition-fast); }
.mega-menu-column a i { width: 20px; color: var(--primary); font-size: 12px; text-align: center; }
.mega-menu-column a:hover { color: var(--primary); transform: translateX(3px); }
.mega-menu-subcategory { margin-left: 30px; padding: 5px 0; color: var(--text-light); font-size: 12px; }
.mega-menu-subcategory:hover { color: var(--primary); }

/* Category menu list */
.categories-dropdown .categories-trigger { background: #e6c518; color: #fff; }
.categories-dropdown .categories-trigger:hover { background: #e6c518; color: #fff; }
.categories-dropdown .mega-menu { min-width: 385px; max-width: min(385px, calc(100vw - 20px)); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.categories-dropdown .mega-menu-inner { padding: 0; }
.category-menu-list { display: flex; flex-direction: column; }
.category-menu-item { display: flex; align-items: center; gap: 14px; min-height: 70px; padding: 10px 18px; color: var(--text); background: var(--white); border-bottom: 1px solid var(--border-light); font-size: 16px; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); }
.category-menu-item:last-child { border-bottom: 0; }
.category-menu-item img,
.category-menu-all-icon { width: 50px; height: 50px; flex: 0 0 50px; object-fit: cover; background: var(--surface); }
.category-menu-item img { border-radius: 0; }
.category-menu-item:hover { color: var(--text); background: #f7f8f3; transform: none; }
.category-menu-all { background: #f5fbf1; }
.category-menu-all-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); font-size: 24px; }

/* ========================================= DROPDOWN MENU ========================================= */

.dropdown-menu { position: absolute; top: calc(100% - 1px); left: 0; min-width: 240px; max-height: 0; padding: 0; background: var(--white); border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; overflow-y: auto; transition: opacity var(--transition), visibility var(--transition), max-height var(--transition); z-index: 100; }
.dropdown-menu-wide { min-width: 620px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; max-height: 400px; padding: 15px; }
.dropdown-loading { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 100px; color: var(--text-muted); font-size: 12px; }
.dropdown-loading i { color: var(--primary); }
.dropdown-menu a { display: block; padding: 8px 12px; color: var(--text); font-size: 13px; font-weight: 500; border-radius: var(--radius-xs); transition: var(--transition-fast); }
.dropdown-menu-wide a,
#crops-dropdown a { background: #f3f8f4; }
.dropdown-menu a:hover { background: var(--light-green); color: var(--primary); }

/* ========================================= MOBILE NAVIGATION ========================================= */

.mobile-navigation { position: fixed; z-index: 2500; top: 0; left: 0; width: min(360px, 88vw); height: 100vh; padding: 22px; overflow-y: auto; background: var(--white); box-shadow: 10px 0 40px rgba(0, 0, 0, 0.12); transform: translateX(-105%); transition: transform 0.35s ease; }
.mobile-navigation.active { transform: translateX(0); }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); }
.mobile-nav-header span { display: block; color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.mobile-nav-header strong { display: block; margin-top: 3px; color: var(--text-dark); font-family: "Playfair Display", serif; font-size: 23px; }
.mobile-nav-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--text); background: var(--background); border-radius: 50%; transition: var(--transition); }
.mobile-nav-close:hover { color: var(--white); background: var(--primary); }
.mobile-nav-links { padding-top: 12px; }
.mobile-nav-links > a, .mobile-category-toggle { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 3px; color: var(--text); border-bottom: 1px solid var(--border-light); font-size: 14px; font-weight: 600; text-align: left; background: transparent; transition: var(--transition-fast); }
.mobile-nav-links > a > span, .mobile-category-toggle > span { display: flex; align-items: center; gap: 13px; }
.mobile-nav-links > a > span > i, .mobile-category-toggle > span > i { width: 22px; color: var(--primary); text-align: center; }
.mobile-nav-links > a > i { color: var(--text-muted); font-size: 10px; }
.mobile-nav-links > a:hover, .mobile-nav-links > a.active, .mobile-category-toggle:hover { color: var(--primary); }
.mobile-new-badge { display: inline-flex; align-items: center; padding: 3px 6px; color: var(--white); background: var(--secondary-dark); border-radius: 4px; font-size: 7px; font-weight: 800; line-height: 1; }
.mobile-count { min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--white); background: var(--primary); border-radius: 50%; font-size: 9px; font-weight: 800; }
.mobile-category-wrapper { border-bottom: 1px solid var(--border-light); }
.mobile-category-wrapper .mobile-category-toggle { border-bottom: 0; }
.mobile-category-toggle > i { font-size: 10px; transition: var(--transition); }
.mobile-category-wrapper.open .mobile-category-toggle > i { transform: rotate(180deg); }
.mobile-category-menu { display: none; padding: 0 0 10px 35px; }
.mobile-category-wrapper.open .mobile-category-menu { display: block; }
.mobile-category-loading { padding: 10px; color: var(--text-muted); font-size: 12px; }
.mobile-category-loading i { color: var(--primary); }
.mobile-category-menu a { display: block; padding: 8px 0; color: var(--text-light); font-size: 12px; transition: var(--transition-fast); }
.mobile-category-menu a::before { content: "—"; margin-right: 8px; color: var(--secondary); }
.mobile-category-menu a:hover { color: var(--primary); padding-left: 4px; }
.mobile-account-box { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding: 15px; background: var(--light-green); border: 1px solid var(--soft-green); border-radius: var(--radius-sm); }
.mobile-account-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); background: var(--primary); border-radius: 50%; }
.mobile-account-box > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.mobile-account-box small { color: var(--text-muted); font-size: 9px; }
.mobile-account-box strong { margin-top: 2px; color: var(--text-dark); font-size: 11px; }
.mobile-account-box > a { color: var(--primary); }
.mobile-contact-box { margin-top: 12px; padding: 12px 0; }
.mobile-contact-box a { display: flex; align-items: center; gap: 10px; color: var(--text); }
.mobile-contact-box a > i { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--white); background: var(--primary); border-radius: 50%; font-size: 12px; }
.mobile-contact-box a span { display: flex; flex-direction: column; }
.mobile-contact-box small { color: var(--text-muted); font-size: 9px; }
.mobile-contact-box strong { font-size: 11px; font-weight: 700; }
.mobile-menu-overlay { position: fixed; z-index: 2000; inset: 0; background: rgba(12, 28, 18, 0.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); }
.mobile-menu-overlay.active { opacity: 1; visibility: 1; }
body.menu-open { overflow: hidden; }

/* ========================================= RESPONSIVE ========================================= */

@media (max-width: 1180px) {
    .header-inner { gap: 20px; }
    .header-search { max-width: 480px; }
    .nav-wrapper { gap: 3px; }
    .nav-link { padding: 0 12px; font-size: 12px; }
    .account-text { display: none; }
    .account-action { padding-left: 8px; }
}

@media (max-width: 992px) {
    .primary-nav { display: none; }
    .desktop-menu-toggle { display: none; }
    .desktop-search { display: none; }
    .mobile-menu-toggle { display: flex; }
    .mobile-search { display: block; }
    .header-actions { margin-left: auto; }
    .account-action { border-left: 0; padding-left: 0; }
}

@media (max-width: 768px) {
    .top-bar-left span { font-size: 11px; }
    .top-bar-right { gap: 10px; }
    .top-bar-right a { font-size: 11px; }
}

@media (max-width: 600px) {
    .top-bar { display: none; }
    .header-inner { min-height: 70px; gap: 10px; }
    .logo-image { width: 38px; height: 38px; }
    .logo-name { font-size: 21px; }
    .logo-text small { font-size: 7px; }
    .header-action { width: 36px; height: 36px; }
    .header-action > i { font-size: 15px; }
    .account-action { display: none; }
    .mobile-menu-toggle { width: 36px; height: 36px; }
}

@media (max-width: 400px) {
    .header-inner { gap: 5px; }
    .site-logo { gap: 7px; }
    .logo-image { width: 35px; height: 35px; border-radius: 10px; }
    .logo-name { font-size: 19px; }
    .header-action { width: 33px; height: 33px; }
    .action-count { top: -1px; right: -1px; }
}