/* Overrides the theme's placeholder of the same name (Zola serves static/ over
   the theme's static/). Loaded because extra.enable_custom_css is on.

   The Goyo header nav does not adapt to its own width: the wrapper is
   `flex-none`, so a nav longer than the bar is clipped at the viewport edge and
   the last entries — including the theme toggle — become unreachable. Let the
   bar shrink its items as the viewport narrows, and never wrap: the navbar is
   a fixed 4rem tall, so a second row would overlap the page.

   Selectors target `ul.menu` rather than `.menu-horizontal`, because the theme
   applies the horizontal layout through the responsive variant class
   `lg:menu-horizontal`. */

@media (min-width: 1024px) {
  .navbar > .flex-1 {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* No overflow property here: the Reference panel is absolutely positioned
     below the 4rem bar, and any scroll container would clip it away. The
     item-tightening rules below are what keep the bar inside its width. */
  .navbar > .flex-none:last-child {
    flex: 0 1 auto;
    min-width: 0;
  }

  .navbar ul.menu {
    flex-wrap: nowrap;
  }

  .navbar ul.menu > li > a,
  .navbar ul.menu > li > div[role="button"],
  .navbar ul.menu > li > label {
    white-space: nowrap;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .navbar ul.menu > li > a,
  .navbar ul.menu > li > div[role="button"] {
    padding-inline: 0.45rem;
    font-size: 0.8125rem;
  }
}

/* Icons are decoration, labels are navigation: drop the icons before the bar
   starts eating the labels. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar ul.menu .icon {
    display: none;
  }
}

/* Wide tables pushed the whole page sideways on a phone — the reader had to
   scroll the article horizontally to reach the sidebar and the text. Let the
   table keep its natural column widths and scroll inside its own box instead.
   `width: max-content` is what preserves those widths once display is block. */
.prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

/* A grid item defaults to min-width:auto, so the max-content table above would
   widen the article column instead of scrolling inside it. */
main.prose,
main.prose > * {
  min-width: 0;
}

/* Inline code carries unbreakable strings — Talos schematic IDs, image digests,
   64-char hashes — which have no break opportunity and so widen the page on a
   phone. Fenced blocks keep their own horizontal scroll. */
.prose :not(pre) > code {
  overflow-wrap: anywhere;
}

/* A fenced block nested in a list item sized itself to its longest line and
   dragged the page with it; its own scrollbar only works if it is capped to
   the column first. */
.prose pre {
  max-width: 100%;
}

.prose li {
  min-width: 0;
}

/* Bare URLs in prose are single unbreakable tokens and stretched the page on a
   phone the same way the hashes did. */
.prose {
  overflow-wrap: break-word;
}