/* CONTACT.CSS — Kontaktseite („Let's Talk")
   Luis Praxmarer Portfolio 2026

   Bewusst karg: Titel, Mail-Link, Lead. Kein Formular, kein Bild.
   Die Adresse wird in contact.js zusammengesetzt und steht NICHT im
   ausgelieferten HTML. */

/* ─── Page Reset ─────────────────────────────────────────── */

body.page-contact {
  overflow-y: auto;
  overflow-x: hidden;
  cursor: auto;
  background: var(--color-black);
}

/* ─── Nav Override: solid black (wie Work/About) ─────────── */

body.page-contact .nav {
  background: var(--color-black);
  pointer-events: all;
}

body.page-contact .nav__logo,
body.page-contact .nav__link {
  mix-blend-mode: normal;
  color: var(--color-white);
}

body.page-contact .nav__link::after {
  background: var(--color-white);
}

/* ─── Page Layout ────────────────────────────────────────── */

.contact-page {
  padding-top: calc(var(--nav-height) + var(--space-xl));
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  padding-bottom: var(--space-xl);
}

/* ─── Titel (wie About) ──────────────────────────────────── */

.contact-title {
  font-family: var(--font-primary);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  margin-bottom: var(--space-normal);
}

/* ─── Mail-Link ──────────────────────────────────────────── */
/* Steht ueber dem Lead: wer die Seite ansteuert, will die Adresse —
   der Text erklaert danach. */

.contact-link {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
  margin-bottom: var(--space-72);
}

/* Unterstreichung faehrt von rechts nach links auf — gleiche Geste
   wie in der Nav. */
.contact-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-highlight-1);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--duration-med) var(--ease-smooth);
}

.contact-link:hover {
  color: var(--color-highlight-1);
}

.contact-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ─── Lead ───────────────────────────────────────────────── */

.contact-lead {
  font-family: var(--font-primary);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-letter-spacing);
  font-variation-settings: var(--font-opsz);
  color: var(--color-white);
  max-width: 656px;                 /* Text Width 2 */
}

/* Footer: siehe .site-footer in components.css (global) */


/* ─── Mobile (≤768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Adresse eine Stufe kleiner — sonst bricht sie um. */
  .contact-link {
    font-size: var(--text-lead-size);
    line-height: var(--text-lead-line-height);
    margin-bottom: var(--space-basic);
  }
}