/*
 * Bromley Borough — site chrome (header, footer, buttons, layout primitives).
 * Loads on every page. Section-specific styles live in front-page.css.
 */

/* ---------- Layout primitives ------------------------------------------- */

/*
 * ADR-0019: single fluid container. width: min() gives Figma-exact 80px gutters
 * on a 1440 viewport (1280 centred) AND a guaranteed 16px gutter floor below
 * 1280 — one rule, no per-template padding-inline:0 overrides, no breakpoints.
 */
.bb-container {
    width: min(100% - 2 * var(--ds-gutter), var(--ds-container-max));
    margin-inline: auto;
}

.bb-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;
}

/* ---------- Buttons ------------------------------------------------------ */

.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3) var(--ds-sp-5);
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    cursor: pointer;
    white-space: nowrap;
}

.bb-btn:hover {
    text-decoration: none;
}

/*
 * Primary / Outline button variants — Figma "Buttons" page (164:13016).
 * Default → bg primary-600, hover → primary-800, disabled → gray-500.
 * Outline default → primary-600 border + text; hover → primary-50 fill;
 * disabled → gray-400 border + gray-600 text.
 */
.bb-btn--primary {
    background: var(--ds-color-primary-600);
    color: var(--ds-color-gray-0);
}

.bb-btn--primary:hover {
    background: var(--ds-color-primary-hover);
    color: var(--ds-color-gray-0);
}

.bb-btn--primary:disabled,
.bb-btn--primary[aria-disabled="true"],
.bb-btn--primary.is-disabled {
    background: var(--ds-color-disabled-bg);
    color: var(--ds-color-gray-0);
    cursor: not-allowed;
    pointer-events: none;
}

.bb-btn--ghost {
    background: transparent;
    color: var(--ds-color-text);
    border-color: var(--ds-color-border);
}

.bb-btn--ghost:hover {
    background: var(--ds-color-gray-100);
    color: var(--ds-color-text);
}

.bb-btn--outline {
    background: transparent;
    color: var(--ds-color-primary-600);
    border-color: var(--ds-color-primary-600);
}

.bb-btn--outline:hover {
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
}

.bb-btn--outline:disabled,
.bb-btn--outline[aria-disabled="true"],
.bb-btn--outline.is-disabled {
    background: var(--ds-color-gray-0);
    color: var(--ds-color-disabled-text);
    border-color: var(--ds-color-disabled-border);
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Preloader ---------------------------------------------------- *
 * Parent theme `dclassified` renders `<div id="theme-preloader" style="background-image:url(<green-svg>)">`
 * via inc/general.php::preloader(). Override the image with our brand-coloured
 * dotted spinner. `!important` is necessary to defeat the inline style on the
 * element itself.
 */
#theme-preloader {
    background-image: url('../img/dotted-spinner.svg') !important;
    background-size: 150px 150px !important;
}

/* ---------- Site header -------------------------------------------------- */

.bb-site-header {
    background: var(--ds-color-bg);
    border-bottom: 1px solid var(--ds-color-border-soft);
    position: relative;
    z-index: 30;
}

.bb-site-header__inner {
    width: min(100% - 2 * var(--ds-gutter), var(--ds-container-max)); /* ADR-0019: align logo/burger/action to content line */
    margin-inline: auto;
    padding-block: var(--ds-sp-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-5);
}

/*
 * Two clusters per Figma 169:13324 — brand + nav on the start, search +
 * actions on the end. The header_inner uses `justify-content: space-between`
 * to pin them to opposite edges; intra-cluster gaps come from each group.
 */
.bb-site-header__group {
    display: inline-flex;
    align-items: center;
}

.bb-site-header__group--start {
    gap: var(--ds-sp-8);          /* 32px between brand and nav per Figma */
}

.bb-site-header__group--end {
    gap: var(--ds-sp-10);         /* 40px between search and actions per Figma */
    justify-content: flex-end;
}

/*
 * Brand logotype — Figma frames 169:13324 (header) and 206:5435 (footer).
 * Two stacked serif words ("Bromley" over "Borough") rendered at 81×39px.
 *
 * Render order (see header.php + footer.php + bb_brand_logo_default_html()):
 *   1. WP Custom Logo if uploaded via Appearance → Customize → Logo
 *      (the_custom_logo() output; <a class="custom-logo-link"> wrapper
 *       stripped via the get_custom_logo filter in functions.php to avoid
 *       nested anchors inside our .bb-brand link).
 *   2. PNG bundled at assets/img/bromley-borough-logo.png (the default).
 *   3. Two <span> marks (last-ditch fallback if the PNG is missing).
 *
 * The fixed 81×39 size on all three render paths keeps header/footer chrome
 * height stable across the fallback chain.
 */
 .bb-site-footer__brand{
    .custom-logo-link{
        img{
            filter: invert(1);
        }
    }
}
.bb-brand {
    display: inline-block;
    line-height: 1;
    color: var(--ds-color-text);
    text-decoration: none;
}

.bb-brand:hover {
    text-decoration: none;
    color: var(--ds-color-text);
}

/* the_custom_logo() renders <a class="custom-logo-link"><img class="custom-logo">>
 * which is NOT inside .bb-brand, so `.bb-brand .custom-logo` never matched and
 * the size came from the HTML width/height attrs. Target the real element. */
.bb-brand__logo-img,
.bb-brand .custom-logo,
.bb-site-header .custom-logo,
.bb-drawer .custom-logo {
    display: block;
    width: 81px;
    height: 39px;
    object-fit: contain;
}

.bb-brand__mark {
    display: block;
    font-family: var(--ds-font-display);
    font-size: 1.125rem;          /* 18px — matches Figma's two-line cap height */
    line-height: 1.1;
    color: var(--ds-color-text);
}

.bb-brand__mark--accent {
    /* Figma renders both lines identically. Keep the modifier class so existing
       markup is forward-compatible, but no longer italicise or recolour it. */
    font-style: normal;
    color: var(--ds-color-text);
}

.bb-primary-nav__list {
    display: flex;
    gap: var(--ds-sp-6);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.bb-primary-nav__list > li > a {
    color: var(--ds-color-gray-600);
    font-size: var(--ds-fs-body);
    font-weight: 400;
    text-decoration: none;
    padding-block: var(--ds-sp-2);
    transition: color 120ms ease;
}

.bb-primary-nav__list > li > a:hover {
    color: var(--ds-color-primary-600);
}

.bb-primary-nav__list .current-menu-item > a,
.bb-primary-nav__list > li > a[aria-current="page"] {
    color: var(--ds-color-text);
}

/* Categories dropdown — see ADR-0004 (header categories are data-driven). */
.bb-primary-nav__item--has-dropdown {
    position: relative;
}

.bb-primary-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-1);
    background: transparent;
    border: 0;
    padding: var(--ds-sp-2) 0;
    font-family: inherit;
    font-size: var(--ds-fs-body);
    font-weight: 400;
    line-height: inherit;
    color: var(--ds-color-gray-600);
    cursor: pointer;
    transition: color 120ms ease;
}

.bb-primary-nav__trigger:hover,
.bb-primary-nav__trigger[aria-expanded="true"] {
    color: var(--ds-color-primary-600);
}

.bb-primary-nav__chev {
    color: currentColor;
    display: inline-flex;
    transition: transform 180ms ease;
}

.bb-primary-nav__trigger[aria-expanded="true"] .bb-primary-nav__chev {
    transform: rotate(180deg);
}

.bb-primary-nav__dropdown {
    position: absolute;
    inset-block-start: calc(100% + var(--ds-sp-2));
    inset-inline-start: 0;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--ds-color-gray-0);
    border: 1px solid var(--ds-color-border-soft);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lift);
    z-index: 60;
    margin: 0;
    padding: var(--ds-sp-2);
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    text-align: start;
}

.bb-primary-nav__dropdown li {
    text-align: start;
}

.bb-primary-nav__dropdown[hidden] {
    display: none;
}

.bb-primary-nav__dropdown a {
    display: block;
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-radius: var(--ds-radius-md);
    color: var(--ds-color-text);
    font-size: var(--ds-fs-body);
    text-decoration: none;
    text-align: start;
    white-space: nowrap;
}

.bb-primary-nav__dropdown a:hover,
.bb-primary-nav__dropdown a:focus-visible {
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
    outline: none;
}

.bb-primary-nav__dd-footer {
    margin-top: var(--ds-sp-1);
    padding-top: var(--ds-sp-1);
    border-top: 1px solid var(--ds-color-border-soft);
}

.bb-primary-nav__dd-all {
    color: var(--ds-color-primary-600);
    font-weight: 500;
}

/*
 * Header search pill — Figma 169:13324: 206×44 white pill with a 2px
 * primary-50 (#F0EEFC) border and a 32×32 primary-600 circular submit
 * button flush against the right edge. Placeholder is 12px gray-500.
 */
.bb-header-search {
    display: flex;
    align-items: center;
    background: var(--ds-color-gray-0);
    border: 2px solid var(--ds-color-primary-50);
    border-radius: var(--ds-radius-pill);
    width: 206px;
    height: 44px;
    padding: 0 4px 0 var(--ds-sp-4);
    box-sizing: border-box;
}

.bb-header-search input[type="search"] {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--ds-fs-body-s);
    color: var(--ds-color-text);
    flex: 1;
    min-width: 0;
    outline: none;
    padding: 0;
}

.bb-header-search input[type="search"]::placeholder {
    color: var(--ds-color-text-soft);
}

.bb-header-search button {
    border: 0;
    background: var(--ds-color-primary-600);
    color: var(--ds-color-gray-0);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease;
}

.bb-header-search button:hover {
    background: var(--ds-color-primary-hover);
}

/*
 * Actions cluster (Sign in + Post Your Ad). Lives inside
 * `.bb-site-header__group--end`, so positioning to the right edge is handled
 * by the group's flex layout — no auto-margin needed.
 */
.bb-header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-4);
}

/*
 * Plain-text header link — Figma 169:13324 treats "Sign in" (and, when
 * logged in, "Dashboard") as a typographic link, not a chromed button. Pairs
 * visually with the primary "Post Your Ad" pill next to it.
 */
.bb-header-link {
    color: var(--ds-color-text);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 120ms ease;
}

.bb-header-link:hover,
.bb-header-link:focus-visible {
    color: var(--ds-color-primary-600);
    text-decoration: none;
    outline: none;
}

/* ---------- Site footer -------------------------------------------------- */

.bb-site-footer {
    background: #1f1d2d;
    color: white;
    padding-block: var(--ds-sp-15) var(--ds-sp-6);
    margin-top: var(--ds-sp-20);
}

.bb-site-footer__inner {
    width: min(100% - 2 * var(--ds-gutter), var(--ds-container-max)); /* ADR-0019 */
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: var(--ds-sp-8);
}

.bb-site-footer__brand .bb-brand {
    font-size: var(--ds-fs-h4);
}

.bb-site-footer__tagline {
    margin-top: var(--ds-sp-3);
    color: var(--ds-color-text-muted);
    font-size: var(--ds-fs-body);
    max-width: 28ch;
}

.bb-footer-col__title {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body);
    font-weight: 600;
    color: white;
    margin: 0 0 var(--ds-sp-4);
}

.bb-footer-col__title-link {
    color: inherit;
    text-decoration: none;
}

.bb-footer-col__title-link:hover {
    color: var(--ds-color-primary-600);
    text-decoration: none;
}

.bb-footer-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--ds-sp-2);
}

.bb-footer-col__list a {
    color: white;
    font-size: var(--ds-fs-body);
    text-decoration: none;
}

.bb-footer-col__list a:hover {
    color: #cccaca;
    text-decoration: none;
}

/* Placeholder shown when the editor has not yet wired up a footer menu
   (one of footer-about / -categories / -toprated / -social). The launch
   migrator seeds those menus so this rule is rarely visible on prod, but
   it keeps a non-empty footer on fresh installs / dev resets. */
.bb-footer-col__empty {
    color: var(--ds-color-text-soft);
    font-size: var(--ds-fs-body);
    font-style: italic;
}

.bb-site-footer__bottom {
    width: min(100% - 2 * var(--ds-gutter), var(--ds-container-max)); /* ADR-0019 */
    margin: var(--ds-sp-10) auto 0;
    padding-top: var(--ds-sp-6);
    border-top: 1px solid var(--ds-color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-sp-4);
}

.bb-copyright {
    margin: 0;
    color: white;
    font-size: var(--ds-fs-body-s);
}

.bb-legal-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--ds-sp-6);
}

.bb-legal-links a {
    color: white;
    font-size: var(--ds-fs-body-s);
    text-decoration: none;
}

.bb-legal-links a:hover {
    color: #cccaca;
}

/* ---------- CTA banner (shared between homepage + Categories Index) ----- */

.bb-section--cta {
    padding-block: var(--ds-sp-15) var(--ds-sp-10);
}

.bb-cta {
    position: relative;
    background: var(--ds-color-primary-50);
    border-radius: var(--ds-radius-xl);
    width: min(100% - 2 * var(--ds-gutter), var(--ds-container-max)); /* ADR-0019: card aligns to content line */
    margin-inline: auto;
    overflow: hidden;
    padding: var(--ds-sp-12) var(--ds-sp-8);
}

.bb-cta__ellipse {
    position: absolute;
    inset-block-start: -120px;
    inset-inline-end: -120px;
    inline-size: 570px;
    block-size: 570px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ds-color-primary-200) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.bb-cta__inner {
    position: relative;
    text-align: center;
    max-width: 680px;
    margin-inline: auto;
}

.bb-cta__title {
    font-family: var(--ds-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin: 0;
    color: var(--ds-color-text);
}

.bb-cta__title em {
    font-style: italic;
    color: var(--ds-color-primary-600);
}

.bb-cta__sub {
    margin: var(--ds-sp-4) auto 0;
    color: var(--ds-color-text-muted);
    font-size: var(--ds-fs-body-l);
}

.bb-cta__actions {
    margin-top: var(--ds-sp-6);
    display: inline-flex;
    gap: var(--ds-sp-3);
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 1024px) {
    .bb-cta {
        padding: var(--ds-sp-8) var(--ds-sp-5);
        /* margin-inline now handled by ADR-0019 width:min() — 16px floor is automatic */
    }

    /* p.3: larger logo on mobile/tablet (desktop keeps 81×39). Ratio preserved. */
    .bb-brand__logo-img,
    .bb-brand .custom-logo,
    .bb-site-header .custom-logo,
    .bb-drawer .custom-logo {
        width: 113px;
        height: 54px;
    }
}

/* ---------- Hamburger + drawer (mobile/tablet only) ---------------------- */

.bb-hamburger {
    display: none;
    background: transparent;
    border: 0;
    padding: var(--ds-sp-2);
    cursor: pointer;
    color: var(--ds-color-primary-600);
    inline-size: 40px;
    block-size: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.bb-hamburger > span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* §2.2: mobile-only search icon. Hidden on desktop (the inline pill handles it).
 * margin-inline-start:auto presses it against the hamburger on the right edge,
 * so the bar reads: logo (left) · search · burger (right). */
.bb-header-searchbtn {
    display: none;
    margin-inline-start: auto;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: var(--ds-sp-2);
    cursor: pointer;
    color: var(--ds-color-primary-600);
    inline-size: 40px;
    block-size: 40px;
}

.bb-drawer {
    position: fixed;
    inset: 0;
    background: var(--ds-color-gray-0);
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.bb-drawer[hidden] {
    display: none;
}

.bb-drawer__inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /* p.4: top + inline insets match the site header (32px top, 16px gutter)
     * so the drawer logo sits exactly where the header logo was — opening the
     * burger no longer shifts the logo. */
    padding: var(--ds-sp-8) var(--ds-gutter) var(--ds-sp-5);
    gap: var(--ds-sp-5);
}

.bb-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bb-drawer__close {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--ds-color-primary-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bb-drawer__close:hover {
    background: var(--ds-color-primary-50);
}

.bb-drawer__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bb-drawer__nav-list > li {
    border-bottom: 1px solid var(--ds-color-border-soft);
}

.bb-drawer__nav-list > li > a,
.bb-drawer__acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-block: var(--ds-sp-4);
    /* p.6: zero the <button> UA inline padding so the "Categories" dropdown
     * label lines up on the same vertical edge as the plain nav links. */
    padding-inline: 0;
    font-family: inherit;
    font-size: var(--ds-fs-body-m);
    font-weight: 500;
    color: var(--ds-color-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.bb-drawer__nav-list > li > a:hover,
.bb-drawer__acc-trigger:hover {
    color: var(--ds-color-primary-600);
}

.bb-drawer__acc-trigger[aria-expanded="true"] {
    color: var(--ds-color-primary-600);
}

.bb-drawer__acc-chev {
    color: var(--ds-color-text-muted);
    transition: transform 180ms ease;
    display: inline-flex;
}

.bb-drawer__acc-trigger[aria-expanded="true"] .bb-drawer__acc-chev {
    transform: rotate(180deg);
    color: var(--ds-color-primary-600);
}

.bb-drawer__acc-panel {
    list-style: none;
    margin: 0 0 var(--ds-sp-4);
    padding: 0; /* §2.3: Categories sub-links flush-left with top-level nav — one vertical line */
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
}

.bb-drawer__acc-panel a {
    display: block;
    padding-block: var(--ds-sp-2);
    color: var(--ds-color-text-muted);
    font-size: var(--ds-fs-body);
    text-decoration: none;
}

.bb-drawer__acc-panel a:hover,
.bb-drawer__acc-panel .bb-drawer__acc-all {
    color: var(--ds-color-primary-600);
}

.bb-drawer__foot {
    margin-top: auto;
    display: flex;
    gap: var(--ds-sp-3);
    justify-content: center;
    padding-top: var(--ds-sp-6);
}

body.bb-drawer-open {
    overflow: hidden;
}

/* ---------- Search panel (desktop search overlay) ----------------------- */
/*
 * Slides down from viewport top, covering the header band. Trigger is the
 * desktop header pill (data-bb-search-trigger); the X / Esc / scrim dismiss.
 * The inner pill is template-parts/hero-search rendered in its default (pill)
 * variant — same selector tree the bb-dropdown JS module already handles.
 * See ADR-0008.
 */

.bb-search-panel {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    block-size: 216px;
    background: var(--ds-color-gray-0);
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.08);
    animation: bb-search-panel-in 150ms ease-out;
}

.bb-search-panel[hidden] {
    display: none;
}

.bb-search-panel__scrim {
    position: fixed;
    inset-block-start: 216px;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 79;
    background: rgb(0 0 0 / 0.18);
    cursor: pointer;
    animation: bb-search-panel-scrim-in 150ms ease-out;
}

.bb-search-panel__band {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--ds-container-max);
    margin-inline: auto;
    padding-inline: var(--ds-container-pad);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-search-panel__inner {
    flex: 1;
    display: flex;
    justify-content: center;
}

.bb-search-panel__close {
    position: absolute;
    inset-inline-end: var(--ds-container-pad);
    inset-block-start: -84px;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ds-color-primary-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 120ms ease, color 120ms ease;
}

.bb-search-panel__close:hover,
.bb-search-panel__close:focus-visible {
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
    outline: none;
}

/* Search-panel pill is wider than the hero pill but otherwise inherits
 * the same 6px primary-50 chrome from the base `.bb-search--pill` rule. */
.bb-search-panel .bb-search--pill {
    max-width: 890px;
}

@keyframes bb-search-panel-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes bb-search-panel-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* §2.2: the search panel IS the mobile search modal now (opened by the header
 * icon — the drawer no longer carries search). Stack the pill so Category /
 * Location / Search become full-width rows — mirrors the hero pill collapse. */
@media (max-width: 960px) {
    /* p.5: on mobile the panel slides down from the top, so the desktop
     * close button (inset-block-start: -84px) lands off-screen above the
     * viewport. Pull it back into view at the top-right and pad the band so
     * the stacked pill clears it. */
    .bb-search-panel__band {
        padding-block-start: 56px;
    }
    .bb-search-panel__close {
        inset-block-start: var(--ds-sp-3);
    }
    .bb-search-panel .bb-search--pill {
        flex-direction: column;
        align-items: stretch;
        border-radius: var(--ds-radius-lg);
        padding: var(--ds-sp-3);
        gap: var(--ds-sp-2);
    }
    .bb-search-panel .bb-search--pill .bb-dropdown + .bb-dropdown {
        border-inline-start: 0;
        border-top: 1px solid var(--ds-color-border-soft);
        padding-top: var(--ds-sp-2);
    }
    .bb-search-panel .bb-search--pill .bb-dropdown__list {
        position: static;
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: 0;
        padding: var(--ds-sp-1) 0 0;
    }
    .bb-search-panel .bb-search--pill .bb-search__submit {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-search-panel,
    .bb-search-panel__scrim {
        animation: none;
    }
}

/* ---------- Custom Service/Location dropdown ----------------------------- */

.bb-dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
}

.bb-dropdown:has(.bb-dropdown__list:not([hidden])) {
    z-index: 60;
}

.bb-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    width: 100%;
    padding: var(--ds-sp-3) var(--ds-sp-4);
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
    cursor: pointer;
    text-align: left;
}

.bb-dropdown__lead {
    color: var(--ds-color-text-muted);
    display: inline-flex;
    align-items: center;
}

.bb-dropdown__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-color-text-muted);
}

.bb-dropdown[data-selected] .bb-dropdown__value {
    color: var(--ds-color-text);
}

.bb-dropdown__chev {
    color: var(--ds-color-text-muted);
    display: inline-flex;
    transition: transform 180ms ease;
}

.bb-dropdown[aria-expanded="true"] .bb-dropdown__chev,
.bb-dropdown__trigger[aria-expanded="true"] .bb-dropdown__chev {
    transform: rotate(180deg);
    color: var(--ds-color-primary-600);
}

.bb-dropdown__list {
    position: absolute;
    inset-block-start: calc(100% + var(--ds-sp-2));
    inset-inline-start: 0;
    min-width: 240px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--ds-color-gray-0);
    border: 1px solid var(--ds-color-border-soft);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lift);
    z-index: 60;
    margin: 0;
    padding: var(--ds-sp-3);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bb-dropdown__list[hidden] {
    display: none;
}

.bb-dropdown__item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-2) var(--ds-sp-3);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
}

.bb-dropdown__item:hover,
.bb-dropdown__item[aria-selected="true"],
.bb-dropdown__item.is-active {
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
}

.bb-dropdown__item-icon {
    color: var(--ds-color-primary-600);
    display: inline-flex;
    flex-shrink: 0;
}

.bb-dropdown__item-icon .bb-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.bb-dropdown__item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Pill / stacked layouts of the search form ------------------- */

/* Figma 121:196 — hero/global pill with the 6px primary-50 decorative
 * border, 12/27 inner padding (was 18/27 — the extra 12 px of block
 * padding pushed total height to 90 px instead of the Figma-rendered
 * 78 px), and 1px vertical separators between Service / Location /
 * Submit sections. Submit button is 42 px tall; chrome is 6 + 12 + 12 +
 * 6 = 36, total 78. */
.bb-search--pill {
    display: flex;
    align-items: center;
    background: var(--ds-color-gray-0);
    border: 6px solid var(--ds-color-primary-50);
    border-radius: var(--ds-radius-pill);
    padding: 12px 27px;
    max-width: 580px;
    width: 100%;
}

/* Parent theme `dclassified/assets/css/style.css` sets a global
 * `span { line-height: 1.85714 }` rule that inflates the inner span
 * heights inside the pill's submit button + dropdown value, pushing
 * each pill section to ~50px tall instead of the Figma 42. Reset the
 * line-height for spans scoped to this pill so each section matches
 * the design. (Icon spans only wrap a 16×16 SVG, so the change has
 * no visual effect on them.) */
.bb-search--pill span {
    line-height: 1.3;
}

.bb-search--pill .bb-dropdown + .bb-dropdown {
    border-inline-start: 1px solid var(--ds-color-border);
}

.bb-search--pill .bb-search__submit {
    position: relative;
    margin-inline-start: 13px;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    padding: 12px 24px;
    background: var(--ds-color-primary-600);
    color: var(--ds-color-gray-0);
    border: 0;
    border-radius: var(--ds-radius-pill);
    font-family: inherit;
    font-size: var(--ds-fs-body);
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Divider line between the last dropdown and the submit button. The
 * dropdown-to-dropdown divider above is `border-inline-start` (works
 * because dropdowns have no fill); submit has a solid indigo fill so
 * we paint the line OUTSIDE its left edge instead. */
.bb-search--pill .bb-search__submit::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: var(--ds-color-border);
}

.bb-search--pill .bb-search__submit:hover {
    background: var(--ds-color-primary-hover);
}

.bb-search--stacked {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
    width: 100%;
}

.bb-search--stacked .bb-dropdown {
    width: 100%;
}

.bb-search--stacked .bb-dropdown__trigger {
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
}

.bb-search--stacked .bb-dropdown + .bb-dropdown {
    border-top: 1px solid var(--ds-color-border-soft);
    padding-top: var(--ds-sp-2);
}

.bb-search--stacked .bb-dropdown__list {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 0;
    margin-top: var(--ds-sp-1);
    padding: var(--ds-sp-1) 0 0;
}

.bb-search--stacked .bb-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3) var(--ds-sp-5);
    background: var(--ds-color-primary-600);
    color: var(--ds-color-gray-0);
    border: 0;
    border-radius: var(--ds-radius-pill);
    font-family: inherit;
    font-size: var(--ds-fs-body);
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    margin-top: var(--ds-sp-1);
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 960px) {
    .bb-site-header__inner {
        gap: var(--ds-sp-4);
    }
    .bb-primary-nav,
    .bb-site-header__group--end {
        display: none;
    }
    .bb-hamburger,
    .bb-header-searchbtn {
        display: inline-flex;
    }
    .bb-site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .bb-site-footer__inner {
        grid-template-columns: 1fr;
    }
    .bb-site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   Listing card (shared across homepage Top-rated tab, all-listings archive,
   category archive — moved here from front-page.css when the card became
   used outside the homepage). Markup: `template-parts/listing-card.php`.
   ========================================================================= */

/* Feedback 2026-06-22: the former hover look (border + lift shadow) is now the
   DEFAULT on mobile and desktop, and the card no longer changes on hover. */
.bb-listing-card {
    background: var(--ds-color-gray-0);
    border: 1px solid var(--ds-color-border-soft);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ds-shadow-lift);
}

.bb-listing-card__media {
    display: block;
    aspect-ratio: 411 / 240;
    overflow: hidden;
    background: var(--ds-color-gray-100);
}

.bb-listing-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-listing-card__body {
    padding: var(--ds-sp-5);
    display: grid;
    gap: var(--ds-sp-3);
}

.bb-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    align-self: flex-start;
    padding: var(--ds-sp-1) var(--ds-sp-3);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
    font-size: var(--ds-fs-body-s);
    font-weight: 500;
    text-decoration: none;
}

.bb-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-color-primary-600);
}

.bb-listing-card__heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ds-sp-3);
}

.bb-listing-card__title {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-h5);
    line-height: 1.2;
    margin: 0;
    flex: 1;
    min-width: 0;
}

.bb-listing-card__title a {
    color: var(--ds-color-text);
    text-decoration: none;
}

.bb-listing-card__title a:hover {
    color: var(--ds-color-primary-600);
}

.bb-listing-card__rating {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ds-sp-1);
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
}

.bb-listing-card__rating .bb-star {
    color: var(--ds-color-rating);
}

.bb-listing-card__rating-count {
    color: var(--ds-color-text-muted);
}

.bb-listing-card__address {
    margin: 0;
    color: var(--ds-color-text-muted);
    font-size: var(--ds-fs-body);
    line-height: 1.4;
    display: inline-flex;
    gap: var(--ds-sp-2);
    align-items: flex-start;
}

.bb-listing-card__address svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ds-color-text-muted);
}

.bb-listing-card__services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--ds-sp-2);
}

.bb-service-row {
    background: var(--ds-color-gray-100);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-sp-3) var(--ds-sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-sp-3);
}

.bb-service-row__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bb-service-row__name {
    font-size: var(--ds-fs-body);
    color: var(--ds-color-text);
    font-weight: 500;
}

.bb-service-row__duration {
    font-size: var(--ds-fs-body-s);
    color: var(--ds-color-text-muted);
}

.bb-service-row__price {
    color: var(--ds-color-text);
    font-size: var(--ds-fs-body);
    white-space: nowrap;
}

.bb-listing-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--ds-sp-2);
    border-top: 1px solid var(--ds-color-border-soft);
}

.bb-listing-card__contact {
    display: inline-flex;
    gap: var(--ds-sp-3);
}

.bb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ds-color-primary-50);
    color: var(--ds-color-primary-600);
    text-decoration: none;
}

.bb-icon-btn:hover {
    background: var(--ds-color-primary-600);
    color: var(--ds-color-gray-0);
}

.bb-listing-card__cta {
    color: var(--ds-color-primary-600);
    font-size: var(--ds-fs-body);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-1);
}

.bb-listing-card__cta:hover {
    text-decoration: underline;
}