/* ============================================================================
   Nasaq contact page — contact.html and its Arabic pair.
   Requires tokens.css and site.css to be linked first.

   This is the only page on the site that asks for more than an email address.
   site.css carries .field and .btn, but its only form layout is .inline-form:
   one row, one control. A stacked form with visible labels and its own reading
   measure lives here rather than widening the shared sheet for a single page.

   Tokens only, logical properties only (DESIGN.md, non-negotiables 1 and 4).
   ============================================================================ */

.contact{ padding-block:56px 88px; }
.contact .wrap{ max-width:640px; }

/* ---------- masthead ---------- */
.contact-head h1{ font-size:var(--text-2xl); }
.contact-lede{
  margin-block-start:16px;
  font-size:var(--text-lg); color:var(--text-secondary);
  line-height:var(--leading-body);
}

/* ---------- form ---------- */
.contact-form{
  margin-block-start:32px;
  display:flex; flex-direction:column; gap:20px;
}
.field-row{ display:flex; flex-direction:column; gap:6px; }
.field-row label{
  font-size:var(--text-sm); font-weight:600; color:var(--text-primary);
}
.field-row .field{ width:100%; }
.field-row textarea.field{
  resize:vertical; min-height:120px; line-height:var(--leading-body);
}
/* A select renders its own control glyph, so it needs the padding but not the
   placeholder colour it would inherit from an empty field. */
.field-row select.field{ appearance:none; padding-inline-end:40px; }
.select-wrap{ position:relative; display:flex; }
.select-wrap svg{
  position:absolute; inset-inline-end:14px; inset-block-start:50%;
  transform:translateY(-50%); pointer-events:none; color:var(--text-secondary);
}
.field-hint{ font-size:var(--text-xs); color:var(--text-secondary); }

.contact-form .btn{ align-self:flex-start; }

/* The honeypot: a real field, kept out of the layout and out of the tab order,
   so only a bot that fills every input trips it. `display:none` alone is what
   naive scrapers look for, hence the clipped-offscreen treatment as well. */
.hp{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ---------- option groups ---------- */
/* The capability picker and the intent question mirror the waiting list inside the
   app, down to the ids posted: `interests` carries the same six capability ids that
   /api/pilot-interest validates, and `intent` the same three. A bordered row rather
   than a bare checkbox, so the whole label is a hit target on a phone. */
.option-group{ border:0; margin:0; padding:0; }
.option-group legend{
  font-size:var(--text-sm); font-weight:600; color:var(--text-primary);
  padding:0; margin-block-end:6px;
}
.option-hint{
  font-size:var(--text-xs); color:var(--text-secondary);
  margin-block-end:10px;
}
.option-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.option-grid.one-col{ grid-template-columns:1fr; }
.option{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--surface-raised);
  font-size:var(--text-sm); color:var(--text-secondary);
  cursor:pointer;
}
.option:hover{ border-color:var(--border-default); }
.option input{
  margin:0; margin-block-start:2px;
  accent-color:var(--action); flex:none;
}
/* Selection is carried by the control itself, not by colour alone
   (DESIGN.md, non-negotiable 3); the tint only reinforces it. */
.option:has(input:checked){
  border-color:var(--brand-border);
  background:var(--brand-wash);
  color:var(--text-primary);
}
.option:has(input:focus-visible){ outline:2px solid var(--action); outline-offset:2px; }

@media (max-width:640px){
  .option-grid{ grid-template-columns:1fr; }
}

/* ---------- alternatives to the form ---------- */
.contact-alt{
  margin-block-start:40px; padding-block-start:28px;
  border-block-start:1px solid var(--border-subtle);
  font-size:var(--text-sm); color:var(--text-secondary);
}
.contact-alt p + p{ margin-block-start:10px; }
.contact-alt a{
  color:var(--action); text-decoration:underline; text-underline-offset:3px;
}
.contact-alt a:hover{ color:var(--action-hover); }

@media (max-width:640px){
  .contact{ padding-block:40px 64px; }
  .contact-form .btn{ align-self:stretch; justify-content:center; }
}

/* ---------- Arabic deltas ---------- */
[lang="ar"] .field-row label{ font-weight:700; }