/* Styles of the no-JS site on top of Bootstrap, mostly for forms. Served by `util::get_site_style`
   (a file and not inline, so that the Content-Security-Policy can do without inline styles one
   day; `base.html` still has the page layout inline). */

/* Short forms (login, signup, password reset) do not need the whole width of a desktop. */
.form-narrow {
    max-width: 30rem;
    margin-inline: auto;
}

/* Forms that are wide on a desktop (settings, events) but should stay readable. */
.form-medium {
    max-width: 46rem;
    margin-inline: auto;
}

.content-card .card-body {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .content-card .card-body {
        padding: 2rem 2.25rem;
    }
}

.content-card .card-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* The legend of a fieldset is a subheading, not a second title. */
fieldset legend {
    font-size: 1.05rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
}

/* Comfortable to hit with a thumb, and 16px text so that iOS does not zoom into the field. */
.content-card .form-control,
.content-card .form-select {
    font-size: 1rem;
    min-height: 2.75rem;
}

.content-card .btn:not(.btn-sm) {
    min-height: 2.75rem;
}

.content-card .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
}

/* Switches are wider than they are high. */
.content-card .form-switch .form-check-input {
    width: 2.4em;
}

.content-card .form-switch {
    padding-left: 3em;
}

.content-card .form-switch .form-check-input {
    margin-left: -3em;
}

.content-card .form-check-label {
    padding-left: 0.25rem;
}

/* The links below a form (forgot password, register instead). */
.form-links {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.95rem;
}

/* The bottom navigation on phones: one row of icons, big enough for thumbs. */
@media (max-width: 767.98px) {
    .bottom-nav .user-section .btn {
        padding: 0.45rem 0.7rem;
        font-size: 1.05rem;
    }

    .bottom-nav .nav-link-custom i {
        font-size: 1.45rem;
        margin-bottom: 0;
    }

    .bottom-nav .nav-link-custom {
        padding: 0.35rem 0.25rem;
    }
}

/* The settings: one section per form. On a desktop the heading and explanation stand to the left
   of the form, on a phone above it. */
.settings-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.settings-section:first-of-type {
    border-top: none;
    padding-top: 0.5rem;
}

.settings-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.settings-section .section-hint {
    color: #6c757d;
    font-size: 0.925rem;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .settings-section {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 2.5rem;
    }
}

/* The box with what only admins see. */
.admin-box {
    background: rgba(13, 110, 253, 0.06);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* The list of logins in the settings: what it is on the left, what can be done on the right, below
   each other if there is no room. */
.session-list .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.session-list .session-info {
    min-width: 0;
    flex: 1 1 14rem;
}

.session-list .badge {
    white-space: normal;
}

/* The event forms (create and edit). */
.event-form .event-settings {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0.5rem;
}

.event-form .event-settings h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.event-form .form-check {
    margin-bottom: 0.35rem;
}

.event-form textarea {
    min-height: 6rem;
}

/* The list of all events (`events.html`): the "new event" form folded away behind a button (the
   `summary`), then a card per section (drafts, upcoming, past) with a row per event. */
details.event-create {
    margin-top: 1.25rem;
}

details.event-create > summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

details.event-create > summary::-webkit-details-marker {
    display: none;
}

/* Open: the button steps back, the form is what counts now. */
details.event-create[open] > summary .btn {
    background: none;
    color: #0d6efd;
}

details.event-create > form {
    margin-top: 1.25rem;
}

.event-section .card-title {
    font-size: 1.25rem;
}

.event-section-hint {
    font-size: 0.925rem;
    margin-bottom: 0.5rem;
}

/* The past events are folded away: the heading is the summary, its chevron turns when open. */
.event-past > summary {
    list-style: none;
    cursor: pointer;
}

.event-past > summary::-webkit-details-marker {
    display: none;
}

.event-past > summary .card-title {
    margin-bottom: 0;
}

.event-past[open] > summary .card-title {
    margin-bottom: 0.75rem;
}

.event-past-marker {
    display: inline-block;
    transition: transform 0.2s ease;
}

.event-past[open] .event-past-marker {
    transform: rotate(90deg);
}

.event-count {
    font-size: 0.8rem;
    font-weight: 500;
    vertical-align: 0.2em;
    margin-left: 0.25rem;
}

/* A row per event, the whole row is the link: the image (or a placeholder) on the left, when
   and what in the middle, a chevron on the right. */
.event-index {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-index > li {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.event-index > li:first-child {
    border-top: none;
}

.event-index-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    color: inherit;
    text-decoration: none;
}

.event-index-link:hover .event-index-title,
.event-index-link:focus-visible .event-index-title {
    color: #0d6efd;
}

.event-index-thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.05);
}

.event-index-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .event-index-thumb {
        width: 6.5rem;
        height: 4.5rem;
    }
}

.event-index-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-index-when {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0d6efd;
}

.event-index-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.event-index-title .badge {
    font-weight: 500;
    font-size: 0.75rem;
    vertical-align: 0.2em;
}

.event-index-meta {
    font-size: 0.925rem;
    color: #6c757d;
}

.event-index-chevron {
    flex: 0 0 auto;
    color: #adb5bd;
    font-size: 1.1rem;
}

/* On a phone the text needs the width more than the chevron. */
@media (max-width: 575.98px) {
    .event-index-chevron {
        display: none;
    }

    .event-index-link {
        gap: 0.75rem;
    }
}

/* Past events step back: grey dates, faded images. */
.event-index-past .event-index-when {
    color: #6c757d;
}

.event-index-past .event-index-thumb {
    filter: grayscale(1);
    opacity: 0.75;
}

/* The signup form of an event: sections with a heading each. */
.signup-heading {
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.signup-form {
    max-width: 44rem;
}

.signup-section {
    margin-bottom: 1.75rem;
}

.signup-section .form-check {
    margin-bottom: 0.6rem;
}

/* The page of one event (`event.html`): the image across the card, the facts as a small table,
   the description as written (with its line breaks). */
.event-page {
    overflow: hidden;
}

/* The club's logo (`HIC_LOGO`) in front of its name, as high as the heading's letters allow.
   `alt` is empty: the name is right next to it. */
.site-logo {
    height: 1.4em;
    width: auto;
    max-width: 4em;
    margin-right: 0.4em;
    vertical-align: middle;
}

.event-hero {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
}

/* The credit of the image, right under it (`events::image_credit_html`). */
.event-image-credit {
    margin: 0.25rem var(--bs-card-spacer-x) 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: end;
}

.event-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.event-title-row .card-title {
    margin-bottom: 0;
}

.event-badges .badge {
    font-weight: 500;
    font-size: 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.event-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin-bottom: 1.25rem;
}

.event-facts dt {
    color: #6c757d;
    font-weight: 500;
}

.event-facts dd {
    margin: 0;
}

.event-description {
    white-space: pre-line;
    max-width: 44rem;
}

.event-organiser-box {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.event-placement {
    background: rgba(25, 135, 84, 0.07);
    border: 1px solid rgba(25, 135, 84, 0.25);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    max-width: 44rem;
}

/* Withdrawing is folded away, with what it would mean for the other signups. */
.event-withdraw > summary {
    color: #b02a37;
    cursor: pointer;
    width: fit-content;
}

.event-withdraw[open] > summary {
    margin-bottom: 0.75rem;
}

/* The lists of all events of a day (`event_group_lists.html`): side by side as long as they fit,
   one under the other on phones. */
.day-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.day-list {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    min-width: 0;
}

/* The form to change a signup (`fragment_signup_details.html`), folded away under the details. */
.signup-details-edit > summary {
    color: #0d6efd;
    cursor: pointer;
    width: fit-content;
}

.signup-details-edit[open] > summary {
    margin-bottom: 0.75rem;
}

/* Under the comment of the signup forms (`fragment_friend_hint.html`): a small link-like line
   that folds out the explanation. */
.signup-friend-hint > summary {
    color: #0d6efd;
    cursor: pointer;
    width: fit-content;
}

.event-others .list-group {
    max-width: 44rem;
}

/* The lists of the organisers: a person per row, what matters about them as tags. */
.event-lists h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.25rem;
}

.participant-list {
    padding-left: 1.5rem;
    max-width: 44rem;
}

.participant-list > li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.participant-tags .badge {
    font-weight: 500;
    margin-right: 0.15rem;
}

.participant-comment {
    white-space: pre-line;
}

/* The lists as text for the newsletter, folded away behind a button. */
.event-newsletter-text {
    margin-top: 1.25rem;
    max-width: 44rem;
}

.event-newsletter-text > summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.event-newsletter-text > summary::-webkit-details-marker {
    display: none;
}

.event-newsletter-text[open] > summary {
    margin-bottom: 0.5rem;
}

.event-newsletter-text textarea {
    font-family: var(--bs-font-monospace);
    font-size: 0.925rem;
}

.saved-data-box {
    background: rgba(25, 135, 84, 0.07);
    border: 1px solid rgba(25, 135, 84, 0.25);
    border-radius: 0.5rem;
    padding: 0.9rem 1rem 0.4rem;
}

/* The users of the user administration: who it is on the left, their groups on the right, below
   each other on a phone. */
.user-list .list-group-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.user-list .user-info {
    min-width: 0;
    flex: 1 1 16rem;
}

.user-list .user-groups form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.user-list .user-groups .badge {
    font-size: 0.85rem;
}

/* The page of an anonymous signup (the link from the email): the details as a compact
   list, each event it is for as a box with its withdrawal button. */
.signup-page h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
}

.signup-page .signed-up-events {
    list-style: none;
    padding: 0;
}

.signup-page .signed-up-events > li {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.signup-page .signed-up-events > li form {
    margin-top: 0.75rem;
}

/* The home page: an event group (the events of one day) is a card, its events a list in it. */
.event-group .card-title {
    font-size: 1.25rem;
}

/* The image of the group across the top of the card, cropped to a band, with the date on it
   (on a gradient, so that it is readable on any photo) and whose image it is. */
.event-group-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.event-group-image img {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
}

@media (min-width: 768px) {
    .event-group-image img {
        height: 15rem;
    }
}

.event-group-image::after {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

/* The date and, on days with several events, the title of the event the image is from. One bar
   at the bottom, so the two cannot overlap: the caption is at the right of the date when it fits
   there in one line, and under the date otherwise. At most two lines, the whole title is in the
   list below. Left-aligned, since Chromium leaves out the "…" of a clamp on right-aligned text. */
.event-group-image-bar {
    position: absolute;
    z-index: 1;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.15rem 1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.event-group-image-bar .card-title {
    flex: 0 0 auto;
    margin: 0;
}

.event-group-image-caption {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (min-width: 768px) {
    .event-group-image-bar {
        left: 2.25rem;
        right: 2.25rem;
    }
}

/* The credit of the image, small in the top corner, away from the date and the caption. One
   line, the rest is cut off: the whole credit is on the event's page. */
.event-group-image-credit {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    max-width: 85%;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-bottom-left-radius: var(--bs-border-radius-sm);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.event-group-image-credit a {
    color: inherit;
}

/* What the organisers say about the day. Line breaks are kept, it is plain text. */
.event-group-description {
    white-space: pre-line;
    overflow-wrap: anywhere;
    margin-bottom: 0.9rem;
}

/* The form to edit it, folded away behind a small button (the `summary`). */
.event-group-edit {
    margin-bottom: 0.9rem;
}

.event-group-edit > summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.event-group-edit > summary::-webkit-details-marker {
    display: none;
}

.event-group-edit > form {
    max-width: 44rem;
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0.5rem;
}

/* Below the image the list needs no line above it, if nothing is in between. */
.event-group-image + .card-body > .event-list:first-child li:first-child {
    border-top: none;
    padding-top: 0;
}

.event-group .event-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-group .event-list li {
    padding: 0.6rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.event-group .event-list li > a {
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
}

.event-group .event-list .badge {
    margin-left: 0.35rem;
    vertical-align: 0.1em;
}

/* The signup form of the group, folded away behind a button (the `summary`). */
.event-signup {
    padding-top: 0.9rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.event-signup > summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.event-signup > summary::-webkit-details-marker {
    display: none;
}

/* Open: the button steps back, the form is what counts now. */
.event-signup[open] > summary .btn {
    background: none;
    color: #0d6efd;
}

.event-signup > form {
    margin-top: 1.25rem;
}

/* Which event of the day: radio buttons in a box, below them whether one may be moved. */
.signup-choices {
    padding: 1rem 1.25rem;
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.15);
    border-radius: 0.5rem;
}

.signup-choices .signup-maximize {
    margin-top: 1rem;
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(13, 110, 253, 0.15);
}

/* The example of field definitions on the admin page. */
.fields-example {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

/* What the signed_up see of each other's answers (the picnic list). */
.event-protected-answers {
    max-width: 44rem;
    margin-bottom: 1rem;
}

.event-protected-answers ul {
    margin-bottom: 0.75rem;
}

/* The member list (`members.html`). */
.members-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.members-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.members-toolbar input[type=search] {
    flex: 1 1 14rem;
}

.members-toolbar select {
    flex: 0 1 14rem;
}

.members-table tbody tr {
    cursor: pointer;
}

.members-fingerprint {
    word-break: break-all;
}

details.members-more > summary {
    cursor: pointer;
    color: #0d6efd;
    margin-bottom: 0.5rem;
}

.members-payments .form-control,
.members-payments .form-select {
    min-width: 7.5rem;
}

.recovery-code {
    font-size: 0.8rem;
    line-height: 1.35;
    white-space: pre;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.03);
    padding: 0.75rem;
    border-radius: 0.5rem;
}

/* Printing the recovery code: the sheet and nothing else. */
@media print {
    body.printing-recovery * {
        visibility: hidden;
    }

    body.printing-recovery .recovery-sheet,
    body.printing-recovery .recovery-sheet * {
        visibility: visible;
    }

    body.printing-recovery .recovery-sheet {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    body.printing-recovery .recovery-code {
        background: none;
        overflow: visible;
        font-size: 9pt;
    }
}

/* The join form (`join.html`). */
.join-fees caption {
    caption-side: top;
}

.join-fees tr.table-primary td {
    font-weight: 600;
}

.join-legal {
    margin-bottom: 0.9rem;
}

.join-translation {
    margin: 0.25rem 0 0;
    padding-left: 0.25rem;
}

/* "Are you sure?" dialogs that work without JavaScript (block `dialogs` of `base.html`): A link
   to `#<id>` opens one, as it is the target of the URL then, a link anywhere else closes it.
   Above the bottom navigation (z-index 1000). `site.js` adds Escape and the focus, and keeps them
   out of the browser's history. */
.confirm-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-dialog:target {
    display: flex;
}

/* The page behind does not scroll while a dialog is open. */
body:has(.confirm-dialog:target) {
    overflow: hidden;
}

/* A click next to the dialog cancels it. */
.confirm-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.confirm-dialog-box {
    position: relative;
    width: 100%;
    max-width: 28rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* The links to the Impressum and the privacy policy under every page (`base.html`): small, on a
   light background of their own, since the page's background image is behind them. */
.site-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: fit-content;
    margin: 0 auto 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
}

.site-footer a {
    color: inherit;
}

/* A dot between the links, which screen readers skip. */
.site-footer a + a::before {
    content: "·";
    display: inline-block;
    margin-right: 0.5rem;
    text-decoration: none;
}