/**
 * AI Superusers webinar registration page — scoped styles.
 *
 * Cap doc: [[Projects/Provarro Website/Capabilities/Reg Form Pattern]] §3.19
 *   (webinar variant — free/comp registration).
 * Story: nx-2ca6d8f95e1e (parent feature nx-22ded6c28dec)
 *
 * A lean single-purpose reg page — hero -> form -> footer, no pricing/
 * qualify/program-detail sections. Own class prefix (`aisuper-`), same as the
 * sibling ai-workshop / coo pages. Most layout / form / footer / header
 * styling is inherited from /styles.css (the shared shell); this file is
 * intentionally thin.
 */

/* Hero — quieter than a full paid-workshop hero (no eyebrow, no CTA row,
   reduced vertical rhythm since the form is the very next section). */
.aisuper-hero {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
}

.aisuper-when {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* ── Form section ───────────────────────────────────────────────────────── */
.aisuper-form-block {
    max-width: 40rem;
    margin: 0 auto;
}

.aisuper-turnstile {
    margin-bottom: var(--space-lg);
    min-height: 65px;
}

.aisuper-form-error {
    background-color: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-sm);
    color: #B12C39;
    padding: 0.75rem 1rem;
    margin-bottom: var(--space-md);
    font-size: 0.95rem;
}

/* Field-level error state (AC4) — control named by the backend's `field`. */
.aisuper-form .form-group input[aria-invalid="true"],
.aisuper-form .form-group select[aria-invalid="true"] {
    border-color: #B12C39;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.aisuper-field-error {
    color: #B12C39;
    font-size: 0.9rem;
    margin: 0.375rem 0 0;
}

.aisuper-submit {
    width: 100%;
}

@media (min-width: 768px) {
    .aisuper-submit {
        width: auto;
    }
}

/* ── Inline confirmation state ──────────────────────────────────────────── */
.aisuper-ack {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-xl) 0;
}

.aisuper-ack p {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-foreground);
}

.aisuper-join-line {
    margin-top: var(--space-lg);
}

/* .btn sets an explicit `display`, which (author CSS) otherwise overrides the
   UA default `[hidden] { display: none }` — without this, a hidden .btn link
   still renders. Scoped to the join link specifically. */
#aisuper-join-link[hidden] {
    display: none;
}

#aisuper-join-pending {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-muted-foreground);
}