/* ============================================================
   Square Furniture Collection site header (partial/header.blade.php)
   The colours are the storefront sign's: the utility row is its charcoal frame; the main row and the
   room navigation are white, like its panels, with the sign itself as the logo and the navigation
   lettered in the charcoal between hairline rules. Phones keep one charcoal bar with the sign on it.
   Utility row and main row share one full-width grid: the open/closed status and the sign on the
   left, "Contact" and the phone number on the right. The gutter matches the footer's (.lf__wrap), so
   header and footer share edges. The room navigation is centred under the search box. Loaded after
   header.css, whose rules are mostly !important, so the navigation overrides below are scoped to
   #header and use !important too.
   ============================================================ */

:root {
    --sh-ink: #33322d;          /* the sign's charcoal frame: utility row, and the room navigation's lettering */
    --sh-text: #f2f1ec;         /* the sign's white panels */
    --sh-muted: rgba(242, 241, 236, 0.7);
    --sh-timber: #d3d0c4;       /* light stucco; the accent on the charcoal bars */
    --sh-paper: #ffffff;        /* the main row and room navigation */
    --sh-hairline: rgba(51, 50, 45, 0.12);   /* the rules above and below the room navigation */
    --sh-letter: #3b3a35;       /* the sign's lettering: text on the main row */
    --sh-rule: rgba(255, 255, 255, 0.1);
    --sh-wrap: none;            /* full width, like the hero and footer */
    --sh-gutter: clamp(1.2rem, 3vw, 3rem);
    --sh-sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --sh-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sh-caps: 'Archivo', 'Segoe UI', system-ui, sans-serif;   /* uppercase labels: room menu, sales & service */
}

.sh-wrap {
    max-width: var(--sh-wrap);
    margin-inline: auto;
    padding-inline: var(--sh-gutter);
}

/* ---------- Utility row ---------- */

.sh-utility {
    background: var(--sh-ink);
    border-bottom: 1px solid var(--sh-rule);
    color: var(--sh-muted);
    font: 500 13px/1.4 var(--sh-sans);
}

.sh-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 38px;
}

.sh-utility__visit {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.sh-status {
    display: block;
    color: var(--sh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Open: green; closed: the muted tone, so a closed store does not read as an error. */
.sh-status::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--sh-muted);
    vertical-align: 1px;
}

.sh-status.is-open::before {
    background: #8cc79a;
}

.sh-utility a {
    color: var(--sh-muted);
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

.sh-utility a:hover,
.sh-utility a:focus-visible {
    color: var(--sh-text);
    text-decoration: underline;
}

.sh-utility__address {
    white-space: nowrap;
}

.sh-utility__links {
    display: flex;
    gap: 28px;
    white-space: nowrap;
}

.sh-utility__call {
    display: none;
}

/* ---------- Main row ---------- */

.sh-main {
    background: var(--sh-paper);
    border-bottom: 0;
}

/* Equal side columns keep the search box on the page centre, in line with the centred room navigation; a
   narrow window shrinks the search before the wordmark or phone number. */
.sh-main__inner {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 560px) minmax(max-content, 1fr);
    align-items: center;
    gap: 48px;
    min-height: 100px;
}

.sh-brand {
    display: block;
    line-height: 0;
}

/* The storefront sign (SQUARE light box over the FURNITURE panel) is a 947x380 raster: shown well under its
   size so it stays sharp, never stretched. */
.sh-brand img {
    display: block;
    width: auto;
    height: 76px;
}

.sh-search {
    justify-self: center;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 560px;
    height: 44px;
    margin: 0;
    border: 1px solid rgba(59, 58, 53, 0.35);
    background: #fbfbf9;
    transition: border-color 0.2s ease;
}

.sh-search:focus-within {
    border-color: var(--sh-letter);
}

.sh-search input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--sh-letter);
    font: 400 15px var(--sh-sans);
    outline: none;
}

.sh-search input::placeholder {
    color: #7a786f;
}

.sh-search input::-webkit-search-cancel-button {
    opacity: 0.6;
}

.sh-search button {
    width: 48px;
    border: 0;
    border-left: 1px solid rgba(59, 58, 53, 0.25);
    background: transparent;
    color: var(--sh-letter);
    font-size: 15px;
    cursor: pointer;
}

.sh-search button:hover,
.sh-search button:focus-visible {
    background: var(--sh-letter);
    color: var(--sh-text);
}

/* The grid is as wide as the number, so the "Sales & Service" label below is spread to exactly that width. */
.sh-contact {
    justify-self: end;
    display: grid;
    line-height: 1.25;
    text-align: right;
    text-decoration: none;
}

.sh-contact__label {
    color: var(--sh-letter);
    font: 600 15px var(--sh-caps);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: justify;
    text-align-last: justify;
}

.sh-contact__number {
    color: var(--sh-letter);
    font: 600 19px var(--sh-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.sh-contact:hover .sh-contact__number,
.sh-contact:focus-visible .sh-contact__number {
    color: #1f1e1b;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.sh-utility a:focus-visible {
    outline: 2px solid var(--sh-timber);
    outline-offset: 3px;
}

/* On the white row the outline is the lettering colour. */
.sh-brand:focus-visible,
.sh-contact:focus-visible,
.sh-search button:focus-visible {
    outline: 2px solid var(--sh-letter);
    outline-offset: 3px;
}

/* ---------- Room navigation (sticky) ---------- */

#header .navbar {
    border-top: 0 !important;
    border-bottom: 1px solid var(--sh-rule) !important;
}

#header .navbar .container-fluid {
    max-width: var(--sh-wrap);
    padding-left: var(--sh-gutter) !important;
    padding-right: var(--sh-gutter) !important;
}

@media (min-width: 992px) {
    /* White like the main row, set apart by hairlines (the bottom one also edges the bar when it sticks);
       the phone bar below 992px stays charcoal (header.css --header-bg). */
    #header .navbar,
    #header .navbar .container-fluid,
    #header .desktop-navbar-only {
        background: var(--sh-paper) !important;
    }

    #header .navbar {
        border-top: 1px solid var(--sh-hairline) !important;
        border-bottom: 1px solid var(--sh-hairline) !important;
    }

    #header #main_nav {
        width: 100%;
    }

    /* Rooms sit in a centred group under the search box, a fixed gap apart (spread edge to edge on a wide
       screen they were ~150px apart and read as separate items rather than one menu). */
    #header #main_nav .navbar-nav {
        width: 100%;
        justify-content: center;
        align-items: stretch;
        gap: 0 clamp(28px, 3vw, 52px) !important;
    }

    /* Items stay display:block: the mega menus are absolutely positioned at their static position, which is
       below the link only in block flow (in a flex item it would be the item's top, over the row). */
    #header .navbar-nav .nav-link {
        position: relative;
        min-height: 52px;
        padding: 0 !important;
        font-family: var(--sh-caps) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--sh-ink) !important;
        background-color: transparent !important;
        /* A charcoal rule under the label: grows from the centre on hover and focus, full on the current page. */
        background-image: linear-gradient(var(--sh-ink), var(--sh-ink)) !important;
        background-repeat: no-repeat !important;
        background-position: 50% calc(100% - 13px) !important;
        background-size: 0 1.5px !important;
        box-shadow: none !important;
        transition: background-size 0.25s ease, color 0.2s ease;
    }

    #header .navbar-nav .nav-link:hover,
    #header .navbar-nav .nav-link:focus-visible,
    #header .navbar-nav .nav-item:hover > .nav-link,
    #header .navbar-nav .nav-item.show > .nav-link {
        color: #1f1e1b !important;
        background-color: transparent !important;
        background-size: 100% 1.5px !important;
    }

    #header .navbar-nav .nav-link.active {
        color: #1f1e1b !important;
        background-color: transparent !important;
        background-size: 100% 1.5px !important;
        box-shadow: none !important;
    }

    #header .navbar-nav .nav-link:focus-visible {
        outline: 2px solid var(--sh-ink);
        outline-offset: 4px;
    }

    /* Account: unlike the room mega menus, a narrow panel centred under its own link. */
    #header .navbar-nav .nav-item.sh-nav-account {
        position: relative !important;
    }

    #header .navbar .sh-nav-account > .sh-account-menu {
        position: absolute !important;
        top: 100%;
        left: 50%;
        right: auto;
        min-width: 230px;
        padding: 8px 0;
        border-radius: 0;
        transform: translateX(-50%);
    }

    #header .navbar .sh-nav-account:focus-within > .sh-account-menu {
        display: block;
    }

    #header .sh-account-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 11px 22px;
        background: none;
        font: 500 15px var(--sh-sans);
        text-align: left;
        cursor: pointer;
    }

    #header .sh-account-menu .dropdown-item i {
        width: 16px;
        color: #6e6b61;
        text-align: center;
    }

    #header .sh-account-menu .dropdown-item:hover,
    #header .sh-account-menu .dropdown-item:focus-visible {
        background: #eeede8 !important;
    }

    /* Sign Out sits under a rule, apart from the pages. */
    #header .sh-account-menu li:has(button) {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(23, 23, 23, 0.1);
    }

    /* The mega menu spans the window; its thumbnails start on the same grid edge as the wordmark. */
    #header .navbar .nav-item.dropdown > .dropdown-menu .category-row {
        max-width: var(--sh-wrap);
        margin-inline: auto;
        padding-inline: calc(var(--sh-gutter) - 12px);
    }

}

/* Two stores' worth of utility links: the street address gives way below wide desktops. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .sh-utility__address {
        display: none;
    }
}

/* Smaller laptops: tighter rows, same structure. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sh-utility__links {
        gap: 20px;
    }

    .sh-main__inner {
        gap: 32px;
        min-height: 90px;
    }

    .sh-brand img {
        height: 66px;
    }

    #header .navbar-nav .nav-link {
        font-size: 14px !important;
    }
}

/* ---------- Tablets and phones ---------- */

@media (max-width: 991.98px) {
    :root {
        --sh-gutter: 16px;
    }

    .sh-main,
    .sh-utility__links,
    .sh-utility__address {
        display: none;
    }

    .sh-utility__inner {
        min-height: 44px;
        gap: 12px;
    }

    .sh-utility__visit {
        flex: 1;
    }

    .sh-utility__call {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        color: var(--sh-timber) !important;
        font-size: 14px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .sh-utility__call i {
        font-size: 12px;
    }

    /* One 60px sticky bar: menu, wordmark, search. */
    #header .navbar .container-fluid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #header .mobile-top-actions {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        min-height: 60px;
        padding: 0 !important;
        gap: 8px;
    }

    #header .mobile-top-actions .navbar-toggler,
    #header .mobile-top-actions .mobile-search-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--sh-text) !important;
        font-size: 20px !important;
    }

    #header .mobile-top-actions .navbar-toggler i,
    #header .mobile-top-actions .mobile-search-icon i {
        color: var(--sh-text) !important;
    }

    #header .mobile-top-actions .navbar-toggler:focus-visible,
    #header .mobile-top-actions .mobile-search-icon:focus-visible,
    .sh-mobile-brand:focus-visible {
        outline: 2px solid var(--sh-timber) !important;
        outline-offset: 2px;
    }

    #header .mobile-actions-right {
        display: flex;
        justify-content: flex-end;
        margin: 0 !important;
    }

    .sh-mobile-brand {
        justify-self: center;
        display: block;
        line-height: 0;
    }

    /* The same sign, scaled down to fit between the menu and search buttons on the charcoal bar. */
    .sh-mobile-brand img {
        display: block;
        width: auto;
        height: 42px;
    }
}

/* Mobile menu panel: sentence/title case at a readable size. */
.mobile-canvas .mobile-nav-section {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font: 600 14px var(--sh-sans) !important;
    color: #6b685c !important;
}

.mobile-canvas .mobile-accordion__link,
.mobile-canvas .mobile-submenu__link {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: var(--sh-sans) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.mobile-canvas .mobile-submenu__link {
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Sign Out submits the logout form, so it is a button made to look like the links above it. */
.mobile-canvas .mobile-accordion__link--button {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
}

@media (min-width: 992px) {
    .sh-mobile-brand {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-utility a,
    .sh-search,
    #header .navbar-nav .nav-link {
        transition: none !important;
    }
}