/* =========================================================================
   classes.smarthomesellout.com - brand overrides for MkDocs Material
   Tokens mirror smarthomesellout.com src/styles/global.css.
   One accent (amber). Flat 1px borders. No shadows, no gradients.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

/* ---- Dark scheme (default) ---- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0d0f17;
  --md-default-fg-color: #f0eee9;
  --md-default-fg-color--light: #a8a49c;
  --md-default-fg-color--lighter: #71737e;
  --md-default-fg-color--lightest: #232839;

  --md-primary-fg-color: #11141d;   /* header / nav chrome */
  --md-primary-bg-color: #f0eee9;   /* text on header */
  --md-accent-fg-color: #ffb454;
  --md-typeset-a-color: #ffb454;

  --md-code-bg-color: #141823;
  --md-code-fg-color: #f0eee9;

  --md-footer-bg-color: #11141d;
  --md-footer-bg-color--dark: #0d0f17;
  --md-footer-fg-color: #f0eee9;
  --md-footer-fg-color--light: #a8a49c;

  --shs-surface: #141823;
  --shs-surface-hover: #1a1f2e;
  --shs-border: #232839;
  --shs-border-strong: #323a4f;
  --shs-accent: #ffb454;
  --shs-accent-ink: #1a1409;

  /* Variables Material's stock CSS consumes that 'custom' palettes must define */
  --md-accent-fg-color--transparent: #ffb45426;
  --md-accent-bg-color: #1a1409;
  --md-primary-fg-color--light: #1a1f2e;
  --md-primary-fg-color--dark: #0d0f17;
  --md-primary-bg-color--light: rgba(240, 238, 233, 0.54);
  --md-footer-fg-color--lighter: #71737e;
}

/* ---- Light scheme (toggle) ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf9f6;
  --md-default-fg-color: #1b1914;
  --md-default-fg-color--light: #59554b;
  --md-default-fg-color--lighter: #8b8779;
  --md-default-fg-color--lightest: #e3dfd5;

  --md-primary-fg-color: #ffffff;
  --md-primary-bg-color: #1b1914;
  /* Amber text fails contrast on white; links darken, fills stay amber. */
  --md-accent-fg-color: #9b5d00;
  --md-typeset-a-color: #9b5d00;

  --md-code-bg-color: #f2efe9;
  --md-code-fg-color: #1b1914;

  --md-footer-bg-color: #ffffff;
  --md-footer-bg-color--dark: #faf9f6;
  --md-footer-fg-color: #1b1914;
  --md-footer-fg-color--light: #59554b;

  --shs-surface: #ffffff;
  --shs-surface-hover: #f2efe9;
  --shs-border: #e3dfd5;
  --shs-border-strong: #c9c3b4;
  --shs-accent: #ffb454;
  --shs-accent-ink: #1a1409;

  /* Variables Material's stock CSS consumes that 'custom' palettes must define */
  --md-accent-fg-color--transparent: #9b5d0026;
  --md-accent-bg-color: #faf9f6;
  --md-primary-fg-color--light: #f2efe9;
  --md-primary-fg-color--dark: #f2efe9;
  --md-primary-bg-color--light: rgba(27, 25, 20, 0.54);
  --md-footer-fg-color--lighter: #8b8779;
}

/* ---- Kill Material's elevation shadows everywhere ---- */
:root {
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}

/* ---- Typography ---- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  color: var(--md-default-fg-color);
}
.md-typeset h1 { font-weight: 700; }

/* ---- Header: flat, bordered, no shadow ---- */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--shs-border);
}
.md-header__title {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 600;
}

/* ---- Search field: flat surface ---- */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form,
.md-search__form {
  background: var(--shs-surface);
  border: 1px solid var(--shs-border);
  border-radius: 0.5rem;
  box-shadow: none;
}
.md-search__output {
  border: 1px solid var(--shs-border);
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: none;
}

/* ---- Grid cards: flat 1px-border surfaces ---- */
.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li {
  background: var(--shs-surface);
  border: 1px solid var(--shs-border);
  border-radius: 0.75rem;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--shs-border-strong);
  box-shadow: none;
}
.md-typeset .grid.cards > ul > li hr {
  border-bottom: 1px solid var(--shs-border);
}

/* Coming-soon cards: muted, non-interactive */
.md-typeset .coming-soon.grid.cards > ul > li {
  opacity: 0.6;
}
.md-typeset .coming-soon.grid.cards > ul > li:hover {
  border-color: var(--shs-border);
}

/* ---- Buttons ---- */
.md-typeset .md-button {
  border: 1px solid var(--shs-border-strong);
  border-radius: 0.75rem;
  color: var(--md-default-fg-color);
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--shs-surface-hover);
  border-color: var(--shs-border-strong);
  color: var(--md-default-fg-color);
}
.md-typeset .md-button--primary {
  background: var(--shs-accent);
  border-color: var(--shs-accent);
  color: var(--shs-accent-ink);
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: var(--shs-accent);
  border-color: var(--shs-accent);
  color: var(--shs-accent-ink);
  filter: brightness(1.06);
}

/* ---- Tables: flat, bordered, rounded ---- */
.md-typeset table:not([class]) {
  border: 1px solid var(--shs-border);
  border-radius: 0.75rem;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--shs-surface);
}

/* ---- Admonitions (site-only pages): flat, single accent ----
   [class] bumps specificity to (0,3,0) so these beat Material's
   per-type rules (.md-typeset .admonition.note etc.). */
.md-typeset .admonition[class],
.md-typeset details[class],
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--shs-border);
  border-left: 3px solid var(--shs-accent);
  border-radius: 0.5rem;
  box-shadow: none;
}
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: var(--shs-surface);
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  background-color: var(--shs-accent);
}

/* ---- Footer ---- */
.md-footer-meta {
  border-top: 1px solid var(--shs-border);
}

/* ---- Class identity colors (mirror the main site's data colors) ---- */
[data-md-color-scheme="slate"] {
  --shs-c-ha: #ffb454;
  --shs-c-esphome: #39c5cf;
  --shs-c-wled: #9d6bff;
  --shs-c-solder: #2bd97c;
}
[data-md-color-scheme="default"] {
  --shs-c-ha: #9b5d00;
  --shs-c-esphome: #0c7d87;
  --shs-c-wled: #6b3fd1;
  --shs-c-solder: #11804b;
}

/* ---- Class icons on cards ---- */
.md-typeset .class-icon {
  font-size: 1.3em;
  vertical-align: -0.25em;
  margin-right: 0.2em;
}
.md-typeset .c-ha { color: var(--shs-c-ha); }
.md-typeset .c-esphome { color: var(--shs-c-esphome); }
.md-typeset .c-wled { color: var(--shs-c-wled); }
.md-typeset .c-solder { color: var(--shs-c-solder); }

/* ---- Per-class card top border. Needs :has(); older browsers keep the
   plain 1px border, which is an acceptable fallback. ---- */
.md-typeset .grid.cards > ul > li:has(.c-ha),
.md-typeset .grid.cards > ul > li:has(.c-ha):hover {
  border-top: 3px solid var(--shs-c-ha);
}
.md-typeset .grid.cards > ul > li:has(.c-esphome),
.md-typeset .grid.cards > ul > li:has(.c-esphome):hover {
  border-top: 3px solid var(--shs-c-esphome);
}
.md-typeset .grid.cards > ul > li:has(.c-wled),
.md-typeset .grid.cards > ul > li:has(.c-wled):hover {
  border-top: 3px solid var(--shs-c-wled);
}
.md-typeset .grid.cards > ul > li:has(.c-solder),
.md-typeset .grid.cards > ul > li:has(.c-solder):hover {
  border-top: 3px solid var(--shs-c-solder);
}

/* ---- Card photos: bleed over the card's 0.8rem padding ---- */
.md-typeset .card-photo {
  display: block;
  width: calc(100% + 1.6rem);
  max-width: calc(100% + 1.6rem);
  margin: -0.8rem -0.8rem 0.8rem;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 0.65rem 0.65rem 0 0;
  border-bottom: 1px solid var(--shs-border);
}

/* ---- Class page hero image ---- */
.md-typeset img.page-hero {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border: 1px solid var(--shs-border);
  border-radius: 0.75rem;
}

/* Keep a lone card tile-sized: auto-fill preserves empty tracks where
   Material's auto-fit would stretch one card across the whole row. */
.md-typeset .grid {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

/* ---- Uncropped bordered figure (e.g. diagrams, screenshots) ---- */
.md-typeset img.page-figure {
  display: block;
  max-width: min(100%, 56rem);
  border: 1px solid var(--shs-border);
  border-radius: 0.75rem;
}