/**
 * Arbor — 404 + search results + the mobile search overlay.
 * Enqueued by inc/arbor-utility-pages.php. Builds on the .arbor-cat scaffold
 * (arbor-category.css) and the PLP cards (arbor-shop.css).
 * Design language: no borders, no lines, no shadows — space, fill, radius.
 */

/* ================================= Hero ================================= */
.arbor-util__hero {
    padding: var(--ds-space-6) 0 var(--ds-space-5);
    text-align: center;
}
.arbor-util__hero .container { max-width: 820px; }
.arbor-util__kicker {
    margin: 0 0 var(--ds-space-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-brand);
}
.arbor-cat .arbor-util__title {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: var(--ds-fw-display);
    line-height: var(--ds-lh-tight);
    margin: 0 0 var(--ds-space-3);
    overflow-wrap: anywhere;
}
.arbor-util__lead {
    margin: 0 auto var(--ds-space-4);
    max-width: 620px;
    font-size: 17px;
    line-height: var(--ds-lh-body);
    color: var(--ds-body);
}

/* ============================ Search form =============================== */
.arbor-util__search {
    display: flex;
    gap: var(--ds-space-1);
    max-width: 620px;
    margin: 0 auto;
    padding: 6px;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-pill);
}
.arbor-util .arbor-util__search-input,
.arbor-util .arbor-util__search-input:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 20px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--ds-font-body);
    font-size: 16px;
    color: var(--ds-ink);
    outline: none;
}
.arbor-util__search:focus-within { background: var(--ds-surface-overlay); }
/* Real <button>: out-specify the theme's `button{color:#fff!important}` and the
   Elementor kit's `.elementor-kit-12 button{background:#F1F1F1}`. */
.arbor-util .arbor-util__search .arbor-util__search-btn {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-brand);
    color: var(--ds-on-brand) !important;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-button);
    font-weight: var(--ds-fw-button);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.arbor-util .arbor-util__search .arbor-util__search-btn:hover,
.arbor-util .arbor-util__search .arbor-util__search-btn:focus-visible { background: #8f0c19; }

/* ============================ Link tiles ================================ */
.arbor-util__links {
    padding: var(--ds-space-6) 0;
    background: var(--ds-surface);
}
.arbor-util__tiles {
    list-style: none;
    margin: var(--ds-space-4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ds-space-2);
}
.arbor-util__tiles li { margin: 0; padding: 0; }
.arbor-util__tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-page);
    border-radius: var(--ds-radius);
    text-decoration: none !important;
    transition: background .2s ease;
}
.arbor-util__tile:hover,
.arbor-util__tile:focus-visible { background: var(--ds-surface-overlay); }
.arbor-util__tile-title {
    font-family: var(--ds-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ds-ink);
}
.arbor-util__tile-sub { font-size: 14px; line-height: 1.5; color: var(--ds-body); }
.arbor-util__home { margin: var(--ds-space-5) 0 0; text-align: center; }

/* ========================= Search: products ============================= */
.arbor-util__products { padding-top: var(--ds-space-4); }
.arbor-util__more { margin: var(--ds-space-4) 0 0; text-align: center; font-size: 15px; }

/* ===================== Search: pages and posts ========================== */
.arbor-util__content { padding: var(--ds-space-5) 0 var(--ds-space-6); }
.arbor-util__content .container { max-width: 900px; }
.arbor-util__results {
    list-style: none;
    margin: var(--ds-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--ds-space-2);
}
.arbor-util__results li { margin: 0; padding: 0; }
.arbor-util__result-link {
    display: grid;
    gap: 4px;
    padding: var(--ds-space-3) var(--ds-space-4);
    background: var(--ds-surface);
    border-radius: var(--ds-radius);
    text-decoration: none !important;
    transition: background .2s ease;
}
.arbor-util__result-link:hover,
.arbor-util__result-link:focus-visible { background: var(--ds-surface-overlay); }
.arbor-util__result-type {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ds-brand);
}
.arbor-util__result-title {
    font-family: var(--ds-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--ds-ink);
}
.arbor-util__result-ex { font-size: 15px; line-height: 1.6; color: var(--ds-body); }

@media (max-width: 767px) {
    .arbor-util__hero { padding: var(--ds-space-5) 0 var(--ds-space-4); }
    .arbor-util__lead { font-size: 16px; }
    .arbor-util .arbor-util__search .arbor-util__search-btn { padding: 0 18px; }
    .arbor-util__links { padding: var(--ds-space-5) 0; }
    .arbor-util__tile,
    .arbor-util__result-link { padding: var(--ds-space-2) var(--ds-space-3); border-radius: 24px; }
}

/* ===================== Header search overlay (all pages) ================ */
/* Theme overlay is a 60%-wide bare input; give it the design-language pill. */
body.arbor-ds .gs-fullscreen-search .search-wrapper-form input[type='search'] {
    font-family: var(--ds-font-body);
    background: var(--ds-surface) !important;
    border: 0 !important;
    border-radius: var(--ds-radius-pill) !important;
    color: var(--ds-ink);
}
@media (max-width: 991px) {
    body.arbor-ds .gs-mobile-header-holder .search-button-wrapper {
        display: flex !important;
        align-items: center;
        margin-right: 12px;
    }
    body.arbor-ds .gs-mobile-header-holder .search-button-wrapper .search-button-trigger { display: flex; color: var(--ds-ink); }
    body.arbor-ds .gs-mobile-header-holder .search-button-wrapper .search-button-trigger svg { width: 22px; height: 22px; }
    body.arbor-ds .gs-fullscreen-search--mobile .search-wrapper-form { width: calc(100% - 32px) !important; }
    body.arbor-ds .gs-fullscreen-search--mobile .search-wrapper-form input[type='search'] {
        font-size: 18px !important;
        padding: 18px 56px 18px 22px !important;
    }
    /* The icon morphs into the close × in place — keep it above the overlay. */
    body.arbor-ds .gs-mobile-header-holder .search-button-wrapper { position: relative; z-index: 120; }
    body.arbor-ds.search-is-open .gs-mobile-header-holder .site-header-tools { position: relative; z-index: 120; }
}