/* ==== Hero ==== */
.contact-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background-color: var(--color-off-black);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.contact-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.contact-hero__content {
  position: relative;
  z-index: 1;
}

.contact-hero__content .sub-h {
  color: var(--color-accent);
}

.contact-hero__content .h {
  color: var(--color-white);
}

/* ==== Body: info + socials on the left, form on the right ==== */
.contact-body {
  /* This section carries .container itself for its left/right inset
     (see page-contact.php) — a 2-value `padding` shorthand here
     silently zeroed that back out (shorthand sets every side it
     doesn't name), shifting this whole section's content left of
     .contact-hero__content's plain .container above it. Same bug
     as .about-tabs had (css/pages/about.css) — vertical-only
     properties instead. */
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* This section runs on the site's dark default (no light-scheme
   override), same as author.css/category-feed.css — var(--color-text)
   and var(--color-text-muted) are near-black tokens meant for light
   backgrounds and were nearly invisible here. */

/* The legacy .row's -15px margin / .col-12's +15px padding are meant
   to cancel out back to .container's own edge, but in practice (same
   family of bug as the homepage scroll-strip regression) that left
   this column's content sitting slightly off from .contact-hero__content's
   plain .container above it. Zeroing the row's outer margin and this
   column's own left padding removes the reliance on that cancellation
   entirely, so the two sections line up by construction. */
.contact-body .row {
  margin-left: 0;
  margin-right: 0;
}

.contact-info {
  padding-left: 0;
}

.contact-form {
  padding-right: 0;
}

.contact-info__thanks {
  color: rgba(255, 255, 255, 0.7);
  max-width: 45ch;
  margin: 0 0 var(--space-8);
}

.contact-info__email {
  margin-bottom: var(--space-8);
}

.contact-info__email a {
  font-size: var(--font-size-h3);
  font-weight: bold;
  color: var(--color-white);
}

.contact-info__email a:hover {
  color: var(--color-accent);
}

.contact-info__social {
  display: flex;
  gap: var(--space-3);
}

.contact-form__placeholder {
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 992px) {
  .contact-form {
    margin-top: var(--space-8);
  }
}