/*
 * header/css/header.css — Yakulaas Child Theme
 * Brand: #055B49  |  Dark: #033d31  |  Tint: #edf7f5
 *
 * NO JS DOM MANIPULATION — topbar uses CSS position:sticky
 * Astra's native sticky handles the main header bar.
 */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    --yk-brand:      #055B49;
    --yk-brand-dark: #033d31;
    --yk-brand-tint: #edf7f5;
    --yk-topbar-bg:  #033d31;
    --yk-topbar-txt: rgba(255,255,255,0.88);
}


/* ============================================================
   TOP BAR — CSS sticky, zero JS
   ============================================================ */

.yk-topbar {
    position:   sticky;
    top:        0;
    z-index:    9991;
    background: var(--yk-topbar-bg);
    color:      var(--yk-topbar-txt);
    font-size:  12px;
    line-height: 1.4;
    -webkit-user-select:   none;
    user-select:           none;
    -webkit-touch-callout: none;
}

.yk-topbar-inner {
    max-width:       1200px;
    margin:          0 auto;
    padding:         7px 24px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    box-sizing:      border-box;
    gap:             12px;
}

.yk-topbar-left {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}
.yk-topbar-left span {
    display:     flex;
    align-items: center;
    gap:         5px;
    white-space: nowrap;
}

.yk-topbar-right {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.yk-topbar-right a {
    color:           var(--yk-topbar-txt);
    text-decoration: none;
    font-size:       12px;
    opacity:         0.9;
    transition:      opacity .15s;
}
.yk-topbar-right a:hover { opacity: 1; text-decoration: underline; }

.yk-topbar-sep {
    color:     var(--yk-topbar-txt);
    opacity:   0.4;
    font-size: 11px;
}

@media (max-width: 768px) {
    .yk-topbar-right { display: none; }
    .yk-topbar-inner { justify-content: center; padding: 9px 16px; }
    .yk-topbar-left  { justify-content: center; gap: 12px; }
}
@media (max-width: 480px) {
    .yk-topbar      { font-size: 11px; }
    .yk-topbar-left { gap: 8px; }
    .yk-topbar-left span:nth-child(3) { display: none; }
}

/* Admin bar shifts the sticky top offset */
.admin-bar .yk-topbar { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .yk-topbar { top: 46px; }
}
@media screen and (max-width: 600px) {
    .admin-bar .yk-topbar { top: 0; }
}


/* ============================================================
   PRIMARY HEADER — CSS sticky on #masthead, clean and simple
   ============================================================ */

#masthead,
.site-header {
    position: sticky !important;
    top:       30px !important;
    z-index:   9990 !important;
}

@media (max-width: 768px) {
    #masthead,
    .site-header { top: 34px !important; }
}
@media (max-width: 480px) {
    #masthead,
    .site-header { top: 30px !important; }
}

.admin-bar #masthead,
.admin-bar .site-header { top: 62px !important; }
@media screen and (max-width: 782px) {
    .admin-bar #masthead,
    .admin-bar .site-header { top: 80px !important; }
}
@media screen and (max-width: 600px) {
    .admin-bar #masthead,
    .admin-bar .site-header { top: 34px !important; }
}

.ast-primary-header-bar {
    background:    #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    transition:    box-shadow .2s !important;
}

/* Scroll shadow */
.yk-scrolled #masthead {
    box-shadow: 0 2px 20px rgba(5,91,73,.10) !important;
}
.ast-header-sticked .ast-primary-header-bar {
    box-shadow:          0 2px 20px rgba(5,91,73,.10) !important;
    border-bottom-color: transparent !important;
}

.site-primary-header-wrap.ast-container {
    max-width:  1200px !important;
    padding:    0 24px !important;
    box-sizing: border-box !important;
    width:      100% !important;
}

.ast-primary-header-bar .ast-container,
.ast-primary-header-bar .site-primary-header-wrap,
.ast-builder-grid-row-has-sides {
    min-height: 60px !important;
}
.main-header-bar {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 768px) {
    .ast-primary-header-bar .ast-container,
    .ast-primary-header-bar .site-primary-header-wrap,
    .ast-builder-grid-row-has-sides,
    .ast-mobile-header-wrap .ast-container {
        min-height: 64px !important;
        height:     64px !important;
    }
    .site-primary-header-wrap.ast-container {
        padding: 0 16px !important;
    }
}


/* ============================================================
   LOGO — do not override Astra's inline width, just ensure
   it doesn't overflow on mobile
   ============================================================ */

.site-logo-img { line-height: 0 !important; }

/* Override Astra's 180px cap — let srcset serve a larger image */
header .custom-logo-link img,
.site-logo-img .custom-logo {
    display:   block !important;
    height:    auto !important;
    width:     180px !important;
    max-width: 180px !important;
    /* Tell browser this image fills 180px so it picks 300w from srcset */
    content-visibility: auto;
}

@media (max-width: 768px) {
    header .custom-logo-link img,
    .site-logo-img .custom-logo {
        width:     140px !important;
        max-width: 140px !important;
    }
}


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

.main-header-menu .menu-link,
.main-header-menu .menu-item > a {
    font-size:   14px !important;
    font-weight: 500 !important;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
    background: transparent !important;
    color:      var(--yk-brand) !important;
}
.main-header-menu .sub-menu {
    border-radius: 12px !important;
    border:        1px solid #e5e7eb !important;
    box-shadow:    0 8px 32px rgba(0,0,0,.10) !important;
    padding:       6px !important;
    min-width:     200px !important;
    background:    #fff !important;
}
.main-header-menu .sub-menu .menu-link {
    border-radius: 8px !important;
    font-size:     13.5px !important;
    padding:       9px 12px !important;
}


/* ============================================================
   CART ICON
   ============================================================ */

.ast-site-header-cart { position: relative !important; }
.ast-site-header-cart .cart-container {
    color:         #1f2937 !important;
    border-radius: 10px !important;
    padding:       8px !important;
    transition:    background .15s, color .15s !important;
    display:       flex !important;
    align-items:   center !important;
}
.ast-site-header-cart .cart-container:hover {
    background: var(--yk-brand-tint) !important;
    color:      var(--yk-brand) !important;
}
.ast-cart-product-count,
.ast-woo-header-cart-count {
    background:    #dc2626 !important;
    color:         #fff !important;
    font-size:     9px !important;
    font-weight:   700 !important;
    border-radius: 10px !important;
    min-width:     16px !important;
    height:        16px !important;
    line-height:   16px !important;
    padding:       0 3px !important;
    border:        none !important;
    position:      absolute !important;
    top:           2px !important;
    right:         2px !important;
    z-index:       2 !important;
}
.ast-icon-shopping-basket svg,
.ast-icon-shopping-bag svg,
.ast-icon-shopping-cart svg {
    width:  22px !important;
    height: 22px !important;
}


/* ============================================================
   ACCOUNT ICON
   ============================================================ */

.ast-header-account-wrap {
    border-radius: 10px !important;
    padding:       8px !important;
    transition:    background .15s, color .15s !important;
    cursor:        pointer !important;
    display:       flex !important;
    align-items:   center !important;
}
.ast-header-account-wrap:hover { background: var(--yk-brand-tint) !important; }
.ast-header-account-link,
.ast-header-account-link svg path,
.ast-header-account-link svg circle {
    color:      #1f2937 !important;
    fill:       #055B49 !important;
    transition: fill .15s !important;
}
.ast-header-account-wrap:hover .ast-header-account-link svg path,
.ast-header-account-wrap:hover .ast-header-account-link svg circle {
    fill: var(--yk-brand) !important;
}
.account-icon { width: 22px !important; height: 22px !important; }


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

@media (max-width: 768px) {

    .ast-header-break-point .ast-builder-grid-row-right,
    .ast-mobile-header-wrap .ast-builder-grid-row-right {
        display:     flex !important;
        align-items: center !important;
        gap:         4px !important;
        flex:        0 0 auto !important;
    }

    .ast-site-header-cart,
    .ast-header-account-wrap,
    .ast-button-wrap {
        display: flex !important;
        padding: 0 !important;
        margin:  0 !important;
    }

    .ast-site-header-cart .cart-container,
    .ast-header-account-wrap,
    .ast-button-wrap .menu-toggle,
    button.ast-menu-toggle {
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        width:           40px !important;
        height:          40px !important;
        padding:         0 !important;
        margin:          0 !important;
        border-radius:   8px !important;
        background:      transparent !important;
        border:          none !important;
        box-sizing:      border-box !important;
    }

    .ast-site-header-cart .cart-container:hover,
    .ast-header-account-wrap:hover,
    .ast-button-wrap .menu-toggle:hover,
    button.ast-menu-toggle:hover {
        background: transparent !important;
    }

    .ast-mobile-svg,
    .ast-close-svg {
        fill:   #1f2937 !important;
        color:  #1f2937 !important;
        width:  22px !important;
        height: 22px !important;
    }

    .ast-button-wrap .menu-toggle .ast-menu-label { display: none !important; }

    /* Mobile nav overlay covers everything including topbar */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-drawer .ast-mobile-popup-inner,
    #ast-mobile-popup-overlay {
        z-index: 999999 !important;
    }

    .ast-header-break-point .main-header-menu,
    .main-header-bar-navigation.toggle-on .main-header-menu {
        background:    #fff !important;
        border-top:    1px solid #e5e7eb !important;
        border-bottom: 1px solid #e5e7eb !important;
        padding:       8px 0 !important;
        position:      relative !important;
        z-index:       99999 !important;
    }
    .ast-header-break-point .main-header-menu .menu-link,
    .ast-header-break-point .main-header-menu .menu-item > a {
        padding:       12px 20px !important;
        font-size:     15px !important;
        border-left:   none !important;
        border-radius: 0 !important;
        color:         #1f2937 !important;
    }
    .ast-header-break-point .main-header-menu .menu-item:hover > .menu-link,
    .ast-header-break-point .main-header-menu .current-menu-item > .menu-link {
        background:  transparent !important;
        color:       #1f2937 !important;
        border-left: none !important;
    }
}


/* ============================================================
   SEARCH RESULTS GRID
   ============================================================ */

.search-results .woocommerce ul.products,
.woocommerce-page .woocommerce ul.products {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr)) !important;
    gap:                   24px !important;
    float:                 none !important;
    margin:                0 !important;
    padding:               0 !important;
}
.search-results .woocommerce ul.products li.product,
.woocommerce-page .woocommerce ul.products li.product {
    width: 100% !important; float: none !important; margin: 0 !important;
}
@media (max-width: 768px) {
    .search-results .woocommerce ul.products,
    .woocommerce-page .woocommerce ul.products {
        grid-template-columns: repeat(2,1fr) !important;
        gap: 12px !important;
    }
}
@media (max-width: 480px) {
    input[type="search"] { font-size: 16px !important; }
}