/* 5PACE PDF revision: Mission, Team, Document, Contact and footer accessibility.
 * Loaded last: the original HTML/CSS/JavaScript files are untouched. */

/* Treat Mission as a normal readable block. It retains the existing branded
 * panel from review-updates.css and the existing blue <em> emphasis. */
.mission .mrow p {
  max-width: 45ch;
  text-wrap: pretty;
}

/* Align Team's heading with Roadmap's relative heading height; let the photo
 * start slightly lower without shifting team navigation or overflowing cards. */
@media (min-width: 821px) {
  #team {
    justify-content: flex-start;
    padding-top: clamp(108px, 14svh, 148px);
  }
  #team > .wrap { transform: none; }
  #team .tgrid { align-items: start; }
  #team .tphoto {
    padding-top: clamp(22px, 4svh, 46px);
  }
}

/* Stop restricting the Contact callout to a nearly full page when the content
 * needs much less. Footer remains in the normal document flow. */
#contact .contact-footer-next { display: none; }

/* Lower viewport: laptop height should still fit the callout + reachable
 * footer in two separate navigation stops. */
@media (min-width: 821px) and (max-height: 850px) {
  #contact {
    min-height: min(82svh, 650px);
    padding-top: clamp(78px, 11svh, 108px);
    padding-bottom: 24px;
  }
  #contact .contact {
    padding-top: clamp(22px, 5svh, 50px);
    padding-bottom: clamp(22px, 5svh, 50px);
  }
}

/* Main improvement for phones: normal vertical scrolling, compact Contact,
 * and an explicit path to the footer. Do not clip content or lock a viewport. */
@media (max-width: 820px) {
  html.native-scroll,
  html.native-scroll body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    scroll-snap-type: none !important;
  }
  html.native-scroll body { touch-action: pan-y !important; }
  #team {
    justify-content: flex-start !important;
    padding-top: clamp(86px, 11svh, 116px) !important;
  }
  #team .tphoto { margin-top: clamp(12px, 3svh, 24px); }
  #contact {
    min-height: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: clamp(86px, 11svh, 108px) 0 22px !important;
  }
  #contact > .wrap { width: 100%; }
  #contact .contact {
    padding: clamp(24px, 5svh, 42px) 18px !important;
    border-radius: 22px;
  }
  #contact .contact h2 {
    font-size: clamp(1.9rem, 7.8vw, 3.0rem);
    line-height: 1.1;
    margin-bottom: 12px;
  }
  #contact .contact p {
    font-size: clamp(.88rem, 3.8vw, 1.03rem);
    line-height: 1.45;
    margin-bottom: 18px;
  }
  #contact .cbtns { gap: 10px; }
  #contact .contact-footer-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
    min-height: 42px;
    padding: 8px 18px;
    border: 1px solid rgba(173, 216, 230, .38);
    border-radius: 999px;
    color: #ffFAFA;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    background: rgba(173, 216, 230, .07);
  }
  #contact .contact-footer-next:hover,
  #contact .contact-footer-next:focus-visible {
    background: rgba(173,216,230,.18);
  }
  .site-footer {
    min-height: 0 !important;
    padding: 22px 0 calc(28px + env(safe-area-inset-bottom)) !important;
  }
  .site-footer .wrap { gap: 16px 14px; }
  .site-footer nav,
  .site-footer .footer-contact { gap: 8px; }
  #footer { scroll-margin-top: 16px; }
}
@media(max-width: 410px) {
  #contact .cbtns { flex-direction: column; align-items: center; }
  #contact .cbtns .btn { max-width: 100%; }
}