/* ==========================================================
   Inquire page: big block form + "Elsewhere" links.
   Tokens and existing text styles only, plus one local
   error colour (the style guide has none yet).
   ========================================================== */
:root { --contact-error: #C4262E; }
:root[data-theme="dark"] { --contact-error: #FFC2C2; }

.contact { padding-top: var(--space-64); }
.contact__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(var(--space-48), 6vw, var(--space-96)); align-items: start; }
.contact__main { min-width: 0; max-width: 860px; }

/* form */
.cform { display: flex; flex-direction: column; gap: var(--space-32); }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.field__label { font-size: 16px; font-weight: 600; line-height: 1.5; }
.field__control {
  width: 100%; min-height: 72px; padding: 20px 24px;
  font: inherit; font-size: 20px; line-height: 1.4; color: var(--text-primary);
  background: var(--background-surface-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-badge);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field__control::placeholder { color: var(--text-muted); }
.field__control:hover { border-color: var(--border-strong); }
.field__control:focus { outline: none; border-color: var(--brand-primary); background: var(--background-page); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent); }
textarea.field__control { min-height: 220px; resize: vertical; }
.field__select { position: relative; display: block; }
.field__select select { appearance: none; -webkit-appearance: none; padding-right: 64px; cursor: pointer; }
.field__select select:invalid { color: var(--text-muted); }
.field__select option { color: var(--text-primary); background: var(--background-page); }
.field__select::after { content: ""; position: absolute; right: 28px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--brand-primary); border-bottom: 2px solid var(--brand-primary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* errors */
.field__error { display: flex; gap: 6px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--contact-error); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--contact-error); color: var(--background-page); font-size: 12px; font-weight: 700; }
.field__control[aria-invalid="true"] { border-color: var(--contact-error); }
.field__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--contact-error) 22%, transparent); }
.field__error[hidden], .cform__alert[hidden] { display: none; }
.cform__alert { padding: var(--space-16) var(--space-24); border: 1px solid var(--contact-error); border-left-width: 4px; border-radius: var(--radius-badge); font-size: 16px; line-height: 1.5; color: var(--text-primary); background: var(--background-page); outline: none; }

/* honeypot: off-screen for people and assistive tech, still filled in by naive bots */
.cform__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cform__submit { display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap; margin-top: var(--space-8); }
.cform__submit .btn[disabled] { opacity: .6; pointer-events: none; }

/* sent */
.cform__done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: var(--space-48); border: 1px solid var(--border-default); border-radius: var(--radius-badge); background: var(--background-page); outline: none; }
.cform[hidden], .cform__done[hidden] { display: none; }

/* elsewhere */
.contact__aside { position: sticky; top: calc(var(--nav-h) + var(--space-32)); display: flex; flex-direction: column; gap: var(--space-16); }
.socials { list-style: none; padding: 0; border-top: 1px solid var(--border-default); }
.socials li { border-bottom: 1px solid var(--border-default); }
.social { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-24) var(--space-48) var(--space-24) 0; transition: color .3s var(--ease-out); }
.social__arrow { position: absolute; right: 0; top: var(--space-24); font-size: 24px; line-height: 1.2; color: var(--brand-primary); transition: transform .45s var(--ease-out); }
.social:hover .heading-h3 { color: var(--text-hero-emphasis); }
.social:hover .social__arrow { transform: translate(4px, -4px); }


@media (max-width: 1100px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-64); }
  .contact__aside { position: static; }
}
@media (max-width: 600px) {
  .contact { padding-top: var(--space-48); }
  .cform__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .field__control { min-height: 64px; padding: 18px 16px; font-size: 18px; }
  .field__select select { padding-right: 44px; }
  .field__select::after { right: 20px; }
  .cform__done { padding: var(--space-32) var(--space-24); }
}
@media (prefers-reduced-motion: reduce) {
  .field__control, .social, .social__arrow { transition: none; }
}
.social[download]:hover .social__arrow { transform: translateY(4px); }