html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Swiper carousel: hero height constraint ────────────────────────────────
   Images are 450×300 px (3:2), shown at 200px. The box, the slide row and the
   controls are sized here (not only in the Swiper CDN stylesheet) so the eight
   slides cannot stack and push the headline before that CSS or Swiper JS runs.
   ───────────────────────────────────────────────────────────────────────── */
.hero-swiper {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #2e7d32;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 200px;
    min-height: 200px;
}
.hero-swiper .swiper-slide {
    margin: 0 !important;
    padding: 0 !important;
}
.hero-swiper .swiper-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 200px;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-pagination {
    position: absolute;
}

/* Font Awesome glyphs have no width until the webfont file arrives. The same
   fixed em box as .fa-fw keeps headings and nav links from shifting. */
.fa {
    width: 1.28571429em;
    text-align: center;
}

/* Location fields are inserted by Places JS after first paint. A form-control
   of height is reserved so the search card does not grow around the input. */
#people-location-input,
#clubs-location-input,
#club-location-input,
#profile-location-input,
#register-location-input,
[data-location-autocomplete] {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Cookie banner is an overlay on every page. Position is set here as well as
   with Bootstrap's fixed-bottom so it never sits in normal flow and pushes
   the page while stylesheets settle. */
#cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    width: 100%;
    margin: 0;
}

/* Homepage "latest profiles" skeleton, shown while the streamed list is empty.
   Matches the profile photo box so the CTA under the list does not jump. */
.smm-profile-skeleton__photo {
    width: 120px;
    height: 120px;
    margin: 16px auto 0;
    border-radius: 50%;
    background: #e9ecef;
}

/* Light font weight for all placeholder text */
::placeholder {
    font-weight: 100 !important;
    opacity: 0.5 !important;
}

/* Blazor's unhandled-error bar (App.razor): hidden until Blazor shows it. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    background: #fff3cd;
    color: #664d03;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
}
#blazor-error-ui .reload { margin-left: 0.5rem; font-weight: 600; }
#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}