/* ==========================================================================
   Contact page — mobile-first responsive overrides
   Loaded via {% block head %} in contact.html only; all rules are contact-scoped
   so there are no site-wide regressions. Build-free: uses brand.css tokens only.
   ========================================================================== */

/* Scroll cue hidden on desktop — details sit in the right column already */
.contact-scroll-cue {
  display: none;
}

/* Anchor target always clears the sticky nav (74px) on keyboard/programmatic jump */
#contact-details {
  scroll-margin-top: 5rem;
}

/* ---- Mobile (<760px): surface the scroll cue and improve details spacing ---- */
@media (max-width: 759px) {
  /* Visible jump link telling mobile users phone/email/address are below the form */
  .contact-scroll-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--accent-soft);
    border: 1px solid rgb(30 77 140 / .2);
    border-radius: var(--r);
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }

  .contact-scroll-cue:hover,
  .contact-scroll-cue:focus-visible {
    background: rgb(30 77 140 / .1);
    border-color: var(--accent);
    outline: none;
  }

  /* Visual separator and breathing room before the contact details block */
  #contact-details {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    /* Tighten card gap slightly on narrow viewports */
    gap: 0.75rem;
  }

  /* Reduce section padding above the form+details grid on mobile */
  .section--tight:has(.contact-scroll-cue) {
    padding-block-start: clamp(1.25rem, 3vw, 2rem);
  }
}