/**
 * Contact page: form column + merchant details column.
 *
 * Mobile-first single column; the two-column split only appears at 990px,
 * where the aside is narrow enough not to squeeze the textarea. The form
 * comes first in source order and therefore first on mobile, which is the
 * order someone who came here to write a message wants.
 *
 * Motion is limited to the shared [data-reveal] entrance (already gated
 * behind prefers-reduced-motion in base.css) and short colour transitions,
 * which are suppressed below for reduced-motion users.
 */

.contact__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.contact__heading {
  margin-bottom: var(--space-4);
}

.contact__intro {
  max-width: 56ch;
  margin-bottom: var(--space-7);
  color: var(--color-muted);
}

/* ------------------------------------------------------------------ */
/* Form                                                                */
/* ------------------------------------------------------------------ */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__required-hint {
  margin: 0;
  color: var(--color-muted);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Labels wear the heading face at caption scale - the same micro-label
   grammar as the theme's eyebrows and status chips - so the form reads as
   one typographic system with the rest of the store instead of as browser
   furniture. The label answers its own field's focus: while you are writing
   in a field, its label is the one in ink. */
.contact__field label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact__field:focus-within > label {
  color: var(--color-ink);
}

.contact__required-mark {
  color: var(--color-brand);
}

/* Fields rest on a whisper of ink tint so they read as machined slots cut
   into the page rather than outlined boxes; on focus the slot clears to the
   page ground and a soft brand ring blooms - filled-in is the resting state,
   lit-up is the working state. */
.contact__field input,
.contact__field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 3%, var(--color-bg));
  color: var(--color-ink);
  font-family: var(--font-body);
  /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
     focus, which is the classic way a mobile form ends up scrolling
     sideways. */
  font-size: 16px;
}

/* :focus rather than :focus-visible: a text field is being worked in
   regardless of whether the focus came from a keyboard or a tap, and the
   ring is the working-state indicator, not just a navigation aid. */
.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  background-color: var(--color-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 16%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .contact__field label {
    transition: color 0.15s ease;
  }

  .contact__field input,
  .contact__field textarea {
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  }
}

.contact__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact__field-hint {
  margin: 0;
  color: var(--color-muted);
}

/* Full-width on a phone - the thumb target - and back to its own size once
   there is a layout to sit in. */
.contact__submit {
  margin-top: var(--space-2);
}

@media screen and (min-width: 750px) {
  .contact__submit {
    align-self: flex-start;
  }
}

/* ------------------------------------------------------------------ */
/* Outcome states                                                      */
/* ------------------------------------------------------------------ */
/* Both states take focus after the POST reload, so they get a visible focus
   ring rather than the browser's default none-on-tabindex treatment. */
.contact__success:focus-visible,
.contact__error:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.contact__success {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-m);
}

.contact__success-icon {
  color: var(--color-success);
  flex-shrink: 0;
}

.contact__success-heading {
  margin-bottom: var(--space-2);
}

.contact__error {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-danger) 6%, var(--color-bg));
  color: var(--color-danger);
}

.contact__error-heading {
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.contact__error ul {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
}

/* ------------------------------------------------------------------ */
/* Details column                                                      */
/* ------------------------------------------------------------------ */
/* The aside is the quiet half: a faint ink-tinted panel rather than another
   outlined box, so the form's fields stay the only hairline objects on the
   page. Its heading gets a hairline of its own to rule the panel's contents
   off, the way the roadmap rules its ledger rows. */
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 2%, var(--color-bg));
}

.contact__aside-heading {
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.contact__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}

.contact__fact {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.contact__fact-icon {
  color: var(--color-brand);
  flex-shrink: 0;
}

.contact__fact-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.contact__fact-label {
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact__fact-value {
  /* Merchant-authored strings can be long or a single unbroken token (an
     email typed into the hours field, say) - break rather than push the
     grid column wider than its track and scroll the page sideways. */
  overflow-wrap: anywhere;
}

.contact__channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact__channel {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: var(--color-bg);
  text-decoration: none;
}

/* A full-width bordered row, so it inverts as a block: ink fills the box and
   every line in it - label, value and the accent icon - flips to the page
   background. The icon's resting purple is untouched; see below. */
.contact__channel:hover,
.contact__channel:focus-visible {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);
}

.contact__channel:hover .contact__channel-icon,
.contact__channel:focus-visible .contact__channel-icon {
  color: var(--color-bg);
}

.contact__channel:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.contact__channel-icon {
  color: var(--color-brand);
  flex-shrink: 0;
}

.contact__channel-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact__channel-label {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.contact__channel-value {
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.contact__channel:hover .contact__channel-value,
.contact__channel:focus-visible .contact__channel-value {
  color: inherit;
}

.contact__social-heading {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.contact__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

/* Same object as .footer__social-link, in a rounded square: the fill sweeps
   in from wherever the pointer crossed the edge rather than the whole tile
   repainting at once. motion.js supplies --fill-x/--fill-y and .is-hover-fill;
   the selector is registered there, so adding the class alone is not enough.

   z-index MUST be negative, not 0: within a stacking context a positioned box
   at z-index 0/auto paints above inline content, so a 0 here would sweep the
   fill straight over the glyph. Same note as .btn in base.css. */
.contact__social-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.contact__social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-ink);
  /* circle() percentages resolve against sqrt((w2+h2)/2), so 150% reaches the
     farthest corner from any origin point. */
  clip-path: circle(0% at var(--fill-x, 50%) var(--fill-y, 50%));
  pointer-events: none;
  transition: clip-path var(--icon-close-fill-out) var(--icon-close-fill-out-ease);
}

html.has-cursor-fill .contact__social-link.is-hover-fill::before {
  clip-path: circle(150% at var(--fill-x, 50%) var(--fill-y, 50%));
  transition: clip-path var(--icon-close-fill-in) var(--icon-close-fill-in-ease);
}

.contact__social-link:hover,
.contact__social-link:focus-visible {
  border-color: var(--color-ink);
  color: var(--color-bg);
}

/* Without a pointer there is no origin to sweep from, so the tile just fills.
   Keyboard focus and touch both land here. */
html:not(.has-cursor-fill) .contact__social-link:hover,
.contact__social-link:focus-visible::before {
  background-color: var(--color-ink);
}

.contact__social-link:focus-visible::before {
  clip-path: circle(150% at 50% 50%);
}

.contact__social-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .contact__channel {
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  }
}

@media screen and (min-width: 990px) {
  /* Spans the full page width, so the heading lines up with the logo on the
     left and the details card with the cart icon on the right - the previous
     1080px cap sat this block 180px inside the header on both sides, which
     read as a misalignment against every other page.

     The cap it replaces was there to stop a metre of gutter opening between
     the fields and the details column. That still matters, so the FORM
     column is capped instead of the whole block: the fields keep a sane
     measure, the aside is pinned to the right edge, and the extra width goes
     into the space between them rather than stretching an input across the
     viewport. */
  .contact__layout {
    grid-template-columns: minmax(0, 860px) 1fr;
    gap: var(--space-9);
  }

  .contact__aside {
    justify-self: end;
    width: 420px;
  }
}