/*
 * Contact page styling.
 * Auto-loaded by header.php's cache-busting stylesheet helper.
 */

/* === Hide the redundant "Contact" h1 — all viewports =================
   Same pattern as .shop > .h1: the global nav + browser tab already tell
   the visitor they're on the Contact page. The big h1 inside the page is
   decorative redundancy. Hidden visually but kept in markup for SEO and
   screen readers (visually-hidden idiom). */
.contact > .h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ====================================================================
   Trade-access request form (addressed to bookshops).

   Sits below the newsletter as a distinct block — thin top-rule + room
   above so it reads as a different audience, not a continuation of the
   newsletter signup. Visual language mirrors the trade-portal order
   form (label sizing, input borders, button proportions) so a bookshop
   that goes from this contact request to the portal itself feels the
   same hand at work.

   Anchored as #trade-access — the form action returns the visitor to
   this section after submission so they land on the confirmation
   message rather than the top of the page.
   ==================================================================== */

.contact-trade {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-light);
  scroll-margin-top: 2rem;
}

/* Bold label, matching the editorial pattern set by "By email" /
   "By phone" in the CMS-managed text above. Tight margin below — the
   form starts directly underneath; no intro paragraph in between. */
.contact-trade-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.contact-trade-form {
  max-width: 32rem;
}

.contact-trade-field {
  margin-bottom: 1.25rem;
}

.contact-trade-field label {
  display: block;
  font-size: .85rem;
  color: var(--color-text-grey);
  margin-bottom: .35rem;
}

.contact-trade-field input,
.contact-trade-field textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border, #ccc);
  background: transparent;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

.contact-trade-field textarea {
  min-height: 4rem;
  resize: vertical;
  font-family: var(--font-family-sans);
}

/* Matches the trade-portal submit + the buy-button — same visual
   weight so the bookshop relationship reads as one continuous voice. */
.contact-trade-submit {
  display: inline-block;
  margin-top: .5rem;
  padding: .9rem 2rem;
  background: var(--color-black);
  color: var(--color-white);
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  transition: opacity .2s;
}
.contact-trade-submit:hover {
  opacity: .85;
}

/* Success state — replaces the form in-place. Calm editorial treatment,
   not a bright green success bar. */
.contact-trade-confirmation {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--color-light);
  border-left: 2px solid currentColor;
  max-width: 36rem;
  line-height: 1.5;
}

/* Validation errors — same left-rule treatment as the trade portal. */
.contact-trade-error {
  margin: 0 0 1.5rem;
  padding: .75rem 1rem;
  background: var(--color-light);
  border-left: 2px solid currentColor;
  font-size: .95rem;
  max-width: 36rem;
}
.contact-trade-error ul {
  margin: .5rem 0 0 1.25rem;
  padding: 0;
}
.contact-trade-error li {
  margin: .25rem 0;
}