/* WPC-1C — responsive / accessibility / navigation behaviour acceptance */
:root {
  --wpc1c-focus-ring: #0b79d0;
  --wpc1c-focus-shadow: rgba(11, 121, 208, .28);
}

html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

.skip-link:focus-visible,
.primary-nav a:focus-visible,
.primary-nav summary:focus-visible,
.primary-nav button:focus-visible,
.site-footer a:focus-visible,
.footer-compliance-viewport:focus-visible {
  outline: 3px solid var(--wpc1c-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--wpc1c-focus-shadow);
}

.skip-link:focus-visible {
  left: 10px;
  top: 10px;
  border-radius: .55rem;
}

.nav-dropdown > summary,
.mobile-menu > summary {
  -webkit-tap-highlight-color: transparent;
}

.nav-dropdown > summary[aria-expanded="true"] {
  color: #096caa;
}

@media (max-width: 1100px) {
  .primary-nav {
    min-width: 0;
  }

  .brand-lockup {
    min-width: 0;
  }

  .mobile-menu {
    margin-left: auto;
    max-width: min(22rem, calc(100vw - 28px));
  }

  .mobile-menu > summary {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    user-select: none;
  }

  .mobile-menu > div {
    max-height: min(72vh, 38rem);
    max-width: calc(100vw - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    width: min(20rem, calc(100vw - 28px));
  }

  .mobile-menu a,
  .mobile-menu button {
    align-items: center;
    display: flex;
    min-height: 44px;
    width: 100%;
  }

  .mobile-menu a:focus-visible,
  .mobile-menu button:focus-visible {
    border-radius: .65rem;
  }
}

@media (max-width: 680px) {
  .primary-nav.container {
    width: min(100% - 20px, 1180px);
  }

  .brand-lockup img {
    flex: 0 0 auto;
  }

  .mobile-menu > div {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  html:focus-within {
    scroll-behavior: auto !important;
  }

  .site-header,
  .nav-links > a,
  .nav-links > a::after,
  .nav-dropdown > summary,
  .nav-dropdown > summary::before,
  .nav-dropdown > summary::after,
  .mega-menu,
  .nav-popover,
  .mega-links a,
  .nav-popover a,
  .mobile-menu > summary,
  .mobile-menu a,
  .mobile-menu button,
  .header-action-button,
  .header-action-button::after,
  .footer-directory a,
  .footer-action,
  .footer-socials a,
  .footer-compliance-track {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .mega-links a,
  .nav-popover a,
  .header-action-button {
    transform: none !important;
  }
}