/* =============================================================================
   contact.css  —  Styles for the Contact page (contact.html)
   -----------------------------------------------------------------------------
   Loaded only by contact.html, on top of the global styles.css. Uses the warm
   "story" palette (--story-* tokens defined in styles.css). Sections, top to
   bottom: 1) Opening + email card, 2) Routes (what we can help with),
   3) The contact form, 4) Common questions (shared FAQ component), 5) Close.
   The form's behaviour lives in assets/js/contact.js.
   ============================================================================= */

/* Page background (cream). */
main {
  background: var(--story-paper);
}

/* --------------------------------------------------------------------------
   1. Opening  (dark hero with the email card)
   -------------------------------------------------------------------------- */

/* The dark opening band. */
.contact-open {
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  color: var(--story-white);
  background: var(--story-ink);
}

/* Two columns: heading/lede on the left, the email card on the right. */
.contact-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}

/* Grid items default to min-width:auto (min-content), which can push the
   card past its track and off-screen on some fonts/zoom levels. Let them
   shrink so the columns always stay within the container. */
.contact-open__inner > * {
  min-width: 0;
}

/* The page heading. */
.contact-open h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

/* The intro paragraph. */
.contact-open__lede {
  max-width: 48ch;
  margin: 1.75rem 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
}

/* The bordered "email us" card. */
.email-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 253, 248, 0.22);
}

/* The small uppercase label inside the card. */
.email-card__label {
  margin: 0 0 0.9rem;
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* The email address link. overflow-wrap lets a long address break instead of
   pushing the narrow card wider than its column. */
.email-card__address {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--story-gold);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 260ms var(--ease-out);
}

/* Address hover. */
.email-card__address:hover,
.email-card__address:focus-visible {
  color: var(--story-white);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* The "Copy address" button (revealed + wired by contact.js). */
.copy-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  color: var(--story-white);
  background: transparent;
  border: 1px solid rgba(255, 253, 248, 0.35);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color 260ms var(--ease-out), background 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

/* Copy button hover: gold fill. */
.copy-button:hover,
.copy-button:focus-visible {
  color: var(--story-ink);
  background: var(--story-gold);
  border-color: var(--story-gold);
}

/* "Copied!" confirmed state (class added briefly by contact.js). */
.copy-button.is-copied {
  color: var(--story-ink);
  background: var(--story-gold);
  border-color: var(--story-gold);
}

/* The small note under the card. */
.email-card__note {
  margin: 1.25rem 0 0;
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   2. Routes  (three "what we can help with" columns)
   -------------------------------------------------------------------------- */

/* The routes section (white background). */
.routes {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-white);
}

/* Heading block. */
.routes__head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.routes__head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.routes__head p {
  max-width: 52ch;
  margin: 1.1rem 0 0;
  color: var(--story-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

/* The 3-across list of routes. */
.routes__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

/* A single route column (top border, content stacked). */
.route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--story-line);
}

.route h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* The route description (not the status line). */
.route p:not(.status) {
  margin: 0;
  color: var(--story-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Push the route's link to the bottom of the column. */
.route .quiet-link {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   3. Form
   -------------------------------------------------------------------------- */

/* The form section (cream background). */
.form-section {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
  background: var(--story-paper);
}

/* Two columns: intro text on the left, the form on the right. */
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* The intro heading. */
.form__intro h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.form__intro p {
  max-width: 44ch;
  margin: 0 0 1rem;
  color: var(--story-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.form__intro a {
  color: var(--story-gold-deep);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

/* The form itself: a 2-column grid of fields. */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.5rem);
}

/* One field (label + input stacked). */
.field {
  display: grid;
  gap: 0.5rem;
}

/* These span both columns of the form grid. */
.field--wide,
.form__error,
.form__actions {
  grid-column: 1 / -1;
}

/* Field label. */
.field label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--story-ink);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The "(optional)" hint inside a label. */
.field label span {
  color: var(--story-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

/* All the form controls share this base style. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  color: var(--story-ink);
  background: var(--story-white);
  border: 1px solid var(--story-line);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

/* The message box is taller and only resizes vertically. */
.field textarea {
  min-height: 9rem;
  resize: vertical;
}

/* Hover: darken the border. */
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--story-muted);
}

/* Focus: gold border + ring. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--story-gold-deep);
  outline: 3px solid var(--story-gold);
  outline-offset: 2px;
}

/* The validation error box (shown by contact.js when a field is missing/bad). */
.form__error {
  margin: 0;
  padding: 0.85rem 1rem;
  color: #7a2626;
  background: rgba(122, 38, 38, 0.09);
  border-left: 3px solid #7a2626;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* The submit-button row. */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  margin-top: 0.5rem;
}

/* The note beside the submit button. */
.form__note {
  max-width: 30ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. Common questions
   The FAQ itself is a shared component in styles.css. This page runs it on
   the dark ground via .faq--on-ink in the markup — no styles needed here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   5. Close  (final call-to-action band)
   -------------------------------------------------------------------------- */

/* The closing section. */
.contact-close {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--story-paper);
}

/* Heading + button side by side. */
.contact-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.contact-close h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.contact-close p {
  margin: 1rem 0 0;
  color: var(--story-muted);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Tablet: routes become 2-across. */
@media (max-width: 1020px) {
  .routes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrow: stack the two-column layouts. */
@media (max-width: 900px) {
  .contact-open__inner,
  .form__grid {
    grid-template-columns: 1fr;
  }
}

/* Phone: single columns; full-width buttons. */
@media (max-width: 700px) {
  .routes__list {
    grid-template-columns: 1fr;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .form__actions .cta {
    justify-content: center;
  }

  .form__note {
    max-width: none;
  }

  .contact-close__inner {
    align-items: flex-start;
  }

  /* The button's wrapper is a flex item, so it has to be told to fill the
     row before width:100% on the button itself means anything. */
  .contact-close__inner > * {
    flex: 1 1 100%;
  }

  .contact-close .cta {
    width: 100%;
    justify-content: center;
  }
}