/*
 * Pill buttons — Figma spec (May 2026 dark-slate brand swap).
 * Primary: solid dark-slate, white text.
 * Hero ghost: glassmorphic (white 24%) with backdrop-blur — dark backgrounds.
 * Beige: muted beige fill with brown text — "More Articles" pattern.
 * Peach: saturated peach + brown text (default CTA).
 *   Hover uses --brand-peach-darker (#e5cac1) per Figma comment #35.
 */

.redesign .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), transform 140ms ease, box-shadow 140ms ease;
    -webkit-tap-highlight-color: transparent;
}

.redesign .btn:hover {
    text-decoration: none;
}

.redesign .btn:focus-visible {
    outline: 2px solid var(--brand-sea-green);
    outline-offset: 2px;
}

.redesign .btn--lg {
    padding: 16px 32px;
    font-size: 16px;
}

.redesign .btn--sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Primary — filled sea-green */
.redesign .btn--primary {
    background: var(--brand-sea-green);
    color: var(--neutral-white);
    border-color: var(--brand-sea-green);
}

.redesign .btn--primary:hover {
    background: var(--brand-sea-green-darker);
    border-color: var(--brand-sea-green-darker);
    color: var(--neutral-white);
}

/* Ghost on dark — used inside the mega menu donation strip */
.redesign .btn--ghost-light {
    background: var(--opacity-white-10);
    color: var(--neutral-white);
    border-color: transparent;
    backdrop-filter: blur(2px);
}

.redesign .btn--ghost-light:hover {
    background: var(--opacity-white-24);
    color: var(--neutral-white);
}

/* Beige secondary — "More Articles" style from Figma */
.redesign .btn--beige {
    background: var(--brand-beige);
    color: var(--brand-brown);
    border-color: var(--brand-beige);
}

.redesign .btn--beige:hover {
    background: var(--brand-beige-darker);
    color: var(--brand-brown);
    border-color: var(--brand-beige-darker);
}

/* Peach CTA — "Learn more" / "View Directory" from Figma homepage.
 * Lighter pink-peach than --brand-beige, used on section-level CTAs. */
.redesign .btn--peach {
    background: var(--brand-peach);
    color: var(--brand-brown);
    border-color: var(--brand-peach);
}

.redesign .btn--peach:hover {
    background: var(--brand-peach-darker);
    color: var(--brand-brown);
    border-color: var(--brand-peach-darker);
}

/* Hero ghost — transparent offwhite-seagreen pill used inside the hero
 * sticky bar for "Explore Resources". Figma rgba(194,210,216,0.32). */
.redesign .btn--hero-ghost {
    background: var(--hero-pill-ghost);
    color: var(--neutral-white);
    border-color: transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.redesign .btn--hero-ghost:hover {
    background: rgba(194, 210, 216, 0.44);
    color: var(--neutral-white);
}

/* Sea-green light — used in the footer floating sticky bar */
.redesign .btn--seagreen-soft {
    background: var(--brand-offwhite-seagreen);
    color: var(--brand-sea-green);
    border-color: transparent;
}

.redesign .btn--seagreen-soft:hover {
    background: #a5bfbf;
    color: var(--brand-sea-green-darker);
}

/* Outline — thin border on transparent bg, brown text */
.redesign .btn--outline {
    background: transparent;
    color: var(--brand-brown);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.redesign .btn--outline:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--brand-brown);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Offwhite-slate — Referrals card "Learn more" button */
.redesign .btn--slate {
    background: var(--brand-offwhite-slate);
    color: var(--brand-brown);
    border-color: var(--brand-offwhite-slate);
}

.redesign .btn--slate:hover {
    background: #b0c4ca;
    color: var(--brand-brown);
}

/* ───────────────────────────────────────────────────────────────────────
 * Legacy theme button override — `.button_type_1..7` from the old
 * `style.css` predates the redesign and emits Bootstrap-3-flavored
 * solid buttons, often paired with `.color_blue` for an info-blue fill
 * (#55c0db) or `.color_purple` (#4e4ca0), `.color_pink` (#a255c4),
 * `.color_green` (#2ecc71), `.color_red` (#e74c3c), `.color_yellow`
 * (#f1c40f) — all off-brand against the redesign palette.
 *
 * Rather than rewrite every legacy `<button class="button_type_3 color_blue
 * r_corners tt_uppercase ...">Submit</button>` across 24+ blade templates,
 * re-skin them inside `.redesign` to match `.btn--peach`: peach fill,
 * brown text, Manrope semibold, pill radius. Transparent variants get a
 * sea-green outline equivalent.
 *
 * Specificity hardening:
 *   - `.redesign.redesign` doubles the class to push specificity to (0,3,0)
 *     for the base rule, beating any single-class legacy combo.
 *   - `!important` on the visual properties (background/color/border/
 *     border-radius/padding) so per-page overrides like `.button_type_3`'s
 *     `padding-top: 8px` and `[class*="button_type"]`'s 29px horizontal
 *     padding can't half-restyle the pill.
 *   - Source order still matters for tied specificity; redesign.css loads
 *     after style.css.
 * ─────────────────────────────────────────────────────────────────────── */
.redesign.redesign [class*="button_type_"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 10px 22px !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid transparent !important;
    cursor: pointer;
    transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease);
    -webkit-tap-highlight-color: transparent;

    /* Peach pill default — overrides legacy `.color_blue/_pink/_purple` etc. */
    background: var(--brand-peach) !important;
    color: var(--brand-brown) !important;
    border-color: var(--brand-peach) !important;
}

.redesign.redesign [class*="button_type_"]:hover,
.redesign.redesign [class*="button_type_"]:focus-visible {
    background: var(--brand-peach-darker) !important;
    color: var(--brand-brown) !important;
    border-color: var(--brand-peach-darker) !important;
    text-decoration: none !important;
    outline: none;
}

/* Disabled state (e.g. `<button disabled>` while submitting) keeps the
 * peach surface but dims and freezes hover. The login button toggles
 * `disabled` while the AJAX request is in flight. */
.redesign.redesign [class*="button_type_"]:disabled,
.redesign.redesign [class*="button_type_"][disabled] {
    opacity: 0.6;
    cursor: wait;
}

/* Transparent / outline variant — keep the ghost feel but in sea-green
 * instead of the legacy info-blue / purple / pink. Used for "Listen on
 * Spotify/Apple", "Load More", etc. on podcast and gallery pages. */
.redesign.redesign [class*="button_type_"].transparent {
    background: transparent !important;
    color: var(--brand-sea-green) !important;
    border-color: var(--brand-sea-green) !important;
}

.redesign.redesign [class*="button_type_"].transparent:hover,
.redesign.redesign [class*="button_type_"].transparent:focus-visible {
    background: var(--brand-sea-green) !important;
    color: var(--neutral-white) !important;
    border-color: var(--brand-sea-green) !important;
}

/* Spans inside the legacy button (e.g. login button's `.btn-text` /
 * `.btn-spinner`) inherit color from the button. Force-inherit so any
 * stale `.color_blue` on a child can't repaint the label. */
.redesign.redesign [class*="button_type_"] > * {
    color: inherit !important;
}