/* ═══════════════════════════════════════════════════════════════════════════
   22Q Event Platform — Core Stylesheet
   ═══════════════════════════════════════════════════════════════════════════
   Shared components and base styles consumed by every user-facing page.
   Tokens come from tokens.css (imported first). Page-specific rules live in
   each HTML file's <style> block and are allowed to override these defaults.

   Cascade order on every page:
     1. tokens.css   (variables)
     2. core.css     (this file — shared components)
     3. <style>      (page-specific tweaks + overrides)

   Never add hardcoded colors, spacing, or radii here. Use tokens.
   Page-unique components (attendee-cards, sponsor-type-selector, etc.) belong
   in the page's own <style> block, not here.
   ═══════════════════════════════════════════════════════════════════════════ */

@import "./tokens.css";

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Body + page frame ─────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    color: var(--22q-text);
    background-color: var(--22q-ocean);
    background-image: url("https://s3.amazonaws.com/mobilecause-avatar-production/shared_img/shared_imgs/288959/original/collage_edited.png?1569609024");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
}

.page-overlay {
    min-height: 100vh;
    width: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(36, 169, 225, 0.24), transparent 42%),
        linear-gradient(150deg, rgba(9, 34, 61, 0.75), rgba(9, 34, 61, 0.64));
    padding: 28px 14px;
}

.container {
    /* Page-specific max-width via each page's own <style>. */
    margin: 0 auto;
}

/* ── Shell (outer white card) ──────────────────────────────────────────── */
.shell {
    background: var(--22q-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--22q-shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── Header band ───────────────────────────────────────────────────────── */
.header {
    text-align: center;
    padding: 20px 18px 14px;
    background: linear-gradient(130deg, #FFFFFF 0%, var(--22q-surface-tint) 100%);
    border-bottom: 1px solid var(--22q-border);
}

.logo {
    height: 72px;
    width: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 10px rgba(9, 34, 61, 0.15));
}

.title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    color: var(--22q-navy);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.subtitle {
    font-size: var(--fs-sm);
    color: var(--22q-text-muted);
    font-weight: var(--fw-medium);
}

/* ── Loading & status views ────────────────────────────────────────────── */
.loading-view,
.status-view {
    padding: 64px 24px;
    text-align: center;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--22q-border);
    border-top-color: var(--22q-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 15px;
    color: var(--22q-text-muted);
    font-weight: var(--fw-medium);
}

.status-icon {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-4);
    line-height: 1;
}

.status-title {
    font-size: 26px;
    font-weight: var(--fw-black);
    color: var(--22q-navy);
    margin-bottom: 10px;
}

.status-message {
    font-size: var(--fs-md);
    color: var(--22q-text-muted);
    margin-bottom: var(--space-6);
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.status-link {
    display: inline-block;
    padding: 11px 22px;
    background: var(--22q-cyan);
    color: #FFFFFF;
    border-radius: 10px;
    text-decoration: none;
    font-weight: var(--fw-bold);
    font-size: 15px;
}

/* ── Form fields ───────────────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    font-size: 13px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    color: var(--22q-navy);
}

.field label .required {
    color: var(--22q-orange);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    border: 1.5px solid var(--22q-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 15px;
    color: var(--22q-text);
    font-family: inherit;
    background: #FFFFFF;
    transition: border-color var(--motion-base) var(--easing-base),
                box-shadow var(--motion-base) var(--easing-base);
}

.field textarea {
    min-height: 104px;
    resize: vertical;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
    border-color: var(--22q-border-strong);
}

.field input.error,
.field textarea.error,
.field select.error {
    border-color: var(--22q-error-text);
    background: var(--22q-error-field-bg);
}

.field-error {
    display: none;
    font-size: var(--fs-xs);
    color: var(--22q-error-text);
    font-weight: var(--fw-semibold);
}

.field input.error + .field-error,
.field textarea.error + .field-error,
.field select.error + .field-error,
.field input.error ~ .field-error,
.field textarea.error ~ .field-error,
.field select.error ~ .field-error {
    display: block;
}

/* ── Focus ring (keyboard-visible only) ────────────────────────────────── *
   Usage: mark interactive elements that should show the keyboard focus ring.
   Mouse clicks do NOT trigger the ring thanks to :focus-visible — this
   removes the "why is that button glowing when I clicked it" noise without
   sacrificing keyboard accessibility.
*/
.focus-ring:focus {
    outline: none;
}

.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--22q-shadow-focus);
    border-color: var(--22q-cyan);
}

/* Keyboard-focus safety net for native buttons and links that don't opt in
   via `.focus-ring`. Uses a 2px cyan outline (not a box-shadow) so it doesn't
   stack oddly with per-component hover shadows. Mouse-click focus is NOT
   drawn because this only matches :focus-visible. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--22q-cyan);
    outline-offset: 2px;
}

/* Buttons with their own explicit :focus-visible styling (e.g. .submit-btn)
   opt out of the safety net. */
.submit-btn:focus-visible {
    outline: none;
}

/* Apply focus-visible to all form fields by default — safer than requiring
   the class on every input since existing markup doesn't have it. */
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--22q-cyan);
    box-shadow: var(--22q-shadow-focus);
}

.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible),
.field select:focus:not(:focus-visible) {
    box-shadow: none;
    border-color: var(--22q-border);
}

/* ── Error banner ──────────────────────────────────────────────────────── */
.error-banner {
    display: none;
    margin-bottom: 18px;
    background: var(--22q-error-bg);
    color: var(--22q-error-text);
    border: 1px solid rgba(165, 58, 34, 0.25);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: 12px 14px;
}

.error-banner.visible {
    display: block;
}

/* ── Primary CTA button ────────────────────────────────────────────────── */
.submit-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 15px 18px;
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(120deg, var(--22q-orange), var(--22q-orange-dark));
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: var(--22q-shadow-cta);
    transition: transform var(--motion-base) var(--easing-base),
                box-shadow var(--motion-base) var(--easing-base),
                opacity var(--motion-slow) var(--easing-base);
    font-family: inherit;
}

.submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--22q-shadow-cta-hover);
}

.submit-btn:focus-visible {
    outline: none;
    box-shadow: var(--22q-shadow-cta-hover), var(--22q-shadow-focus);
}

.submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer {
    text-align: center;
    margin-top: 20px;
    font-size: var(--fs-xs);
    color: var(--22q-footer-link-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer a {
    color: #FFFFFF;
    font-weight: var(--fw-bold);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer-logo {
    width: 150px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

.footer-sponsor-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
}

/* ── Success view (shared between event form & sponsorship-success) ────── */
.success-mark {
    width: 78px;
    height: 78px;
    border-radius: var(--radius-pill);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--22q-success-bg) 0%, var(--22q-success-bg-deep) 100%);
    border: 2px solid var(--22q-success-border);
}

.success-mark svg {
    width: 36px;
    height: 36px;
}

.success-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--22q-navy);
    line-height: var(--lh-tight);
    margin-bottom: 8px;
}

.success-message {
    max-width: 640px;
    margin: 0 auto 18px;
    font-size: 17px;
    color: var(--22q-text);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.hidden {
    display: none !important;
}

/* ── Shared breakpoints ────────────────────────────────────────────────── *
   Two canonical breakpoints. Page-specific layouts add their own as needed.
*/
@media (max-width: 700px) {
    .title { font-size: 29px; }
    .header { padding: 22px 14px 14px; }
}

@media (max-width: 480px) {
    .page-overlay { padding: 14px 8px; }
    body { background-attachment: scroll; }
    .logo { height: 84px; }
    .title { font-size: 25px; }
    .submit-btn { font-size: 15px; }
    .shell { border-radius: 14px; }
}