/* ============================================================
   FABBRUCCIO: THE CONTACT PAGE

   Layer 3 (section). Enqueued on /contact/ only, via the theme's escape
   hatch: page-contact.php calls fabbruccio_use_section('contact') before
   get_header(). A classic PHP template can't be keyed off the query
   predicate map the way is_cart()/is_shop() are, so the escape hatch is
   the documented route (see functions.php).

   Markup: page-contact.php (fab-contact-*).
   Design bar: fabbruccio-v2/contact.html (.doc-top / .contact-cards /
   .contact-form / .ccard). Every value below names the beta rule or the
   token it comes from.

   ------------------------------------------------------------
   WHAT THIS REPLACES
   ------------------------------------------------------------
   The page used the parent's `iw-contact-*` classes, whose CSS is in the
   parent stylesheet and is never enqueued on this route, so /contact/
   rendered as an unstyled survivor: a stray list bullet, pill-radius
   inputs, no layout. This is Fabbruccio's own paint, and the template
   posts nowhere (see page-contact.php: the form is honestly inert until a
   mail backend exists, matching the newsletter precedent).
   ============================================================ */

/* The parent's .site-main carries its own padding-block; zero it so this
   section owns its rhythm, the same as .fab-shop-main / .fab-cart-main. */
.fab-contact-main {
  padding-block: 0;
  background: var(--fab-bg);
}

/* A reading surface. Wider than beta's 760px prose measure so three
   contact cards sit in one row on desktop, but nowhere near the 1440px
   gallery measure. */
.fab-contact__wrap {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--fab-gut);
}

/* ------------------------------------------------------------
   HEAD  (beta .doc-top)
   ------------------------------------------------------------
   Top padding clears the fixed nav; --fab-nav-h is READ, not re-guessed,
   so this follows the bar. Same head shape as /cart/, so the two rebuilt
   routes open identically.
   ------------------------------------------------------------ */

.fab-contact__head {
  padding-top: calc(var(--fab-nav-h) + clamp(38px, 6vh, 70px));
  padding-bottom: clamp(28px, 4vw, 46px);   /* beta .doc-top */
  border-bottom: 1px solid var(--fab-line); /* beta .doc-top */
}

/* Playfair 500. beta .doc-top h1, verbatim. */
.fab-contact__title {
  margin: 16px 0 0;
  font-family: var(--fab-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: var(--fab-display-weight);
  line-height: 1;
  letter-spacing: var(--fab-tracking-display);
  color: var(--fab-ink);
}

/* ------------------------------------------------------------
   BODY
   ------------------------------------------------------------ */

.fab-contact__body {
  padding-block: clamp(40px, 6vw, 72px) clamp(70px, 10vw, 120px);
}

/* beta .doc .lead */
.fab-contact__lead {
  max-width: 60ch;
  margin: 0 0 clamp(30px, 4vw, 46px);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--fab-ink);
}

/* ------------------------------------------------------------
   CONTACT CARDS  (beta .contact-cards / .ccard)
   ------------------------------------------------------------
   auto-fit rather than beta's fixed 2-col: three real cards (support,
   general, hours) then land in one clean row on desktop and collapse to
   one column on a phone, with no orphan slot either way.
   ------------------------------------------------------------ */

/* Two email cards side by side, Hours full-width beneath. auto-fit at three
   columns forced the cards so narrow that "support@fabbruccio.com" broke
   mid-word ("fabbrucc | io.com"), which is not a line a luxury brand wants
   to sign. Two columns give each email card enough measure to hold its
   address on one line; the Hours card (last child) then spans the row rather
   than sitting as an orphan with a wide gap beside it. */
.fab-contact__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.fab-contact__card:last-child {
  grid-column: 1 / -1;
}

.fab-contact__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  border: var(--fab-hairline-width) solid var(--fab-hairline);
  /* PAPER, not the stage grey. --fab-bg-2 aliases to --fab-stage-grey, which
     is the colour of the plate a boot is photographed on, so three of them
     stacked on a contact page read as three filled slabs on a system whose
     rules are "frameless, no shadows, hairline rules as the only dividers".
     A hairline box on the page ground is the same component beta2's
     .doc-cards draws, and it is what fab-doc.css now uses for the same job. */
  background: var(--fab-ground);
}

/* An <h2>, styled as a LABEL (beta .ccard h3), so theme.json's Playfair
   element style must be countered. Class (0,1,0) ties `:root :where(h2)`
   and wins on source order (section layer loads after global-styles),
   same mechanism .fab-cart__summary-title uses. No !important. */
.fab-contact__card-title {
  margin: 0;
  font-family: var(--fab-sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fab-ink-2);
}

/* beta .ccard a: gold, underlined. The real way to reach the brand. */
.fab-contact__card-link {
  font-family: var(--fab-sans);
  font-size: .98rem;
  font-weight: 500;
  color: var(--fab-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;   /* an email must never overflow its card */
  transition: color var(--fab-speed) var(--fab-ease);
}
.fab-contact__card-link:hover { color: var(--fab-gold-2); }
.fab-contact__card-link:focus-visible {
  outline: 2px solid var(--fab-gold);
  outline-offset: 2px;
}

/* beta .ccard strong: the hours headline. */
.fab-contact__card-strong {
  margin: 0;
  font-size: .98rem;
  font-weight: 500;
  color: var(--fab-ink);
}

.fab-contact__card-note {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--fab-ink-2);
}

/* ------------------------------------------------------------
   FORM  (beta .doc h2 + .contact-form)
   ------------------------------------------------------------ */

/* Playfair 500 display heading. beta .doc h2. This one IS a heading, not
   a label, so it keeps the serif; theme.json already sets h2 to 500, and
   this re-states it explicitly so the rule is self-describing. */
.fab-contact__form-title {
  margin: 0 0 8px;
  font-family: var(--fab-serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: var(--fab-display-weight);
  line-height: 1.15;
  color: var(--fab-ink);
}

.fab-contact__form-intro {
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: var(--fab-ink-2);
}

.fab-contact__form {
  max-width: 560px;
}

.fab-contact__field {
  margin-bottom: 20px;   /* beta .cform-field */
}

/* beta .cform-field label */
.fab-contact__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--fab-sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fab-ink-2);
}

/* beta .cform-field input / textarea. Square (radius:0), --bg2 fill,
   --line2 border, gold on focus. NEVER pill-radius (which is what the
   parent's iw-contact inputs were). */
.fab-contact__input,
.fab-contact__textarea {
  width: 100%;
  padding: 14px 16px;
  border: var(--fab-hairline-width) solid var(--fab-hairline);
  border-radius: var(--fab-radius);
  /* The panel white, the palette's only lifted surface, exactly as the beta2
     .doc-field input does it. The stage grey made every field read as a
     pre-filled slab. */
  background: var(--fab-ground-panel);
  color: var(--fab-ink);
  font-family: var(--fab-sans);
  font-size: .96rem;
  line-height: 1.6;
  transition: border-color .25s var(--fab-ease);
}
.fab-contact__input::placeholder,
.fab-contact__textarea::placeholder {
  color: var(--fab-ink-3);
}
.fab-contact__input:focus,
.fab-contact__textarea:focus {
  outline: none;
  border-color: var(--fab-gold);   /* beta input:focus */
}
.fab-contact__textarea {
  min-height: 150px;   /* beta .cform-field textarea */
  resize: vertical;
}

/* The inert state, made visible. The fields are disabled on purpose (see
   page-contact.php), so they must LOOK unavailable rather than merely
   refuse a click, or the disablement reads as a bug. Dimmed and
   not-allowed, the same honesty the newsletter box carries. */
.fab-contact__input:disabled,
.fab-contact__textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* fab-btn does the button; only its own spacing is set here. It is
   disabled because the form is inert (see page-contact.php), and fab-base
   carries no disabled state, so the dim is set HERE: without it a solid
   ink button looks fully clickable while refusing every click, which
   reads as a bug rather than as "not connected yet". Same honesty the
   newsletter's disabled Join button carries. */
.fab-contact__submit {
  margin-top: 4px;
}
.fab-contact__submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.fab-contact__submit:disabled:hover {
  background: var(--fab-ink);       /* cancel fab-btn--solid:hover */
  border-color: var(--fab-ink);
  color: var(--fab-bg);
}

/* The honesty note. beta .cform-note, plus the brand's gold link. */
.fab-contact__note {
  margin-top: 16px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--fab-ink-3);
}
.fab-contact__note a {
  color: var(--fab-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fab-contact__note a:hover { color: var(--fab-gold-2); }

/* Honeypot. aria-hidden in markup, and off-screen with the same clip pattern
   .fab-news__label uses, so it stays out of the tab order and never adds to the
   page's scrollWidth (the overflow gate must stay clean). */
.fab-contact__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The live status line, below the button. Same rhythm as the honesty note.
   Calm ink when the message reached us, wine when something needs attention.
   Success is only ever painted on a real accept by dragdrop. */
.fab-contact__status {
  margin-top: 16px;
  max-width: 560px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--fab-ink-2);
}
.fab-contact__status[data-state="ok"] {
  color: var(--fab-ink);
}
.fab-contact__status[data-state="error"],
.fab-contact__status[data-state="invalid"],
.fab-contact__status[data-state="ratelimited"] {
  color: var(--fab-wine);
}

/* Phones: one column. Two columns at 390px would be ~150px each, too narrow
   to hold an email or read comfortably. The last-child full-row span is a
   no-op in a single column, so it can stay. */
@media (max-width: 560px) {
  .fab-contact__cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-contact__card-link,
  .fab-contact__input,
  .fab-contact__textarea { transition: none; }
}