/* ==========================================================================
   Fleet docs · Estran theme override for Material for MkDocs
   Mirrors document-theme.css and estran-marp.css palette/typography.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Palette · light scheme "estran" ─────────────────────────────────────── */

[data-md-color-scheme="estran"] {
  --coal:      #14202e;
  --ink:       #1d3a5c;
  --stone:     #8c8068;
  --stone-30:  rgba(140, 128, 104, 0.30);
  --stone-15:  rgba(140, 128, 104, 0.15);
  --stone-08:  rgba(140, 128, 104, 0.08);
  --sand:      #d9c8a6;
  --cream:     #f3ead7;
  --paper:     #fafaf8;
  --tide:      #3d6b8c;
  --tide-tint: #dce6ee;
  --kelp:      #3F5E4F;
  --rust:      #B45309;

  /* Material color slots */
  --md-default-fg-color:           #4a5a6b;
  --md-default-fg-color--light:    #6b7a8b;
  --md-default-fg-color--lighter:  var(--stone);
  --md-default-fg-color--lightest: var(--stone-15);
  --md-default-bg-color:           var(--paper);
  --md-default-bg-color--light:    rgba(250, 250, 248, 0.7);
  --md-default-bg-color--lighter:  rgba(250, 250, 248, 0.3);
  --md-default-bg-color--lightest: rgba(250, 250, 248, 0.12);

  --md-primary-fg-color:           var(--ink);
  --md-primary-fg-color--light:    var(--tide);
  --md-primary-fg-color--dark:     var(--coal);
  --md-primary-bg-color:           var(--paper);
  --md-primary-bg-color--light:    var(--cream);

  --md-accent-fg-color:            var(--rust);
  --md-accent-fg-color--transparent: rgba(180, 83, 9, 0.1);
  --md-accent-bg-color:            var(--paper);
  --md-accent-bg-color--light:     var(--cream);

  --md-typeset-color:              var(--md-default-fg-color);
  --md-typeset-a-color:            var(--tide);

  --md-code-fg-color:              var(--ink);
  --md-code-bg-color:              var(--sand);
  --md-code-hl-color:              var(--rust);
  --md-code-hl-color--light:       rgba(180, 83, 9, 0.15);

  --md-footer-bg-color:            var(--coal);
  --md-footer-bg-color--dark:      #0d1620;
  --md-footer-fg-color:            var(--paper);
  --md-footer-fg-color--light:     var(--cream);
  --md-footer-fg-color--lighter:   var(--stone);
}

/* ── Palette · dark scheme "slate" override ──────────────────────────────── */

[data-md-color-scheme="slate"] {
  --md-default-bg-color:           var(--coal, #14202e);
  --md-default-fg-color:           #c8d0d8;
  --md-primary-fg-color:           var(--tide, #3d6b8c);
  --md-accent-fg-color:            var(--rust, #B45309);
  --md-typeset-a-color:            #6ea3c9;
  --md-code-bg-color:              #1a2838;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

:root {
  --md-text-font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --md-code-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.md-typeset {
  font-family: var(--md-code-font);  /* body in mono — matches doc-theme */
  font-size: 0.78rem;
  line-height: 1.6;
  font-feature-settings: "liga", "calt";
  font-variant-numeric: tabular-nums;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--md-text-font);
  color: var(--ink, var(--md-primary-fg-color));
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
}

.md-typeset h2 {
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 2rem 0 0.7rem 0;
  border-top: 1px solid var(--stone-30, rgba(140,128,104,0.30));
  padding-top: 1rem;
}

.md-typeset h3 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1.4rem 0 0.5rem 0;
  letter-spacing: -0.01em;
}

.md-typeset h4 {
  font-family: var(--md-code-font);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1rem 0 0.3rem 0;
}

/* ── Header & nav · subdued, engineering-drawing feel ────────────────────── */

.md-header,
.md-header[data-md-state="shadow"] {
  background-color: var(--coal, #14202e);
  color: var(--paper, #fafaf8);
  box-shadow: 0 0 0.2rem rgba(0,0,0,0.1), 0 0.2rem 0.4rem rgba(0,0,0,0.2);
}

.md-header__title,
.md-header__topic,
.md-header__ellipsis,
.md-header__button,
.md-header a,
.md-header__inner * {
  color: var(--paper, #fafaf8);
}

.md-header__title .md-ellipsis {
  font-family: var(--md-text-font);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.md-tabs {
  background-color: var(--ink, #1d3a5c);
  color: var(--paper, #fafaf8);
}

.md-tabs__list,
.md-tabs__item {
  color: var(--paper, #fafaf8);
}

.md-tabs__link {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper, #fafaf8) !important;
  opacity: 0.78;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--paper, #fafaf8) !important;
}

/* Sidebar primary nav (left) — page background, ink text */
.md-nav {
  font-family: var(--md-code-font);
  font-size: 0.74rem;
  color: var(--md-default-fg-color);
}

.md-nav__title {
  font-family: var(--md-text-font);
  font-weight: 600;
  color: var(--ink);
  background-color: transparent;
}

.md-nav__link {
  color: var(--md-default-fg-color);
}
.md-nav__link:hover,
.md-nav__link:focus,
.md-nav__link--active {
  color: var(--rust);
}

/* Mobile drawer header (when sidebar collapses) — keep contrast */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: var(--ink);
  color: var(--paper);
}
.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__icon {
  color: var(--paper);
}

/* Search box in header */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.12);
}
.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.18);
}
.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--paper) !important;
}
.md-search__input::placeholder {
  opacity: 0.6;
}

/* Search results panel — light bg again */
.md-search__output {
  background-color: var(--paper);
  color: var(--md-default-fg-color);
}
.md-search-result__meta,
.md-search-result__article,
.md-search-result__link {
  color: var(--md-default-fg-color);
}

/* ── Prose details ───────────────────────────────────────────────────────── */

.md-typeset strong { color: var(--ink); font-weight: 600; }
.md-typeset em     { font-style: italic; color: var(--ink); }

.md-typeset a {
  color: var(--tide);
  text-decoration: none;
  border-bottom: 1px solid var(--tide);
}
.md-typeset a:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

.md-typeset hr {
  border-top: 1px solid var(--stone-30);
  margin: 1.5rem 0;
}

/* ── Lists · em-dash bullets like the PDF doc ────────────────────────────── */

.md-typeset ul:not(.task-list) {
  list-style: none;
  padding-left: 0;
}
.md-typeset ul:not(.task-list) > li {
  position: relative;
  padding-left: 1.2em;
  margin: 0 0 0.3em 0;
}
.md-typeset ul:not(.task-list) > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--stone);
  font-family: var(--md-code-font);
}

/* nested ul keeps em-dash too */
.md-typeset ul ul > li::before { content: "—"; opacity: 0.6; }

/* ── Blockquote ──────────────────────────────────────────────────────────── */

.md-typeset blockquote {
  border-left: 2px solid var(--ink);
  padding: 0.4em 0 0.4em 1em;
  margin: 0.8em 0;
  font-family: var(--md-text-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
  background: transparent;
}

/* ── Inline code & code blocks ───────────────────────────────────────────── */

.md-typeset code {
  background: var(--sand);
  color: var(--ink);
  padding: 0.05em 0.4em;
  border-radius: 2px;
  border: 1px solid var(--stone-30);
  font-size: 0.88em;
}

.md-typeset pre > code {
  background: var(--coal);
  color: var(--paper);
  border: 0;
  padding: 0.9em 1em;
  border-radius: 3px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.highlight pre {
  background: var(--coal) !important;
}

/* ── Tables · monospace small caps headers ───────────────────────────────── */

.md-typeset table:not([class]) {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  border: 0;
  border-collapse: collapse;
}

.md-typeset table:not([class]) th {
  font-family: var(--md-code-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem;
  color: var(--stone);
  background: transparent;
  border-bottom: 1px solid var(--stone);
  padding: 0.4em 0.7em;
}

.md-typeset table:not([class]) td {
  border-bottom: 0.5px solid var(--stone-30);
  padding: 0.4em 0.7em;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:hover {
  background: var(--stone-08);
}

/* ── Admonition tweaks to match warm palette ─────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 3px;
  font-size: 0.75rem;
  border-left-width: 3px;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--tide);
  background: var(--tide-tint);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--rust);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--kelp);
}

/* ── Cards grid on homepage ──────────────────────────────────────────────── */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border: 1px solid var(--stone-30);
  border-radius: 3px;
  background: var(--paper);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* ── Vehicle hero cards — homogeneous 3-up gallery ───────────────────────── */

.md-typeset .vehicle-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 768px) {
  .md-typeset .vehicle-cards {
    grid-template-columns: 1fr;
  }
}

.md-typeset .vehicle-card {
  border: 1px solid var(--stone-30);
  border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

.md-typeset .vehicle-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 32, 46, 0.08);
}

.md-typeset .vehicle-card-image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0.5rem;
  border-bottom: 1px solid var(--stone-15);
}

.md-typeset .vehicle-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  margin: 0;
}

.md-typeset .vehicle-card-body {
  padding: 0.7rem 0.9rem 0.9rem;
  font-family: var(--md-code-font);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--md-default-fg-color);
  flex: 1;
}

.md-typeset .vehicle-card-body strong {
  display: block;
  font-family: var(--md-text-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
}

.md-typeset .vehicle-card-body .vehicle-card-meta {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.md-footer {
  background-color: var(--coal);
  color: var(--paper);
}

.md-footer-meta {
  background-color: #0d1620;
  color: var(--paper);
  font-family: var(--md-code-font);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.md-footer-meta a,
.md-footer a,
.md-footer__title,
.md-footer__direction {
  color: var(--paper);
}
.md-footer-meta a:hover,
.md-footer a:hover {
  color: var(--sand);
}

.md-copyright,
.md-copyright a {
  color: var(--stone);
}
.md-copyright a:hover {
  color: var(--sand);
}

/* ── Search box subtle Estran touch ──────────────────────────────────────── */

.md-search__input {
  font-family: var(--md-code-font);
  font-size: 0.75rem;
}

/* ── TOC sidebar ─────────────────────────────────────────────────────────── */

.md-nav--secondary .md-nav__title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--stone);
  font-family: var(--md-code-font);
}