/* Circuitrocks Docs — Maker theme overrides
   Palette mirrors circuit-rocks-mockups/index.html (Variant B / maker direction). */

:root,
[data-md-color-scheme="cr-light"] {
  --cr-bg: #faf9f6;
  --cr-fg: #1a1a1a;
  --cr-fg-soft: #444;
  --cr-fg-mute: #888;
  --cr-accent: #5cb030;
  --cr-accent-deep: #4a8f24;
  --cr-accent-tint: rgba(92, 176, 48, 0.08);
  --cr-sale: #ff8c00;
  --cr-border: #e8e8e8;
  --cr-border-strong: #1a1a1a;
  --cr-mono: "JetBrains Mono", "Courier New", monospace;

  /* Material tokens */
  --md-default-bg-color: var(--cr-bg);
  --md-default-fg-color: var(--cr-fg);
  --md-default-fg-color--light: var(--cr-fg-soft);
  --md-default-fg-color--lighter: var(--cr-fg-mute);
  --md-default-fg-color--lightest: #cccccc;

  --md-primary-fg-color: #1a1a1a;
  --md-primary-fg-color--light: #2a2a2a;
  --md-primary-fg-color--dark: #0d0d0d;
  --md-primary-bg-color: #faf9f6;
  --md-primary-bg-color--light: rgba(250, 249, 246, 0.7);

  --md-accent-fg-color: var(--cr-accent-deep);
  --md-accent-fg-color--transparent: var(--cr-accent-tint);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-typeset-a-color: var(--cr-accent-deep);

  --md-code-bg-color: #1a1a1a;
  --md-code-fg-color: #5cb030;
  --md-code-hl-color: rgba(92, 176, 48, 0.18);

  --md-footer-bg-color: #0d0d0d;
  --md-footer-bg-color--dark: #000000;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f0f0f;
  --md-default-fg-color: #faf9f6;
  --md-primary-fg-color: #0d0d0d;
  --md-accent-fg-color: #5cb030;
  --md-typeset-a-color: #5cb030;
  --md-code-bg-color: #1a1a1a;
  --md-code-fg-color: #5cb030;
}

/* Typography weight bump for headings (matches maker mockup) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  color: var(--cr-fg);
}

/* Header chrome — minimal light bar, no dark, hairline rule below */
.md-header {
  background-color: #ffffff;
  color: #1a1a1a;
  border-bottom: 1px solid var(--cr-border);
  box-shadow: none;
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.md-header__button,
.md-header__button.md-logo {
  color: #1a1a1a;
}

.md-header[data-md-state="shadow"] {
  box-shadow: 0 1px 0 var(--cr-border);
}

/* Tabs (top-level nav) — light, text-only */
.md-tabs {
  background-color: #ffffff;
  border-bottom: 1px solid var(--cr-border);
  color: #1a1a1a;
}

.md-tabs__link {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
  color: #1a1a1a;
  margin-top: 0;
  padding: 0.6rem 0.2rem;
}

.md-tabs__link:hover { opacity: 1; color: var(--cr-accent-deep); }
.md-tabs__link--active { opacity: 1; color: var(--cr-accent-deep); font-weight: 600; }

/* Search field inside the now-light header */
.md-search__form { background-color: #f3f3f1; border-radius: 4px; }
.md-search__form:hover { background-color: #ececea; }
.md-search__input { color: #1a1a1a; }
.md-search__input::placeholder { color: #888; }
.md-search__icon { color: #1a1a1a; }

/* Strip-down: hide the right TOC sidebar globally */
.md-sidebar--secondary { display: none !important; }
.md-content { max-width: 880px; margin: 0 auto; }

/* Tighter top header */
.md-header__inner { padding: 0.3rem 0.8rem; }
.md-header__button.md-logo svg,
.md-header__button.md-logo img { height: 1.4rem; width: auto; }
.md-header__title { font-size: 0.95rem; }

/* Inline code = green-on-black, mono — maker-mockup accent */
.md-typeset code {
  background-color: #1a1a1a;
  color: #5cb030;
  padding: 1px 6px;
  border-radius: 0;
  font-family: var(--cr-mono);
  font-size: 0.85em;
}

.md-typeset a code {
  color: #5cb030;
}

/* Code blocks */
.md-typeset pre > code {
  background-color: #1a1a1a;
  color: #faf9f6;
}

.md-typeset .highlight {
  border-left: 3px solid #5cb030;
}

/* Admonitions — flatten to maker style */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0;
  border-left-width: 3px;
}

/* Links — green underline on hover, no purple visited */
.md-typeset a {
  color: var(--cr-accent-deep);
}

.md-typeset a:hover {
  color: var(--cr-accent);
  text-decoration: underline;
}

/* Buttons / primary call-to-action */
.md-button--primary {
  background-color: #5cb030 !important;
  border-color: #5cb030 !important;
  color: #1a1a1a !important;
  font-family: var(--cr-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
}

.md-button--primary:hover {
  background-color: #1a1a1a !important;
  color: #5cb030 !important;
}

.md-button {
  border-radius: 0;
  font-family: var(--cr-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.md-button:hover {
  border-color: #5cb030;
  color: #5cb030;
}

/* Search */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: #faf9f6;
}

/* Footer */
.md-footer {
  background-color: #0d0d0d;
}

.md-footer-meta {
  background-color: #000000;
}

.md-social__link svg {
  fill: rgba(255, 255, 255, 0.6);
}

.md-social__link:hover svg {
  fill: #5cb030;
}

/* Tables — workshop look */
.md-typeset table:not([class]) {
  border: 1px solid var(--cr-border);
  border-radius: 0;
  font-size: 0.78rem;
}

.md-typeset table:not([class]) th {
  background-color: #1a1a1a;
  color: #faf9f6;
  font-family: var(--cr-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--cr-accent-tint);
}

/* List style — mirrors circuit.rocks/collections (simple text rows, single column) */
.cr-card-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.2rem 0;
  list-style: none;
  padding: 0;
  max-width: 640px;
}

.cr-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: transparent;
  border-radius: 0;
  text-decoration: none !important;
  transition: color 0.12s, border-color 0.12s;
}

.cr-card:last-child { border-bottom: 0; }

.cr-card:hover {
  color: var(--cr-accent-deep);
  border-bottom-color: rgba(92, 176, 48, 0.4);
}

.cr-card .cr-card-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: inherit;
  letter-spacing: 0;
}

.cr-card .cr-card-title::after {
  content: "\2192";
  color: var(--cr-fg-mute);
  font-size: 0.9em;
  transition: color 0.12s, transform 0.12s;
}

.cr-card:hover .cr-card-title { color: var(--cr-accent-deep); }
.cr-card:hover .cr-card-title::after { color: var(--cr-accent); transform: translateX(2px); }

.cr-card .cr-card-meta {
  display: inline;
  font-family: var(--cr-mono);
  font-size: 0.72rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

/* Section heading with "// in-stock today"-style mono right-aligned annotation */
.cr-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--cr-border);
  padding-bottom: 0.4rem;
  margin: 1.6rem 0 1rem;
}

.cr-section-head h2 {
  margin: 0 !important;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cr-section-head .cr-note {
  font-family: var(--cr-mono);
  font-size: 0.78rem;
  color: var(--cr-fg-mute);
}

.cr-section-head .cr-note strong {
  color: var(--cr-accent-deep);
  font-weight: 700;
}

/* "Filename" eyebrow badge used on doc pages */
.cr-filename {
  display: inline-block;
  background: #5cb030;
  color: #1a1a1a;
  font-family: var(--cr-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  margin: 0 0 0.6rem;
}

/* Spec table compact rows */
.cr-spec {
  font-family: var(--cr-mono);
  font-size: 0.78rem;
}

.cr-spec th {
  width: 35%;
  text-align: left;
}

/* Product header block — name + buy link + docs/learn callouts */
.cr-hero {
  border-left: 4px solid #5cb030;
  background: #ffffff;
  padding: 1rem 1.2rem;
  margin: 0 0 1.5rem;
}

.cr-hero .cr-hero-meta {
  font-family: var(--cr-mono);
  font-size: 0.72rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.cr-hero h1 {
  margin: 0 0 0.4rem !important;
  font-size: 1.9rem;
}

.cr-hero p {
  margin: 0;
  color: var(--cr-fg-soft);
}

.cr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}

.cr-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--cr-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid var(--cr-border-strong);
  background: #ffffff;
  color: var(--cr-fg);
  transition: background 0.15s, color 0.15s;
}

.cr-actions a:hover {
  background: #1a1a1a;
  color: #5cb030;
  border-color: #1a1a1a;
}

.cr-actions a.primary {
  background: #5cb030;
  border-color: #5cb030;
  color: #1a1a1a;
}

.cr-actions a.primary:hover {
  background: #1a1a1a;
  color: #5cb030;
  border-color: #1a1a1a;
}

/* File-download card grid (matches "Shop by brand" / catalog card density) */
.cr-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0 1.6rem;
}

.cr-file {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: var(--cr-bg);
  border: 1px solid #1a1a1a26;
  border-radius: 8px;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.cr-file:hover {
  border-color: var(--cr-accent);
  background: #ffffff;
  transform: translateY(-1px);
}

.cr-file .cr-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  background: #1a1a1a;
  color: #5cb030;
  font-family: var(--cr-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
}

.cr-file:hover .cr-file-icon {
  background: #5cb030;
  color: #1a1a1a;
}

.cr-file .cr-file-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.cr-file .cr-file-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cr-fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-file .cr-file-size {
  font-family: var(--cr-mono);
  font-size: 0.65rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cr-file:hover .cr-file-label {
  color: var(--cr-accent-deep);
}

/* Product PDP rail — Variant B: floated sticky right column */
.cr-pdp-rail {
  float: right;
  width: 290px;
  margin: 0 0 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-family: "Inter", system-ui, sans-serif;
}

@media (max-width: 76.1875em) {
  .cr-pdp-rail {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem 0;
  }
}

.cr-pdp-buy {
  display: block;
  background: var(--cr-accent);
  color: #1a1a1a !important;
  text-decoration: none !important;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.cr-pdp-buy:hover {
  background: #1a1a1a;
  color: var(--cr-accent) !important;
}

.cr-pdp-buy-eyebrow {
  display: block;
  font-family: var(--cr-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 2px;
}

.cr-pdp-buy-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.cr-pdp-panel {
  background: #ffffff;
  border: 1px solid var(--cr-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.cr-pdp-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--cr-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-accent-deep);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 0.55rem;
}

.cr-pdp-panel-title .cr-pdp-count {
  color: var(--cr-fg-mute);
  font-weight: 600;
}

.cr-pdp-files {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cr-pdp-files li {
  margin: 0 !important;
  padding: 0 !important;
}

.cr-pdp-file {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #ebebeb;
  text-decoration: none !important;
  color: var(--cr-fg) !important;
}

.cr-pdp-files li:last-child .cr-pdp-file {
  border-bottom: 0;
}

.cr-pdp-file:hover .cr-pdp-file-label {
  color: var(--cr-accent-deep);
}

.cr-pdp-file-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  background: #1a1a1a;
  color: var(--cr-accent);
  font-family: var(--cr-mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 4px;
}

.cr-pdp-file:hover .cr-pdp-file-ext {
  background: var(--cr-accent);
  color: #1a1a1a;
}

.cr-pdp-file-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cr-pdp-file-label {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.cr-pdp-file-meta {
  font-family: var(--cr-mono);
  font-size: 0.62rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Hero block — minimal, no card chrome, just text */
.cr-hero {
  background: transparent;
  border: 0;
  border-left: 0;
  padding: 0;
  margin: 0 0 1.2rem;
}

.cr-hero h1 {
  font-size: 1.7rem !important;
  margin: 0 0 0.3rem !important;
}

.cr-hero-meta {
  font-family: var(--cr-mono);
  font-size: 0.7rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.cr-hero p { color: var(--cr-fg-soft); margin: 0; }

/* Badges — drop to inline subtle */
.cr-pdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0.5rem 0 0;
  font-family: var(--cr-mono);
  font-size: 0.7rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.02em;
}

.cr-pdp-badge {
  display: inline;
  background: transparent !important;
  color: var(--cr-fg-mute) !important;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  text-transform: none;
}

.cr-pdp-badge::before { content: "// "; color: var(--cr-accent-deep); }

/* Schematic block styling */
.cr-schematic {
  border: 1px solid var(--cr-border);
  padding: 0.8rem;
  background: #ffffff;
  margin: 1.2rem 0;
}

.cr-schematic img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.cr-schematic .cr-caption {
  font-family: var(--cr-mono);
  font-size: 0.7rem;
  color: var(--cr-fg-mute);
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 0.6rem;
}

/* Sidebar nav weight (titles) */
.md-nav__title {
  font-weight: 600;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cr-fg-mute);
  padding: 0.5rem 0.6rem;
  background: transparent !important;
  box-shadow: none !important;
}

/* Drop top "Home" breadcrumb-style label inside left nav on desktop */
.md-nav--primary > .md-nav__title { display: none; }
.md-nav__item--section > .md-nav__link { font-weight: 600; }

/* Tighten left nav links */
.md-nav__link { padding: 0.25rem 0; }

.md-nav__link--active,
.md-nav__link--active code {
  color: var(--cr-accent-deep);
}

/* Sale orange used for "Out of stock" / "Discontinued" badges */
.cr-badge-sale {
  display: inline-block;
  background: var(--cr-sale);
  color: #ffffff;
  font-family: var(--cr-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* Make sure printed/external link icon doesn't break maker minimalism */
.md-typeset a.external::after {
  content: " ↗";
  color: var(--cr-fg-mute);
}