/* ==========================================================================
   TARAQI — contact.html (step 6). Two page-specific pieces: the qualifying
   form and the direct-contact list. The page head and .about-grid rhythm come
   from about.css (shared); the section label from sections.css. Cream
   dominant, one sand veil (the reach list) — no burgundy band: this page IS
   the contact band's destination. Every color is a token; logical properties
   only. Inputs are hairline-ruled boxes, square-cornered — the drafting-sheet
   idiom, not the SaaS card; the pill shape stays reserved for buttons.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1a. Contact page head — full bleed: picture, veil, copy. The picture runs up under the
   fixed navbar; the copy is bottom-anchored and its block-start padding
   keeps it clear of the bar at any height.
   -------------------------------------------------------------------------- */
.contact-head {
  min-block-size: 72vh;
  min-block-size: 72svh;
  background-color: var(--taraqi-burgundy-dark);
}
.contact-head-media picture { display: block; inline-size: 100%; block-size: 100%; }
.contact-head-media img { transform-origin: center center; }

/* Deep Burgundy (the token, as rgb), laid only where type sits.
   This picture is bright (the paper is near white), so every stop was checked against the
   brightest pixel under each line, not assumed: the floor is 4.5:1.

   Phones stack the copy across the full width and most of the height, so
   they keep a single firmer veil on .contact-head-overlay, with a band
   down from the top for the transparent navbar. That band holds firm for
   the bar's height plus the 80px it travels, still transparent, before
   js/main.js turns it solid — the bar's type slides down over the picture
   across that distance. */
@media (max-width: 767px) {
  .contact-head-overlay {
    --veil-nav: linear-gradient(to bottom, rgb(92 37 48 / 0.8) 0px, rgb(92 37 48 / 0.76) calc(var(--nav-h) + 80px), rgb(92 37 48 / 0) calc(var(--nav-h) + 200px));
    background:
      var(--veil-nav),
      linear-gradient(to top, rgb(92 37 48 / 0.92) 0%, rgb(92 37 48 / 0.86) 45%, rgb(92 37 48 / 0.8) 75%, rgb(92 37 48 / 0.62) 100%);
  }
}

/* From md up the copy sits in a 36rem column at the inline start, and the
   veil is drawn by the copy block itself — so it is sized to the text by
   construction, at every width and in both languages. It runs out to the
   picture's inline-start edge (clipped by the section) and down to the
   section's bottom edge, fades in over the 6rem above the label, and falls
   off over the 32rem past the line ends. The ink pot and the cup above it
   and the far side of the picture keep their own warm light; the paper and
   the pen take only the tail of the fade. The width is what hides it: on
   the near-white paper any shorter falloff reads as a line (8rem and 20rem
   both did), however smooth its curve.
   Both fades are a smoothstep (3t² − 2t³), sampled every 3.2rem across and
   every 1rem down: its slope is zero where it leaves the text column and
   zero where it meets the bare picture, so neither end draws a line — a
   linear ramp's corners read as a seam, worst where the paper's own
   diagonal edge runs under them. */
@media (min-width: 768px) {
  .contact-head-copy { position: relative; }
  .contact-head-copy::before {
    --veil-to-start: to left;
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: -6rem -4.5rem;             /* 4.5rem: the content's block-end padding */
    inset-inline: -100vw -32rem;
    background: linear-gradient(var(--veil-to-start),
      rgb(92 37 48 / 0) 0,
      rgb(92 37 48 / 0.017) 3.2rem,
      rgb(92 37 48 / 0.064) 6.4rem,
      rgb(92 37 48 / 0.134) 9.6rem,
      rgb(92 37 48 / 0.218) 12.8rem,
      rgb(92 37 48 / 0.31) 16rem,
      rgb(92 37 48 / 0.402) 19.2rem,
      rgb(92 37 48 / 0.486) 22.4rem,
      rgb(92 37 48 / 0.556) 25.6rem,
      rgb(92 37 48 / 0.603) 28.8rem,
      rgb(92 37 48 / 0.62) 32rem,
      rgb(92 37 48 / 0.653) 100%);
    --veil-fade-in: linear-gradient(to bottom,
      rgb(0 0 0 / 0) 0,
      rgb(0 0 0 / 0.074) 1rem,
      rgb(0 0 0 / 0.259) 2rem,
      rgb(0 0 0 / 0.5) 3rem,
      rgb(0 0 0 / 0.741) 4rem,
      rgb(0 0 0 / 0.926) 5rem,
      rgb(0 0 0 / 1) 6rem);
    -webkit-mask-image: var(--veil-fade-in);
            mask-image: var(--veil-fade-in);
    pointer-events: none;
  }
  html[dir="rtl"] .contact-head-copy::before { --veil-to-start: to right; }
  /* The approved colour grade: one flat Deep Burgundy cast over the whole
     picture. The cream type carries no shadow — the cast and the veil above
     hold 4.5:1 between them (measured under every line, both languages). */
  .contact-head-overlay { background-color: rgb(92 37 48 / 0.2); }
}

.contact-head-content {
  padding-block: calc(var(--nav-h) + 4rem) 3.5rem;
}
.contact-head-copy { max-inline-size: 36rem; }
.contact-head .section-label,
.contact-head .about-title,
.contact-head .about-intro { color: var(--taraqi-cream); }
.contact-head .about-title { margin-block-start: 1rem; }
@media (min-width: 768px) {
  .contact-head-content { padding-block-end: 4.5rem; }
}

/* --------------------------------------------------------------------------
   1b. Navbar over the head picture — contact.html only (data-nav-over-media
   on the header). Until js/main.js sets .nav-solid at 80px the bar stays
   transparent, so it takes the solid bar's cream palette over the veiled
   picture instead of its cream-page burgundy. Every value is the one
   shell.css already gives .nav-solid; only the background stays clear.
   -------------------------------------------------------------------------- */
.site-nav[data-nav-over-media]:not(.nav-solid) { color: var(--taraqi-cream); }
.site-nav[data-nav-over-media]:not(.nav-solid) .nav-logo { color: var(--taraqi-cream); }
.site-nav[data-nav-over-media]:not(.nav-solid) .nav-link::after { background-color: var(--taraqi-cream); }
.site-nav[data-nav-over-media]:not(.nav-solid) .lang-toggle { border-color: var(--taraqi-line-onDark); }
.site-nav[data-nav-over-media]:not(.nav-solid) .nav-cta {
  background-color: var(--taraqi-cream);
  color: var(--taraqi-burgundy-dark);
}
.site-nav[data-nav-over-media]:not(.nav-solid) .nav-cta:hover {
  background-color: var(--taraqi-burgundy);
  color: var(--taraqi-cream);
}
.site-nav[data-nav-over-media]:not(.nav-solid) :focus-visible { outline-color: var(--taraqi-cream); }

/* From md up the band under the bar rides on the fixed header, not on the
   picture — it travels with the bar through those 80px, so it only has to
   cover the bar itself: firm to 16px short of the bar's edge (the lowest
   type in it), then gone 32px past it. It leaves with the transparent
   state; the solid bar is its own background. Phones keep the band on the
   picture (§1a). */
@media (min-width: 768px) {
  .site-nav[data-nav-over-media]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: calc(var(--nav-h) + 32px);
    background: linear-gradient(to bottom, rgb(92 37 48 / 0.8) 0px, rgb(92 37 48 / 0.76) calc(var(--nav-h) - 16px), rgb(92 37 48 / 0) calc(var(--nav-h) + 32px));
    pointer-events: none;
    transition: opacity var(--dur-micro) var(--ease-rise);
  }
  .site-nav[data-nav-over-media].nav-solid::before { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Page rhythm — the stacked-layout gaps under the labels (below md) collapse
   inside the .about-grid at md+, same rule about.css applies to its bodies.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .about-grid-body.lead-wrap,
  .about-grid-body.reach-wrap { margin-block-start: 0; }
  /* The list now sits inside .reach-wrap, so its own top margin is what
     must collapse at md+ — the wrapper's is already zero above. */
  .about-grid-body.reach-wrap .reach-list { margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   2. The contact form (forms v2) — two columns from md up, in this order:
   full name | email → country code + phone | project → budget | timing →
   message (full width) → send. Phones stack the same order. Labels above
   their controls, errors below, nothing floating.
   -------------------------------------------------------------------------- */
.section-lead {
  background-color: var(--taraqi-cream);
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(4.5rem, 10vh, 7rem);
  /* The navbar CTA is an in-page jump to #register on this page — hold the
     section's top clear of the fixed bar it would otherwise land under. */
  scroll-margin-block-start: calc(var(--nav-h) + 1rem);
}
.lead-wrap { margin-block-start: 2rem; }
.lead-form {
  display: grid;
  gap: 1.75rem 2rem;
}
@media (min-width: 768px) {
  .lead-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-action,
  .form-status { grid-column: 1 / -1; }
  /* The message takes a row of its own. */
  .form-field--wide { grid-column: 1 / -1; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form-field label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.form-field input,
.form-field select,
.form-field textarea {
  inline-size: 100%;
  min-block-size: 48px;                     /* touch target */
  padding: 0.625rem 1rem;
  border: 1px solid var(--taraqi-line);
  border-radius: 0;
  background-color: transparent;            /* the cream shows through */
  font: inherit;
  font-size: 1.0625rem;
  color: var(--taraqi-ink);
  box-shadow: inset 0 -1px 0 0 transparent;
  transition: border-color var(--dur-micro) var(--ease-rise),
              box-shadow var(--dur-micro) var(--ease-rise);
}
.form-field textarea {
  min-block-size: 8rem;
  line-height: 1.7;
  resize: vertical;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--taraqi-sand); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--taraqi-burgundy);
  box-shadow: inset 0 -2px 0 0 var(--taraqi-burgundy);
}

/* Selects lose the native arrow; the chevron is drawn with borders off the
   wrapper — same idiom as the payment arrows, no glyph, no image, and it
   takes the token color. Logical inset, so RTL places it correctly free. */
.select-wrap { position: relative; display: block; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.75rem;
}
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.125rem;
  inset-block-start: calc(50% - 5px);
  inline-size: 8px;
  block-size: 8px;
  border-block-end: 1px solid var(--taraqi-burgundy-dark);
  border-inline-end: 1px solid var(--taraqi-burgundy-dark);
  transform: rotate(45deg);                  /* pointing down */
  pointer-events: none;
}
/* Logical borders swap sides under RTL — counter-rotate so it still points down */
[dir="rtl"] .select-wrap::after { transform: rotate(-45deg); }

/* An optional field says so beside its label, in the muted register. */
.label-optional {
  font-weight: 400;
  color: var(--taraqi-ink);
  opacity: 0.7;
}

/* Country code + phone number: one row, LTR in both languages (the code,
   then the number — phone numbers stay LTR). The row carries dir="ltr";
   only the two labels return to the page's direction. The select shows
   the chosen country's flag and code; its list names every country. */
.phone-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
}
.phone-code,
.phone-number {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
}
[dir="rtl"] .phone-row label { direction: rtl; }
.phone-row .select-wrap select { padding-inline: 0.75rem 2rem; }
.phone-row .select-wrap::after { inset-inline-end: 0.875rem; }
/* The row is LTR inside an RTL page: undo the RTL counter-rotation. */
[dir="rtl"] .phone-row[dir="ltr"] .select-wrap::after { transform: rotate(45deg); }

/* Inline field errors — burgundy accent (≥4.5:1 on cream), never an alert. */
.field-error {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--taraqi-burgundy);
}
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea { border-color: var(--taraqi-burgundy); }
/* In the phone row the error is about the number; the code keeps its rule. */
.form-field--phone.is-invalid select { border-color: var(--taraqi-line); }

/* Submit — the btn-primary pill (home.css doesn't load here). */
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: 0.75rem 2.25rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  background-color: var(--taraqi-burgundy-dark);
  color: var(--taraqi-cream);
  transition: background-color var(--dur-micro) var(--ease-rise),
              transform var(--dur-micro) var(--ease-rise);
}
.form-submit:hover { background-color: var(--taraqi-burgundy); }
.form-submit:active { transform: scale(0.97); }
.form-submit:focus-visible {
  outline: 2px solid var(--taraqi-burgundy);
  outline-offset: 3px;
}
.form-submit:disabled { opacity: 0.6; }

/* Submit outcome — one line under the button, painted from the dictionaries. */
.form-status { margin: 0; font-size: 1.0625rem; line-height: 1.8; }
.form-status:not(:has(span:not([hidden]))) { display: none; }
.status-success { font-weight: 600; color: var(--taraqi-burgundy-dark); }
/* Demo-mode notice: the success treatment, the demo message (forms.js shows
   it instead of success while LEAD_WEBHOOK_URL is empty). */
.status-demo { font-weight: 600; color: var(--taraqi-burgundy-dark); }
.status-error { font-weight: 600; color: var(--taraqi-burgundy); }

/* --------------------------------------------------------------------------
   3. Direct contact — a single centred WhatsApp CTA on the sand veil. The
   number is shown ONLY here; the footer omits it by standing rule.
   -------------------------------------------------------------------------- */
.section-reach {
  background-color: var(--taraqi-sand-veil);
  padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 6rem);
}
.reach-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.reach-prompt {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--taraqi-burgundy-dark);
}
.reach-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-block-start: 1.25rem;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.0625rem;
  background-color: var(--taraqi-burgundy-dark);
  color: var(--taraqi-cream);
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-rise),
              transform var(--dur-micro) var(--ease-rise);
}
.reach-wa-btn:hover { background-color: var(--taraqi-burgundy); }
.reach-wa-btn:active { transform: scale(0.97); }
.reach-wa-btn:focus-visible {
  outline: 2px solid var(--taraqi-burgundy);
  outline-offset: 3px;
}
.reach-wa-icon { flex-shrink: 0; }
.reach-note {
  margin: 1.25rem 0 0;
  max-inline-size: 36ch;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--taraqi-ink);
  opacity: 0.72;
}