/*
 * The booking form.
 *
 * One column, labels above their fields, and a single vertical rhythm — a form is read top to
 * bottom and every line that starts somewhere else costs the reader a moment. The palette is
 * the site's own: yellow, purple, black.
 */
.bunky-booking {
    --bunky-text: #222222;
    --bunky-muted: #777777;
    --bunky-line: #cccccc;
    --bunky-accent: #662ee4;
    --bunky-yellow: #ffe800;
    --bunky-error: #b32020;
    --bunky-gap: 1.25rem;
    /* How wide a line of the form may be. The calendar is not bound by it. */
    --bunky-column: 34rem;

    margin: 3rem 0;
}

/*
 * A form is read top to bottom in one column, and a line wider than this is one the eye loses on
 * the way back. The calendar is the exception: it is a picture, not a line, and it takes the whole
 * content width — the wider it is, the more months stand side by side without scrolling.
 *
 * The column is centred under it. Left-aligned it would hang off one end of a calendar three times
 * its width, as if the two belonged to different pages.
 *
 * `width: 100%` is what keeps the rows the same width. Auto margins alone shrink a flex item to
 * its content, so every row would end up as wide as whatever is in it and the column would come
 * out ragged.
 */
.bunky-booking__done,
.bunky-booking__closed,
.bunky-booking__contribution,
.bunky-booking > .bunky-booking__error,
.bunky-booking__form > *:not(.bunky-calendar) {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: var(--bunky-column);
    width: 100%;
}

/*
 * Smaller than the unit's own heading — it opens a part of the page, not the page — and left with
 * the edge of the calendar, not with the centred column: it belongs to everything below it.
 */
.bunky-booking__title {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    text-align: left;
}

.bunky-booking__form {
    display: flex;
    flex-direction: column;
    gap: var(--bunky-gap);
}

/* Every row is a label above its field, so nothing has to be hunted for. */
.bunky-booking__field,
.bunky-booking__dates {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
}

.bunky-booking__field label,
.bunky-booking__dates label {
    font-size: .95rem;
    font-weight: 600;
}

.bunky-booking input[type="text"],
.bunky-booking input[type="email"],
.bunky-booking input[type="tel"],
.bunky-booking input[type="date"] {
    /* Kept out of the box-shadow's way: a ring on a square field reads as part of the field. */
    border-radius: 2px;
    background: #ffffff;
    border: 1px solid var(--bunky-text);
    box-sizing: border-box;
    color: var(--bunky-text);
    font: inherit;
    padding: .6rem .7rem;
    width: 100%;
}

/* The submit is the end of the column, so it stands in the middle of it. */
.bunky-booking__submit {
    margin: var(--bunky-gap) 0 0;
    max-width: var(--bunky-column);
    text-align: center;
}

/*
 * The two dates belong together, so they sit side by side once there is room. Two boxes rather than
 * four cells placed by hand, because each date carries its own message and a hand-placed grid has
 * nowhere to put it.
 */
.bunky-booking__dates {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.bunky-booking__date {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

@media (max-width: 30rem) {
    .bunky-booking__dates {
        grid-template-columns: 1fr;
    }
}

/*
 * The consent is a sentence with a box in it, not a label above a field — and it is not one of the
 * fields either, so it stands further from the last of them than they stand from each other. Saying
 * yes to something is a different kind of act from typing your phone number.
 */
.bunky-booking__field:has(input[type="checkbox"]) {
    margin-top: 1rem;
}

.bunky-booking__field:has(input[type="checkbox"]) label {
    /* Centred on the box: a 32px square beside one line of text has a middle, not a baseline. */
    align-items: center;
    display: flex;
    font-weight: 400;
    gap: .75rem;
    line-height: 1.5;
}



/*
 * Links keep the text's own colour and say what they are by being underlined. Purple on a page of
 * black and yellow was a third colour doing a job an underline already does.
 */
.bunky-booking a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bunky-booking a:hover {
    text-decoration-thickness: 2px;
}

/*
 * Focus is the site's yellow and nothing else — no dark line around it, and none of the browser's
 * own black ring. The calendar carries the same rule in its own stylesheet, which is the one the
 * admin loads.
 *
 * Fields take it on `:focus` as well as on `:focus-visible`, which is the part that was missing: a
 * checkbox clicked with a mouse is focused but not focus-visible, and Safari draws its own ring in
 * exactly that state. So the black ring stayed, in the one way that is easiest to miss — the ring was
 * yellow whenever it was reached by keyboard and black whenever it was clicked.
 *
 * Buttons and links keep `:focus-visible` alone: a ring around the button you just clicked is noise.
 */
.bunky-booking :focus-visible,
.bunky-booking input:focus,
.bunky-booking input[type="checkbox"]:focus,
.bunky-booking input[type="checkbox"]:checked:focus {
    border-radius: 2px;
    outline: 3px solid var(--bunky-yellow);
    outline-offset: 1px;
}

/*
 * Our own checkbox: 24×24, square, with a drawn tick.
 *
 * `appearance: none` takes the browser's control away entirely — its black focus ring came with it and
 * could not be styled off it — and what is left is a box we own. Same border as the text fields, so it
 * reads as one of them, and always white behind the tick: the tick is the answer, the colour would be
 * a second one saying the same thing.
 *
 * The tick is one inline SVG as a background image, so there is no font, no icon set and no second
 * file to load; it appears only when the box is checked, because a background image on an unchecked
 * box is a tick nobody asked for.
 */
.bunky-booking input[type="checkbox"] {
    appearance: none;
    background: #ffffff;
    border: 1px solid var(--bunky-text);
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    flex: 0 0 auto;
    height: 24px;
    margin: 0;
    width: 24px;
}

.bunky-booking input[type="checkbox"]:checked {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13l4.5 4.5L19 7" fill="none" stroke="%23222222" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    /* A little inside the border, so the tick does not touch it. */
    background-size: 18px 18px;
}

.bunky-booking button[type="submit"] {
    background: var(--bunky-text);
    border: 1px solid var(--bunky-text);
    color: var(--bunky-yellow);
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: .75rem 1.5rem;
    text-decoration: none;
}

.bunky-booking button[type="submit"]:hover {
    background: var(--bunky-yellow);
    color: var(--bunky-text);
}

.bunky-booking__error {
    color: var(--bunky-error);
    font-size: .9rem;
    margin: 0;
}

/*
 * Where the page lands after a refusal. Nothing to see when nothing is wrong; a sentence about the
 * whole submission when there is, centred — it belongs to the form as a whole, not to the line of
 * fields underneath, and centred is how a heading for something behaves.
 */
.bunky-booking__error--form {
    text-align: center;
}

/* A field that was rejected says so where the eye already is. */
.bunky-booking__field:has(.bunky-booking__error) input,
.bunky-booking__date:has(.bunky-booking__error) input {
    border-color: var(--bunky-error);
    border-width: 2px;
}

/* The news itself, in plain text: on a page that holds nothing else it needs no frame to be seen. */
.bunky-booking__done {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 var(--bunky-gap);
    max-width: var(--bunky-column);
}

/* What to do if the e-mail does not arrive — the only other thing worth saying on that page. */
.bunky-booking__after {
    color: var(--bunky-muted);
    font-size: .95rem;
    max-width: var(--bunky-column);
}

/* The ways on, under it: links, because they are possible and not what to do next. */
.bunky-booking__again {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0 0;
}

.bunky-booking__closed {
    border-left: 3px solid var(--bunky-line);
    color: var(--bunky-muted);
    padding-left: 1rem;
}

/* The contribution is the last thing read, and it is not part of the form. */
.bunky-booking__contribution {
    border-top: 1px solid var(--bunky-line);
    color: var(--bunky-muted);
    font-size: .95rem;
    margin-top: 2rem;
    padding-top: 1rem;
}

.bunky-booking__contribution p {
    margin: 0 0 .75rem;
}

.bunky-booking__honeypot {
    display: none;
}