/*
 * Shared editorial and control polish for occasion pages.
 * Keep Patrick Hand limited to short, human labels so the display and body
 * typefaces continue to carry the main hierarchy.
 */
:root {
    --occasion-button-start: #c94750;
    --occasion-button-mid: #b63f48;
    --occasion-button-end: #9f3038;
    --occasion-button-shadow: 159, 48, 56;
}

.occasion-page.theme-birthday {
    --occasion-button-start: #c94750;
    --occasion-button-mid: #b63f48;
    --occasion-button-end: #9f3038;
    --occasion-button-shadow: 159, 48, 56;
}

.occasion-page.theme-farewell {
    --occasion-button-start: #9f5e4c;
    --occasion-button-mid: #93513f;
    --occasion-button-end: #7e4234;
    --occasion-button-shadow: 126, 66, 52;
}

.occasion-page.theme-wedding {
    --occasion-button-start: #a65369;
    --occasion-button-mid: #984a61;
    --occasion-button-end: #814052;
    --occasion-button-shadow: 129, 64, 82;
}

.occasion-page.theme-thank-you {
    --occasion-button-start: #b45b3b;
    --occasion-button-mid: #a75031;
    --occasion-button-end: #8b4029;
    --occasion-button-shadow: 139, 64, 41;
}

.occasion-page.theme-christmas {
    --occasion-button-start: #477758;
    --occasion-button-mid: #3d704f;
    --occasion-button-end: #2f6345;
    --occasion-button-shadow: 47, 99, 69;
}

.occasion-page.theme-welcome {
    --occasion-button-start: #4a7977;
    --occasion-button-mid: #386d6d;
    --occasion-button-end: #2e5f60;
    --occasion-button-shadow: 46, 95, 96;
}

/*
 * Primary actions use one hue family per occasion. Every color stop keeps
 * sufficient contrast with the white supporting text, and the inset edge plus
 * compact tinted shadow provide depth without the former split-color slab.
 */
.occasion-page .primary-cta,
.occasion-page .call-to-action,
.occasion-page .mock-primary,
body:not(.occasion-page) .call-to-action {
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    background: linear-gradient(
        135deg,
        var(--occasion-button-start) 0%,
        var(--occasion-button-mid) 56%,
        var(--occasion-button-end) 100%
    ) !important;
    color: #fffdf7 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 14px 24px -16px rgba(var(--occasion-button-shadow), 0.92),
        0 6px 12px -10px rgba(54, 43, 37, 0.44) !important;
}

.occasion-page .primary-cta::before,
.occasion-page .call-to-action::before,
body:not(.occasion-page) .call-to-action::before {
    display: none !important;
}

.occasion-page .primary-cta small,
.occasion-page .call-to-action-note,
body:not(.occasion-page) .call-to-action-note {
    color: #fffdf7 !important;
}

.occasion-page .cta-arrow,
.occasion-page .call-to-action-arrow,
body:not(.occasion-page) .call-to-action-arrow {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.occasion-page .primary-cta:hover,
.occasion-page .call-to-action:hover,
.occasion-page .mock-primary:hover,
body:not(.occasion-page) .call-to-action:hover {
    border-color: rgba(255, 255, 255, 0.50) !important;
    filter: brightness(1.035) saturate(0.98) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 18px 28px -16px rgba(var(--occasion-button-shadow), 0.94),
        0 8px 14px -10px rgba(54, 43, 37, 0.40) !important;
    transform: translateY(-2px) !important;
}

.occasion-page .primary-cta:focus-visible,
.occasion-page .call-to-action:focus-visible,
.occasion-page .mock-primary:focus-visible,
body:not(.occasion-page) .call-to-action:focus-visible {
    outline: 3px solid #fffdf7;
    outline-offset: 3px;
    box-shadow:
        0 0 0 5px var(--occasion-button-end),
        0 16px 26px -16px rgba(var(--occasion-button-shadow), 0.92) !important;
}

/* Long localized FAQ headings need a real title rail, not a fixed 300px box. */
.occasion-page .faq-layout {
    grid-template-columns: minmax(370px, 0.82fr) minmax(0, 1.18fr) !important;
    gap: clamp(56px, 6vw, 88px) !important;
}

.occasion-page .faq-layout > :first-child {
    min-width: 0;
}

.occasion-page .faq-layout > :first-child h2 {
    max-width: 11ch;
    font-size: clamp(2.75rem, 4vw, 3.625rem) !important;
    line-height: 0.98;
    text-wrap: balance;
}

.occasion-page .hero-kicker,
.occasion-page .section-kicker,
.occasion-page .flow-time,
.occasion-page .prompt-item strong {
    font-family: var(--hand) !important;
    font-weight: 400 !important;
    letter-spacing: 0.035em !important;
    text-transform: none !important;
}

.occasion-page .hero-kicker,
.occasion-page .section-kicker {
    display: block;
    margin-bottom: 14px;
    font-size: clamp(1.12rem, 1.45vw, 1.38rem) !important;
    line-height: 1.05 !important;
}

.occasion-page .hero-kicker {
    color: var(--coral-dark) !important;
}

.occasion-page.theme-get-well {
    --hero-title-width: 11.8ch;
}

.occasion-page.theme-get-well .hero-inner {
    padding-top: clamp(164px, 16svh, 194px) !important;
}

.occasion-page .flow-time,
.occasion-page .prompt-item strong {
    font-size: clamp(1.08rem, 1.2vw, 1.25rem) !important;
    line-height: 1.15 !important;
}

.occasion-page .primary-cta:active,
.occasion-page .call-to-action:active,
.occasion-page .mock-primary:active,
body:not(.occasion-page) .call-to-action:active,
.occasion-page .text-link:active,
.occasion-page .mock-auth a:active {
    transform: translateY(1px) scale(0.99) !important;
}

@media (max-width: 1080px) {
    .occasion-page .faq-layout {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .occasion-page .faq-layout > :first-child h2 {
        max-width: 14ch;
    }
}

@media (max-width: 760px) {
    .occasion-page .faq-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .occasion-page .faq-layout > :first-child h2 {
        max-width: 14ch;
        font-size: clamp(2.5rem, 12vw, 3.25rem) !important;
    }

    .occasion-page .hero-kicker,
    .occasion-page .section-kicker {
        font-size: 1.12rem !important;
    }

    .occasion-page.theme-get-well .hero-inner {
        padding-top: 132px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .occasion-page .primary-cta:hover,
    .occasion-page .call-to-action:hover,
    .occasion-page .mock-primary:hover,
    body:not(.occasion-page) .call-to-action:hover,
    .occasion-page .primary-cta:active,
    .occasion-page .call-to-action:active,
    .occasion-page .mock-primary:active,
    body:not(.occasion-page) .call-to-action:active,
    .occasion-page .text-link:active,
    .occasion-page .mock-auth a:active {
        transform: none !important;
    }
}