/* ==========================================================================
   Alto Dent — dynamic form block (lb-form)

   The contact form is a real LaunchBlock form: the form builder owns its
   fields, submissions land in Poptávky, and honeypot / rate limit / captcha
   all apply. Its markup comes from themes/launchblock/partials/form.php.

   That partial expects the PRODUCT theme's Tailwind v3 build, which this theme
   cannot load — site.css is a Tailwind v4 build and 26 utilities (`.container`
   among them, used by the header) resolve differently between the two majors.
   So the handful of utilities form.php asks for and are absent from the v4
   build are declared here, followed by the form's component layer lifted from
   themes/launchblock/css/style.css.

   form.php also asks for `btn btn--primary`, which this theme already defines —
   the submit button picks up the site's own gold gradient for free.

   Loaded after site.css by partials/head.php.
   ========================================================================== */

/* -- utilities the v4 build does not emit (nothing else in this theme uses them) -- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-x-4     { column-gap: calc(var(--spacing) * 4); }

/* `sm:` is min-width in Tailwind v4 and this theme sets --breakpoint-sm: 561px. */
@media (width >= 561px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* form.php offers an outline variant; the site only ships .btn + .btn--primary. */
.btn--outline {
  background: transparent;
  border-color: rgb(31 31 31 / 0.14);
  color: var(--color-ink);
}

/* -- component layer (from themes/launchblock/css/style.css) ------------------ */
/* ---- Dynamic form block (lb-form) -------------------------------------------
   Rendered server-side by App\Forms\FormRenderer from themes/.../partials/form.php.
   Layout/spacing utilities live in that partial as literal Tailwind classes (so
   the content scan compiles them); this layer is only what utilities cannot
   express. Distinct from the legacy .form-* rules above, which belong to the
   retired contact-form block and must keep working for existing pages. */

/* LOAD-BEARING — do not remove. Conditional logic hides a field by setting
   [hidden] on its wrapper, but that wrapper may carry a display utility (grid,
   flex from a choice layout or a Layout column), and any class wins over the UA
   [hidden] rule. Without !important, hiding an `inline` choice group (display:flex)
   silently does nothing. tests/frontend-render.js asserts this against a flex
   wrapper specifically. */
.lb-form [hidden] { display: none !important; }
.lb-form-container { margin: 0 auto; }
.lb-form-title { font-size: 1.5rem; font-weight: 700; margin-bottom: .35rem; }
.lb-form-desc { color: color-mix(in srgb, var(--color-text) 65%, transparent); margin-bottom: 1.25rem; }
.lb-form-field { margin-bottom: 1.1rem; }
.lb-form-label { display: block; font-weight: 600; margin-bottom: .35rem; }
.lb-form-req { color: #dc2626; margin-left: .15rem; }
.lb-form-input {
    border: 1px solid #d1d5db; border-radius: 10px; padding: .65rem .8rem;
    background: #fff; color: #111827; font: inherit;
}
.lb-form-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: transparent; }
.lb-form-input:disabled { background: #f3f4f6; color: #9ca3af; }
.lb-form-sublabel { display: block; font-size: .8rem; color: #6b7280; margin-top: .25rem; }
.lb-form-desc-field { font-size: .85rem; color: #6b7280; margin-top: .3rem; }
.lb-form-choice { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.lb-form-choice input { width: auto; margin-top: .25rem; flex: none; }
/* Errors: the message element is always in the DOM (forms.js fills its text), so
   it is hidden until its wrapper is marked. Keeps the layout from jumping and
   gives aria-live something stable to announce. */
.lb-form-error { display: none; color: #dc2626; font-size: .85rem; margin-top: .3rem; }
.lb-form-field--error .lb-form-error { display: block; }
.lb-form-field--error .lb-form-input { border-color: #dc2626; }
.lb-form-status { margin: 1rem 0; }
.lb-form-status:empty { margin: 0; }
/* Honeypot: off-screen rather than display:none — some bots skip hidden fields,
   which would defeat the trap. Mirrors the legacy .form-hp. */
.lb-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lb-form-submit:disabled { opacity: .6; cursor: progress; }
/* Submit feedback (rendered by forms.js, so these classes never appear in a
   themes/ file the Tailwind scan reads — they must live here, not as utilities). */
.lb-form-alert { padding: .8rem 1rem; border-radius: 10px; }
.lb-form-alert--ok { background: #ecfdf5; color: #065f46; }
.lb-form-alert--err { background: #fef2f2; color: #991b1b; }
.lb-form-limit { font-size: .8rem; color: #6b7280; text-align: right; margin-top: .25rem; }
.lb-form-limit--over { color: #dc2626; font-weight: 600; }
/* Rating: radios rendered highest-first so `~` can fill every icon up to the
   checked one (a sibling selector only looks forward). Keeps the control
   native — no JS, keyboard and screen-reader support for free. */
.lb-form-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.lb-form-rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lb-form-rating label { cursor: pointer; font-size: 1.6rem; line-height: 1; color: #d1d5db; transition: color .12s; }
.lb-form-rating input:checked ~ label,
.lb-form-rating label:hover,
.lb-form-rating label:hover ~ label { color: var(--color-accent, #f59e0b); }
.lb-form-rating input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.lb-form-slider { display: flex; align-items: center; gap: .75rem; }
.lb-form-slider input[type="range"] { flex: 1; accent-color: var(--color-primary); }
.lb-form-slider-out { min-width: 4ch; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-form-divider-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; }
.lb-form-divider-rule { border: 0; border-top: 1px solid #e5e7eb; margin: .75rem 0 0; }
/* Multi-step. The server renders every page visible with the nav hidden, so a
   no-JS visitor gets one long working form; forms.js inverts it on init. */
.lb-form-nav { display: flex; gap: .75rem; margin-top: 1.25rem; }
.lb-form-progress { margin-bottom: 1.5rem; }
.lb-form-bar { height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.lb-form-bar > span { display: block; height: 100%; background: var(--color-primary); transition: width .25s ease; }
.lb-form-progress-label { font-size: .85rem; color: #6b7280; margin-bottom: .4rem; }
.lb-form-steps { display: flex; align-items: center; gap: .5rem; }
.lb-form-step { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #9ca3af; }
.lb-form-step-dot {
    width: 26px; height: 26px; border-radius: 999px; background: #e5e7eb; color: #6b7280;
    display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
}
.lb-form-step--on { color: var(--color-text); font-weight: 600; }
.lb-form-step--on .lb-form-step-dot { background: var(--color-primary); color: #fff; }
.lb-form-step--done .lb-form-step-dot { background: color-mix(in srgb, var(--color-primary) 35%, #fff); color: var(--color-primary); }
.lb-form-step-line { flex: 1; height: 2px; background: #e5e7eb; min-width: 18px; }
/* Visually hidden but announced — the rating labels carry the real value. */
.lb-form-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lb-form-captcha { margin: 1rem 0; }
.lb-form-captcha:empty { margin: 0; }