/* =========================================================================
 * Mobile header refinements - 2026-06-27
 *
 * Hyva uses alg: as a max-width:1024px (mobile-down) breakpoint, so the
 * outer <div x-data="initHeader()"> wrapper is alg:flex/flex-row on
 * mobile - which made our previous in-flow store-locator strip land as a
 * flex CHILD beside the header instead of below it. The bar is now placed
 * OUTSIDE that wrapper in the template (see header.phtml tail), and these
 * styles give it the full-bleed strip layout we want.
 *
 * Also: hide the in-header desktop store-locator on mobile so its label
 * doesn't wrap into 2 lines inside the cramped icon cluster.
 * ========================================================================= */

/* Hide the in-header desktop store-locator on viewports < 1024px. */
@media (max-width: 1023px) {
    .header-store-locator-wrap { display: none !important; }
}

/* Mobile-only store locator strip - hidden on desktop. */
.mobile-store-locator-bar {
    display: none;
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .mobile-store-locator-bar {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        background: #f9fafb;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
        color: #144068;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        line-height: 1.25;
    }
    .mobile-store-locator-bar:hover,
    .mobile-store-locator-bar:focus-visible {
        background: #f3f4f6;
    }
    .mobile-store-locator-bar svg {
        flex-shrink: 0;
        width: 16px;
        height: 19px;
    }
}


/* =========================================================================
 * Intermediate viewport header fixes (769-1023px) - 2026-07-19
 *
 * The header uses Hyva/Andersons custom breakpoints:
 *   asm: max-width: 640px
 *   amd: max-width: 768px
 *   alg: max-width: 1024px
 *
 * Between 769px and 1023px, the mobile-style header renders but a few
 * elements have gaps in their responsive classes:
 *  1. Search input is w-48 (192px) - cuts off the placeholder text
 *     "What can we help you find today?" mid-word
 *  2. "Sign in" span wraps to 2 lines because its container narrows
 *  3. Layout has awkward whitespace between hamburger and logo
 *
 * Fix scope is narrow: only touches ≥769 AND ≤1023.
 * ========================================================================= */

@media (min-width: 769px) and (max-width: 1023px) {

    /* Widen the search input so the placeholder is fully readable */
    #search_mini_fullblock input#search {
        width: 20rem !important;
    }

    /* Keep "Sign in" on a single line */
    header a[href*="customer/account"] span,
    header a[href*="customer/login"] span {
        white-space: nowrap !important;
    }

    /* Make the header row use its space more evenly:
       hamburger left, logo left of centre, actions right — not a huge
       gap between hamburger and logo */
    header .initHeader-wrapper,
    header [x-data*="initHeader"] {
        justify-content: space-between !important;
    }
}


/* =========================================================================
 * Desktop header CTA "Book Kitchen Consultation" - unwrap and unshrink
 *
 * The CTA button sits inside <div class="grid w-full justify-items-end">
 * as the last item in the nav row. On desktop widths where the nav
 * items eat most of the horizontal space, the button's grid cell
 * shrinks to a narrow width. The button text ("Book Kitchen
 * Consultation") then wraps to 3 lines and each line is truncated
 * ("Book" / "Kitch" / "Cons") because the containing button is too
 * narrow to render its own text.
 * Fix: nowrap the button text, force the button to grow to its
 * natural width (min-content), and let its grid cell/nav-row parent
 * accommodate that width instead of squeezing the button.
 * ========================================================================= */
@media (min-width: 1024px) {

    /* Button link itself: fits its content, doesn't shrink below it */
    header a[href*="kitchen-survey"] {
        min-width: max-content !important;
        flex-shrink: 0 !important;
    }

    /* The inner pill div (flex-nowrap p-1 px-3 …) */
    header a[href*="kitchen-survey"] > div {
        white-space: nowrap !important;
        min-width: max-content !important;
        overflow: visible !important;
    }

    /* And the text container inside the pill */
    header a[href*="kitchen-survey"] > div > div {
        white-space: nowrap !important;
        overflow: visible !important;
    }

    /* The immediate grid parent must also let the item grow */
    header .grid.justify-items-end {
        min-width: max-content !important;
    }
}


/* =========================================================================
 * Search box compaction - desktop + intermediate viewports (≥ 769px)
 *
 * The mini-search wrapper has p-4 py-3 (16px sides + 12px top/bottom)
 * and the input has my-2 (8px top/bottom margin) + leading-normal (1.5).
 * On the header row that adds up to a ~56px tall search field that's
 * 3x the height of the Sign in / Cart text next to it — visually
 * dominating the header. Trim wrapper padding + input margins to bring
 * the search box in line with the surrounding controls.
 * ========================================================================= */
@media (min-width: 769px) and (max-width: 1023px) {
    #search_mini_fullblock {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    #search_mini_fullblock input#search {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        line-height: 1.4 !important;
    }
    #search_mini_fullblock .minisearch {
        align-items: center !important;
    }
}