/* ==========================================================================
   Forms
   --------------------------------------------------------------------------
   Four forms use this: the lunch sign-up, the two short enquiry boxes, and
   the shop's enquiry. All of them are short on purpose (see CLAUDE.md), so
   the styling is sized for a single readable column rather than for a grid
   of fields.
   ========================================================================== */

.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; margin-bottom: .375rem; }
.field .hint { font-size: var(--fs-sm); color: var(--muted); margin: .25rem 0 0; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .625rem .75rem;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 9rem; resize: vertical; }

/* Selects.

   A <select> is the one control browsers still insist on drawing
   themselves, so left alone it arrives in the operating system's chrome:
   square corners and a grey gradient, next to this site's rounded
   cream-and-gold inputs. The sort dropdown in the shop sits in a bare
   .qty row rather than a .field, so it was not even picking up the input
   styling above.

   appearance: none hands the box over, and takes the native arrow with it,
   so the chevron is drawn back as a background image: an inline SVG, which
   costs no request and gives the Content Security Policy nothing to weigh
   in on beyond data:. That is the same trick .zoomable uses for its
   magnifier.

   padding-right is what keeps a long option from running underneath the
   arrow, and it has to be repeated on .field select below, which sets its
   own padding at a higher specificity. */
select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--tap);
  padding: .625rem 2.5rem .625rem .75rem;
  font: inherit;
  color: var(--ink);
  background-color: var(--white);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none" stroke="%236d675c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1.5 6 6.5 11 1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: right .75rem center;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
select:hover { border-color: var(--gold-dark); }

/* The options themselves are still drawn by the operating system, and on
   Windows an unset colour there can land as dark-on-dark. Naming both is
   the only part of the list we get a say in. */
select option { background: var(--white); color: var(--ink); }

/* Room for the arrow, which the shorthand above loses to. */
.field select { padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }

.field--error input,
.field--error textarea,
.field--error select { border-color: var(--err); }
.field__error { color: var(--err); font-weight: 600; font-size: var(--fs-sm); margin: .375rem 0 0; }

.checkbox { display: flex; align-items: center; gap: .625rem; }
.checkbox input { width: 22px; height: 22px; }

/* Radio groups. Rendered as a fieldset so the question is announced before
   its options; sized for the 48px tap target the accessibility rules
   require. */
.radio-group { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.radio-group legend { font-weight: 700; padding: 0; margin-bottom: .35rem; }
.radio { display: flex; align-items: center; gap: .6rem; min-height: 48px; }
.radio input[type="radio"] { width: 24px; height: 24px; flex: none; }
.radio label { margin: 0; font-weight: 400; }

/* --------------------------------------------------------------------------
   Short public forms (objednávka obědů, the two enquiry boxes)
   --------------------------------------------------------------------------
   One column, capped at a reading width, and centred. These used to sit in
   a grid-2 beside a price table or a contact card, which on a phone means
   the reader scrolls past the whole aside before reaching the first field.
   A form that short should be the first thing on the screen and the only
   thing in the column. */
.form-page { max-width: 40rem; margin-inline: auto; }

/* --cream-soft, not white. White on the cream ground read as a panel
   dropped onto the page rather than part of it, and it is the only card on
   the site that was doing that: .card, .quote and .person are all
   cream-soft. It also gives the inputs somewhere to sit, because those stay
   white and now have a ground to be lighter than. */
.form-card {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-card .field:last-of-type { margin-bottom: 1rem; }

/* Telephone and e-mail: side by side on a laptop, stacked on a phone.
   auto-fit with a min of 100% collapses to one column rather than two
   half-width inputs nobody can type into. */
.field-pair {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.field-pair__note { margin: 0 0 .5rem; color: var(--muted); font-size: var(--fs-sm); }

/* Full width on a phone, where a button that is only as wide as its label
   is a small target in the middle of a wide screen. */
.btn-block { width: 100%; justify-content: center; }
@media (min-width: 34em) {
  .btn-block { width: auto; }
}

/* ==========================================================================
   Disclosures around a form
   --------------------------------------------------------------------------
   The .disclosure affordance itself is in components.css; these are the two
   boxes that use it.
   ========================================================================== */

/* The price table under the order form: there for whoever wants it, folded
   away for everyone else. */
.form-aside {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-aside > summary {
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.form-aside[open] > summary { margin-bottom: .75rem; }

/* The delivery pricing on /rozvoz-obedu/.
   Seventeen villages is a lot of table for a question most people answer by
   finding one row, so the headline price lives in the summary (always read)
   and the table opens underneath. The summary is styled as the card it
   replaces rather than as a link, because closed it IS the answer for
   anyone who does not live in a subsidising obec. */
.pricing {
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.pricing > summary {
  cursor: pointer;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  /* The marker sits on its own line above a two-line summary in Safari
     unless the box is told to lay out as one. list-style-position keeps the
     triangle beside the first line. */
  list-style-position: outside;
}
.pricing__headline { font-size: var(--fs-lg); font-weight: 600; }
.pricing__headline strong { white-space: nowrap; }
.pricing__hint { color: var(--muted); font-size: var(--fs-sm); }
.pricing[open] > summary { margin-bottom: 1.25rem; }
.pricing .disclosure { margin-top: .25rem; }


/* The sort dropdown's submit button.

   Rendered unconditionally and removed here only once forms.js has run and
   flagged the document, so that a visitor whose browser never ran that file
   keeps a way to sort. See the comment in the file itself. */
.js-autosubmit [data-autosubmit-fallback] { display: none; }