/*
 * ANCCER Invitations — Phase 1A
 * Component styles for all contextual invite CTAs.
 * Consumes tokens from anccer-theme/tokens.css.
 */

/* ── Shared CTA foundation ───────────────────────────────────────────────── */

.anccer-invite-cta,
.anccer-research-invite-cta,
.anccer-event-invite-cta,
.anccer-article-invite,
.anccer-post-reg-invite {
    font-family: inherit;
}

/* ── Generic card CTA ────────────────────────────────────────────────────── */

.anccer-invite-cta--card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.anccer-invite-cta--card.anccer-invite-cta--leader {
    border-left: 3px solid var(--color-primary);
}

.anccer-invite-cta__heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.35rem;
}

.anccer-invite-cta__body {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 0.875rem;
}

.anccer-invite-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ── Inline CTA (single row, low-profile) ────────────────────────────────── */

.anccer-invite-cta--inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0.75rem;
}

.anccer-invite-cta--inline .anccer-invite-cta__body {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ── Sidebar widget CTA ──────────────────────────────────────────────────── */

.anccer-invite-widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    padding: 1.125rem 1.25rem;
}

.anccer-invite-widget__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.35rem;
}

.anccer-invite-widget__body {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

/* ── Shared button styles ────────────────────────────────────────────────── */

.anccer-invite-cta__btn,
.anccer-invite-widget__btn,
.anccer-research-invite-cta__btn,
.anccer-event-invite-cta__btn,
.anccer-article-invite__btn,
.anccer-dir-invite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

/* Primary button */
.anccer-invite-cta__btn,
.anccer-invite-widget__btn,
.anccer-research-invite-cta__btn,
.anccer-event-invite-cta__btn,
.anccer-article-invite__btn,
.anccer-dir-invite-btn {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.anccer-invite-cta__btn:hover,
.anccer-invite-widget__btn:hover,
.anccer-research-invite-cta__btn:hover,
.anccer-event-invite-cta__btn:hover,
.anccer-article-invite__btn:hover,
.anccer-dir-invite-btn:hover {
    opacity: 0.88;
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* Secondary button */
.anccer-invite-cta__btn--secondary,
.anccer-research-invite-cta__btn--secondary,
.anccer-event-invite-cta__btn--secondary,
.anccer-article-invite__btn--secondary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.anccer-invite-cta__btn--secondary:hover,
.anccer-research-invite-cta__btn--secondary:hover,
.anccer-event-invite-cta__btn--secondary:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Ghost button */
.anccer-invite-cta__btn--ghost,
.anccer-event-invite-cta__btn--ghost,
.anccer-article-invite__btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}

.anccer-invite-cta__btn--ghost:hover,
.anccer-event-invite-cta__btn--ghost:hover {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
    text-decoration: none;
}

/* ── Context banner (on send-invites page) ───────────────────────────────── */

.anccer-invite-banner {
    background: var(--color-info-bg, #eff6ff);
    border: 1px solid var(--color-info, #2563eb);
    border-radius: var(--radius, 8px);
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
}

.anccer-invite-banner strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--color-info, #2563eb);
}

/* ── Group directory invite button ───────────────────────────────────────── */

.anccer-dir-invite-btn {
    font-size: 0.8125rem;
    padding: 0.4rem 0.875rem;
}

/* ── Post-registration invite panel ─────────────────────────────────────── */

.anccer-post-reg-invite {
    background: linear-gradient(135deg, #f0f4ff 0%, #fdf4f0 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    padding: 2rem;
    margin-top: 2rem;
    text-align: center;
}

.anccer-post-reg-invite__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
}

.anccer-post-reg-invite__heading {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.anccer-post-reg-invite__body {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
}

.anccer-post-reg-invite__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.anccer-post-reg-invite__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1.5px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.anccer-post-reg-invite__btn:hover {
    opacity: 0.88;
    color: var(--color-text-inverse);
    text-decoration: none;
}

.anccer-post-reg-invite__btn--secondary {
    background: transparent;
    color: var(--color-primary);
}

.anccer-post-reg-invite__btn--secondary:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.anccer-post-reg-invite__btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}

.anccer-post-reg-invite__btn--ghost:hover {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

.anccer-post-reg-invite__skip {
    background: none;
    border: none;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.anccer-post-reg-invite__skip:hover {
    color: var(--color-text-muted);
}

/* ── Research CTA ────────────────────────────────────────────────────────── */

.anccer-research-invite-cta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    padding: 1.25rem 1.5rem;
    margin: 2rem auto;
    max-width: 760px;
}

.anccer-research-invite-cta__heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.875rem;
}

.anccer-research-invite-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Event CTA ───────────────────────────────────────────────────────────── */

.anccer-event-invite-cta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius, 8px);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    /* Hidden by default; shown after RSVP via JS */
    display: none;
}

.anccer-event-invite-cta--visible,
.anccer-event-invite-cta:not([aria-hidden="true"]) {
    display: block;
}

.anccer-event-invite-cta__heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.anccer-event-invite-cta__body {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 0.875rem;
}

.anccer-event-invite-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Article CTA ─────────────────────────────────────────────────────────── */

.anccer-article-invite {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.anccer-article-invite__heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.875rem;
}

.anccer-article-invite__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Profile invite action ───────────────────────────────────────────────── */

.anccer-profile-invite-cta {
    padding: 0.25rem 0 0.75rem;
    text-align: center;
}

.anccer-profile-invite-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    transition: background 0.15s, border-color 0.15s;
}

.anccer-profile-invite-cta__btn:hover {
    background: var(--color-active-bg, #eef2ff);
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-primary);
}

/* ── Messages hint ───────────────────────────────────────────────────────── */

.anccer-messages-invite-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

.anccer-messages-invite-hint a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.anccer-messages-invite-hint a:hover {
    text-decoration: underline;
}

/* ── Footer invite CTA ───────────────────────────────────────────────────── */

.anccer-footer-invite {
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.72);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.anccer-footer-invite__text {
    flex: 1 1 auto;
}

.anccer-footer-invite__link {
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    white-space: nowrap;
}

.anccer-footer-invite__link:hover {
    color: #fff;
}

/* ── Sidebar invite widget ───────────────────────────────────────────────── */

.side-widget .anccer-invite-widget {
    padding: 0;
    border: none;
    background: transparent;
}

/* ── Leader / Creator stat row ───────────────────────────────────────────── */

.anccer-invite-cta__stats {
    display: flex;
    gap: 1rem;
    margin: 0.25rem 0 0.875rem;
    flex-wrap: wrap;
}

.anccer-invite-cta__stat {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.anccer-invite-cta__stat strong {
    color: var(--color-text);
    font-weight: 700;
}

/* Event-creator card accent */
.anccer-invite-cta--creator {
    border-left: 3px solid var(--color-accent);
}

/* ── Rich context banner elements ────────────────────────────────────────── */

.anccer-invite-banner__name {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin: 0.25rem 0 0.125rem;
}

.anccer-invite-banner__meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.anccer-invite-banner__desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
}

/* ── Invitation confirmation card ────────────────────────────────────────── */

.anccer-invite-confirmation {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius, 8px);
    padding: 2rem;
    margin: 1.5rem 0;
    text-align: center;
}

.anccer-invite-confirmation[hidden] {
    display: none;
}

.anccer-invite-confirmation__icon {
    font-size: 2rem;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.anccer-invite-confirmation__heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.anccer-invite-confirmation__body {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.anccer-invite-confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}

.anccer-invite-confirmation__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.375rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border: 1.5px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.anccer-invite-confirmation__btn:hover {
    opacity: 0.88;
    color: var(--color-text-inverse);
    text-decoration: none;
}

.anccer-invite-confirmation__btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}

.anccer-invite-confirmation__btn--ghost:hover {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

/* ── Responsive adjustments ─────────────────────────────────────────────── */

@media (max-width: 480px) {
    .anccer-post-reg-invite__actions,
    .anccer-invite-confirmation__actions {
        flex-direction: column;
    }
    .anccer-post-reg-invite__btn,
    .anccer-invite-confirmation__btn {
        justify-content: center;
    }
    .anccer-research-invite-cta__actions,
    .anccer-event-invite-cta__actions,
    .anccer-invite-cta__actions {
        flex-direction: column;
    }
    .anccer-invite-cta--inline {
        flex-direction: column;
        align-items: flex-start;
    }
}