/* =========================================================
   STOREFRONT HEADER
   =========================================================

   This header keeps the menu, search, cart, and location selector in one
   connected site control area instead of leaving separate controls floating
   over the page background.

   Activity-log note:
   Header CSS does not write logs. If these controls later become editable
   from Admin, log the durable Admin save action in that controller.
   ========================================================= */

.site-header {
    width: calc(100% - 100px);
    max-width: 4000px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 3000;
    font-family: Arial, Helvetica, sans-serif;
}

.site-header-inner {
    background: rgba(var(--wwd-colour-background-rgb, 225, 228, 230), 0.97);
    border: 1px solid rgba(var(--wwd-colour-dark-blue-rgb), 0.35);
    border-top: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.site-header-utility {
    /*
        Desktop-only three-zone layout:
        left logo, constrained centered search, and right cart/location tools.
        The mobile breakpoint below restores the previous simple search bar
        layout so phone behavior is not changed by the desktop header update.
    */
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 700px) minmax(220px, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px 8px;
    background: var(--wwd-colour-background);
    box-sizing: border-box;
}

.site-header-brand,
.site-header-brand:visited {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-width: 0;
    text-decoration: none;
}

.site-header-brand-image {
    display: block;
    width: 180px;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
}

.header-search {
    display: flex;
    align-items: stretch;
    justify-self: center;
    width: 100%;
    max-width: 700px;
    min-width: 0;
    margin: 0;
}

.header-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #aab4c2;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    background: #ffffff;
    color: #222222;
}

.header-search button {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--wwd-colour-dark-blue);
    border-radius: 0 8px 8px 0;
    background: var(--wwd-button-gradient);
    color: var(--wwd-colour-white);
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
}

.header-search button:hover,
.header-search button:focus {
    background: var(--wwd-button-hover-gradient);
}

.site-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 10px;
    flex: 0 0 auto;
}

.site-mobile-topbar {
    display: none;
}

.site-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.site-mobile-home,
.site-mobile-home:visited {
    color: var(--wwd-colour-white);
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
    font-size: 32px;
}

.site-header-cart,
.site-header-cart:visited {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid rgba(var(--wwd-colour-dark-blue-rgb), 0.35);
    border-radius: 999px;
    background: #ffffff;
    color: var(--wwd-colour-dark-blue);
    font-weight: bold;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 3px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
}

.site-header-cart:hover,
.site-header-cart:focus {
    background: #f4f6f8;
    color: var(--wwd-colour-dark-blue);
    text-decoration: none;
}

.site-header-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--wwd-colour-dark-blue);
    color: var(--wwd-colour-white);
    font-size: 12px;
    line-height: 1;
    box-sizing: border-box;
}

.site-header-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--wwd-colour-dark-blue);
}

.site-header-cart-icon svg {
    width: 28px;
    height: 28px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header-cart-count--badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    font-size: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.region-widget {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.region-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 4px 10px 4px 14px;
    border: 1px solid rgba(var(--wwd-colour-dark-blue-rgb), 0.30);
    border-radius: 999px;
    background: linear-gradient(#ffffff, #e7ecef);
    color: #111111;
    cursor: pointer;
    list-style: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
}

.region-summary::-webkit-details-marker {
    display: none;
}

.region-summary::marker {
    content: "";
}

.region-summary-label {
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.region-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    border-radius: 4px;
    font-size: 21px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.8);
}

.region-flag img,
.region-menu-flag img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.region-flag-code {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.03em;
}

.region-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 3500;
    width: 230px;
    padding: 8px;
    border: 1px solid #bac4d0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
}

.region-menu-current {
    padding: 5px 7px 8px;
    border-bottom: 1px solid #e1e4e6;
    margin-bottom: 5px;
    color: #333333;
    font-size: 12px;
    font-weight: bold;
}

.region-menu-link,
.region-menu-link:visited {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 7px;
    border-radius: 7px;
    color: var(--wwd-colour-dark-blue);
    text-decoration: none;
    font-weight: bold;
}

.region-menu-link:hover,
.region-menu-link:focus,
.region-menu-link.is-active {
    background: rgba(var(--wwd-colour-light-blue-rgb), 0.12);
    color: var(--wwd-colour-dark-blue);
    text-decoration: none;
}

.region-menu-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 19px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 1;
    text-align: center;
    background: #ffffff;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1100px) {
    .site-header-utility {
        /*
            Medium-width desktop / landscape phone layout.

            The wider desktop grid uses equal flexible side tracks to keep the
            search box visually centred on the page. On narrower screens those
            side tracks can become smaller than the logo/actions they contain,
            which lets the search button visually collide with the Cart pill.

            At this breakpoint, use intrinsic-width side columns and allow only
            the search column to shrink. The full mobile header still begins at
            the existing 768px breakpoint below, so the phone layout itself is
            not changed.

            Activity-log location:
            This is passive responsive styling only. Do not log viewport/layout
            changes; durable header/background Admin saves are logged by their
            controllers.
        */
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 10px;
    }

    .site-header-brand-image {
        width: 150px;
        max-height: 36px;
    }

    .header-search {
        max-width: 560px;
    }
}

@media (max-width: 920px) and (min-width: 769px) {
    .site-header-utility {
        column-gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .site-header-brand-image {
        width: 135px;
        max-height: 34px;
    }

    .site-header-actions {
        gap: 7px;
    }

    .site-header-cart,
    .site-header-cart:visited {
        padding-left: 8px;
        padding-right: 8px;
    }

    .region-summary {
        gap: 7px;
        padding-left: 10px;
        padding-right: 8px;
    }
}

@media (max-width: 900px) {
    .site-header {
        width: calc(100% - 20px);
    }
}

@media (max-width: 768px) {
    .site-header {
        width: 100%;
        margin: 0;
    }

    .site-header-inner {
        border-left: none;
        border-right: none;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }

    .site-mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 43px;
        padding: 5px 8px;
        background: var(--wwd-colour-dark-blue);
        box-sizing: border-box;
    }

    .site-mobile-home {
        flex: 1 1 auto;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
    }

    .site-header-utility {
        display: flex;
        min-height: 0;
        padding: 8px;
        background: linear-gradient(#ffffff, #eef1f3);
    }

    .site-header-brand {
        display: none;
    }

    .site-header-actions--desktop {
        display: none;
    }

    .header-search {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .header-search input[type="text"] {
        height: 36px;
        font-size: 16px;
    }

    .header-search button {
        height: 36px;
    }

    .site-header-cart--mobile,
    .site-header-cart--mobile:visited {
        justify-content: center;
        min-width: 39px;
        min-height: 34px;
        padding: 3px 7px;
        background: #ffffff;
        color: var(--wwd-colour-dark-blue);
    }

    .site-header-cart--mobile .site-header-cart-label {
        display: none;
    }

    .site-header-cart--mobile .site-header-cart-icon {
        width: 27px;
        height: 27px;
    }

    .site-header-cart--mobile .site-header-cart-icon svg {
        width: 27px;
        height: 27px;
    }

    .region-widget--mobile .region-summary {
        min-height: 32px;
        padding: 4px 7px;
    }

    .region-widget--mobile .region-summary-label {
        display: none;
    }

    .region-widget--mobile .region-flag {
        min-width: 30px;
        height: 21px;
        font-size: 0;
        overflow: hidden;
    }

    .region-widget--mobile .region-menu {
        right: 0;
    }
}

@media (max-width: 420px) {
    .site-mobile-home {
        font-size: 13px;
    }

    .site-mobile-actions {
        gap: 5px;
    }

    .site-header-cart--mobile {
        min-width: 37px;
        padding-left: 6px;
        padding-right: 6px;
    }
}