/* Native vertical scrolling; only a visible overlay locks the document. */
html {
  overflow-x: clip;
  scroll-behavior: auto;
}
body {
  min-width: 0;
  overflow-x: clip;
}
html body.reader-open,
html body.america-reader-open {
  overflow-x: clip;
  overflow-y: visible;
}
html.site-overlay-open {
  overflow-y: hidden;
}
main, main > section, .section-shell {
  min-width: 0;
  max-width: 100%;
}
[class*="-grid"] > *, [class*="-shell"] > * {
  min-width: 0;
}
h1, h2, h3, h4, p, .source-link {
  overflow-wrap: anywhere;
}
html .site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem 4vw 1rem;
  min-height: 100px;
}
html .site-header .brand {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  line-height: 1.35;
}
html .site-header nav {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1rem;
}
html .site-header .header-index-button {
  justify-self: end;
  align-self: center;
}
@media (max-width: 900px) {
  html .site-header {
    display: flex;
    flex-wrap: nowrap;
    gap: .85rem;
    padding: 1.1rem 20px;
    min-height: 84px;
  }
  html .site-header .brand {
    flex: 1 1 auto;
    gap: .65rem;
    line-height: 1.4;
  }
  html .site-header nav { display: none; }
  html .site-header .header-index-button { flex: 0 0 auto; }
}
/* Reading routes wrap into rows instead of sliding sideways under the mouse. */
html .route-map, html .mojacar-route, html .baydal-route ol, html .zegri-geography ol {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
  scroll-snap-type: none;
}
html .route-map > li, html .mojacar-route > li, html .baydal-route ol > li, html .zegri-geography ol > li {
  min-width: 0;
  max-width: 100%;
}
html .america-region-tabs {
  flex-wrap: wrap;
  overflow: visible;
}
.detail-card-open {
  white-space: normal;
}
.detail-card-open > span {
  margin: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}
.detail-page-content, .chapter-reader {
  min-width: 0;
  min-height: 0;
  touch-action: pan-y pinch-zoom;
}
@media (max-width: 900px) {
  .diplomacy-tabs, .navarra-comment-tabs {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    overflow: visible;
  }
}
