/**
 * Divi Mega Menu - Complete Header System
 * Frontend styles for announcement bar, logo bar, search, and mega menu
 */

/* === HEADER SYSTEM CONTAINER === */
.divi-mega-menu-header-system {
    position: relative;
    z-index: 9999;
    width: 100%;
}

/* The scroll-direction script collapses/expands the in-flow header system while
   the page scrolls. Chrome's scroll anchoring then shifts scrollTop to keep the
   content below it in place, which fires another scroll event in the opposite
   direction, and the two fight each other for hundreds of milliseconds
   (visible frame-to-frame jolts). Anchoring is a property of the scroller, so
   it has to be switched off on body (the viewport scroller), not on the header. */
body {
    overflow-anchor: none;
}

/* === ANNOUNCEMENT BAR === */
.announcement-bar {
    padding: 0;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.announcement-content {
    max-width: none;
    margin: 0 auto;
    padding: 0 2em;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 40px;
}

/* Dynamic column layouts */
.announcement-columns-1 {
    justify-content: center;
}

.announcement-columns-2 {
    justify-content: space-between;
}

.announcement-columns-3 {
    justify-content: space-between;
}

.announcement-column {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.announcement-columns-1 .announcement-column {
    flex: 1;
}

.announcement-columns-2 .announcement-column {
    flex: 1;
}

.announcement-columns-3 .announcement-column {
    flex: 1;
}

/* Column alignments */
.announcement-align-left {
    justify-content: flex-start;
}

.announcement-align-center {
    justify-content: center;
}

.announcement-align-right {
    justify-content: flex-end;
}

/* Block styles */
.announcement-text-block,
.announcement-link-block,
.announcement-contact-block,
.announcement-interactive-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.announcement-link-block:hover,
.announcement-contact-block:hover,
.announcement-interactive-block:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Interactive block specific styling */
.announcement-interactive-block {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
    margin: 0;
}

.announcement-interactive-block:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.announcement-interactive-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.announcement-link-icon,
.announcement-icon-block {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.announcement-divider {
    opacity: 0.6;
    margin: 0 4px;
}

.contact-icon {
    font-size: 14px;
}

/* === LOGO BAR === */
.divi-mega-menu-logo-bar {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 15px 0;
}

.logo-bar-content {
    max-width: none;
    margin: 0 auto;
    padding: 0 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.logo-section {
    flex-shrink: 0;
}

.logo-link,
.logo-text {
    display: inline-block;
    text-decoration: none;
    color: #1e293b;
    font-size: 24px;
    font-weight: 700;
}

.logo-image {
    display: block;
    max-height: 60px;
}

/* === SEARCH SECTION === */
.search-section {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.mega-menu-search-container {
    position: relative;
    width: 100%;
}

.mega-menu-search-form {
    display: flex;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 25px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.mega-menu-search-form:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mega-menu-search-input {
    flex: 1;
    padding: 12px 20px;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
}

.mega-menu-search-input::placeholder {
    color: #9ca3af;
}

.mega-menu-search-submit {
    padding: 12px 20px;
    background: #3b82f6;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.mega-menu-search-submit:hover {
    background: #2563eb;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

/* === ACTIONS SECTION === */
.actions-section {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.account-icon-link,
.cart-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #374151;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: relative;
}

.account-icon-link:hover,
.cart-icon-link:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.cart-icon-link {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

/* === MEGA MENU CONTAINER === */
.divi-mega-menu-container {
    background: white;
    border-bottom: 1px solid #e5e7eb;
    margin: 0 !important;
    padding: 0;
    position: relative;
}

.divi-mega-menu {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
    max-width: none;
}

.divi-mega-menu ul.divi-mega-menu-nav {
    display:flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 980px) {
	.divi-mega-menu ul.divi-mega-menu-nav {
		display: none;
	}
}
/* Menu Alignment Options */
.divi-mega-menu-nav[data-alignment="left"] .mega-menu-items {
    justify-content: flex-start;
}

.divi-mega-menu-nav[data-alignment="center"] .mega-menu-items {
    justify-content: center;
}

.divi-mega-menu-nav[data-alignment="right"] .mega-menu-items {
    justify-content: flex-end;
}

.mega-menu-items {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
}

/* Custom Button - Always Right Aligned */
.custom-button-container {
    margin-left: auto;
    flex-shrink: 0;
}

.custom-button {
    white-space: nowrap;
    padding: 12px clamp(12px, 2vw, 24px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: auto;
    font-size: clamp(14px, 1.1vw, 16px);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.divi-mega-menu-item {
    position: relative;
    list-style: none;
}

.divi-mega-menu-link {
    display: block;
    padding: 20px clamp(8px, 2vw, 24px);
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(14px, 1.2vw, 16px);
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}
.mega-menu-category-title-link {
    font-size: 0.9em;
}
.mega-menu-links a {
    font-size: 1em!important;
}
.divi-mega-menu-link:hover,
.divi-mega-menu-item:hover > .divi-mega-menu-link {
    color: #1f2937;
    border-bottom-color: #3b82f6;
}

/* Custom Button - Always Right Aligned */
.divi-mega-menu-button {
    margin-left: auto;
    flex-shrink: 0;
}

.custom-menu-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-menu-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* REMOVED: Mega menu dropdown styles moved to public.css to avoid conflicts */

.mega-menu-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #f3f4f6;
}

.mega-menu-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1024px) {
    .logo-bar-content {
        gap: 20px;
        padding: 0 15px;
    }
    
    .search-section {
        max-width: 400px;
    }
    
    .actions-section {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .announcement-bar {
        padding: 10px 0;
        font-size: 13px;
    }
    
    .announcement-content {
        padding: 0 10px;
        gap: 6px;
    }
    
    .announcement-column {
        gap: 6px;
    }
    
    .announcement-divider {
        display: none; /* Hide dividers on very small screens */
    }
}

/* Medium screens - start compacting */
@media (max-width: 1250px) {
    .divi-mega-menu {
        padding: 0 15px;
    }
    
    .mega-menu-items {
        gap: 0;
    }
    
    .divi-mega-menu-link {
        padding: 18px clamp(6px, 1.5vw, 18px);
        font-size: clamp(13px, 1.1vw, 15px);
    }
    
    .custom-button {
        padding: 10px clamp(8px, 1.5vw, 18px);
        font-size: clamp(13px, 1vw, 15px);
    }
    a.divi-mega-menu-link {
		font-size: 1.2em;
	}
}

@media (max-width: 768px) {
    /* Reduce mega menu height for compact mobile header */
    :root {
        --mega-menu-height: 120px;
    }
    
    /* Reset any default body padding on mobile */
    body.divi-mega-menu-active {
        padding-top: 0 !important;
    }
    
    /* Override Divi's page-container padding on mobile */
    .et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container,
    .et_fixed_nav.et_show_nav #page-container {
        padding-top: 0 !important;
    }
    
    .announcement-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 0 15px;
    }
    
    .announcement-columns-2,
    .announcement-columns-3 {
        flex-direction: column;
        gap: 8px;
    }
    
    .announcement-column {
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .announcement-link-icon,
    .announcement-icon-block {
        width: 14px;
        height: 14px;
    }
    
    .logo-bar-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "logo logo"
            "search actions";
        gap: 0.75rem;
        padding: 0.5rem 1rem;
    }
    
    .logo-container {
        grid-area: logo;
        justify-self: center;
    }
    
    .search-section {
        grid-area: search;
        justify-self: start;
        max-width: 150px;
    }
    
    .actions-section {
        grid-area: actions;
        justify-self: end;
        display: flex;
        gap: 0.5rem;
    }
    
    .divi-mega-menu-nav {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .mega-menu-items {
        flex-wrap: wrap;
        justify-content: center !important;
        width: 100%;
    }
    
    .divi-mega-menu-link {
        padding: 15px 12px;
        font-size: 14px;
    }
    
    .custom-button-container {
        margin-left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    
    .custom-button {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    /* Mobile dropdown styles moved to public.css */
}

/* === DYNAMIC POSITIONING === */
.divi-mega-menu-header-system {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.divi-mega-menu-header-system.has-announcement-bar,
.divi-mega-menu-header-system.has-logo-bar,
.divi-mega-menu-header-system.full-header {
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any inherited spacing from body/theme */
body .divi-mega-menu-header-system {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* === SEARCH RESULTS STYLING === */
.search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background: #f9fafb;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.search-result-excerpt {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

.search-result-type {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-type.category {
    background: #fef3f2;
    color: #ea580c;
}

.search-result-type.product {
    background: #f0fdf4;
    color: #16a34a;
}

/* === STICKY HEADER - ADDED AT END === */
.divi-mega-menu-header-system.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* NUCLEAR OPTION - Force position fixed at all costs */
#divi-mega-menu-header-system.is-sticky {
    position: fixed !important;
    position: fixed !important;
    position: fixed !important;
}

/* Sticky shrinking - logo bar - PRESERVE horizontal padding */
#divi-mega-menu-header-system.is-sticky .divi-mega-menu-logo-bar,
.divi-mega-menu-header-system.is-sticky .divi-mega-menu-logo-bar {
    /* Only reduce vertical padding, keep horizontal */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    /* Don't touch left/right padding */
}

/* Sticky shrinking - logo - target the actual logo element */
#divi-mega-menu-header-system.is-sticky .logo-image,
.divi-mega-menu-header-system.is-sticky .logo-image,
#divi-mega-menu-header-system.is-sticky img.logo-image,
.divi-mega-menu-header-system.is-sticky img.logo-image,
#divi-mega-menu-header-system.is-sticky .logo-section img,
.divi-mega-menu-header-system.is-sticky .logo-section img {
    max-height: 30px !important;
    height: 30px !important;
    width: auto !important;
}

/* Sticky shrinking - mega menu - PRESERVE horizontal padding */
#divi-mega-menu-header-system.is-sticky .divi-mega-menu-link,
.divi-mega-menu-header-system.is-sticky .divi-mega-menu-link {
    /* Only reduce vertical padding, keep horizontal */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    /* Keep existing left/right padding */
    font-size: clamp(13px, 1vw, 14px) !important;
}

/* Sticky shrinking - dropdown arrows to match font size */
#divi-mega-menu-header-system.is-sticky .divi-mega-menu-link::after,
.divi-mega-menu-header-system.is-sticky .divi-mega-menu-link::before,
#divi-mega-menu-header-system.is-sticky .divi-mega-menu-link i,
.divi-mega-menu-header-system.is-sticky .divi-mega-menu-link i {
    font-size: clamp(10px, 0.8vw, 11px) !important; /* Smaller than the default font size */
}

/* Force icons to use only background-image (no content: url) */
.account-icon-link,
.cart-icon-link {
    content: none !important;
}

/* Sticky shrinking - unified icon styling for both account and cart */
#divi-mega-menu-header-system.is-sticky .actions-section .icon-link,
.divi-mega-menu-header-system.is-sticky .actions-section .icon-link,
#divi-mega-menu-header-system.is-sticky .actions-section .account-icon-link,
.divi-mega-menu-header-system.is-sticky .actions-section .account-icon-link,
#divi-mega-menu-header-system.is-sticky .actions-section .cart-icon-link,
.divi-mega-menu-header-system.is-sticky .actions-section .cart-icon-link {
    background-size: 1.5em !important; /* Smaller than the default 1.3em */
    padding: 0.5em !important; /* Smaller than the default 0.8em */
    width: 2.8em !important; /* Smaller than the default 3.5em */
    height: 2.8em !important; /* Smaller than the default 3.5em */
}

/* Sticky shrinking - SVG icons inside the unified icon links */
#divi-mega-menu-header-system.is-sticky .actions-section .icon-link svg,
.divi-mega-menu-header-system.is-sticky .actions-section .icon-link svg {
    width: 20px !important;
    height: 20px !important;
}

/* Sticky shrinking - cart count - adjust padding for the white dot */
#divi-mega-menu-header-system.is-sticky .actions-section .cart-icon-link .cart-count {
    padding: 2px 6px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
}

/* Extra small mobile screens */
@media (max-width: 500px) {
		#divi-mega-menu-header-system.is-sticky .actions-section .icon-link,
	.divi-mega-menu-header-system.is-sticky .actions-section .icon-link,
	#divi-mega-menu-header-system.is-sticky .actions-section .account-icon-link,
	.divi-mega-menu-header-system.is-sticky .actions-section .account-icon-link,
	#divi-mega-menu-header-system.is-sticky .actions-section .cart-icon-link,
	.divi-mega-menu-header-system.is-sticky .actions-section .cart-icon-link {
		width: 3.3em !important;
		height: 3.3em !important;
		background-size: 2em !important;
	}
}
@media (max-width: 480px) {
    /* Even more compact mega menu height for very small screens */
    :root {
        --mega-menu-height: 100px;
    }
    
    /* Ensure no body padding on extra small screens */
    body.divi-mega-menu-active {
        padding-top: 0 !important;
    }
    
    /* Override Divi's page-container padding on extra small screens */
    .et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container,
    .et_fixed_nav.et_show_nav #page-container {
        padding-top: 0 !important;
    }
    
    .logo-bar-content {
        gap: 0.5rem;
        padding: 0.4rem 0.75rem;
    }
    
    .logo-container img {
        max-height: 30px;
        height: 30px;
    }
    
    .search-section {
        max-width: 120px;
    }
    
    .search-section input {
        font-size: 13px;
        padding: 0.35rem 0.5rem;
    }
    
    .actions-section .account-icon-link,
    .actions-section .cart-icon-link {
        width: 30px;
        height: 30px;
        padding: 0.35em;
        background-size: 0.8em;
    }
}