/* Shared mobile guardrails for the exact school pages and the portal. */
:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
picture,
video,
iframe {
  max-width: 100%;
}

/* Short action and tab labels must stay intact. Normal page copy can wrap. */
.dirlink,
[role="tab"],
.w-tab-link,
.child-switcher-button,
.hburger,
.mobile-tab-strip > button,
.covtoggle > button {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.dirlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

:where(a, button, input, select, textarea, [role="tab"]):focus-visible {
  outline: 3px solid #f4c64a;
  outline-offset: 3px;
}

/*
 * The branded header and nine desktop navigation actions need more room than
 * the original 1200px container provides. Use the complete slide-out menu on
 * laptop-sized screens, then restore the full navigation only when every item
 * can fit without being clipped.
 */
@media (max-width: 1499px) {
  .stickytop .desknav {
    display: none !important;
  }

  .stickytop .hburger {
    display: flex !important;
  }
}

.mobile-nav-drawer {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1500px) {
  .stickytop header > nav {
    max-width: 1680px !important;
  }
}

@media (min-width: 1500px) and (max-width: 1700px) {
  .stickytop header > nav {
    gap: 20px !important;
  }

  .stickytop .desknav {
    gap: 10px !important;
  }

  .stickytop .navlink {
    font-size: 14px !important;
  }

  .stickytop .desknav > .btnp {
    padding-inline: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  [role="tablist"],
  .w-tab-menu,
  .child-switcher-buttons,
  .mobile-tab-strip,
  .covtoggle {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  [role="tablist"] > *,
  .w-tab-menu > *,
  .child-switcher-buttons > *,
  .mobile-tab-strip > *,
  .covtoggle > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  label {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
}