/*
 * Responsive refinements shared by the Foundation's prestige pages.
 * Loaded after prestige.css so these rules can remain readable and auditable.
 */

html {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.prestige-hero {
  overflow: hidden;
}

.contact-grid,
.contact-grid > *,
.contact-line > * {
  min-width: 0;
}

.contact-line a,
.contact-line address {
  overflow-wrap: anywhere;
}

@media (max-width: 1480px) and (min-width: 821px) {
  .site-header {
    grid-template-columns: minmax(180px, 230px) 46px minmax(245px, 1fr);
    gap: clamp(0.75rem, 1.8vw, 2rem);
  }

  .brand {
    width: min(230px, 22vw);
    min-width: 180px;
  }

  .header-cta {
    width: min(100%, 420px);
    min-width: 245px;
    justify-self: end;
  }

  .primary-nav {
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 820px) {
  .primary-nav {
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 520px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-line {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  .contact-line .line-icon {
    width: 38px;
    height: 38px;
  }
}

body.nav-open {
  overflow: hidden;
}