@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Colors, typography, spacing, and responsive layouts come from MudBlazor and MeetupTheme. */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body {
    margin: 0;
    background: var(--mud-palette-background, #08162e);
    color: var(--mud-palette-text-primary, #f4f7ff);
    font-family: var(--mud-typography-default-family, 'Inter', Arial, sans-serif);
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--mud-palette-primary, #ffb219);
    outline-offset: 4px;
}
/* FocusOnNavigate announces the heading without drawing a border around it. */
h1[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--mud-palette-primary, #ffb219); color: #08162e; }
.skip-link {
    position: fixed; top: -8rem; left: 1rem; z-index: 5000;
    padding: 1rem; background: var(--mud-palette-primary, #ffb219); color: #08162e;
}
.skip-link:focus { top: 1rem; }
.site-appbar { border-bottom: 1px solid var(--mud-palette-divider); }
/* Preserve the supplied logo's blue lettering with a light brand panel. */
.brand-logo {
    display: block; width: 9rem; height: auto;
    padding: .35rem .5rem; border-radius: 6px; background: #f4f7ff;
}
.brand-logo-footer { width: 11rem; }
.city-photo { display: block; width: 100%; height: clamp(18rem, 35vw, 29rem); }
.mud-button-root, .mud-chip-content { white-space: normal; }
.mud-chip { height: auto; min-height: 2rem; }
.mud-card-header-content { min-width: 0; }

/* Static startup/error UI is rendered before Blazor components are available. */
.loading-shell {
    display: grid; place-content: center; gap: 1.5rem;
    min-height: 100vh; padding: 2rem; text-align: center;
}
.loading-brand { width: min(20rem, 100%); margin-inline: auto; }
.loading-track { height: 3px; width: 15rem; max-width: 100%; margin-inline: auto; background: #304b78; }
.loading-track::after {
    content: ''; display: block; height: 100%;
    width: var(--blazor-load-percentage, 5%); background: #ffb219;
}
#blazor-error-ui {
    display: none; position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
    padding: 1rem 3rem 1rem 1.5rem; background: #12264a; color: #f4f7ff;
    border: 1px solid #ffb219; z-index: 2000;
}
#blazor-error-ui a { color: #ffb219; text-decoration: underline; margin-left: .5rem; }
#blazor-error-ui .dismiss {
    position: absolute; top: .7rem; right: 1rem; background: transparent;
    color: #f4f7ff; border: 0; font-size: 1.3rem; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}