/*
 * Structural styles shared by every event. Classes here are used by the constant
 * HTML/component markup and never change; only the custom-property values below
 * (overridden per event via ThemedHead, sourced from Data/Events/{slug}.json —
 * see docs/THEMING.md) change how they look.
 *
 * These :root defaults are INUNI's own real brand (teal, matching inuni.org.pl's
 * generic site header — ported from its own compiled stylesheet, same approach as
 * BoostNav) — not a generic placeholder. Pages with no event and no ThemedHead
 * override at all (/iam, /admin, Home, Account) get this by default, deliberately:
 * they're INUNI-platform pages, not any one event's, so they should look like
 * INUNI's own site, not a made-up generic theme. See InuniNav.razor.
 */
:root {
    --brand-page-bg: #ffffff;
    --brand-surface: #ffffff;
    --brand-border: #d8e8e8;
    --brand-primary: #185354;
    --brand-primary-contrast: #ffffff;
    --brand-accent: #185354;
    --brand-accent-soft: #eef6f6;
    --brand-accent-strong: #123f40;
    --brand-text-main: #232323;
    --brand-text-muted: #5d7a7a;
    --brand-font-family: 'Inter', sans-serif;
    --brand-logo-url: none;
    --brand-radius: 0.6rem;
}

.welcome-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--brand-page-bg);
}

.welcome-hero {
    font-family: var(--brand-font-family);
    color: var(--brand-text-main);
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    padding: 2.5rem 2rem;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* A plain <img> (see Welcome.razor), not a CSS background-image driven by the --brand-logo-url
   custom property ThemedHead sets - that variable depends on <HeadContent> injection timing
   during Blazor Server's static-to-interactive upgrade, which turned out not to reliably apply
   in time (the logo never actually painted). BoostNav's own logo already used a direct <img>
   and always rendered correctly, which is what pointed at the fix here. Sized for a wide
   wordmark-style logo (e.g. BOOST's own is a 153x76, ~2:1 SVG) rather than a square icon - a 1:1
   box would letterbox a logo this shape down to a sliver. */
.welcome-hero__logo {
    display: block;
    width: min(220px, 60%);
    height: 100px;
    margin: 0 auto 1.5rem;
    object-fit: contain;
}

.welcome-hero__title {
    color: var(--brand-accent);
    text-align: center;
    margin-bottom: 0.25rem;
}

.welcome-hero__subtitle {
    text-align: center;
    color: var(--brand-text-muted);
    margin-bottom: 2rem;
}

/* For longer, multi-paragraph copy (e.g. the onboarding intro) - preserves the "\n\n"
   paragraph breaks already in the source text without needing to split it into separate
   <p> elements, and reads better left-aligned than centered at this length. */
.welcome-hero__subtitle--multiline {
    text-align: left;
    white-space: pre-line;
}

/* The onboarding "Cześć {name}!" heading + continue button, side by side (button pinned to the
   right of the text, not stacked below it) - deliberately does NOT wrap: with a long intro
   paragraph, wrapping would drop the row to a stack and the button would read as "still on the
   left" (its own natural alignment once it's alone on its own line) instead of staying pinned
   to the right. min-width:0 on the text column is what lets ITS OWN text wrap internally
   instead of the row wrapping. Only drops to a real stacked layout below a hard breakpoint,
   where there's no room for both side by side at all. */
.welcome-onboarding-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.welcome-onboarding-row__text {
    flex: 1 1 auto;
    min-width: 0;
}

.welcome-onboarding-row__text .welcome-hero__subtitle {
    margin-bottom: 0;
}

.welcome-onboarding-row__button {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .welcome-onboarding-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.welcome-form .form-label {
    font-weight: 600;
    color: var(--brand-text-main);
}

/* Bootstrap's default .form-control is a light control (white background, dark text) —
   wrong on every event's dark surface (BOOST's included). Restyled from the same
   surface/border/text tokens the rest of the themed page already uses, rather than
   leaving Bootstrap's defaults to clash with it. */
.welcome-form .form-control {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-main);
    border-radius: 0.6rem;
}

.welcome-form .form-control::placeholder {
    color: var(--brand-text-muted);
    opacity: 0.7;
}

.welcome-form .form-control:focus {
    background-color: color-mix(in srgb, var(--brand-surface) 80%, black);
    border-color: var(--brand-accent);
    color: var(--brand-text-main);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-accent) 25%, transparent);
}

.welcome-form .form-text {
    color: var(--brand-text-muted);
}

.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--brand-primary);
    color: var(--brand-primary-contrast);
    border: none;
    border-radius: var(--brand-radius);
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
}

.btn-brand:disabled {
    opacity: 0.6;
}

.login-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.login-option {
    width: 100%;
    max-width: 26rem;
    padding: 0.85rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--brand-text-main);
    background: var(--brand-page-bg);
    border: 2px solid var(--brand-border);
    border-radius: var(--brand-radius);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.login-option:hover {
    border-color: var(--brand-accent);
}

.login-option--selected {
    border-color: var(--brand-accent);
    background: color-mix(in srgb, var(--brand-accent) 14%, var(--brand-page-bg));
}

.login-continue {
    display: flex;
    margin: 0 auto;
}

.welcome-success {
    text-align: center;
    color: var(--brand-text-main);
}

.welcome-success__code {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--brand-text-main);
    background: var(--brand-page-bg);
    border: 1px dashed var(--brand-accent);
    border-radius: var(--brand-radius);
    padding: 0.75rem 1.5rem;
    margin: 1rem 0;
}

.welcome-error {
    color: #e5484d;
    margin-top: 1rem;
    text-align: center;
}

/* The "already registered" profile view (Karta Kwalifikacyjna) reads as a normal top-
   aligned content page under BoostNav, not the centered single-card layout the plain
   welcome/registration hero uses. */
.welcome-page--profile {
    display: block;
    min-height: 100vh;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.welcome-hero--profile {
    text-align: left;
    max-width: 720px;
}

.welcome-hero--profile .welcome-hero__title {
    text-align: left;
}

/* Border/background/glow ported from boost.inuni.org.pl's own card component
   (.path-card) rather than approximated — same accent-tinted translucent treatment. */
.profile-card {
    margin-top: 2rem;
    background: color-mix(in srgb, var(--brand-accent-soft, var(--brand-surface)) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, transparent);
    border-radius: 1.2rem;
    box-shadow: 0 0 24px color-mix(in srgb, var(--brand-accent) 20%, transparent);
    padding: 1.5rem 1.6rem 1.8rem;
}

.profile-card__title {
    color: var(--brand-accent);
    text-align: center;
    margin-bottom: 1.5rem;
}