/* What Bootstrap can't do: room for the sticky header, neutral code and links, light secondary buttons, wrapping JSON
   panels, the docs sidebar, Markdown page typography, code colors, and the feature pages' full-width map heroes.
   Everything else uses Bootstrap's own classes. */

/* Links to a heading on the page scroll it into view below the sticky header, not under it. */
html {
  scroll-padding-top: 5rem;
}

/* Inline code and links in running text take the text color, like everything else on the site. */
:root {
  --bs-code-color: var(--bs-emphasis-color);
  --bs-link-color-rgb: var(--bs-emphasis-color-rgb);
  --bs-link-hover-color-rgb: var(--bs-emphasis-color-rgb);
}

/* Secondary buttons have a card's border and a light fill when hovered or pressed, so the dark gray stays for muted
   text only. */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* Request and response panels wrap long lines, such as place IDs and curl URLs, instead of cutting them off. A JSON
   line's wrapped part sits two characters in from where the line starts, so the JSON keeps its shape. */
.bg-dark pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.json-line {
  display: block;
  padding-left: calc((var(--indent) + 2) * 1ch);
  text-indent: calc((var(--indent) + 2) * -1ch);
}

/* The docs and guides sidebar stays in view as the page scrolls, and scrolls by itself when it's taller than the window.
   On phones it's a drawer instead, from Bootstrap's offcanvas-lg. */
@media (min-width: 992px) {
  .section-nav {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

/* Markdown pages (docs, guides, comparisons, policies): larger, airier text kept to about 75 characters a line, a clear
   heading scale with more room above each heading than below, and spaced list items. Code blocks and tables keep the
   column's full width. */
.prose {
  font-size: 1.0625rem;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .prose {
    font-size: 1.125rem;
  }
}
.prose > :is(h2, h3, h4, p, ul, ol, blockquote) {
  max-width: 38rem;
}
.prose > :first-child {
  margin-top: 0;
}
.prose :is(h1, h2, h3, h4) {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.prose h1 {
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.prose h1 + p {
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--bs-secondary-color);
}
.prose h2 {
  margin: 3rem 0 1rem;
  font-size: 1.75rem;
}
.prose h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.25rem;
}
.prose h4 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1em;
}
.prose :is(h2, h3) + :is(h3, h4) {
  margin-top: 1.25rem;
}
.prose :is(p, ul, ol, blockquote, pre) {
  margin-bottom: 1.25rem;
}
.prose :is(ul, ol) {
  padding-left: 1.5rem;
}
.prose li + li,
.prose li > :is(ul, ol) {
  margin-top: 0.5rem;
}
.prose li > :is(ul, ol) {
  margin-bottom: 0;
}
.prose li::marker {
  color: var(--bs-secondary-color);
}
.prose pre {
  font-size: 0.875rem;
  line-height: 1.6;
  tab-size: 4;
}
.prose :not(pre) > code {
  padding: 0.125em 0.375em;
  border-radius: 0.375rem;
  background: var(--bs-secondary-bg);
}
.prose table {
  font-size: 1rem;
}

/* Code colors for Prism, which highlights code blocks when the site is built, in the same colors as the JSON responses. */
.token:is(.comment, .prolog, .doctype, .cdata) {
  color: var(--bs-secondary-color);
}
.token:is(.keyword, .property, .tag, .selector, .attr-name, .builtin, .important, .header-name) {
  color: var(--bs-info-text-emphasis);
}
.token:is(.string, .char, .attr-value, .url, .regex, .template-string) {
  color: var(--bs-warning-text-emphasis);
}
.token:is(.number, .boolean, .constant, .null, .symbol) {
  color: var(--bs-success-text-emphasis);
}
.token:is(.function, .class-name) {
  color: var(--bs-primary-text-emphasis);
}

/* A band with the text over a white fade on the map's left side, the same height on every feature page, with the text
   centered in it. On phones the map sits below the text instead. */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
.hero-map {
  position: absolute;
  inset: auto 0 0 0;
  height: 18rem;
}
.hero-content {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 20rem;
}
.hero-shade {
  display: none;
}
@media (min-width: 992px) {
  .hero-map {
    inset: 0;
    height: auto;
  }
  .hero-shade {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0) 70%);
  }
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 36rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* On phones, a row of cards scrolls sideways, one card at a time, with the next card peeking in. */
@media (max-width: 767.98px) {
  .swipe-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .swipe-row > .col {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* The hero's text sits over the map, but only its links and buttons take clicks, so the map's credits stay usable. */
.hero-content {
  pointer-events: none;
}
.hero-content a,
.hero-content button {
  pointer-events: auto;
}