/* Editor UI screenshots are tall and narrow: keep them at a readable size instead of stretching to the column. */
.wtk-ui img {
  max-width: min(100%, 380px);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Wide editor windows such as the UV View. */
.wtk-ui-wide img {
  max-width: min(100%, 720px);
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Icons that lead headings and card titles take the link colour (it has a light and a dark variant),
   so a page can be scanned by its icons. Module-specific overrides below tint them per section. */
.md-typeset h2 > .twemoji,
.md-typeset h3 > .twemoji,
.md-typeset .grid.cards .twemoji.lg {
  color: var(--md-typeset-a-color);
}

/* A little space between a heading icon and its text. */
.md-typeset h2 > .twemoji,
.md-typeset h3 > .twemoji {
  margin-right: 0.15em;
}

/* Module identity colors matching World Toolkit editor components */
:root {
  --wtk-color-getting-started: #818cf8;
  --wtk-color-modelling: #4da3ff;
  --wtk-color-splines: #f2b338;
  --wtk-color-roads: #ff8a21;
  --wtk-color-buildings: #bd80ff;
  --wtk-color-terrain: #59d675;
  --wtk-color-more: #2dd4bf;
  --wtk-color-support: #f87171;
}

/* Sidebar navigation icons tinted per module */
[id="__nav_2"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_2"]) .md-nav__link svg,
nav[aria-labelledby="__nav_2_label"] .md-nav__link svg,
a.md-nav__link[href*="getting-started"] svg {
  color: var(--wtk-color-getting-started) !important;
  stroke: var(--wtk-color-getting-started) !important;
}

[id="__nav_3"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_3"]) .md-nav__link svg,
nav[aria-labelledby="__nav_3_label"] .md-nav__link svg,
a.md-nav__link[href*="modelling"] svg {
  color: var(--wtk-color-modelling) !important;
  stroke: var(--wtk-color-modelling) !important;
}

[id="__nav_4"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_4"]) .md-nav__link svg,
nav[aria-labelledby="__nav_4_label"] .md-nav__link svg,
a.md-nav__link[href*="splines"] svg {
  color: var(--wtk-color-splines) !important;
  stroke: var(--wtk-color-splines) !important;
}

[id="__nav_5"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_5"]) .md-nav__link > svg,
nav[aria-labelledby="__nav_5_label"] .md-nav__link svg,
a.md-nav__link[href*="roads"] svg {
  color: var(--wtk-color-roads) !important;
  stroke: var(--wtk-color-roads) !important;
}

[id="__nav_6"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_6"]) .md-nav__link svg,
nav[aria-labelledby="__nav_6_label"] .md-nav__link svg,
a.md-nav__link[href*="buildings"] svg {
  color: var(--wtk-color-buildings) !important;
  stroke: var(--wtk-color-buildings) !important;
}

[id="__nav_7"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_7"]) .md-nav__link svg,
nav[aria-labelledby="__nav_7_label"] .md-nav__link svg,
a.md-nav__link[href*="terrain"] svg {
  color: var(--wtk-color-terrain) !important;
  stroke: var(--wtk-color-terrain) !important;
}

[id="__nav_8"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_8"]) .md-nav__link svg,
nav[aria-labelledby="__nav_8_label"] .md-nav__link svg,
a.md-nav__link[href*="more"] svg {
  color: var(--wtk-color-more) !important;
  stroke: var(--wtk-color-more) !important;
}

[id="__nav_9"] ~ * .md-nav__link svg,
li.md-nav__item:has(> [id="__nav_9"]) .md-nav__link svg,
nav[aria-labelledby="__nav_9_label"] .md-nav__link svg,
a.md-nav__link[href*="support"] svg {
  color: var(--wtk-color-support) !important;
  stroke: var(--wtk-color-support) !important;
}

/* Page content icons (headings, card grids, definition lists) tinted per section */
body:has(a[href*="/docs/getting-started/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/getting-started/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/getting-started/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/getting-started/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/getting-started/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-getting-started);
}

body:has(a[href*="/docs/modelling/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/modelling/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/modelling/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/modelling/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/modelling/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-modelling);
}

body:has(a[href*="/docs/splines/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/splines/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/splines/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/splines/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/splines/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-splines);
}

body:has(a[href*="/docs/roads/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/roads/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/roads/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/roads/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/roads/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-roads);
}

body:has(a[href*="/docs/buildings/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/buildings/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/buildings/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/buildings/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/buildings/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-buildings);
}

body:has(a[href*="/docs/terrain/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/terrain/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/terrain/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/terrain/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/terrain/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-terrain);
}

body:has(a[href*="/docs/more/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/more/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/more/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/more/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/more/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-more);
}

body:has(a[href*="/docs/support/"]) .md-typeset h2 > .twemoji,
body:has(a[href*="/docs/support/"]) .md-typeset h3 > .twemoji,
body:has(a[href*="/docs/support/"]) .md-typeset .grid.cards .twemoji.lg,
body:has(a[href*="/docs/support/"]) .md-typeset dt > .twemoji,
body:has(a[href*="/docs/support/"]) .md-nav--secondary .md-nav__link .twemoji {
  color: var(--wtk-color-support);
}

/* Home page module card icons */
.md-typeset .grid.cards li:has(a[href*="modelling"]) .twemoji {
  color: var(--wtk-color-modelling);
}
.md-typeset .grid.cards li:has(a[href*="splines"]) .twemoji {
  color: var(--wtk-color-splines);
}
.md-typeset .grid.cards li:has(a[href*="roads"]) .twemoji {
  color: var(--wtk-color-roads);
}
.md-typeset .grid.cards li:has(a[href*="buildings"]) .twemoji {
  color: var(--wtk-color-buildings);
}
.md-typeset .grid.cards li:has(a[href*="terrain"]) .twemoji {
  color: var(--wtk-color-terrain);
}
.md-typeset .grid.cards li:has(a[href*="more"]) .twemoji {
  color: var(--wtk-color-more);
}

/* Links list inside grid cards */
.md-typeset .grid.cards li ul {
  list-style: none;
  margin: 0.6em 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.md-typeset .grid.cards li ul li {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.md-typeset .grid.cards li ul li .twemoji {
  margin-right: 0.45em;
  flex-shrink: 0;
}

/* Top navigation tabs icons and alignment */
.md-tabs__link {
  display: inline-flex;
  align-items: center;
}

.md-tabs__link svg {
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.35em;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Tabs icons tinted per module */
.md-tabs__item[data-module="getting-started"] svg,
.md-tabs__link[data-module="getting-started"] svg {
  color: var(--wtk-color-getting-started) !important;
  stroke: var(--wtk-color-getting-started) !important;
}

.md-tabs__item[data-module="modelling"] svg,
.md-tabs__link[data-module="modelling"] svg {
  color: var(--wtk-color-modelling) !important;
  stroke: var(--wtk-color-modelling) !important;
}

.md-tabs__item[data-module="splines"] svg,
.md-tabs__link[data-module="splines"] svg {
  color: var(--wtk-color-splines) !important;
  stroke: var(--wtk-color-splines) !important;
}

.md-tabs__item[data-module="roads"] svg,
.md-tabs__link[data-module="roads"] svg {
  color: var(--wtk-color-roads) !important;
  stroke: var(--wtk-color-roads) !important;
}

.md-tabs__item[data-module="buildings"] svg,
.md-tabs__link[data-module="buildings"] svg {
  color: var(--wtk-color-buildings) !important;
  stroke: var(--wtk-color-buildings) !important;
}

.md-tabs__item[data-module="terrain"] svg,
.md-tabs__link[data-module="terrain"] svg {
  color: var(--wtk-color-terrain) !important;
  stroke: var(--wtk-color-terrain) !important;
}

.md-tabs__item[data-module="more"] svg,
.md-tabs__link[data-module="more"] svg {
  color: var(--wtk-color-more) !important;
  stroke: var(--wtk-color-more) !important;
}

.md-tabs__item[data-module="support"] svg,
.md-tabs__link[data-module="support"] svg {
  color: var(--wtk-color-support) !important;
  stroke: var(--wtk-color-support) !important;
}

/* The theme fills tab icons with the text colour. The Lucide life buoy is outline-only,
   so filled it turns into a solid disc: keep it unfilled. */
.md-tabs__link svg.lucide-life-buoy {
  fill: none;
}

/* Filled, the Lucide house's door becomes a solid block on top of the walls. Cut the door's
   inside (x 10-14 from y 13 down, in the icon's 24-unit grid) so only the walls and the
   door frame remain. */
.md-tabs__link svg.lucide-house {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M0 0h24v24H0zM10 13v11h4V13z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M0 0h24v24H0zM10 13v11h4V13z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* The World Toolkit logo above the home page title. */
.md-typeset .twemoji.wtk-hero-logo {
  height: 4.5rem;
  margin-bottom: -0.5rem;
}

.md-typeset .twemoji.wtk-hero-logo svg {
  width: 4.5rem;
  max-height: none;
}

/* Pull the home page logo up to the tabs: drop the theme's top spacing on that page only. */
.md-main__inner:has(.wtk-hero-logo) {
  margin-top: 0.6rem;
}

.md-content__inner:has(.wtk-hero-logo) {
  padding-top: 0;
}

.md-content__inner:has(.wtk-hero-logo)::before {
  height: 0;
}

.md-typeset p:has(> .wtk-hero-logo) {
  margin-top: 0;
}

/* Compact layout: only the open drawer is frosted (the theme's own blur on .md-sidebar--primary);
   the page behind it is dimmed but stays sharp. */
.md-overlay {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* K (previous) and J (next) move between pages (javascripts/wtk-page-keys.js): show the key beside
   each footer link, drawn like the manual's other keys. Hidden on touch screens, where there's no
   keyboard. */
.md-footer__link--prev .md-footer__direction::after,
.md-footer__link--next .md-footer__direction::after {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0 0.6em;
  border-radius: 0.2rem;
  font-family: var(--md-code-font-family);
  font-size: 0.9em;
  vertical-align: text-top;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);
  box-shadow: 0 0 0 0.05rem var(--md-typeset-kbd-border-color), 0 0.15rem 0 var(--md-typeset-kbd-border-color);
}

.md-footer__link--prev .md-footer__direction::after {
  content: "K";
}

.md-footer__link--next .md-footer__direction::after {
  content: "J";
}

@media (hover: none) {
  .md-footer__link--prev .md-footer__direction::after,
  .md-footer__link--next .md-footer__direction::after {
    display: none;
  }
}

/* Keep names in a table's first column (command names, row prefixes) on one line. */
.md-typeset td:first-child > code {
  white-space: nowrap;
}

/* Home page feature table: one row per feature, grouped under a full-width row per category.
   Each category's icons and header row take its module colour. */
.md-typeset .wtk-features .md-typeset__table {
  width: 100%;
}

.md-typeset .wtk-features table:not([class]) {
  display: table;
  width: 100%;
}

.wtk-features tbody.wtk-features-modelling { --wtk-feature-color: var(--wtk-color-modelling); }
.wtk-features tbody.wtk-features-splines { --wtk-feature-color: var(--wtk-color-splines); }
.wtk-features tbody.wtk-features-roads { --wtk-feature-color: var(--wtk-color-roads); }
.wtk-features tbody.wtk-features-buildings { --wtk-feature-color: var(--wtk-color-buildings); }
.wtk-features tbody.wtk-features-terrain { --wtk-feature-color: var(--wtk-color-terrain); }
.wtk-features tbody.wtk-features-more { --wtk-feature-color: var(--wtk-color-more); }
.wtk-features tbody.wtk-features-workflow { --wtk-feature-color: var(--wtk-color-getting-started); }

.wtk-features th {
  background-color: color-mix(in srgb, var(--wtk-feature-color) 14%, transparent);
  border-left: 0.2rem solid var(--wtk-feature-color);
}

.wtk-features .twemoji {
  color: var(--wtk-feature-color);
  margin-right: 0.3em;
}

/* Feature names stay on one line on wide screens; on phones they wrap with the rest. */
@media screen and (min-width: 45em) {
  .wtk-features td:first-child {
    white-space: nowrap;
  }
}

/* Screen recordings: full column width, same frame as the UI screenshots. */
.wtk-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 860;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  background: #1e1e1e;
}

/* Captions sit right under their image or video. Image figures (markdown="span") get a line break
   between the two from the Markdown pass: drop it along with the caption's top margin. */
.md-typeset figure > br {
  display: none;
}

.md-typeset figure figcaption {
  margin-top: 0;
}

/* Footer studio credit: "by [logo] RORU Studio". */
.wtk-studio {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
}

.wtk-studio__logo {
  width: 1.6em;
  height: 1.6em;
  border-radius: 2px;
}