/* ==========================================================================
   Halal 360 — contact page
   Loaded after main.css, which already supplies the nav, footer, buttons and
   section primitives. Only the form and the "other ways to reach us" column
   are defined here.
   ========================================================================== */

/* --- Page header --------------------------------------------------------- */
/* .hero carries the dark ground and the nav clearance; this trims the height
   back, since there is no phone mockup to balance a full-height hero. */
.hero--page{padding-block:calc(var(--nav-h) + clamp(40px,5vw,72px)) clamp(48px,6vw,80px)}
.hero--page h1{font-size:clamp(2.1rem,1.5rem+2.6vw,3.2rem);max-width:16ch;text-wrap:balance}
.hero--page .lead{color:var(--ink-2-on-dark);max-width:52ch}

/* .note and .sent set a display, which outranks the browser's own
   [hidden]{display:none}. Without this the panels are never actually hidden. */
[hidden]{display:none!important}

/* --- Two-column body ----------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:var(--s-4)}}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-2xl);box-shadow:var(--sh-lg);
  padding:clamp(24px,3.4vw,44px);
}

/* --- Form ---------------------------------------------------------------- */
.form{display:grid;gap:var(--s-3)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}

.field{display:grid;gap:7px;min-width:0}
.field > label{font-size:var(--t-sm);font-weight:700;letter-spacing:-.01em}
/* Sits inside the <label> so it is announced with it, but reads as a second
   line rather than trailing the label text. */
.field__hint{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--ink-2);font-weight:400;line-height:1.5}

.field input,
.field select,
.field textarea{
  font:inherit;color:var(--ink);width:100%;
  padding:13px 15px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border-strong);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(32,164,99,.18);
}

/* The browser's own arrow ignores the palette, so it is replaced. The colour
   below is --ink-2; a data URI cannot read a custom property. */
.field select{
  appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23626F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

/* Invalid is set by the script on submit, never by :invalid — the latter
   marks every empty required field red before anyone has typed. */
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea{border-color:var(--haram);background:var(--haram-bg)}
.field[data-invalid] input:focus,
.field[data-invalid] select:focus,
.field[data-invalid] textarea:focus{box-shadow:0 0 0 3px rgba(217,68,68,.18)}

.field__err{
  display:none;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:600;color:var(--haram);
}
.field__err svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2;fill:none}
.field[data-invalid] .field__err{display:flex}

.field__count{font-size:var(--t-xs);color:var(--ink-2);justify-self:end;font-variant-numeric:tabular-nums}
.field__count[data-over]{color:var(--haram);font-weight:700}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs but happily fill anything the DOM still lays out. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-1)}
.form__legal{font-size:var(--t-xs);color:var(--ink-2);max-width:38ch;line-height:1.55}
.form__legal a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}

.btn[aria-busy="true"]{opacity:.72;cursor:progress}
.btn__spin{width:16px;height:16px;flex:none;display:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite}
.btn[aria-busy="true"] .btn__spin{display:block}
.btn[aria-busy="true"] .btn__icon{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Result panels ------------------------------------------------------- */
.note{
  display:flex;gap:12px;padding:var(--s-2) var(--s-3);
  border-radius:var(--r-lg);font-size:var(--t-sm);line-height:1.6;
}
.note svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:currentColor;stroke-width:1.8;fill:none}
.note p{margin:0}
.note p + p{margin-top:8px}
.note a{text-decoration:underline;text-underline-offset:2px;font-weight:600;color:inherit}
.note--error{background:var(--haram-bg);color:#8E2727}
.note--warn{background:var(--mushbooh-bg);color:var(--mushbooh-ink)}
.note--error,.note--warn{margin-bottom:var(--s-3)}

/* The error note carries a title, the reason, and a row of ways out. Its own
   `p + p` spacing is tighter than the shared .note rule, so it is restated
   here rather than fought with !important. */
.note__body{min-width:0}
.note__title{font-weight:800;letter-spacing:-.01em}
.note__body p + p{margin-top:4px}
.note__body .note__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.note__body .note__ref{margin-top:10px;font-size:var(--t-xs);opacity:.78}

.note__btn{
  font:inherit;font-size:var(--t-xs);font-weight:700;line-height:1;
  display:inline-flex;align-items:center;
  padding:10px 15px;border-radius:var(--r-pill);cursor:pointer;
  color:inherit;background:transparent;border:1px solid currentColor;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.note a.note__btn{text-decoration:none}
.note__btn:hover{background:rgba(142,39,39,.1)}
.note__btn--solid{background:#8E2727;color:#fff;border-color:#8E2727}
.note__btn--solid:hover{background:#742020;color:#fff}

/* Focused by script, so the ring only wants to show for keyboard users. */
#form-error:focus{outline:none}
#form-error:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.sent{text-align:center;padding:var(--s-3) 0}
.sent__mark{
  width:64px;height:64px;margin:0 auto var(--s-3);border-radius:50%;
  display:grid;place-items:center;background:var(--mint);color:var(--green-700);
}
.sent__mark svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sent h2{font-size:var(--t-h3);margin-bottom:var(--s-2)}
.sent p{color:var(--ink-2);max-width:44ch;margin:0 auto var(--s-3)}

/* --- Aside --------------------------------------------------------------- */
.ways{display:grid;gap:var(--s-2)}
.way{
  display:flex;gap:14px;padding:var(--s-3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
a.way:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--border-strong)}
.way__ico{
  width:42px;height:42px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--mint);color:var(--green-700);
}
.way__ico svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.way h3{font-size:1rem;margin-bottom:5px;letter-spacing:-.015em}
.way p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.way b{color:var(--green-700);font-weight:700;overflow-wrap:anywhere}

.ways__note{
  margin-top:var(--s-1);padding:var(--s-3);border-radius:var(--r-lg);
  background:var(--ivory);border:1px solid var(--border);
  font-size:var(--t-xs);color:var(--ink-2);line-height:1.65;
}
.ways__note strong{color:var(--ink)}