/* home/contact.css — CONTACT organism (+ scoped :root additions) — split from main.css lines 1655-2026. See docs/ for the reorg record. */
/* ============================================================
   ===== CONTACT =====
   Single-path contact organism styles. Selectors scoped to
   #contact (or #successModal for the modal which lives at
   document root).
   ============================================================ */

/* Contact-specific token additions — existing tokens (brand-purple,
   purple-hover, font-primary, fw-*, ease-standard, duration-ui) are
   reused from global :root. Only genuinely new tokens are declared here. */
:root {
  --color-border-hover:  rgba(var(--ink), 0.22);
  --color-error:         #FF4444;
  --color-modal-bg:      var(--color-brand-white);
  --color-modal-text:    var(--color-brand-black);
  --color-modal-muted:   rgba(var(--ground), 0.6);
  --color-modal-overlay: var(--scrim-modal);

  /* One rhythm for the whole page, at every breakpoint: the gap between
     the heading and the first link is the same value as the gap above the
     form, and it scales with the viewport rather than switching. */
  --contact-stack-gap: clamp(2rem, 4vw, 3rem);
}

/* The bot trap. Real people never see it; bots fill it and are dropped.
   It carries no inline style, so the content policy need not admit one. */
.botcheck {
  display: none;
}

/* Scroll-lock while the contact modal is open. Global by design —
   needed for the body overflow lock. */
body.modal-open {
  overflow: hidden;
}

/* ── Form Container Box ────────────────────────────────────── */
#contact .contact-form-box {
  width: 100%;
  max-width: 820px;
  border: 1px solid var(--border-hairline);
  background: var(--surface-sunken);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-left: auto;
  margin-right: auto;
}
#contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Form Fields & Elements ─────────────────────────────────── */
#contact .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
#contact .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#contact .form-label {
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
#contact .form-label .asterisk {
  color: var(--color-brand-purple);
}
#contact .form-input,
#contact .form-select,
#contact .form-textarea {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  color: var(--color-brand-white);
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  padding: 0.875rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color var(--duration-ui) var(--ease-standard),
              background var(--duration-ui) var(--ease-standard);
}
#contact .form-input::placeholder,
#contact .form-textarea::placeholder {
  color: rgba(var(--ink), 0.25);
}
#contact .form-input:hover,
#contact .form-select:hover,
#contact .form-textarea:hover {
  background: var(--surface-input);
  border-color: var(--color-border-hover);
}
#contact .form-input:focus,
#contact .form-select:focus,
#contact .form-textarea:focus {
  border-color: var(--color-brand-purple);
  background: var(--surface-input);
}
#contact .select-wrapper {
  position: relative;
}
#contact .select-wrapper::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
  pointer-events: none;
}
#contact .form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
}
#contact .form-textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}
#contact .form-group.has-error .form-input,
#contact .form-group.has-error .form-select,
#contact .form-group.has-error .form-textarea {
  border-color: var(--color-error);
}
#contact .error-hint {
  display: none;
  font-size: 0.72rem;
  color: var(--color-error);
  margin-top: 0.25rem;
}
#contact .form-group.has-error .error-hint {
  display: block;
}

/* The line to the issue report page, under the channel row (PR #45 G1b; PR45-Q9): muted, the whole line a link. */
.contact-report { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.contact-report a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.contact-report a:hover,
.contact-report a:focus-visible { color: var(--color-brand-purple); }
.contact-report a:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 3px; }

/* Consent (PR #45): the box and its line, the box at least 24 px; the line links the privacy policy. */
#contact .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
#contact .form-checkbox {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-brand-purple);
}
#contact .form-consent a { color: var(--color-brand-purple); }
#contact .form-group.has-error .form-checkbox { outline: 1px solid var(--color-error); outline-offset: 2px; }

/* ── Footnote & Submit Area ─────────────────────────────────── */
#contact .mandatory-footnote {
  font-size: 0.8rem;
  color: var(--color-text-dim);
  margin-bottom: 1.5rem;
  text-align: left;
}
#contact .mandatory-footnote .asterisk {
  color: var(--color-brand-purple);
}
#contact .submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-hairline);
}
#contact .form-disclaimer {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  line-height: 1.5;
  max-width: 24rem;
}
#contact .submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
#contact .submit-label {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--color-brand-white);
}
#contact .submit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-brand-purple);
  transition: background var(--duration-ui) var(--ease-standard);
}
#contact .submit-btn:hover .submit-icon {
  background: var(--color-purple-hover);
}
#contact .submit-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--color-on-brand);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Success Pop-Up Interaction (Modal Overlay) ─────────────── */
/* Modal lives at document root — scoped by its ID. */
#successModal.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-modal-overlay);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-ui) var(--ease-standard),
              visibility var(--duration-ui) var(--ease-standard);
}
#successModal.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
#successModal .modal-window {
  background-color: var(--color-modal-bg);
  color: var(--color-modal-text);
  font-family: var(--font-primary);
  width: 100%;
  max-width: 440px;
  padding: 3.5rem 2.5rem 3rem;
  border-radius: 0;
  position: relative;
  text-align: center;

  transform: translateY(30px) scale(0.96);
  transition: transform 300ms var(--ease-standard);
}
#successModal .modal-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-brand-purple);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#successModal.modal-overlay.is-active .modal-window {
  transform: translateY(0) scale(1);
}
#successModal .modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ground),0.04);
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: background-color var(--duration-ui) var(--ease-standard);
}
#successModal .modal-close-btn:hover {
  background: rgba(var(--ground), 0.08);
}
#successModal .modal-close-btn svg {
  width: 1rem;
  height: 1rem;
  stroke: var(--color-modal-text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#successModal .modal-logo {
  display: block;
  margin: 0 auto 1.5rem;
  max-width: 100%;
  height: auto;
}
#successModal .modal-headline {
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  color: var(--color-modal-text);
}
#successModal .modal-body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-modal-muted);
  margin: 0;
}

/* ── Page layout — one column at every breakpoint ──────────────
   The shared .pagehero sets min-height:100svh, which made an eyebrow and
   three words fill the whole viewport and pushed the first form field a
   screen down. The floor is lifted through a modifier class, so
   shared/page-hero.css stays intact for capabilities/, which carries the
   bare .pagehero.

   The page stacks identically at 390, 768 and 1440: eyebrow, headline,
   LinkedIn, GitHub, the eyebrow that opens the form, then the form. Only
   the form's own fields pair up once there is room for them. */
/* PR43-Q30: the space from the nav to the opening's label is Main's, as JD reviews it (60 px at 390, 171 px at 1440 =
   Main's hero on a short phone and on a 1440×900 desktop): a fluid gap, top-aligned, so the form stays near. Main's
   hero centres a taller stack in the full screen; centring Contact's shorter one sat 90–125 px lower (measured). */
.pagehero--contact {
  min-height: 0;
  align-items: flex-start;
  padding-top: calc(var(--nav-height) + clamp(4rem, 12vw, 10.6rem));
  padding-bottom: 0;
}
.pagehero--contact .pagehero__inner {
  gap: var(--contact-stack-gap);
}

/* The opening (label, title, subline) is shared/display.css since PR43-Q29; the former hidden lede is retired. */

/* Destinations (PR35-Q33): the channel row lives in shared/channels.css, shared with About's
   hero downloads (PR35-Q54). */

/* The one separation between the opening stack and the form, the same
   token that spaces the heading from the first link. The shared .section
   pays clamp(4rem, 7vw, 7.5rem) here, which reads as a chasm now that the
   hero no longer reserves a screen. Scoped to #contact; .section
   elsewhere is untouched. */
#contact.section {
  padding-top: var(--contact-stack-gap);
}

/* ---- Desktop and tablet (>= 768px) ----
   The page-level stack is unchanged. Only two things differ: the form box
   holds the content width instead of centring at 820px, and the fields
   pair so the whole form stays reachable without a second screen. */
@media (min-width: 768px) {
  #contact .contact-form-box {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  #contact .contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: 1.5rem;
  }
  #contact #field-engagement { grid-column: 1; grid-row: 1; }
  #contact .form-row {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
  }
  #contact #field-message { grid-column: 2; grid-row: 1 / span 2; }
  #contact #footerActions { grid-column: 1 / -1; }
  #contact .form-textarea { flex: 1; }
}

/* ── Responsive Adaptation ──────────────────────────────────── */
@media (max-width: 767px) {
  #contact .form-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  #contact .submit-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.5rem;
  }
  #contact .form-disclaimer {
    max-width: 100%;
    text-align: left;
  }
  #contact .submit-btn {
    justify-content: flex-start;
    width: fit-content;
  }
}
/* Respect user motion preference: disable Contact transitions/animations */
@media (prefers-reduced-motion: reduce) {
  #contact .form-input,
  #contact .form-select,
  #contact .form-textarea,
  #contact .submit-btn,
  #contact .submit-icon,
  #successModal,
  #successModal .modal-window,
  #successModal .modal-close-btn {
    transition: none !important;
    animation: none !important;
  }
}
/* ===== END CONTACT ===== */