/* =========================================================================
   CONTACT (/contact)
   Loaded after tokens.css + system.css. The chrome (.doc-topbar, .doc-back,
   .doc-links) and .card come from system.css; this file is the page's layout and
   the address block.

   The narrowest of the four content pages on purpose: it has one job, and a wide
   column would make two short paragraphs look like a form is missing.
   ========================================================================= */

.contact-main {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-xl) 4rem;   /* .doc-back is its first child */
}

.contact-head { margin-bottom: var(--space-xl); }

.contact-title {
  font-family: var(--heading);
  font-size: var(--text-4xl); font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}

.contact-sub {
  font-family: var(--body);
  font-size: var(--text-md);
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   THE ADDRESS
   The whole point of the page, so it gets the card and the icon — not a line of
   body text with a link in it. Centred because there is nothing to align it to.
   -------------------------------------------------------------------------- */

.contact-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-sm);
  padding: 1.8rem var(--space-lg);
  text-align: center;
  margin-bottom: var(--space-xl);
}
.contact-card svg {
  width: 22px; height: 22px;
  color: var(--cocoa);
}

/* Serif and large: it reads as the page's headline answer. `anywhere` because a
   long address must wrap inside the card on a narrow phone rather than widen it. */
.contact-mail {
  font-family: var(--heading);
  font-size: var(--text-2xl); font-weight: 600;
  color: var(--ink); text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast);
}
.contact-mail:hover { color: var(--cocoa-dk); text-decoration: underline; }
.contact-mail:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   PROSE
   -------------------------------------------------------------------------- */

.contact-prose p {
  font-family: var(--body);
  font-size: var(--text-md); line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}
.contact-prose p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   PREFILLED EMAILS
   A quiet block, not a second CTA: the address card above is the page's answer
   and these are a head start on writing to it. The pills themselves are the
   shared `.chip` / `.chips` from system.css — the same component the designer
   uses for its example prompts, because it is the same gesture — so this file
   holds only the block's placement and the note's voice.

   The note is --ink-faded at --text-sm, the hint register, deliberately quieter
   than .contact-prose: it is the one line on the page that sends the reader
   somewhere else first, and it must not compete with the address.
   -------------------------------------------------------------------------- */

.contact-topics { margin-top: var(--space-xl); }

/* Flex + a shrink-proof glyph + the text in a span, the same shape .legal-draft
   uses: the icon must not be pulled out of line by a wrapping sentence, and it has
   to survive `data-i18n-html` rewriting the span on a language switch. */
.contact-topics-note {
  display: flex; align-items: flex-start; gap: .4rem;
  font-family: var(--body);
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--ink-faded);
  margin-bottom: var(--space-md);
}
.contact-topics-note svg {
  width: 15px; height: 15px;
  flex-shrink: 0; margin-top: .2rem;
  color: var(--cocoa);
}
.contact-topics-note a { color: var(--cocoa-dk); }
.contact-topics-note a:hover { color: var(--burgundy); }


@media (max-width: 820px) {
  .contact-main { padding: var(--space-md) var(--space-lg) 3rem; }
  .contact-title { font-size: var(--text-3xl); }
}

@media (max-width: 480px) {
  .contact-main { padding: var(--space-sm) var(--space-md) 2.5rem; }
  .contact-card { padding: 1.2rem var(--space-md); }
  .contact-mail { font-size: var(--text-xl); }
}