/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 12px 18px;
    border: 1px solid transparent;
    font-weight: 700;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        border-color .15s ease;
    user-select: none;
}

.btn-pill {
    padding: 11px 18px;
}

.btn-icon {
    opacity: 0.9;
}

.btn-arrow {
    font-weight: 900;
}

.btn-primary {
    background: linear-gradient(180deg, var(--yellow), var(--yellow2));
    color: var(--maroon-strong);
    box-shadow: var(--theme-shadow-md);
}

.btn-secondary {
    background: var(--theme-card-strong);
    border: 1px solid var(--theme-border);
    color: var(--text);
    box-shadow: var(--theme-shadow-sm);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--theme-maroon-soft);
    color: var(--maroon);
}

.btn-donate {
    background: rgba(246, 199, 76, 0.95);
    color: #3b0010;
    box-shadow: 0 10px 20px rgba(246, 199, 76, 0.28);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow2);
}

/* =========================================================
   BUTTON SYSTEM — BRAND POLISH (SAFE ADDITIVE OVERRIDES)
   Paste at VERY BOTTOM of main.css
   Goal: luxe depth + consistent hover/focus, not tacky.
========================================================= */

/* Base button polish (does not change layout structure) */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);

    font-weight: 850;
    letter-spacing: .008em;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

/* Subtle top highlight line for "premium" feel (very restrained) */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 55%);
    opacity: .55;
}

/* Keep button content above the gloss */
.btn>* {
    position: relative;
    z-index: 1;
}

/* Focus: consistent gold ring across site */
.btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px var(--theme-yellow-soft),
        var(--theme-shadow-lg);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none !important;
    }
}

/* =========================================================
   PRIMARY (Gold) — rich brand button
========================================================= */
.btn-primary {
    background: linear-gradient(180deg,
            rgba(255, 248, 220, 1) 0%,
            rgba(246, 199, 76, 1) 40%,
            rgba(242, 182, 31, 1) 100%);
    color: #3b0010;
    border: 1px solid rgba(255, 255, 255, .30);
    box-shadow:
        0 14px 34px rgba(246, 199, 76, .24),
        0 10px 20px rgba(0, 0, 0, .14),
        inset 0 1px 0 rgba(255, 255, 255, .60);
}

.btn-primary:hover {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(246, 199, 76, 1) 45%,
            rgba(242, 182, 31, 1) 100%);
    box-shadow:
        0 18px 40px rgba(246, 199, 76, .30),
        inset 0 1px 0 rgba(255, 255, 255, .80);
    color: #2a000c;
}

/* Hero headers: keep gold, but less intense than global CTA gold */
.hero .hero-actions .btn.btn-primary,
.hero .event-actions .btn.btn-primary {
    background: linear-gradient(180deg, #f4cf63 0%, #e7b536 100%);
    color: #2b0010;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow:
        0 10px 22px rgba(246, 199, 76, .16),
        0 8px 16px rgba(0, 0, 0, .14),
        inset 0 1px 0 rgba(255, 255, 255, .48);
}

.hero .hero-actions .btn.btn-primary:hover,
.hero .event-actions .btn.btn-primary:hover {
    background: linear-gradient(180deg, #f6d979 0%, #eabc43 100%);
    color: #24000d;
    box-shadow:
        0 12px 26px rgba(246, 199, 76, .2),
        0 10px 20px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* =========================================================
   SECONDARY (White Glass) — used across site
========================================================= */
.btn-secondary {
    background: var(--theme-card);
    color: var(--text);
    border: 1px solid var(--theme-border);
    box-shadow: var(--theme-shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Slight "glass kiss" on hover */
.btn-secondary:hover {
    background: rgba(255, 255, 255, .94);
    border-color: rgba(15, 23, 42, .14);
    box-shadow:
        0 20px 44px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255, 255, 255, .90);
}

.hero .hero-actions .btn.btn-secondary,
.hero .event-actions .btn.btn-secondary {
    background: linear-gradient(180deg, rgba(231, 211, 199, .96) 0%, rgba(215, 187, 171, .94) 100%);
    color: #4a000f;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, .16),
        0 8px 16px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .40);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero .hero-actions .btn.btn-secondary:hover,
.hero .event-actions .btn.btn-secondary:hover {
    background: linear-gradient(180deg, rgba(237, 219, 208, 1) 0%, rgba(221, 194, 178, .98) 100%);
    color: #36000b;
    border-color: rgba(255, 255, 255, .22);
    box-shadow:
        0 10px 22px rgba(15, 23, 42, .18),
        0 10px 18px rgba(0, 0, 0, .14),
        inset 0 1px 0 rgba(255, 255, 255, .46);
}

/* =========================================================
   OUTLINE (Maroon) — brand accent
========================================================= */
.btn-outline {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 244, 245, .94));
    color: var(--maroon-strong);
    border: 1px solid rgba(90, 0, 17, .24);
    box-shadow:
        0 12px 26px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .76);
}

.btn-outline:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(250, 246, 247, .96));
    border-color: rgba(90, 0, 17, .34);
    color: var(--maroon-strong);
    box-shadow:
        0 14px 30px rgba(15, 23, 42, .10),
        0 0 0 1px rgba(246, 199, 76, .22) inset;
}

/* =========================================================
   DONATE (Header) — keep as hero premium gold
   (ensures it matches the same gold family)
========================================================= */
.btn-donate {
    background: linear-gradient(180deg,
            rgba(255, 248, 220, 1) 0%,
            rgba(246, 199, 76, 1) 42%,
            rgba(242, 182, 31, 1) 100%);
    color: #3b0010;
    border: 1px solid rgba(255, 255, 255, .20);

    box-shadow:
        0 18px 40px rgba(246, 199, 76, .22),
        0 16px 30px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .72);
}

.site-header.is-solid .btn-donate {
    box-shadow:
        0 12px 26px rgba(246, 199, 76, .26),
        inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* Button arrow micro-interaction (subtle) */
.btn .btn-arrow {
    font-weight: 900;
    opacity: .9;
    transform: translateY(1px);
    transition: transform .18s ease, opacity .18s ease;
}

.btn:hover .btn-arrow {
    transform: translate(2px, 1px);
    opacity: 1;
}

/* =========================================================
   HERO BUTTON GLOSS SWEEP (sitewide headers)
========================================================= */

.hero .hero-actions .btn,
.hero .event-actions .btn {
    overflow: hidden;
}

.hero .hero-actions .btn::after,
.hero .event-actions .btn::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -65%;
    width: 48%;
    height: 300%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .3) 42%,
            rgba(255, 255, 255, 0) 82%);
    transform: rotate(24deg);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.hero .hero-actions .btn.btn-secondary::after,
.hero .event-actions .btn.btn-secondary::after {
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(246, 199, 76, .16) 34%,
            rgba(255, 245, 210, .44) 50%,
            rgba(246, 199, 76, .16) 66%,
            rgba(255, 255, 255, 0) 100%);
}

.hero .hero-actions .btn:hover::after,
.hero .event-actions .btn:hover::after {
    animation: heroGlossSweep .82s ease forwards;
    opacity: .72;
}

@keyframes heroGlossSweep {
    0% {
        left: -65%;
        opacity: 0;
    }

    28% {
        opacity: .88;
    }

    100% {
        left: 128%;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .btn .btn-arrow,
    .btn:hover .btn-arrow {
        transition: none !important;
        transform: translateY(1px) !important;
    }

    .hero .hero-actions .btn:hover::after,
    .hero .event-actions .btn:hover::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.menu-item-has-children>a {
    cursor: default;
}