/* ==========================================================================
   page-contact.css : «כותבים אלינו» (inc/default-content/contact.php + pilpelet_contact_form() in inc/forms.php).
   Loads on the contact page only (enqueue convention: page-{id}.css). Moved here from pages.css in Change 9.

   Change 16 (the client: «נאמן למקור, כמו שיש היום»): the page as the LIVE site has it, measured on https://pilpelet-books.com/contact/ (2026-10-29): ONE centred
   column 430px wide; the heading in two lines (Alef 600, 29px, the site's dark grey, not plum); four fields that carry their words INSIDE as placeholders
   (40px high, the message 96px, white, a 1px #69727D edge, 3px corners, 15px); the send button in the live green #279636, the whole width of the form,
   with the label of the site's other green button (Alef 700 20px, as the home page's «רכישת ספרים»; the live page's own label was 30px 400); then the two quick channels (WhatsApp, Messenger) as centred text links, Alef 600 26px, with their marks. What the live page
   does not have stays out. What it cannot do is kept: every field has its label for screen readers (visually hidden, the placeholder is the visible hint), the
   placeholder is a shade darker than the live page's (4.5:1 on white), and the status callout (assets/js/nav.js focuses it) is unchanged.
   Tokens from base.css; Alef for the heading and the channel names, Assistant for the form. RTL: logical properties only.
   ========================================================================== */

.pil-contact {
  --pc-ink: rgba(55, 53, 53, .87);   /* the live page's text colour (heading, channel names) */
  width: min(430px, 100%); margin-inline: auto;
  display: block;
}

/* ---------- the heading ---------- */
/* scoped under .pil-contact: this file loads before pages.css (alphabetical), whose .pil-title would otherwise win. */
.pil-contact .pil-contact__title {
  font: 700 var(--t-h1)/var(--lh-head) var(--font-heading);   /* Change 22 (the owner: the titles of the about, meetings, shop, heart and contact pages one size): the size of every page title (it was the live page's 29px) */
  color: var(--pc-ink);
  text-align: center;
  margin-block: 0 20px;
}
/* Change 23 (the owner: «בכותבים אלינו, לא החלפת את הפונט»): the heading is Yehuda now, a little wider than Alef: «שאלה? מחשבה? בקשה?» needs 435px at 1440 and 466px at 1920 (Alef: 425px and 455px, which just fitted) and the column is 430px,
   so it fell to three lines with «בקשה?» alone. On a wide screen the heading may run 30px wider than the form on each side, centred on it; on the common 360px phone (the line needs 339px, the column is 328px) 12px into the gutters. */
@media (min-width: 1280px) { .pil-contact .pil-contact__title { margin-inline: -30px; } }
@media (max-width: 380px) { .pil-contact .pil-contact__title { margin-inline: -12px; } }

/* ---------- the form: placeholders, 40px fields, 10px between ---------- */
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.contact-form .cf-field input, .contact-form .cf-field textarea {
  display: block; width: 100%; min-height: 40px; margin: 0; padding: 8px 16px;
  border: 1px solid #69727D; border-radius: 3px;
  background: #fff; color: var(--text);
  font: 400 .9375rem/1.4 var(--font-body);
  transition: border-color var(--dur-feedback) var(--ease-standard), box-shadow var(--dur-feedback) var(--ease-standard);
}
.contact-form .cf-field textarea { height: 96px; min-height: 96px; resize: vertical; }   /* the live 96px (the rows attribute would make it 108) */
.contact-form .cf-field input:hover, .contact-form .cf-field textarea:hover { border-color: var(--ink-soft); }
.contact-form .cf-field input:focus, .contact-form .cf-field textarea:focus { border-color: var(--ink); }
.contact-form .cf-field input:focus-visible, .contact-form .cf-field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.contact-form .cf-field input::placeholder, .contact-form .cf-field textarea::placeholder { color: #6E6E6E; opacity: 1; }   /* the live grey, one shade darker: 5.1:1 on white */
.contact-form .cf-field.has-error input, .contact-form .cf-field.has-error textarea { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.contact-form .cf-error { margin: 6px 0 0; color: var(--red); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
/* the live green, with the label of the site's other green button (the home page's «רכישת ספרים»): Alef 700 20px (the owner, 1.10.1: «שהפונט יהיה זהה למקומות אחרים באותו גודל ובאותו משקל»; it was the live
   page's 30px 400). White on the green is 3.8:1: AA for large text (18.66px bold and up), which this label is */
.contact-form .cf-submit {
  justify-self: stretch;   /* the whole width of the form */
  min-height: 40px; margin: 0; padding: 0 24px;
  border: 0; border-radius: 3px; cursor: pointer;
  background: #279636; color: #fff;
  font: 700 1.25rem/1.15 var(--font-display);
  transition: background-color var(--dur-state) var(--ease-standard);
}
.contact-form .cf-submit:hover, .contact-form .cf-submit:focus-visible { background: #1E7A2E; }
.contact-form .cf-submit:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* the privacy line under the send button (Change 18): small, the muted ink of the paper (5.6:1), its link underlined */
.contact-form .cf-legal { margin: 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--text-muted); }
.contact-form .cf-legal a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }   /* a box of its own, 24px at least (the standard's floor for a target) */
@media (max-width: 767px) { .contact-form .cf-legal a { display: flex; justify-content: center; min-height: 44px; } }   /* a phone: its own row, 44px like the fields and the send button */
.contact-form .cf-legal a:hover { color: var(--plum); text-decoration-thickness: 2px; }
.contact-form .cf-status { margin: 0; min-height: 1.5em; font-weight: 600; line-height: 1.5; color: var(--text); }
.contact-form .cf-status:empty { min-height: 0; margin-block-start: -10px; }   /* nothing to say yet: no empty line under the button */
.contact-form .cf-status-ok, .contact-form .cf-status-invalid, .contact-form .cf-status-error {
  padding: 10px 14px; border-radius: 3px; background: #fff;   /* a plain tile: no coloured line on any side (Change 20, the owner: that look is «AI slop») */
}
.contact-form .cf-status:focus, .contact-form .cf-status:focus-visible { outline: none; }   /* scripted focus (assets/js/nav.js) so the message is read out: the box is its own mark, a ring round it read as a double frame */
.contact-form .cf-status-ok { color: var(--ok); }
.contact-form .cf-status-invalid, .contact-form .cf-status-error { color: var(--red); }
/* an empty field (dir="auto" resolves LTR when empty) keeps its placeholder and the caret on the reading-start side */
.contact-form .cf-field input:placeholder-shown, .contact-form .cf-field textarea:placeholder-shown { direction: rtl; text-align: start; }

/* ---------- the two quick channels: plain centred text links under the form, with their marks (the live page's two lines) ---------- */
.pil-contact__links { display: grid; justify-items: center; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.pil-contact__link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 6px 12px;
  border-radius: 3px;
  color: var(--pc-ink); text-decoration: underline 2px transparent; text-underline-offset: 6px;
  font: 700 1.625rem/1.3 var(--font-heading);   /* 26px; Change 22 (the author, through the owner: «כתבו אלינו בוואטסאפ ובמסנג'ר» in Yehuda; its niqqud is gone from the words, Yehuda has none) */
  transition: text-decoration-color var(--dur-state) var(--ease-standard);
}
/* a label with niqqud (a later edit of the words) is marked pil-points by inc/typography.php: the label then re-reads --font-heading as Alef, whole */
.pil-contact__label { font-family: var(--font-heading); }
.pil-contact__link:hover, .pil-contact__link:focus-visible { text-decoration-color: currentColor; color: var(--pc-ink); }
.pil-contact__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pil-contact__link svg { flex: none; width: 26px; height: 26px; }
.pil-contact__icon--whatsapp { color: #45C456; }   /* decorative: the words name the action */
.pil-contact__icon--messenger { color: #00B2FF; }

/* ---------- phones ---------- */
@media (max-width: 599px) {
  .pil-contact__link { font-size: 1.375rem; }
  .contact-form .cf-field input, .contact-form .cf-submit { min-height: 44px; }   /* a finger, not a pointer: 44px (the live page's 40px is for a desktop) */
}
@media (max-width: 359px) {
  .pil-contact__link { font-size: 1.25rem; }
}

/* forced colours (Windows contrast themes): the green goes, and a button with no edge is only a large word: it keeps an edge */
@media (forced-colors: active) {
  .contact-form .cf-submit { border: 1px solid ButtonText; }
}