/* M3S documentation - custom styling layered over the PyData Sphinx theme. */

:root {
  --m3s-accent: #336790;
  --m3s-accent-hover: #285377;
}

html[data-theme="dark"] {
  --m3s-accent: #6ea8d8;
  --m3s-accent-hover: #8cbce4;
}

/* Use the brand accent for primary links and the active nav state. */
html[data-theme="light"] {
  --pst-color-primary: var(--m3s-accent);
  --pst-color-link: var(--m3s-accent);
  --pst-color-link-hover: var(--m3s-accent-hover);
}

/* Cards: subtle lift on hover so the landing-page grid feels interactive. */
.bd-content .sd-card {
  border: 1px solid var(--pst-color-border, #d0d7de);
  border-radius: 0.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bd-content .sd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

/* Gallery thumbnails: framed, with a matching hover lift. */
.sphx-glr-thumbcontainer {
  border-radius: 0.6rem;
  border: 1px solid var(--pst-color-border, #d0d7de);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sphx-glr-thumbcontainer:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Slightly tighter, more readable measure for body prose. */
.bd-article-container {
  max-width: 60rem;
}

/* Hide the "Ctrl+K" keyboard hint inside the search field. */
.search-button__kbd-shortcut {
  display: none;
}

/* Inline code: gentle tint so identifiers stand out from prose. */
code.literal {
  border-radius: 0.3rem;
  padding: 0.1em 0.35em;
}

/* Code blocks: h3geo-style dark slab with rounded corners in both themes.
   pygments_light_style is monokai too, so tokens stay bright on this dark
   ground regardless of the page's light/dark mode. */
.highlight {
  border-radius: 0.6rem;
  overflow: hidden;
}
html[data-theme="light"] .highlight,
html[data-theme="light"] .highlight pre {
  background-color: #272822 !important;
}
/* Untokenised text (and the copy prompt) inherits pre's color, which the theme
   keeps dark in light mode -> invisible on the dark slab. Force it light. */
html[data-theme="light"] .highlight pre {
  color: #f8f8f2 !important;
}

/* Tabs: h3geo-style flat text tabs. Override the PyData theme's boxed look
   (it scopes under .bd-content, so match that and use !important on killers). */
.bd-content .sd-tab-set > label.sd-tab-label {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0.35rem 0.35rem 0 0;
  background: transparent !important;
  color: var(--pst-color-text, #24292f);
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  margin: 0 0.15rem;
  transition: background 0.12s ease, color 0.12s ease;
}
.bd-content .sd-tab-set > input:not(:checked) + label.sd-tab-label:hover {
  background: var(--pst-color-surface, #f0f1f3) !important;
  color: var(--pst-color-text, #24292f);
  text-decoration: none;
}
.bd-content .sd-tab-set > input:checked + label.sd-tab-label {
  border-bottom-color: var(--m3s-accent) !important;
  color: var(--m3s-accent);
  background: transparent !important;
}
/* Drop the blue panel box; let the dark code slab stand on its own. */
.bd-content .sd-tab-set .sd-tab-content {
  border: none !important;
  box-shadow: none !important;
  padding: 1rem 0 0 0 !important;
}

/* Drop the breadcrumb's bottom margin and the article's top padding so the
   hero map sits tight beneath the breadcrumb. */
.bd-breadcrumbs {
  margin-bottom: 0;
}
/* Match the theme's 4-class selector so this wins on source order without
   !important (theme sets padding-top: 1.5rem here above 1200px). */
.bd-main .bd-content .bd-article-container .bd-article {
  padding-top: 0;
}

/* Interactive maps (folium) render as an <iframe> inside a generic
   .output_html block. By default they inherit the narrow 60rem prose column
   and a squat 60% aspect ratio. Break them out to a full-bleed, app-sized
   viewport so the explorer is usable, not a thumbnail. The :has(iframe)
   guard scopes this to map output only, leaving DataFrame HTML reprs alone.

   A 100vw box centred on the article (which the theme centres in the viewport)
   fills the full width. This is the no-JS fallback; hero-map.js then overrides
   the width/left inline to land pixel-flush on both viewport edges regardless
   of the scrollbar width (100vw alone overshoots by the scrollbar). */
.bd-article-container .output_html:has(iframe) {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
}

/* The full-bleed map is shifted out past these centred containers, but the
   theme gives .bd-article-container `overflow: auto`, which clips the map back
   to the narrow column. Let it (and the main column) paint past their edges on
   map pages. Both axes must be set: a lone `overflow-x: visible` next to
   `overflow-y: auto` computes back to auto and re-clips. */
.bd-article-container:has(.output_html iframe),
.bd-content:has(.output_html iframe),
.bd-main:has(.output_html iframe) {
  /* !important to beat the theme's higher-specificity
     `.bd-main .bd-content .bd-article-container { overflow-x: auto }`. */
  overflow: visible !important;
}

/* Folium fakes a 60% aspect ratio with padding on nested wrapper divs.
   Replace it with a fixed, tall height. */
.output_html:has(iframe) > div,
.output_html:has(iframe) > div > div {
  padding-bottom: 0 !important;
  height: auto !important;
}
.output_html:has(iframe) > div > div {
  height: 55vh !important;
  min-height: 460px;
}

/* The full-bleed block runs edge to edge; the map fills the full viewport
   width so the explorer reads as a deliberate hero. */
.output_html:has(iframe) iframe {
  width: 100% !important;
  left: 0 !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
}