/**
 * Provider booking buttons — /staff/<slug>/
 *
 * Built by includes/gsd/gsd-provider-booking.php: one "Book Online at <office>"
 * button per office the provider works out of, printed above the bio.
 *
 * SOLID navy, where the theme's other buttons (a.ui-button, .button) are navy
 * outlines. That is deliberate — the left column of this same page is a stack of
 * outline .ui-buttons for specialties and locations, and the booking row has to
 * read as the primary action rather than as more of the same list. Hover goes to
 * the brand gold (--color-6), the same pairing as the location contact bar.
 *
 * Enqueued on provider singles that actually render a row, after glacial-style.
 *
 * ⚠ Every rule that paints an anchor here is written `.gsd-book-buttons
 * a.gsd-book-btn` (0,2,1) on purpose. The whole inner-page body sits inside
 * `.standard-inner-wrapper.entry`, and style.css:174 styles `.entry a` at
 * `color:#031444; text-decoration:underline` — 0,2,0, which beats a bare
 * `.gsd-book-btn` and paints the label navy on the navy button, i.e. invisible.
 * A shorter selector silently loses; don't tidy these down.
 */

.gsd-book-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 2em;
}

.gsd-book-buttons a.gsd-book-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid var(--color-2, #001543);
    background-color: var(--color-2, #001543);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.gsd-book-buttons a.gsd-book-btn:hover,
.gsd-book-buttons a.gsd-book-btn:focus {
    border-color: var(--color-6, #d29f13);
    background-color: var(--color-6, #d29f13);
    color: var(--color-2, #001543);
    text-decoration: none;
}

/*
 * The theme's global focus ring is a colour change, which is not enough on its
 * own once the button is already gold on hover.
 */
.gsd-book-buttons a.gsd-book-btn:focus-visible {
    outline: 2px solid var(--color-2, #001543);
    outline-offset: 2px;
}

/*
 * A provider at four offices ("Book Online at Walnut Creek - Lennon Lane General
 * Dermatology") overflows a narrow bio column long before the viewport gets
 * small, so the buttons go full width in the tablet range too rather than
 * shrinking the type.
 */
@media (max-width: 991px) {
    .gsd-book-buttons a.gsd-book-btn {
        flex: 1 1 240px;
    }
}

@media (max-width: 767px) {
    .gsd-book-buttons {
        gap: 10px;
    }

    .gsd-book-buttons a.gsd-book-btn {
        flex: 1 1 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
}