/*
 * assets/css/components/button.css
 * Component layer: the 5 shared button families, grouped verbatim (moved,
 * not rewritten) from their previous page/shared bundles. Selectors,
 * declarations, and @media values are byte-identical to the originals;
 * only the file location (and, for rules that previously lived inside a
 * larger shared @media block, the @media wrapper) changed.
 *
 * Loads immediately after tokens.css (deps: airways-dentist-tokens), i.e.
 * BEFORE every page bundle. Page-scoped button overrides (e.g.
 * `.ad-pricing-page .ad-page-button`, `.ad-static-hero .ad-service-button`)
 * are intentionally NOT moved here — they stay in their page bundles, which
 * still load later and win on specificity, so the cascade is unchanged.
 */

/* from: airway-pages.css */
.ad-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 14px 20px;
    border: 1px solid var(--ad-color-blue);
    border-radius: var(--ad-radius-sm);
    font-size: var(--ad-type-size-md);
    font-weight: var(--ad-font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: var(--ad-button-transition);
}

.ad-page-button--primary {
    background: var(--ad-button-primary-bg);
    border-color: var(--ad-button-primary-border);
    color: var(--ad-button-primary-text);
}

.ad-page-button--primary:hover,
.ad-page-button--primary:focus {
    background: var(--ad-button-primary-bg-hover);
    border-color: var(--ad-button-primary-bg-hover);
    color: var(--ad-button-primary-text);
}

.ad-page-button--secondary,
.ad-page-button--outline {
    background: var(--ad-button-secondary-bg);
    border-color: var(--ad-button-secondary-border);
    color: var(--ad-button-secondary-text);
}

.ad-page-button--secondary:hover,
.ad-page-button--secondary:focus,
.ad-page-button--outline:hover,
.ad-page-button--outline:focus {
    background: var(--ad-color-teal-hover);
    color: var(--ad-color-blue-mid);
}

.ad-page-button--ghost {
    background: transparent;
    border-color: var(--ad-border-on-dark-strong);
    color: var(--ad-text-on-dark);
}

.ad-page-button:focus-visible {
    outline: var(--ad-focus-ring-width) solid var(--ad-focus-ring-color);
    outline-offset: var(--ad-focus-ring-offset);
}

@media (max-width: 640px) {
    .ad-page-button {
        width: 100%;
    }
}

/* from: frontend.css */
.ad-dentist-button {
    --ad-button-min-height: 48px;
    --ad-button-padding: 12px 30px;
    --ad-button-radius: var(--ad-radius-sm);
    --ad-button-transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ad-button-min-height);
    padding: var(--ad-button-padding);
    border: var(--ad-button-border-width) solid transparent;
    border-radius: var(--ad-button-radius);
    font-size: var(--ad-button-font-size);
    font-weight: var(--ad-button-font-weight);
    letter-spacing: var(--ad-button-letter-spacing);
    line-height: var(--ad-button-line-height);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ad-button-transition);
}

.ad-dentist-button:hover,
.ad-dentist-button:focus-visible {
    transform: translateY(-1px);
}

.ad-dentist-button--primary {
    background: var(--ad-button-primary-bg);
    color: var(--ad-button-primary-text);
}

.ad-dentist-button--secondary {
    border-color: var(--ad-button-secondary-border);
    color: var(--ad-button-secondary-text);
}

.ad-dentist-button--podcast {
    width: 100%;
    min-height: 0;
    min-width: 0;
    gap: 10px;
    padding: 20px 40px;
    background: var(--ad-color-teal-wash);
    border: 0;
    color: var(--ad-color-mist);
    white-space: normal;
}

.ad-dentist-button__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: currentColor;
}

.ad-dentist-button__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ad-dentist-button--ghost {
    background: var(--ad-button-ghost-dark-bg);
    border-color: var(--ad-button-ghost-dark-border);
    color: var(--ad-button-ghost-dark-text);
}

@media (max-width: 767px) {
    .ad-dentist-button {
        width: 100%;
        min-height: 48px;
        padding: 14px 20px;
        font-size: 15px;
        white-space: normal;
    }
}

/* ============================================================================
   SHARED BUTTON BASE  (step 2 — added 2026-07-02)
   One canonical foundation for the previously-separate button families
   (.ad-service-button / .ad-page-button / .ad-dentist-button /
   .ad-location-button). Written with :where() so it has ZERO specificity —
   every existing family/section rule still wins, so this can only *fill in*
   the shared foundation, never override desktop styling. This is the single
   place to evolve the button system going forward.
   ============================================================================ */
:where(.ad-service-button, .ad-page-button, .ad-dentist-button, .ad-location-button) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ad-button-min-height);
    padding: var(--ad-button-padding);
    border: var(--ad-button-border-width) solid transparent;
    border-radius: var(--ad-button-radius);
    font-family: inherit;
    font-size: var(--ad-button-font-size);
    font-weight: var(--ad-button-font-weight);
    letter-spacing: var(--ad-button-letter-spacing);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* from: location-detail.css */
.ad-location-button {
    --ad-button-min-height: 56px;
    --ad-button-padding: 18px 40px;
    --ad-button-border-width: 1.5px;
    --ad-button-letter-spacing: 0;
    --ad-button-line-height: 1;
    --ad-button-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ad-button-min-height);
    padding: var(--ad-button-padding);
    border-radius: var(--ad-button-radius);
    border: var(--ad-button-border-width) solid var(--ad-button-secondary-border);
    color: var(--ad-button-secondary-text);
    background: transparent;
    font-size: var(--ad-button-font-size);
    font-weight: var(--ad-button-font-weight);
    line-height: var(--ad-button-line-height);
    letter-spacing: var(--ad-button-letter-spacing);
    text-align: center;
    text-decoration: none;
    transition: var(--ad-button-transition);
}

.ad-location-button--primary {
    color: var(--ad-button-primary-text);
    background: var(--ad-button-primary-bg);
}

.ad-location-button:hover {
    color: var(--ad-button-primary-text);
    background: var(--ad-button-primary-bg-hover);
    border-color: var(--ad-button-primary-bg-hover);
}

@media (max-width: 767px) {
    .ad-location-button {
        width: 100%;
        min-height: 56px;
    }
}

/* from: locations.css */
/* ================================================================
   LOCATIONS BUTTON VARIANTS
   ================================================================ */
.ad-locations__btn {
    --ad-button-min-height: 40px;
    --ad-button-padding: 10px 24px;
    --ad-button-radius: var(--ad-radius-sm);
    --ad-button-font-size: var(--ad-type-size-sm);
    --ad-button-letter-spacing: 0.3px;
    --ad-button-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ad-button-min-height);
    padding: var(--ad-button-padding);
    border-radius: var(--ad-button-radius);
    font-family: inherit;
    font-size: var(--ad-button-font-size);
    font-weight: var(--ad-button-font-weight);
    letter-spacing: var(--ad-button-letter-spacing);
    text-decoration: none;
    cursor: pointer;
    transition: var(--ad-button-transition);
}

.ad-locations__btn--filled {
    background: var(--ad-action-teal-bg);
    border: var(--ad-button-border-width) solid var(--ad-action-teal-bg);
    color: var(--ad-action-teal-text);
}

.ad-locations__btn--filled:hover {
    background: var(--ad-action-teal-bg-hover);
    border-color: var(--ad-action-teal-bg-hover);
}

.ad-locations__btn--outlined {
    background: var(--ad-button-secondary-bg);
    border: var(--ad-button-border-width) solid var(--ad-action-teal-bg);
    color: var(--ad-action-teal-bg);
}

.ad-locations__btn--outlined:hover {
    background: var(--ad-color-teal-hover);
}

/* from: service-template.css */
.ad-service-button {
    --ad-button-min-height: 43px;
    --ad-button-padding: 12px 30px;
    --ad-button-radius: var(--ad-service-radius-sm);
    --ad-button-transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ad-button-min-height);
    padding: var(--ad-button-padding);
    border: var(--ad-button-border-width) solid transparent;
    border-radius: var(--ad-button-radius);
    font-size: var(--ad-button-font-size);
    font-weight: var(--ad-button-font-weight);
    letter-spacing: var(--ad-button-letter-spacing);
    line-height: var(--ad-button-line-height);
    text-align: center;
    text-decoration: none;
    transition: var(--ad-button-transition);
}

.ad-service-button:hover {
    opacity: 0.96;
    transform: translateY(-1px);
}

.ad-button__icon,
.ad-service-button__icon,
.ad-dentist-button__icon,
.ad-location-button__icon,
.ad-locations__btn-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.ad-service-button--primary {
    background: var(--ad-button-primary-bg);
    color: var(--ad-button-primary-text);
}

.ad-service-button--secondary,
.ad-service-button--ghost {
    background: var(--ad-button-secondary-bg);
    border-color: var(--ad-button-secondary-border);
    color: var(--ad-button-secondary-text);
}

.ad-service-button--ghost-light {
    background: var(--ad-button-ghost-light-bg);
    border-color: var(--ad-button-ghost-light-border);
    color: var(--ad-button-ghost-light-text);
}

.ad-service-button--ghost-dark {
    background: var(--ad-button-ghost-dark-bg);
    border-color: var(--ad-button-ghost-dark-border);
    color: var(--ad-button-ghost-dark-text);
}

.ad-service-button--teal-dark {
    background: var(--ad-color-teal-wash);
    color: var(--ad-service-white);
}

.ad-service-button--ghost-blue {
    background: transparent;
    border-color: var(--ad-service-blue);
    color: var(--ad-service-blue);
}

@media (max-width: 767px) {
    .ad-service-button {
        width: 100%;
    }
}