/*
 * 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 - an institutional, letterhead-style
 * palette (ink-on-paper, the teal-blue accent sampled from the real logo, sharp 2px
 * corners) matching InuniNav's own restyle - not a generic placeholder. Pages with no
 * event and no ThemedHead override at all (/iam, /admin, /finance, /fundacja, 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: rgba(11, 38, 32, 0.16);
    --brand-primary: #0F6E56;
    --brand-primary-contrast: #ffffff;
    --brand-accent: #0F6E56;
    --brand-accent-soft: #eaf4f1;
    --brand-accent-strong: #0B2620;
    --brand-text-main: #0B2620;
    --brand-text-muted: #565B58;
    --brand-font-family: 'Inter', sans-serif;
    /* Headings/titles only (Card/PageHeader titles, h1/h2) - body copy and UI chrome
       (buttons, labels, form fields) stay on --brand-font-family. */
    --brand-font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --brand-logo-url: none;
    --brand-radius: 2px;
}

.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-new-field-banner {
    background: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-page-bg));
    border: 1px solid var(--brand-accent);
    border-radius: var(--brand-radius);
    color: var(--brand-text-main);
    padding: 0.85rem 1.25rem;
    margin: 1rem 0;
    text-align: left;
}

.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;
}