/* Direction 17: responsive navigation, hierarchy and reading space. */
.oci-direction.o-m-ready .o-menu,
.oci-direction.o-m-ready:has(.o-m-nav-compact) .o-menu {
  top: var(--o-menu-top, calc(var(--review-height, 0px) + var(--o-nav-expanded-height, 84px)));
  max-height: none;
  overscroll-behavior: contain;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

@media (max-width: 1050px) {
  .test-environment-bar { align-items: center; padding-block: 2px; }
  .oci-direction .o-menu .o-menu-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
  }
  .oci-direction.o-m-ready .o-menu .o-menu-secondary a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.35;
    padding-block: 10px;
  }
  .oci-direction .o-menu > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 900px) {
  .oci-direction .o-page-head,
  .oci-direction .o-section > header.o-page-head {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 24px;
  }
  .oci-direction .o-page-head > * { min-width: 0; }
  .oci-direction .o-page-head h1 { max-width: 17ch; }
}

@media (max-width: 700px) {
  .oci-direction .o-home-hero { padding-bottom: 24px; }
  .oci-direction .o-home-hero .o-hero-media { margin-bottom: 20px; }
  .oci-direction .o-home-hero .o-hero-title { gap: 22px; }
  .oci-direction .o-home-hero h1 {
    font-size: clamp(2.1rem, 10.5vw, 3.6rem);
    line-height: 1.06;
    max-width: 15ch;
  }
  .oci-direction .o-hero-title > .o-hero-summary { padding: 20px; }
  .oci-direction .o-hero-summary p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .oci-direction .o-hero-summary .o-hero-audience {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 16px;
  }
  .oci-direction .o-hero-summary .o-action {
    font-size: 17px;
    padding-top: 14px;
    gap: 10px;
  }
  .oci-direction .o-action { min-height: 44px; max-width: 100%; }
  .oci-direction .o-page-head h1 { margin-block: 24px; }
  .oci-direction .o-page-head { padding-block: 32px 44px; }
  .oci-direction .o-product-player figcaption a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
  }
}

@media (max-width: 370px) {
  .test-environment-bar { gap: 8px; padding-inline: 16px; font-size: 13px; }
  .oci-direction.o-m-ready .o-menu .o-menu-primary a { font-size: 25px; }
  .oci-direction .o-menu .o-menu-secondary { gap: 4px 16px; }
}