/*
 * Bar-El Adam forms stylesheet (redesign, docs/redesign-plan.md 4.4).
 * The form card, the block's own classes in both variants
 * (mu-plugins/barel-adam-core/blocks/lead-form): compact is one row of
 * six fields, full is the vertical contact-page layout with visible
 * labels. Logical properties only. Colours only through tokens. The two
 * resets guard against the horizontal scroll a long <select> option
 * causes at 390px.
 */

/* ---------- Reset 1 of 2: the UA gives every fieldset a
   min-inline-size of min-content, which the longest select option then
   stretches past the viewport. ---------- */
fieldset {
  min-inline-size: 0;
}

/* ==========================================================
   The card. White, hairline border, radius, soft shadow. On the
   home page and the inner pages it rises 40px onto the hero or the
   section above it; on the contact page it sits in the grid.
   ========================================================== */
.ba-form-card {
  position: relative;
  z-index: 2;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--text-body);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius);
  box-shadow: var(--wp--custom--shadow-sm);
  padding: 20px 24px;
}

.ba-form-sec {
  padding-block-start: 0;
}

.ba-form-sec .ba-form-card {
  margin-block-start: -40px;
}

/* The banner's "בדיקת זכאות" jumps to #lead-form. Since the form moved to the
   foot of the home page (decision 94) that is a long jump, and it lands with
   the form's top edge at the top of the viewport, under the sticky header
   (64px, 88px from 768px): on a phone the heading and the first field were
   hidden. The margin is the header, the card's 20px padding, and 16px of air. */
#lead-form {
  scroll-margin-block-start: 100px;
}

@media (min-width: 768px) {
  #lead-form {
    scroll-margin-block-start: 124px;
  }
}

/* Reset 2 of 2 */
.ba-form-card > *,
.ba-lead-form > * {
  min-inline-size: 0;
}

/* ==========================================================
   Shared field styles (DESIGN.md 5, form field).
   ========================================================== */
.ba-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
}

.ba-form__field input,
.ba-form__field select,
.ba-form__field textarea {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.ba-form__input,
.ba-form__select,
.ba-form__textarea {
  inline-size: 100%;
  block-size: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wp--preset--color--text-body);
  background: var(--wp--preset--color--white);
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ba-form__input::placeholder,
.ba-form__textarea::placeholder {
  color: var(--wp--preset--color--text-muted);
  opacity: 1;
}

/* A tel or email field is LTR for the value the visitor types; while it is
   empty the Hebrew placeholder reads from the right like the other fields. */
.ba-form__input[dir="ltr"]:placeholder-shown {
  direction: rtl;
}

/* The first option of a select is the label text: muted like a placeholder. */
.ba-form__select:has(option[value=""]:checked) {
  color: var(--wp--preset--color--text-muted);
}

.ba-form__input:focus,
.ba-form__select:focus,
.ba-form__textarea:focus {
  border-color: var(--wp--preset--color--navy-deep);
  box-shadow: 0 0 0 3px rgba(28, 51, 80, 0.1); /* allowed rgba: the focus ring, navy-deep at 10% (DESIGN.md 5) */
}

/* The visible focus indicator: a 2px navy line, 4.5:1 on white, in
   place of the section-level 3px outline from base.css. */
.ba-form__input:focus-visible,
.ba-form__select:focus-visible,
.ba-form__textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--navy-deep);
  outline-offset: 1px;
}

.ba-form__textarea {
  block-size: auto;
  min-block-size: 96px;
  padding-block: 10px;
  resize: vertical;
}

/* Select: native arrow off, a muted chevron drawn at the inline end
   (the left side in RTL). Drawn with borders on the field wrapper so
   no colour value has to live inside an SVG data URI. */
.ba-form__select {
  appearance: none;
  padding-inline-end: 36px;
}

.ba-form__field:has(> .ba-form__select)::after {
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 15px;
  inline-size: 8px;
  block-size: 8px;
  /* Physical on purpose: a down chevron is the right and bottom edges of a
     rotated square, and it must not mirror under RTL (inline-end would
     draw a left-pointing glyph). */
  border-right: 2px solid var(--wp--preset--color--text-muted);
  border-bottom: 2px solid var(--wp--preset--color--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Error state: a thicker alert border on the control and the message
   under it. Never colour alone. */
.ba-form__input[aria-invalid="true"],
.ba-form__select[aria-invalid="true"],
.ba-form__textarea[aria-invalid="true"] {
  border: 2px solid var(--wp--preset--color--alert);
}

.ba-form__error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--wp--preset--color--alert);
}

.ba-form__summary {
  border: var(--wp--custom--hairline) solid var(--wp--preset--color--alert);
  border-radius: var(--wp--custom--radius);
  background: var(--wp--preset--color--white);
  padding: 12px 16px;
  margin-block-end: 12px;
  font-size: 14px;
}

.ba-form__summary-title {
  margin: 0;
  color: var(--wp--preset--color--alert);
  font-weight: 700;
}

.ba-form__summary-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ba-form__summary-list a {
  color: var(--wp--preset--color--alert);
}

/* ==========================================================
   Compact variant: one row of six fields (plan 4.4 had seven; the
   client dropped "סיווג הפנייה" on 2026-09-23, decision 105).
   Height budget at 1440, at rest: 20 padding + 25 lede + 8 +
   44 row + 10 + 24 consent + 8 + 48 submit + 20 padding = 207.
   ========================================================== */
.ba-form__lede {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--wp--preset--color--text-heading);
  text-align: start;
}

.ba-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .ba-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Six fields: two even rows of three between 992 and 1199. */
@media (min-width: 992px) {
  .ba-form__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .ba-form__row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* The hint under the phone is for the full variant; in compact it is
   only referenced by aria-describedby, so it stays for the screen
   reader and out of the row. */
.ba-form--compact .ba-form__hint {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Consent row: centred, 14px, a 20px box. The label carries a 44px
   touch target through its padding while the row itself stays 24px in
   the flow (negative margin), so the card keeps its budget. */
.ba-form__consent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--text-body);
}

.ba-form__checkbox {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  margin: 0;
  accent-color: var(--wp--preset--color--navy-deep);
  cursor: pointer;
}

.ba-form__consent .ba-form__label {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px; /* touch target */
  margin-block: -10px;
  font-weight: 400;
  color: var(--wp--preset--color--text-body);
  cursor: pointer;
}

.ba-form__consent a,
.ba-form__privacy {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px; /* touch target */
  margin-block: -10px;
  color: var(--wp--preset--color--amber-text);
}

.ba-form__actions {
  display: flex;
  justify-content: center;
  margin-block-start: 8px;
}

.ba-form__submit {
  inline-size: 320px;
  max-inline-size: 100%;
  min-block-size: 48px;
  padding-inline: 40px;
  padding-block: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  background: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--navy-night);
  border: 0;
  border-radius: var(--wp--custom--radius);
  cursor: pointer;
  transition: background 200ms ease;
}

.ba-form__submit:hover {
  background: var(--wp--preset--color--amber-hover);
}

/* ==========================================================
   Full variant, contact page: visible labels, fieldsets with
   legends, textareas (plan 4.4).
   ========================================================== */
.ba-form--full .ba-form__intro {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--wp--preset--color--text-muted);
}

.ba-form--full .ba-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  min-inline-size: 0;
}

.ba-form--full .ba-form__legend {
  padding: 0;
  margin-block-end: 12px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--wp--preset--color--text-heading);
}

.ba-form--full .ba-form__field {
  margin-block-end: 16px;
}

.ba-form--full .ba-form__label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--text-heading);
}

.ba-form__required {
  color: var(--wp--preset--color--alert);
  font-weight: 700;
}

.ba-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* With a visible label above the select, the chevron moves down by the
   label line (21px) and the 6px gap. */
.ba-form--full .ba-form__field:has(> .ba-form__select)::after {
  inset-block-start: 42px;
}

.ba-form__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wp--preset--color--text-muted);
}

.ba-form--full .ba-form__consent {
  justify-content: flex-start;
  margin-block-start: 4px;
}

.ba-form--full .ba-form__actions {
  justify-content: flex-start;
}

/* ==========================================================
   Success panel, replaces the form (docs/ui-copy.md 5).
   ========================================================== */
.ba-form__success {
  position: relative;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--text-body);
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.7;
}

.ba-form__success::before {
  content: "";
  display: block;
  inline-size: 56px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--amber);
  margin-block-end: 12px;
}

.ba-form__success p {
  margin: 0 0 8px;
}

.ba-form__success-title {
  font-size: 18px;
  color: var(--wp--preset--color--text-heading);
}

.ba-form__success-tel {
  font-weight: 700;
  color: var(--wp--preset--color--amber-text);
  text-decoration: none;
}

.ba-form__success-tel:hover {
  text-decoration: underline;
}