/* ════════════════════════════════════════════════════════════════════
   Red Taverns — styles/contact.css
   Page-specific rules for /contact (issue #101).
   ════════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS
   /contact carries no form (decision in #96): the whole page is
   mailto:, tel: and wa.me links. That needs one thing site.css does
   not have — a large, tappable address link. Everything else on the
   page reuses .rt-card / .rt-grid / .rt-masthead from site.css.

   RULES (same as site.css)
   - Never redefine a --rt-* token. They come from
     /brand/tokens.css?v=1.0.0, linked before site.css.
   - No inline style="..." in the HTML; the CSP forbids it.
   - Load AFTER site.css so these rules win on equal specificity.

   If any of these turn out to be needed on a second page, promote them
   into site.css and delete them here.
   ════════════════════════════════════════════════════════════════════ */


/* The mono kicker inside a contact card is an <h2> for document
   outline reasons; neutralise the UA bold so it matches the
   .rt-card__domain weight used elsewhere. */
.rt-contact__label {
  font-weight: 500;
}

/* Primary address: the email address, the phone number, "Say hello."
   Sized like .rt-card__title but link-coloured, and given a generous
   hit area so it is comfortable to tap on a phone (WCAG 2.5.8). */
.rt-contact__addr {
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: var(--rt-track-snug);
  color: var(--rt-red-dk);
  text-decoration: none;
  overflow-wrap: anywhere;
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
  transition: color var(--rt-dur) var(--rt-ease);
}

.rt-contact__addr:hover,
.rt-contact__addr:focus-visible {
  color: var(--rt-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Secondary link inside a card body — the WhatsApp alternative. */
.rt-contact__alt {
  color: var(--rt-red-dk);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rt-contact__alt:hover,
.rt-contact__alt:focus-visible {
  color: var(--rt-red);
}