/* ==========================================================================
   header.css — Site Header, Navigation, Search Modal & Mobile Drawer
   Furritory Theme — Extensible & Seasonal Ready
   ========================================================================== */

/* Core Layout & Resets for Header */
#masthead.site-header {
    background-color: var(--color-surface, #FFFFFF) !important;
    border-bottom: 1px solid var(--color-border, #E2E8F0) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    padding: 0.65rem 0 !important;
    width: 100% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    transition: background-color var(--transition, 200ms ease), border-color var(--transition, 200ms ease);
}

#masthead.site-header .furritory-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    width: 100% !important;
    position: relative !important;
}

/* Clear all Storefront floats & percentage widths */
body #masthead .site-branding,
body.woocommerce-active #masthead .site-branding,
body #masthead .desktop-navigation,
body.woocommerce-active #masthead .desktop-navigation,
body #masthead .main-navigation,
body.woocommerce-active #masthead .main-navigation,
body #masthead .header-actions,
body.woocommerce-active #masthead .header-actions {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-branding {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
    position: relative;
}

.site-title-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.site-title-text {
    font-family: var(--font-family);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-dark, #2C2523) !important;
    line-height: 1;
    white-space: nowrap;
}

/* Seasonal Badge Accessory on Logo (if present) */
.logo-holiday-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    font-size: 1.25rem;
    line-height: 1;
    animation: holidayFloat 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes holidayFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(4deg); }
}

/* Action Buttons Reset against Storefront button defaults */
button.header-action-btn,
a.header-action-btn,
.header-action-btn,
button.mobile-nav-toggle,
.mobile-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: var(--radius-full, 9999px) !important;
    border: 1px solid var(--color-border, #E2E8F0) !important;
    background-color: var(--color-surface, #FFFFFF) !important;
    color: var(--color-dark, #2C2523) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: all var(--transition, 200ms ease) !important;
    line-height: 1 !important;
}

.header-action-btn:hover,
.mobile-nav-toggle:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background-color: var(--color-primary-light, #FFF5F1) !important;
}

.header-action-btn .cart-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    border-radius: var(--radius-full, 9999px) !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px var(--color-primary-glow, rgba(217, 107, 67, 0.4)) !important;
    line-height: 1 !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
}

/* Primary Navigation Desktop Menu Styles */
.desktop-navigation ul.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.desktop-navigation ul.nav-menu > li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.desktop-navigation ul.nav-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-family: var(--font-family);
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-dark, #2C2523) !important;
    text-decoration: none !important;
    padding: 0.5rem 0 !important;
    transition: color var(--transition, 200ms ease) !important;
}

.desktop-navigation ul.nav-menu > li > a:hover,
.desktop-navigation ul.nav-menu > li.current-menu-item > a {
    color: var(--color-primary) !important;
}

/* Desktop Dropdown Submenu */
.desktop-navigation ul.nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid var(--color-border, #E2E8F0) !important;
    border-radius: var(--radius-md, 12px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    padding: 0.5rem 0 !important;
    margin: 0.5rem 0 0 0 !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1001 !important;
}

.desktop-navigation ul.nav-menu > li:hover > .sub-menu,
.desktop-navigation ul.nav-menu > li:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.desktop-navigation ul.nav-menu .sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.desktop-navigation ul.nav-menu .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    color: var(--color-dark, #2C2523) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.desktop-navigation ul.nav-menu .sub-menu li a:hover {
    background-color: var(--color-primary-light, #FFF5F1) !important;
    color: var(--color-primary) !important;
}

/* Mobile Responsive Rules (< 992px) */
@media (max-width: 991px) {
    #masthead.site-header {
        padding: 0.55rem 0 !important;
    }

    #masthead.site-header .mobile-nav-toggle {
        display: inline-flex !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }

    #masthead.site-header .site-branding {
        order: 2 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    #masthead.site-header .site-branding .site-title-text {
        font-size: 1.3rem !important;
    }

    #masthead.site-header .desktop-navigation {
        display: none !important;
    }

    #masthead.site-header .header-actions {
        order: 3 !important;
        flex: 0 0 auto !important;
        gap: 0.35rem !important;
    }

    /* Hide header search button on mobile — drawer search is sufficient */
    #masthead.site-header .header-action-btn.search-toggle-btn {
        display: none !important;
    }
}

/* Desktop Responsive Rules (>= 992px) */
@media (min-width: 992px) {
    #masthead.site-header .mobile-nav-toggle {
        display: none !important;
    }

    #masthead.site-header .site-branding {
        order: 1 !important;
        flex: 0 0 auto !important;
    }

    #masthead.site-header .desktop-navigation {
        order: 2 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    #masthead.site-header .header-actions {
        order: 3 !important;
        flex: 0 0 auto !important;
        display: flex !important;
    }
}

/* Background Scroll Lock Rules */
html.furritory-menu-open,
body.furritory-menu-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
}

body.furritory-menu-open {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Mobile Drawer Full Styles */
body .mobile-nav-drawer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease, visibility 0.28s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .mobile-nav-drawer.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body .mobile-nav-drawer .mobile-nav-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body .mobile-nav-drawer .mobile-nav-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 380px) !important;
    height: 100% !important;
    background: var(--color-bg, #FAF8F5) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    z-index: 2 !important;
}

body .mobile-nav-drawer.is-open .mobile-nav-panel {
    transform: translateX(0) !important;
}

body .mobile-nav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.1rem 1.25rem !important;
    border-bottom: 1px solid var(--color-border, #E2E8F0) !important;
    background: var(--color-surface, #FFFFFF) !important;
    flex-shrink: 0 !important;
}

body .mobile-nav-title {
    font-family: var(--font-family) !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-dark, #2C2523) !important;
    margin: 0 !important;
}

button.mobile-nav-close,
.mobile-nav-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: var(--radius-full, 9999px) !important;
    border: 1px solid var(--color-border, #E2E8F0) !important;
    background-color: var(--color-bg, #FAF8F5) !important;
    color: var(--color-dark, #2C2523) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.mobile-nav-close:hover {
    background-color: var(--color-primary-light, #FFF5F1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    transform: rotate(90deg) !important;
}

body .mobile-nav-quick-chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
    padding: 1rem 1.25rem 0.5rem !important;
    flex-shrink: 0 !important;
}

body .quick-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.65rem 0.75rem !important;
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid var(--color-border, #E2E8F0) !important;
    border-radius: var(--radius-md, 12px) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: var(--color-dark, #2C2523) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

body .quick-chip:hover {
    border-color: var(--color-primary) !important;
    background: var(--color-primary-light, #FFF5F1) !important;
    color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

body .mobile-nav-search {
    padding: 0.5rem 1.25rem 0.6rem !important;
    flex-shrink: 0 !important;
}

body .mobile-search-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

body .mobile-search-icon {
    position: absolute !important;
    left: 0.9rem !important;
    color: var(--color-muted, #64748B) !important;
    pointer-events: none !important;
}

body .mobile-search-input {
    width: 100% !important;
    padding: 0.65rem 0.85rem 0.65rem 2.5rem !important;
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid var(--color-border, #E2E8F0) !important;
    border-radius: var(--radius-full, 9999px) !important;
    font-size: 0.88rem !important;
    color: var(--color-dark, #2C2523) !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    transition: border-color var(--transition, 200ms ease), box-shadow var(--transition, 200ms ease);
}

body .mobile-search-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-glow, rgba(217, 107, 67, 0.15)) !important;
}

body .mobile-search-results {
    margin-top: 0.5rem !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

body .mobile-nav-body {
    flex: 1 1 auto !important;
    padding: 0.5rem 1.25rem 1.5rem !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .mobile-nav-body ul,
body .mobile-nav-body .mobile-nav-list,
body .mobile-nav-body .nav-menu,
body .mobile-nav-body .menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

body .mobile-nav-body ul > li,
body .mobile-nav-body .mobile-nav-list > li,
body .mobile-nav-body .nav-menu > li,
body .mobile-nav-body .menu > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .mobile-nav-body ul > li > a,
body .mobile-nav-body .mobile-nav-list > li > a,
body .mobile-nav-body .nav-menu > li > a,
body .mobile-nav-body .menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.8rem 1rem !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    color: var(--color-dark, #2C2523) !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    transition: all 0.2s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .mobile-nav-body ul > li > a:hover,
body .mobile-nav-body .mobile-nav-list > li > a:hover,
body .mobile-nav-body ul > li.current-menu-item > a,
body .mobile-nav-body .mobile-nav-list > li.current-menu-item > a,
body .mobile-nav-body .nav-menu > li.current-menu-item > a {
    color: var(--color-primary) !important;
    background: var(--color-primary-light, #FFF5F1) !important;
    border-color: var(--color-primary) !important;
}

body .mobile-nav-body li.menu-item-has-children > a::after,
body .mobile-nav-body li.page_item_has_children > a::after {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-left: 0.5rem !important;
    flex-shrink: 0 !important;
}

body .mobile-nav-body li.menu-item-has-children.is-open > a::after,
body .mobile-nav-body li.page_item_has_children.is-open > a::after {
    transform: rotate(-135deg) !important;
}

body .mobile-nav-body .sub-menu,
body .mobile-nav-body ul.sub-menu {
    list-style: none !important;
    margin: 0.35rem 0 0.5rem !important;
    padding: 0.25rem 0.5rem 0.25rem 0.9rem !important;
    display: none !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    border-left: 2.5px solid var(--color-primary) !important;
    margin-left: 0.75rem !important;
}

body .mobile-nav-body li.is-open > .sub-menu,
body .mobile-nav-body li.is-open > ul.sub-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .mobile-nav-body .sub-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

body .mobile-nav-body .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    line-height: 1.4 !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: var(--color-muted, #64748B) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

body .mobile-nav-body .sub-menu li a .menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    background: var(--color-primary-glow, rgba(217, 107, 67, 0.08)) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

body .mobile-nav-body .sub-menu li a:hover {
    color: var(--color-primary) !important;
    background: var(--color-primary-light, #FFF5F1) !important;
}

body .mobile-nav-body .sub-menu li a:hover .menu-icon {
    transform: scale(1.14) rotate(-5deg) !important;
    background: var(--color-primary-glow, rgba(217, 107, 67, 0.16)) !important;
}

body .mobile-nav-footer {
    padding: 1.15rem 1.25rem !important;
    background: var(--color-surface, #FFFFFF) !important;
    border-top: 1px solid var(--color-border, #E2E8F0) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

body .mobile-nav-trust-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

body .trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--color-muted, #64748B) !important;
}

body .trust-item svg {
    color: var(--color-primary) !important;
    flex-shrink: 0 !important;
}

body .mobile-nav-contact-links a {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* Reactive Search Modal */
.header-search-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 4rem 1rem 2rem !important;
}

.header-search-modal.is-open {
    display: flex !important;
}

.search-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.search-modal-box {
    position: relative !important;
    background: var(--color-surface, #FFFFFF) !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 620px !important;
    padding: 1.5rem !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22) !important;
    z-index: 2 !important;
    animation: searchModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes searchModalIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

button.search-modal-close,
.search-modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: var(--color-muted, #64748B) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: color 0.2s !important;
}

.search-modal-close:hover {
    color: var(--color-primary) !important;
}

.search-modal-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin: 0 0 1rem !important;
    color: var(--color-dark, #2C2523) !important;
}

.search-input-wrap {
    position: relative !important;
    margin-bottom: 0.75rem !important;
}

.search-input-wrap input {
    width: 100% !important;
    padding: 0.85rem 1.25rem 0.85rem 2.85rem !important;
    border-radius: var(--radius-full, 9999px) !important;
    border: 2px solid var(--color-primary) !important;
    font-size: 1rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.search-input-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--color-primary) !important;
    pointer-events: none !important;
}

.live-search-results {
    max-height: 360px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

.search-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    color: var(--color-dark, #2C2523) !important;
    background: var(--color-bg, #FAF8F5) !important;
    transition: all 0.2s ease !important;
}

.search-result-item:hover {
    background: var(--color-primary-light, #FFF5F1) !important;
    transform: translateX(2px) !important;
}

.search-result-item img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}