/**
 * UKPI Button System — site-wide.
 *
 * Stable class names so we update one file when the design changes. Uses
 * brand tokens (colors mirror Tailwind --color-ukpi-*). Each button variant
 * has a subtle hover and a `[data-arrow]` icon hover translation matching
 * the Figma spec.
 *
 * Variants
 *   .ukpi-btn--primary          purple pill, magenta on hover (default action)
 *   .ukpi-btn--primary-sm       smaller purple pill
 *   .ukpi-btn--white            white pill on coloured backgrounds
 *   .ukpi-btn--outline          white pill with grey border
 *   .ukpi-btn--outline-purple   transparent pill, purple 2px border
 *   .ukpi-btn--glass-light      translucent on purple gradient
 *   .ukpi-btn--glass-arrow      glass pill with white arrow chip on the right
 *   .ukpi-btn--clear-filters    grey outline (utility)
 *   .ukpi-page                  pagination — pair with .ukpi-page--active
 *   .ukpi-icon-btn--*           round icon-only social buttons
 */

:root {
    --ukpi-btn-purple: #632e62;
    --ukpi-btn-magenta: #93278f;
    --ukpi-btn-lilac: #f3c9f1;
    --ukpi-btn-tint: #eee7ef;
    --ukpi-btn-border: #d8d8d8;
    --ukpi-btn-text-dark: #101828;
    --ukpi-btn-text-muted: #4a5565;
}

/* Base — every UKPI button uses these.
 *
 * NOTE: `display` is wrapped in `:where()` (zero specificity) so utility
 * classes such as Tailwind's `hidden` / `md:hidden` can still hide the
 * element. Everything else is on `.ukpi-btn` directly.
 */
:where(.ukpi-btn) {
    display: inline-flex;
}

.ukpi-btn {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease,
        transform 120ms ease;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
}

.ukpi-btn:focus-visible {
    outline: 2px solid var(--ukpi-btn-magenta);
    outline-offset: 3px;
}

.ukpi-btn:active {
    transform: translateY(1px);
}

/* Arrow icon — picks up colour via `currentColor`, animates on hover. */
.ukpi-btn [data-arrow] {
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.ukpi-btn:hover [data-arrow],
.ukpi-btn:focus-visible [data-arrow] {
    transform: translate(2px, -2px);
}

/* ----------------------------------------------------------------------
   PRIMARY — purple pill
---------------------------------------------------------------------- */

.ukpi-btn--primary {
    padding: 1rem 2rem;
    background-color: var(--ukpi-btn-purple);
    color: #ffffff;
    box-shadow: 0 10px 24px -12px rgba(99, 46, 98, 0.55);
}

.ukpi-btn--primary:hover,
.ukpi-btn--primary:focus-visible {
    background-color: var(--ukpi-btn-magenta);
    color: #ffffff;
    box-shadow: 0 16px 32px -14px rgba(147, 39, 143, 0.55);
}

/* Smaller variant — for cards, inline rows, news listings */
.ukpi-btn--primary-sm {
    padding: 0.875rem 1.75rem;
    background-color: var(--ukpi-btn-purple);
    color: #ffffff;
    font-size: 0.9375rem;
    box-shadow: 0 8px 20px -12px rgba(99, 46, 98, 0.5);
}

.ukpi-btn--primary-sm:hover,
.ukpi-btn--primary-sm:focus-visible {
    background-color: var(--ukpi-btn-magenta);
    color: #ffffff;
}

/* ----------------------------------------------------------------------
   WHITE — solid white pill on coloured backgrounds
---------------------------------------------------------------------- */

.ukpi-btn--white {
    padding: 0.875rem 2rem;
    background-color: #ffffff;
    color: var(--ukpi-btn-purple);
    box-shadow: 0 18px 32px -16px rgba(16, 24, 40, 0.25);
}

.ukpi-btn--white:hover,
.ukpi-btn--white:focus-visible {
    background-color: var(--ukpi-btn-tint);
    color: var(--ukpi-btn-purple);
    box-shadow: 0 12px 24px -12px rgba(16, 24, 40, 0.2);
}

/* ----------------------------------------------------------------------
   OUTLINE — white background, grey border (used next to a primary button)
---------------------------------------------------------------------- */

.ukpi-btn--outline {
    padding: 0.875rem 1.75rem;
    background-color: #ffffff;
    color: var(--ukpi-btn-text-dark);
    border-color: var(--ukpi-btn-border);
}

.ukpi-btn--outline:hover,
.ukpi-btn--outline:focus-visible {
    border-color: var(--ukpi-btn-purple);
    color: var(--ukpi-btn-purple);
}

/* ----------------------------------------------------------------------
   OUTLINE — transparent, purple 2px border (used on light hero/CTA cards)
---------------------------------------------------------------------- */

.ukpi-btn--outline-purple {
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: var(--ukpi-btn-purple);
    border: 2px solid var(--ukpi-btn-purple);
}

.ukpi-btn--outline-purple:hover,
.ukpi-btn--outline-purple:focus-visible {
    background-color: var(--ukpi-btn-purple);
    color: #ffffff;
}

/* ----------------------------------------------------------------------
   GLASS — translucent buttons for purple gradient backgrounds
---------------------------------------------------------------------- */

.ukpi-btn--glass-light {
    padding: 0.875rem 2rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ukpi-btn--glass-light:hover,
.ukpi-btn--glass-light:focus-visible {
    background-color: #ffffff;
    color: var(--ukpi-btn-purple);
    border-color: #ffffff;
}

/*
 * Pill with arrow chip on the right (footer membership CTAs).
 * Combine: <a class="ukpi-btn ukpi-btn--glass-arrow"> <span>Label</span> <span class="ukpi-btn__chip"><svg…/></span> </a>
 */
.ukpi-btn--glass-arrow {
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 16rem;
}

.ukpi-btn--glass-arrow:hover,
.ukpi-btn--glass-arrow:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* White circular arrow chip used inside the glass-arrow + white CTA pills. */
.ukpi-btn__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #ffffff;
    color: var(--ukpi-btn-purple);
    flex-shrink: 0;
    transition: background-color 200ms ease, color 200ms ease;
}

.ukpi-btn--glass-arrow .ukpi-btn__chip {
    background-color: #ffffff;
    color: var(--ukpi-btn-purple);
}

.ukpi-btn--glass-arrow:hover .ukpi-btn__chip,
.ukpi-btn--glass-arrow:focus-visible .ukpi-btn__chip {
    background-color: #ffffff;
    color: var(--ukpi-btn-magenta);
}

/*
 * White CTA with brand-colored arrow chip — used as the primary "Become a
 * Member" CTA in the footer (white background, purple arrow chip).
 */
.ukpi-btn--white-arrow {
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    background-color: #ffffff;
    color: var(--ukpi-btn-purple);
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 16rem;
    box-shadow: 0 18px 32px -16px rgba(16, 24, 40, 0.25);
}

.ukpi-btn--white-arrow:hover,
.ukpi-btn--white-arrow:focus-visible {
    background-color: var(--ukpi-btn-tint);
    color: var(--ukpi-btn-purple);
}

.ukpi-btn--white-arrow .ukpi-btn__chip {
    background-color: var(--ukpi-btn-purple);
    color: #ffffff;
}

.ukpi-btn--white-arrow:hover .ukpi-btn__chip,
.ukpi-btn--white-arrow:focus-visible .ukpi-btn__chip {
    background-color: var(--ukpi-btn-magenta);
}

/* ----------------------------------------------------------------------
   UTILITY — clear filters / pagination
---------------------------------------------------------------------- */

.ukpi-btn--clear-filters {
    padding: 0.625rem 1.5rem;
    background-color: #ffffff;
    color: var(--ukpi-btn-text-muted);
    border-color: var(--ukpi-btn-border);
    font-size: 0.9375rem;
}

.ukpi-btn--clear-filters:hover,
.ukpi-btn--clear-filters:focus-visible {
    border-color: var(--ukpi-btn-purple);
    color: var(--ukpi-btn-purple);
}

.ukpi-page {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--ukpi-btn-text-muted);
    border: 1px solid var(--ukpi-btn-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    text-decoration: none;
    font-weight: 500;
    transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.ukpi-page:hover,
.ukpi-page:focus-visible {
    border-color: var(--ukpi-btn-purple);
    color: var(--ukpi-btn-purple);
}

.ukpi-page--active {
    background-color: var(--ukpi-btn-purple);
    color: #ffffff;
    border-color: var(--ukpi-btn-purple);
    box-shadow: 0 6px 14px -8px rgba(99, 46, 98, 0.5);
}

.ukpi-page--active:hover,
.ukpi-page--active:focus-visible {
    background-color: var(--ukpi-btn-magenta);
    border-color: var(--ukpi-btn-magenta);
    color: #ffffff;
}

/* ----------------------------------------------------------------------
   ICON-ONLY round buttons (social etc.)
---------------------------------------------------------------------- */

:where(.ukpi-icon-btn) {
    display: inline-flex;
}

.ukpi-icon-btn {
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.ukpi-icon-btn:focus-visible {
    outline: 2px solid var(--ukpi-btn-magenta);
    outline-offset: 3px;
}

.ukpi-icon-btn--on-purple {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

.ukpi-icon-btn--on-purple:hover,
.ukpi-icon-btn--on-purple:focus-visible {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.ukpi-icon-btn--on-white {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ukpi-btn-text-muted);
    border-color: var(--ukpi-btn-border);
    background-color: #ffffff;
}

.ukpi-icon-btn--on-white:hover,
.ukpi-icon-btn--on-white:focus-visible {
    color: var(--ukpi-btn-purple);
    border-color: var(--ukpi-btn-purple);
}

.ukpi-icon-btn--footer {
    width: 2.25rem;
    height: 2.25rem;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.ukpi-icon-btn--footer:hover,
.ukpi-icon-btn--footer:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ----------------------------------------------------------------------
   Disabled state — apply to any variant
---------------------------------------------------------------------- */

.ukpi-btn[disabled],
.ukpi-btn[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}