/**
 * SPOT432 header: announcement bar, sticky header (logo, search, cart)
 * and the navigation row. Colours and fonts come from the tokens in
 * style.css (:root), with fallbacks so this file also works on its own.
 */

/* ---------- Announcement bar ---------- */

.spot432-announce {
    background: var(--s4-oxblood, #8c2434);
    color: #fff;
    font-family: var(--s4-font-body, "DM Sans", system-ui, sans-serif);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
}

.spot432-announce p {
    padding: 9px 16px;
}

.spot432-announce a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.spot432-announce a:hover {
    text-decoration-color: #fff;
}

/* ---------- Sticky header ---------- */

.spot432-header {
    width: 100%;
    color: var(--s4-ink, #1f1416);
    font-family: var(--s4-font-body, "DM Sans", system-ui, sans-serif);
    box-shadow: 0 1px 0 rgba(31, 20, 22, 0.08), 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Keep the sticky header below the WordPress admin bar for logged-in users. */
body.admin-bar .spot432-header,
body.admin-bar .sticky-header { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .spot432-header,
    body.admin-bar .sticky-header { top: 46px; }
}

@media (max-width: 600px) {
    /* The admin bar scrolls away at this width. */
    body.admin-bar .spot432-header,
    body.admin-bar .sticky-header { top: 0; }
}

.spot432-header *,
.spot432-header *::before,
.spot432-header *::after,
.sticky-header *,
.sticky-header *::before,
.sticky-header *::after {
    box-sizing: border-box;
}

.spot432-header ul,
.sticky-header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spot432-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 76px;
}

.spot432-logo-link {
    display: inline-flex;
    flex: none;
    line-height: 0;
}

.spot432-logo {
    width: auto;
    height: 224px !important;
    max-width: none;
    padding: 20px 0;
    margin: 0 auto;
}

/* ---------- Header search ---------- */

.spot432-header-search {
    flex: 1;
    min-width: 400px;
    max-width: 640px;
    margin: 0 auto;
}

.spot432-home-search {
    position: relative;
    top: 25px;
    display: flex;
    width: 100%;
}

.spot432-home-search-input {
    width: 100%;
    height: 36px;
    padding: 0 56px 0 20px;
    border: 1.5px solid rgba(31, 20, 22, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--s4-ink, #1f1416);
    font-family: inherit;
    font-size: 15px;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.55);    
    transition: border-color 0.15s ease, box-shadow 0.15s ease;    
    /* transition: border-color 0.15s ease, box-shadow 0.15s ease; */
}

.spot432-home-search-input::placeholder {
    color: var(--s4-muted, #75665f);
}

.spot432-home-search-input:focus {
    /* border-color: var(--s4-oxblood, #8c2434); */
    /* box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45);     */
}

.spot432-home-search-button {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--s4-oxblood, #8c2434);
    color: #fff;
    cursor: pointer;
}

.spot432-home-search-button:hover {
    background: var(--s4-oxblood-dark, #6d1a27);
}

.spot432-home-search-button .spot432-icon {
    width: 18px;
    height: 18px;
}

/* ---------- Cart ---------- */

.spot432-nav-actions {
    display: flex;
    flex: none;
    align-items: center;
}

.spot432-cart-link {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: inherit;
    transition: background-color 0.15s ease;
}

.spot432-cart-link:hover {
    background: rgba(31, 20, 22, 0.07);
}

.spot432-cart-icon {
    width: 36px;
    height: 36px;
    color: var(--s4-weed);
}

.spot432-cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--s4-cream, #f5ecdd);
    border-radius: 999px;
    background: var(--s4-oxblood, #8c2434);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.spot432-cart-count[hidden] {
    display: none;
}

/* ---------- Navigation row ---------- */
.spot432-nav-container{
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 80%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

/* Categories wrapper: the dropdown is positioned against this element, so it
   opens directly under the "Categories" link. It fills the bar's height so the
   dropdown starts at the bottom edge of the nav bar, with no gap. */
.spot432-has-submenu {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.sticky-sentinel {
    height: 1px;
    width: 1px;
}

.sticky-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease;
}

.sticky-header.is-stuck{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 0 10%;
}

.sticky-header.is-stuck .spot432-nav{
    background: #000;
    border: none;
    margin: 0 auto;
    width: 80%;
}

.sticky-header.is-stuck .spot432-header-search{
    position: relative;
    top: -25px;
}

.sticky-header.is-stuck .spot432-nav .spot432-nav-cta .spot432-nav-link{
    color: var(--s4-oxblood-light);
}

.sticky-header.is-stuck .spot432-nav .spot432-nav-container a, .sticky-header.is-stuck .spot432-nav .spot432-nav-container button{
    color: #fff;
}

/* The rule above turns links white on the dark stuck bar; the Categories
   dropdown keeps its cream background, so its links stay dark (desktop). */
@media (min-width: 769px) {
    .sticky-header.is-stuck .spot432-nav .spot432-nav-container .spot432-submenu a {
        color: var(--s4-ink, #1f1416);
    }
}

.spot432-nav {
    width: 100%;
    margin-bottom: 10px;
    align-self: flex-start;    
    border-left: none;
    border-right: none;
    background: rgba(245, 236, 221, 0.8);
    border: 2px solid #4a3b38;
    border-left: none;
    border-right: none;
}

.spot432-nav-menu {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-height: 48px;
}

.spot432-nav-menu > li {
    position: relative;
    display: flex;
    align-items: center;
}

.spot432-nav-link,
.spot432-submenu-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    border: 0;
    background: none;
    color: var(--s4-ink-soft, #4a3b38);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.spot432-nav-menu > li:first-child .spot432-nav-link { padding-left: 0; }

.spot432-nav-link:hover,
.spot432-submenu-toggle:hover,
.spot432-submenu-toggle[aria-expanded="true"] {
    color: var(--s4-oxblood, #8c2434);
}

/* Current page: a short oxblood bar along the bottom edge. */
.spot432-nav-link[aria-current="page"] {
    color: var(--s4-ink, #1f1416);
}

.spot432-nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    top: 20px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--s4-weed);
}

.spot432-nav-menu > li:first-child .spot432-nav-link[aria-current="page"]::after { left: 0; }

/* "Request an item" sits at the far right of the row. */
.spot432-nav-cta{ 
    margin-left: 40px;
}

.spot432-nav-cta .spot432-nav-link {
    padding-right: 0;
    color: var(--s4-oxblood, #8c2434);
}

.spot432-nav-cta .spot432-nav-link:hover {
    color: var(--s4-oxblood-dark, #6d1a27);
    text-decoration: underline;
}

.spot432-header a:focus-visible,
.spot432-header button:focus-visible,
.sticky-header a:focus-visible,
.sticky-header button:focus-visible {
    outline: 2px solid var(--s4-oxblood, #8c2434);
    outline-offset: 2px;
}

.spot432-chevron {
    transition: transform 0.2s ease;
}

.spot432-submenu-toggle[aria-expanded="true"] .spot432-chevron {
    transform: rotate(180deg);
}

/* ---------- Categories dropdown (desktop) ---------- */

.spot432-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 15rem;
    max-height: 70vh; /* fallback; nav.js fits it to the space below */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;   
    border-radius: 0 0 12px 12px;
    background: rgba(245, 236, 221, 0.94);
    box-shadow: 0 18px 40px rgba(23, 15, 14, 0.22);
}

/* Open by click (JS), and by hover/keyboard focus as a no-JS fallback. */
.spot432-has-submenu.is-open > .spot432-submenu,
.sticky-header:not(.is-js) .spot432-has-submenu:focus-within > .spot432-submenu {
    display: block;
}

/* No-JS fallback only. With JS, hover is handled in spot432-nav.js
   with a short close delay so the dropdown is forgiving to mouse paths. */
@media (min-width: 769px) and (hover: hover) {
    .sticky-header:not(.is-js) .spot432-has-submenu:hover > .spot432-submenu {
        display: block;
    }
}

.spot432-submenu-link {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--s4-ink, #1f1416);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.spot432-submenu-link:hover {
    background: var(--s4-cream, #f5ecdd);
    color: var(--s4-oxblood, #8c2434);
}

.spot432-submenu-link[aria-current="page"] {
    color: var(--s4-oxblood, #8c2434);
    font-weight: 700;
}

.spot432-submenu-children {
    padding-left: 12px !important;
}

.spot432-submenu-children .spot432-submenu-link {
    color: var(--s4-ink-soft, #4a3b38);
    font-size: 14px;
}

.spot432-submenu {
    scrollbar-width: thin;
    scrollbar-color: var(--s4-oxblood);
}

/* ---------- Hamburger (phones only) ---------- */

.spot432-nav-toggle {
    display: none;
    color: var(--s4-ink, #1f1416);
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.spot432-nav-toggle:hover {
    background: rgba(31, 20, 22, 0.07);
}

.spot432-nav-toggle-bar {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.spot432-nav-toggle-bar:nth-child(1) { top: calc(50% - 7px); }
.spot432-nav-toggle-bar:nth-child(2) { top: calc(50% - 1px); }
.spot432-nav-toggle-bar:nth-child(3) { top: calc(50% + 5px); }

.spot432-nav-toggle[aria-expanded="true"] .spot432-nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.spot432-nav-toggle[aria-expanded="true"] .spot432-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.spot432-nav-toggle[aria-expanded="true"] .spot432-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Tablet ---------- */

@media (max-width: 1000px) {
    .spot432-header-row { gap: 16px; }
    .spot432-nav-link,
    .spot432-submenu-toggle { padding: 0 10px; }
}

/* ---------- Phones ---------- */

@media (max-width: 768px) {
    .spot432-nav-toggle {
        display: inline-block;
        margin-left: -8px;
    }

    /* Row 1: menu button | logo.  Row 2 (nav row): search + cart, always
       visible. The page links drop open beneath them from the menu button. */
    .spot432-header-row {
        flex-wrap: wrap;
        gap: 4px 8px;
        min-height: 0;
        padding-top: 8px;
        padding-bottom: 10px;
    }

    .spot432-logo-link { margin: 0 auto; }
    .spot432-logo { height: 46px; }
    .spot432-logo-sm { max-width: 140px !important; align-self: flex-end; }    

    .spot432-nav-container {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0 8px;
        width: 100%;
        padding: 10px 16px;
    }

    .spot432-header-search {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    /* Bar row: hamburger on the left, cart on the right. */
    .spot432-nav-toggle {
        order: 0;
    }

    .spot432-nav-actions {
        order: 2;
        margin-left: auto;
    }

    /* Search: full-width row under the bar (it sits outside the nav). */
    .sticky-header > .spot432-header-search {
        flex: none;
        width: 100%;
        min-width: 0;
        padding: 0 16px 10px;
    }

    /* Stuck bar stacks instead of squeezing nav and search side by side. */
    .sticky-header.is-stuck {
        flex-direction: column;
        align-items: stretch;
    }

    /* Page links, Categories and "Request an item": full-width rows below. */
    .spot432-nav-container > .spot432-nav-link,
    .spot432-nav-container > .spot432-has-submenu,
    .spot432-nav-container > .spot432-nav-cta {
        order: 3;
        flex: 1 1 100%;
        display: block;
        border-top: 1px solid rgba(31, 20, 22, 0.08);
    }

    .spot432-nav-container > .spot432-nav-link:first-child {
        margin-top: 10px;
    }

    .spot432-home-search-input {
        height: 44px;
        font-size: 16px; /* stops iOS zooming in on focus */
    }

    .spot432-home-search-button {
        width: 36px;
        height: 36px;
    }

    /* With JS the page links stay hidden until the menu button opens them;
       search and cart are always shown. */
    .sticky-header.is-js:not(.is-open) .spot432-nav-container > .spot432-nav-link,
    .sticky-header.is-js:not(.is-open) .spot432-nav-container > .spot432-has-submenu,
    .sticky-header.is-js:not(.is-open) .spot432-nav-container > .spot432-nav-cta {
        display: none;
    }

    /* nav.js sets max-height to the space left below the menu. */
    .sticky-header.is-js.is-open .spot432-nav {
        max-height: calc(100vh - 140px); /* fallback until the script runs */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .spot432-nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding-bottom: 12px;
    }

    .spot432-nav-menu > li {
        display: block;
    }

    .spot432-nav-menu > li + li {
        border-top: 1px solid rgba(31, 20, 22, 0.08);
    }

    .spot432-nav-link,
    .spot432-submenu-toggle,
    .spot432-nav-menu > li:first-child .spot432-nav-link {
        width: 100%;
        height: auto;
        justify-content: space-between;
        padding: 15px 0;
        font-size: 17px;
    }

    .spot432-nav-link[aria-current="page"]::after {
        left: 0 !important;
        right: auto;
        top: 50%;
        bottom: auto;
        width: 3px;
        height: 18px;
        margin-left: -12px;
        transform: translateY(-50%);
        border-radius: 0 3px 3px 0;
    }

    .spot432-nav-cta {
        margin-left: 0;
    }

    /* Categories expand inline as an accordion. */
    .spot432-submenu {
        position: static;
        min-width: 0;
        max-height: none;
        padding: 0 0 10px 8px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .sticky-header:not(.is-js) .spot432-submenu {
        display: block;
    }

    .spot432-submenu-link {
        padding: 10px 8px;
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .sticky-header.is-stuck{
        background: rgba(0, 0, 0, 0.88);
    }    
}

@media (prefers-reduced-motion: reduce) {
    .spot432-chevron,
    .spot432-nav-toggle-bar,
    .spot432-home-search-input,
    .spot432-cart-link {
        transition: none;
    }
}