/**
 * Membership Nudge Styles
 *
 * Three surfaces:
 * - .xtra-nudge       — fixed bottom bar, slides up once the reader is mid-story
 * - .xtra-nudge-card  — static end-of-story card appended to free stories
 * - .xtra-nudge-obit  — quiet courtesy note appended to obituaries
 *
 * Uses Xtra Theme design tokens from theme.json with fallbacks.
 */

/* ========================================
   Bottom Bar
   Hidden (translated off-screen) until JS adds .visible
   ======================================== */

.xtra-nudge {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 9998; /* just under the notification bar's 9999 */
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20, 0.5rem);
    padding: var(--wp--preset--spacing--30, 1rem);
    padding-bottom: calc(var(--wp--preset--spacing--30, 1rem) + env(safe-area-inset-bottom, 0px));
    background-color: var(--wp--preset--color--navy, #1B2A4A);
    color: var(--wp--preset--color--text-on-dark, #fff);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.4;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--wp--custom--transition--slow, 300ms ease), visibility 0s 300ms;
}

.xtra-nudge.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--wp--custom--transition--slow, 300ms ease), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .xtra-nudge {
        transition: none;
    }
}

.xtra-nudge__inner {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
    min-width: 0;
    text-align: center;
}

.xtra-nudge__preview-badge,
.xtra-nudge-card__preview-badge,
.xtra-nudge-obit__preview-badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    background-color: var(--wp--preset--color--warning, #d97706);
    color: #fff;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.xtra-nudge-card__preview-badge,
.xtra-nudge-obit__preview-badge {
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}

.xtra-nudge__message {
    font-size: clamp(0.8125rem, 0.77rem + 0.25vw, 0.9375rem);
    word-wrap: break-word;
}

.xtra-nudge__button {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.45em 1.1em;
    background-color: var(--wp--preset--color--accent, #C9A227);
    color: var(--wp--preset--color--navy, #1B2A4A);
    border-radius: 999px;
    font-size: clamp(0.8125rem, 0.77rem + 0.25vw, 0.9375rem);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--wp--custom--transition--fast, 150ms ease);
}

.xtra-nudge__button:hover,
.xtra-nudge__button:focus {
    color: var(--wp--preset--color--navy, #1B2A4A);
    opacity: 0.88;
}

.xtra-nudge__dismiss {
    flex-shrink: 0;
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--wp--preset--color--text-on-dark, #fff);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.8;
    transition: opacity var(--wp--custom--transition--fast, 150ms ease);
}

.xtra-nudge__dismiss:hover {
    opacity: 1;
}

/* Wider screens: one row, message and button inline */
@media (min-width: 600px) {
    .xtra-nudge {
        padding-inline: var(--wp--preset--spacing--40, 1.5rem);
    }

    .xtra-nudge__inner {
        flex-wrap: nowrap;
    }

    .xtra-nudge__dismiss {
        align-self: center;
    }
}

/* ========================================
   End-of-Story Card
   ======================================== */

.xtra-nudge-card {
    margin-block: var(--wp--preset--spacing--50, 2.5rem) var(--wp--preset--spacing--40, 1.5rem);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background-color: var(--wp--preset--color--navy, #1B2A4A);
    color: var(--wp--preset--color--text-on-dark, #fff);
    border-radius: var(--wp--custom--radius--lg, 8px);
    text-align: center;
}

.xtra-nudge-card__heading {
    margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
    font-size: var(--wp--preset--font-size--large, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.xtra-nudge-card__message {
    margin: 0 auto var(--wp--preset--spacing--30, 1rem);
    max-width: 42em;
    font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    line-height: 1.55;
    color: var(--wp--preset--color--text-muted-on-dark, rgba(255, 255, 255, 0.85));
}

.xtra-nudge-card__button {
    display: inline-block;
    padding: 0.6em 1.5em;
    background-color: var(--wp--preset--color--accent, #C9A227);
    color: var(--wp--preset--color--navy, #1B2A4A);
    border-radius: 999px;
    font-size: clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--wp--custom--transition--fast, 150ms ease);
}

.xtra-nudge-card__button:hover,
.xtra-nudge-card__button:focus {
    color: var(--wp--preset--color--navy, #1B2A4A);
    opacity: 0.88;
}

/* ========================================
   Obituary Courtesy Note
   Deliberately quieter than the card: light surface, muted italic
   text, subdued button — a courtesy statement, not a sales pitch.
   ======================================== */

.xtra-nudge-obit {
    margin-block: var(--wp--preset--spacing--50, 2.5rem) var(--wp--preset--spacing--40, 1.5rem);
    padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
    border: 1px solid var(--wp--preset--color--border, #E2E8F0);
    border-radius: var(--wp--custom--radius--lg, 8px);
    text-align: center;
}

.xtra-nudge-obit__message {
    margin: 0 auto var(--wp--preset--spacing--30, 1rem);
    max-width: 42em;
    font-style: italic;
    font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    line-height: 1.55;
    color: var(--wp--preset--color--contrast-2, #475569);
}

.xtra-nudge-obit__button {
    display: inline-block;
    padding: 0.55em 1.4em;
    background-color: var(--wp--preset--color--navy, #1B2A4A);
    color: var(--wp--preset--color--text-on-dark, #fff);
    border-radius: 999px;
    font-size: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem);
    font-weight: 700;
    text-decoration: none;
    transition: opacity var(--wp--custom--transition--fast, 150ms ease);
}

.xtra-nudge-obit__button:hover,
.xtra-nudge-obit__button:focus {
    color: var(--wp--preset--color--text-on-dark, #fff);
    opacity: 0.88;
}