/* Armbian brand colors matching armbian.com */
:root {
  --md-primary-fg-color: #F26522;
  --md-primary-fg-color--light: #FF8B1A;
  --md-primary-fg-color--dark: #DC5819;
  --md-accent-fg-color: #F26522;
  --md-accent-fg-color--transparent: #F2652218;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #F26522;
  --md-primary-fg-color--light: #FF8B1A;
  --md-primary-fg-color--dark: #DC5819;
  --md-accent-fg-color: #F26522;
  --md-accent-fg-color--transparent: #F2652218;
}

/* Content column +25%.
 *
 * Material caps .md-grid at 61rem to keep prose line-length readable. With both
 * sidebars at 12.1rem that leaves 36.8rem of content, which is tight for the
 * wider tables in the docs -- the per-module tables on the fleet status pages
 * are four columns with a detail field running to 100 characters.
 *
 * 70.2rem leaves 46.0rem of content, exactly +25%. The sidebars keep their
 * width, so the whole gain goes to the content column.
 *
 * Behind Material's own sidebar breakpoint (76.25em = 1220px): below it the
 * layout stacks and the sidebars are off-canvas, so there is nothing to
 * reclaim and narrow screens are left alone.
 *
 * Note Material scales the root font size with the viewport (125% base, 137.5%
 * above 100em, 150% above 125em), so 1rem is 20, 22 or 24px and the content
 * column lands at 920, 1012 or 1104px respectively.
 */
@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 70.2rem;
  }
}

.md-typeset__table {
   min-width: 100%;
}

.md-typeset table:not([class]) {
    display: table;
}

/* Prevent the first column of schema/reference tables from wrapping
 * mid-identifier. Identifiers like 'display_manager' or 'gnome-control-center'
 * are common in the developer-guide tables and look terrible when broken
 * across lines (e.g. 'display_manage' / 'r').
 * Scope to <code> in the first cell so prose tables are unaffected.
 */
.md-typeset table:not([class]) td:first-child code,
.md-typeset table:not([class]) th:first-child code {
    white-space: nowrap;
}

/* The primary "CLI install" block — large, to stand out as the main action. */
pre.custom-bash-block, code.custom-bash-block {
  font-size: 24pt;
}

@media (max-width: 768px) {
  pre.custom-bash-block, code.custom-bash-block {
    font-size: 14pt; /* smaller size for tablets/phones */
  }
}

@media (max-width: 480px) {
  pre.custom-bash-block, code.custom-bash-block {
    font-size: 12pt; /* even smaller for small phones */
  }
}

/* App-page logos: source images vary wildly (square icons to wide banners), so
 * render them all within one consistent box for a uniform visual size. */
.md-typeset img.app-logo {
  height: auto;
  width: auto;
  max-height: 88px;
  max-width: 260px;
  object-fit: contain;
}

/* Repository header: hide the version chip, keep stars and forks.
 *
 * mkdocs-material fills the repo card from the GitHub API and shows
 * releases/latest as a "version". Ours is a leftover of the retired PDF
 * pipeline, which tagged releases with a short commit SHA — the newest is
 * e76674a from 2024-10-12 — so the chip advertises a stale hash as a version
 * on a site that is redeployed on every push to main. Stars and forks stay:
 * those are accurate.
 *
 * Done in CSS rather than by overriding the source.html partial because the
 * facts are injected client-side (the JS builds `md-source__fact--<type>`);
 * removing them in the template would take stars and forks with it.
 */
.md-source__fact--version {
  display: none;
}

/* Compact photo gallery: a single horizontal strip of thumbnails that scrolls
 * sideways when they don't fit, so any number of images stays on one row and
 * each keeps its own aspect ratio. Used with mkdocs-glightbox, so a thumbnail
 * opens the full image in a lightbox. A dedicated class (not Material's .grid,
 * which reflows into multiple rows). */
.gallery-row {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;        /* breathing room for the scrollbar */
  margin: 1rem 0 1.5rem;
  scroll-snap-type: x proximity;
}
.gallery-row img {
  height: 112px;
  width: auto;                   /* natural aspect ratio */
  flex: 0 0 auto;                /* never shrink; overflow scrolls instead */
  object-fit: cover;
  border-radius: 0.2rem;
  cursor: zoom-in;
  scroll-snap-align: start;
}
@media screen and (max-width: 30rem) {
  .gallery-row img { height: 83px; }
}