/**
 * SWD Push Button.
 * Owns the physical button treatment while preserving each surface's palette,
 * radius, dimensions and native link/button semantics.
 */

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.swd-push-button {
    --swd-push-bg: var(--color-surface);
    --swd-push-border: var(--color-border);
    --swd-push-color: var(--color-text);
    --swd-push-min-height: 3rem;
    --swd-push-padding: 0.75rem 1rem;
    --swd-push-radius: var(--radius-sm);
    position: relative;
    display: inline-grid;
    min-height: var(--swd-push-min-height);
    padding: 0;
    border: 0;
    border-radius: var(--swd-push-radius);
    appearance: none;
    background: transparent;
    color: var(--swd-push-color);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    isolation: isolate;
}

.button--primary.swd-push-button {
    --swd-push-bg: var(--color-accent);
    --swd-push-border: var(--color-accent);
    --swd-push-color: var(--color-bg);
}

.button--secondary.swd-push-button {
    --swd-push-bg: transparent;
    --swd-push-border: var(--color-border);
    --swd-push-color: var(--color-text);
}

.swd-push-button__outer,
.swd-push-button__inner {
    display: grid;
    width: 100%;
    min-height: inherit;
    border-radius: inherit;
}

.swd-push-button__outer {
    background: color-mix(in srgb, var(--swd-push-bg) 52%, #000);
    box-shadow: 0 0.32rem 0.7rem rgb(0 0 0 / 28%), 0 0.18rem 0 color-mix(in srgb, var(--swd-push-bg) 58%, #000);
    transform: translateY(-0.16rem);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.swd-push-button__inner {
    align-items: center;
    justify-items: center;
    padding: var(--swd-push-padding);
    border: 1px solid var(--swd-push-border);
    background: var(--swd-push-bg);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -0.18rem 0.35rem rgb(0 0 0 / 16%);
    color: var(--swd-push-color);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.swd-push-button__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: transform 180ms ease;
}

.swd-push-button:hover:not(:disabled, [aria-disabled="true"]) .swd-push-button__outer {
    box-shadow: 0 0.08rem 0.28rem rgb(0 0 0 / 25%), 0 0.05rem 0 color-mix(in srgb, var(--swd-push-bg) 55%, #000);
    transform: translateY(0);
}

.swd-push-button:hover:not(:disabled, [aria-disabled="true"]) .swd-push-button__inner {
    box-shadow: inset 0 0.2rem 0.4rem rgb(0 0 0 / 22%), inset 0 -1px 0 rgb(255 255 255 / 12%);
    transform: translateY(0.05rem);
}

.swd-push-button:hover:not(:disabled, [aria-disabled="true"]) .swd-push-button__label { transform: scale(0.975); }
.swd-push-button:active:not(:disabled, [aria-disabled="true"]) .swd-push-button__inner { transform: translateY(0.08rem) scale(0.975); }
.swd-push-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.button--secondary.swd-push-button:hover:not(:disabled, [aria-disabled="true"]) {
    --swd-push-border: var(--color-accent);
    --swd-push-color: var(--color-accent);
}

.swd-push-button:disabled,
.swd-push-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

.swd-push-button:disabled .swd-push-button__outer,
.swd-push-button[aria-disabled="true"] .swd-push-button__outer {
    box-shadow: none;
    transform: none;
}

.swd-push-button--icon {
    --swd-push-min-height: 2.75rem;
    --swd-push-padding: 0;
    min-width: 2.75rem;
}

.site-navigation__toggle.swd-push-button {
    --swd-push-bg: var(--color-surface);
    --swd-push-border: var(--color-border);
    --swd-push-color: var(--color-text);
    width: 2.75rem;
    height: 2.75rem;
}

.site-header__cta { animation-duration: 3s; }

/* Structural fallback available before the optional Coffee UI stylesheet. */
.coffee-trigger__icon {
    display: inline-grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0.65rem;
    place-items: center;
}

.coffee-trigger__icon svg {
    width: 100%;
    height: 100%;
}

/* Compatibility physics for the contextual service CTAs in the protected FE-02 template. */
.button:not(.swd-push-button) {
    box-shadow: 0 0.22rem 0 color-mix(in srgb, currentcolor 36%, #000), 0 0.45rem 1rem rgb(0 0 0 / 24%);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.button:not(.swd-push-button):hover { box-shadow: 0 0.06rem 0 currentcolor; transform: translateY(0.14rem) scale(0.985); }
.button:not(.swd-push-button):active { transform: translateY(0.18rem) scale(0.975); }

@media (prefers-reduced-motion: reduce) {
    .swd-push-button,
    .swd-push-button *,
    .button:not(.swd-push-button) {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .swd-push-button__outer,
    .swd-push-button:hover .swd-push-button__outer,
    .swd-push-button__inner,
    .swd-push-button:hover .swd-push-button__inner,
    .swd-push-button__label,
    .swd-push-button:hover .swd-push-button__label {
        transform: none;
    }
}

@media (min-width: 75rem) {
    .site-navigation__toggle.swd-push-button { display: none; }
}

/* Reusable attention halo for commercial CTAs. Keeps the push-button physics on
 * its inner layers while adding the same low-frequency call-to-action pulse. */
.swd-push-button--attention {
    animation: swd-push-button-attention 6s ease-in-out infinite;
}

@keyframes swd-push-button-attention {
    0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(242 194 48 / 0%); transform: scale(1); }
    77% { box-shadow: 0 0 0 0.45rem rgb(242 194 48 / 18%); transform: scale(1.025); }
    84% { box-shadow: 0 0 0 0.9rem rgb(242 194 48 / 0%); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .swd-push-button--attention {
        animation: none !important;
        transform: none !important;
    }
}