/*
 * Responsive layout
 * =================
 * Loaded after every other stylesheet. Holds the rules that keep the pages
 * usable from a phone to a wide desktop: no sideways scrolling of the page,
 * a navigation menu that is really off screen when closed, a footer that
 * stacks, and wide content (tables, code, tab bars) that scrolls inside its
 * own box instead of pushing the page wider than the screen.
 *
 * Breakpoints: 992px (navigation becomes a slide-in menu), 768px (tablet),
 * 480px (phone).
 */

/* ---------------------------------------------------------------- page */

/* A page wider than the screen makes a phone zoom the whole page out. Up to
   the width where the navigation is a slide-in menu, nothing may widen the
   page; wide content scrolls inside its own box (see below). */
@media (max-width: 992px) {
  html {
    overflow-x: hidden;
  }

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

/* The page container was "width: 100%" plus a margin on each side, which is
   wider than the screen by exactly those margins. */
#page_content {
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  width: calc(100% - 10px) !important;
}

#page_content > .column {
  max-width: 100%;
  min-width: 0;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* ---------------------------------------------------------- navigation */

@media (max-width: 992px) {
  /* The closed menu used to wait at "right: -300px": outside the screen but
     still inside the page, so every page could be scrolled sideways to it.
     It now sits at the edge, moved out of view and not rendered until opened. */
  .nav-right {
    max-width: 100vw;
    right: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, visibility 0.3s;
    visibility: hidden;
  }

  .nav-right.mobile-open {
    right: 0;
    transform: translateX(0);
    visibility: visible;
  }

  .nav-container {
    flex-wrap: nowrap;
  }

  .nav-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-menu-toggle {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
  }

  .nav-menu .nav-item,
  .nav-menu select,
  #user_dropdown {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 44px;
  }

  .nav-menu select {
    width: 100%;
  }

  /* Dropdowns open inside the panel, not beside it */
  .nav-menu .nav-dropdown > .menu {
    max-width: 100%;
    position: static !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .nav-right {
    right: 0;
    width: 100%;
  }
}

/* -------------------------------------------------------------- footer */

.footer-logos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-logos a {
  align-items: center;
  display: flex;
  justify-content: center;
}

.footer-logos img {
  background: white;
  border-radius: 4px;
  height: 70px;
  max-width: 100%;
  object-fit: contain;
  padding: 8px;
  width: 200px;
}

.footer-about-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95em;
}

.footer-about-note {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85em;
}

.footer-links {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-start;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .footer-logos-column {
    padding-right: 2rem !important;
  }

  .footer-about-column {
    padding-left: 2rem !important;
  }
}

@media (max-width: 767px) {
  .ui.inverted.vertical.footer.segment {
    padding: 2rem 0 1.5rem !important;
  }

  .ui.inverted.vertical.footer.segment .ui.container {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    width: auto !important;
  }

  .footer-about-column {
    text-align: center;
  }

  .footer-links {
    align-items: center;
  }
}

/* --------------------------------------- wide content inside its own box */

/* Tab bars and menus: scroll sideways inside the bar */
@media (max-width: 768px) {
  .ui.menu:not(.vertical):not(.dropdown):not(.pagination),
  .tabs-nav,
  .details-menu {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .ui.menu:not(.vertical):not(.dropdown):not(.pagination) > .item,
  .ui.menu:not(.vertical):not(.dropdown):not(.pagination) > .menu > .item,
  .tabs-nav > * {
    flex: 0 0 auto;
  }

  /* Text written by organizers (pages, descriptions) */
  pre,
  code {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  pre {
    overflow-x: auto;
  }

  textarea,
  input,
  select,
  .ui.input,
  .ui.dropdown,
  .CodeMirror,
  .EasyMDEContainer {
    box-sizing: border-box;
    max-width: 100%;
  }

  .CodeMirror-scroll {
    max-width: 100%;
  }

  .ui.grid > [class*="wide"].column,
  .ui.grid > .column {
    max-width: 100%;
    min-width: 0;
  }

  .ui.modal,
  .preview-modal {
    max-width: calc(100vw - 16px);
  }

  .ui.labeled.input,
  .ui.action.input {
    flex-wrap: wrap;
  }
}

/* A table or code block that js/ours/responsive.js found to be wider than
   the place it sits in */
@media (max-width: 992px) {
  body table.is-wide,
  body pre.is-wide {
    -webkit-overflow-scrolling: touch;
    /* important: page styles (documentation, markdown) set their own table display and width */
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    width: auto !important;
  }

}

/* Tab bars with more tabs than fit: scroll sideways inside the bar, at any width */
.tabs-nav {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.tabs-nav > * {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------- toasts */

@media (max-width: 480px) {
  #toast-container {
    left: 8px;
    right: 8px;
    top: 8px;
  }

  #toast-container > .toast,
  #toast-container > div {
    box-sizing: border-box;
    max-width: 100%;
    width: 100% !important;
  }
}