/* ==========================================================================
   page-contact.css
   Contact page, scoped to both legacy and live-aligned page slugs.
   ========================================================================== */

body:is(.page-contact, .page-contact-us) .s-contact {
  --contact-inner-max: 1100px;
  --contact-branch-min: 280px;

  padding: var(--space-10) var(--container-pad);
  background: var(--color-page);
}

body:is(.page-contact, .page-contact-us) .s-contact__inner {
  max-width: var(--contact-inner-max);
  margin: 0 auto;
}

body:is(.page-contact, .page-contact-us) .s-contact__intro {
  max-width: 760px;
  margin-bottom: var(--space-9);
}

body:is(.page-contact, .page-contact-us) .s-contact__eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-red);
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
}

body:is(.page-contact, .page-contact-us) .s-contact__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-h2-desktop);
}

body:is(.page-contact, .page-contact-us) .s-contact__copy,
body:is(.page-contact, .page-contact-us) .s-contact__branch-copy {
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

body:is(.page-contact, .page-contact-us) .s-contact__hours-note {
  display: block;
  max-width: 440px;
  margin-top: 4px;
  color: #918883;
  font-size: 12px;
  line-height: 1.45;
}

body:is(.page-contact, .page-contact-us) .s-contact__branch-contact {
  display: grid;
  gap: var(--space-2);
}

body:is(.page-contact, .page-contact-us) .s-contact__branch-contact span {
  display: block;
}

body:is(.page-contact, .page-contact-us) .s-contact__text-link {
  color: var(--color-ink);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-underline-offset: 3px;
}

body:is(.page-contact, .page-contact-us) .s-contact__text-link:hover,
body:is(.page-contact, .page-contact-us) .s-contact__text-link:focus-visible {
  color: var(--color-red);
}

body:is(.page-contact, .page-contact-us) .s-contact__branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--contact-branch-min), 1fr));
  gap: var(--space-6);
}

body:is(.page-contact, .page-contact-us) .s-contact__branch {
  padding: var(--space-7);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
}

body:is(.page-contact, .page-contact-us) .s-contact__branch-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-h3);
}

body:is(.page-contact, .page-contact-us) .s-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

body:is(.page-contact, .page-contact-us) .s-contact__guide,
body:is(.page-contact, .page-contact-us) .s-contact__ready {
  max-width: 760px;
  margin-top: var(--space-9);
}

body:is(.page-contact, .page-contact-us) .s-contact__guide-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-h3);
}

body:is(.page-contact, .page-contact-us) .s-contact__steps,
body:is(.page-contact, .page-contact-us) .s-contact__ready-list {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

body:is(.page-contact, .page-contact-us) .s-contact__step-title {
  color: var(--color-ink);
  font-weight: var(--font-semibold);
}

body:is(.page-contact, .page-contact-us) .s-contact__note {
  margin-top: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--line-body);
}

body:is(.page-contact, .page-contact-us) .s-contact__closing {
  max-width: 760px;
  margin-top: var(--space-9);
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

@media (max-width: 900px) {
  body:is(.page-contact, .page-contact-us) .s-contact {
    padding: var(--space-9) var(--container-pad-tablet);
  }
}

@media (max-width: 600px) {
  body:is(.page-contact, .page-contact-us) .s-contact {
    padding: var(--space-8) var(--container-pad-mobile);
  }

  body:is(.page-contact, .page-contact-us) .s-contact__title {
    font-size: var(--text-h2-mobile);
  }

  body:is(.page-contact, .page-contact-us) .s-contact__branches {
    grid-template-columns: 1fr;
  }

  body:is(.page-contact, .page-contact-us) .s-contact__branch {
    padding: var(--space-6);
  }

  body:is(.page-contact, .page-contact-us) .s-contact__actions .c-btn {
    flex: 1 1 100%;
  }
}