/*
 * [gsd_region_finder] — region cards revealed inline on /online-appointments/.
 * Enqueued by includes/gsd/gsd-region-finder.php; depends on
 * gsd-region-schedule.css, which styles the cards themselves.
 */

.gsd-region-finder {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * The upgraded triggers.
 *
 * js/gsd-region-finder.js swaps each region <a class="wp-block-button__link">
 * for a real <button> carrying the same classes.
 *
 * ⚠ The look of those buttons is NOT set here. The theme's button rule
 * (style.css, "Button Code") used to read `a.ui-button, a.wp-block-button__link,
 * .entry a.moretag` — anchor-qualified — so a <button> matched none of it and
 * fell through to WordPress core's `:root :where(.wp-element-button,
 * .wp-block-button__link)` defaults instead: dark #32373c pill, white text,
 * no border, 9999px radius. Next to the three grid items that stay links
 * (Carmel / Hair Restoration / San Francisco) that read as two different
 * button styles on one page. The fix was to add `button.wp-block-button__link`
 * to those three selector lists in style.css, so the site's button styling is
 * element-agnostic and there is still ONE definition of what a button looks
 * like. Don't re-declare the colours here.
 * ------------------------------------------------------------------------ */
.wp-block-button button.wp-block-button__link {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* The open region reads as selected: solid navy, the same fill the site's
 * buttons take on hover (style.css "Button Code"), so the open button is the
 * hover state held. Was gold until 2026-09-14 (client asked for #001543). */
.wp-block-button button.wp-block-button__link[aria-expanded="true"] {
    background: var(--color-2, #001543);
    border-color: var(--color-2, #001543);
    color: var(--color, #fff);
}

/*
 * The theme sets no focus ring of its own on these buttons, so they get the
 * browser default — which sits ON the button's edge. Over the navy fill above
 * that ring is hard to see, so the open button gets an explicit gold ring held
 * off the edge (SC 2.4.7 / 2.4.13). Closed buttons keep the default ring: they
 * are transparent on a light page, where it is plainly visible.
 */
.wp-block-button button.wp-block-button__link[aria-expanded="true"]:focus-visible {
    outline: 3px solid var(--color-6, #d29f13);
    outline-offset: 3px;
}

.wp-block-button button.wp-block-button__link[aria-expanded="true"]::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.6em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
}

/* ---------------------------------------------------------------------------
 * The panels
 * ------------------------------------------------------------------------ */
.gsd-region-finder__panel {
    margin: 2rem 0 0;
    padding: 1.5rem 1.5rem 2rem;
    background: var(--wp--preset--color--gsd-cream, #f7f4ee);
    border-top: 4px solid var(--color-6, #d29f13);
    /*
     * The header is fixed — 151px tall on desktop, 138px <=991px, 103px on
     * phones — so scrolling the panel to the top of the viewport put its
     * heading and Close button underneath it (WCAG 2.2 SC 2.4.11, focus not
     * obscured). scroll-margin-top keeps the heading clear for the script's
     * scrollIntoView and for a #hash deep link, which the browser handles on
     * its own. Same numbers as glacial/service-tabs in blocks-frontend.css.
     */
    scroll-margin-top: 172px;
}

/*
 * The button grid the script upgrades (it stamps this class on the
 * core/buttons wrapper). Closing a panel scrolls back to the TOP of this grid,
 * not just far enough to reveal the one button that opened it, so the visitor
 * lands on the full set of regions again — under the header, not behind it.
 * The individual triggers carry the same margin for the fallback where the
 * grid is taller than the viewport (a phone in landscape) and the script
 * scrolls the trigger itself into view instead.
 */
.gsd-region-finder__triggers,
.gsd-region-finder__triggers .wp-block-button__link {
    scroll-margin-top: 172px;
}

@media (max-width: 991px) {
    .gsd-region-finder__panel,
    .gsd-region-finder__triggers,
    .gsd-region-finder__triggers .wp-block-button__link {
        scroll-margin-top: 160px;
    }
}

@media (max-width: 767px) {
    .gsd-region-finder__panel,
    .gsd-region-finder__triggers,
    .gsd-region-finder__triggers .wp-block-button__link {
        scroll-margin-top: calc(var(--gsd-header-h, 103px) + 21px); /* single-row header since 2026-10-05; see style.css */
    }
}

/*
 * The panel takes focus when it opens (tabindex="-1") so the revealed cards are
 * the next thing a keyboard user meets. Suppress the ring for that programmatic
 * focus only — :focus-visible still paints it if the panel is ever tabbed to.
 */
.gsd-region-finder__panel:focus:not(:focus-visible) {
    outline: none;
}

.gsd-region-finder__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

h2.gsd-region-finder__title {
    margin: 0;
    color: var(--color-2, #001543);
}

.gsd-region-finder__close {
    font: inherit;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.55em 0.9em;
    background: none;
    color: var(--color-2, #001543);
    border: 1px solid rgba(0, 21, 67, 0.3);
    border-radius: 2px;
    cursor: pointer;
    /* SC 2.5.8 — keep the target at least 24px in both directions. */
    min-height: 24px;
    min-width: 24px;
}

.gsd-region-finder__close:hover,
.gsd-region-finder__close:focus-visible {
    background: var(--color-2, #001543);
    color: #fff;
    border-color: var(--color-2, #001543);
}

/* The grid brings its own 2.5rem top margin; the heading above it is enough. */
.gsd-region-finder__panel .gsd-region-schedule {
    margin-bottom: 0;
}

/*
 * Same 310px card track as the standalone schedule pages — a card is a card
 * wherever it appears — with a slightly tighter gap, since the panel already
 * has its own padding and border framing the grid.
 *
 * History, in case the layout changes again: while the hub still carried the
 * Specialties sidebar, a panel's grid was ~20% narrower than a standalone
 * schedule page (the plan section's 90%-wide .wrap plus this panel's padding)
 * and dropped to ONE column at a 1100px viewport where the standalone page
 * still showed two. A 250px track was the fix for that. The hub was set to
 * no-sidebar on 2026-09-08, which makes the panel's grid WIDER than a
 * standalone page's (1112px vs 900px at 1440px) and the tightened track a
 * no-op — measured identical column counts at 1440 / 1280 / 1100 / 1024 / 900
 * / 768, card widths within 6px. If the sidebar ever comes back, drop the
 * track minimum again rather than negative-margining out through .wrap.
 */
.gsd-region-finder__panel .gsd-region-schedule {
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.5rem;
}

.gsd-region-finder__panel .gsd-schedule-zip {
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    .gsd-region-finder__panel {
        padding: 1.25rem 1rem 1.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button button.wp-block-button__link {
        transition: none;
    }
}