/* Asdamir brand palette — match asdamir.com (teal #0F766E primary, gold #B8860B accent). */
:root {
  --md-primary-fg-color:        #0F766E;
  --md-primary-fg-color--light: #14857b;
  --md-primary-fg-color--dark:  #0c5e57;
  --md-accent-fg-color:         #B8860B;
  --asd-line:                   rgba(16, 24, 40, .10);
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0F766E;
  --md-accent-fg-color:         #d4af52;
  --asd-line:                   rgba(255, 255, 255, .12);
}

/* ── Header — slim & light, like asdamir.com (no full teal banner) ─────────── */
.md-header,
.md-tabs {
  background-color: rgba(255, 255, 255, .85);
  color: var(--md-default-fg-color);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
/* No hard divider lines (the old "two strips"). Header + tabs read as ONE block, separated
   from the content by a single soft drop-shadow — like asdamir.com (subtle depth, no line). */
.md-header { box-shadow: none; }
.md-tabs   { box-shadow: 0 3px 10px -4px rgba(16, 24, 40, .12); }
/* On smaller screens the tabs row is hidden → the header itself carries the soft shadow. */
@media screen and (max-width: 76.1875em) {
  .md-header { box-shadow: 0 3px 10px -4px rgba(16, 24, 40, .12); }
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: rgba(21, 22, 28, .88);
  color: var(--md-default-fg-color);
}
[data-md-color-scheme="slate"] .md-tabs { box-shadow: 0 3px 12px -4px rgba(0, 0, 0, .55); }
@media screen and (max-width: 76.1875em) {
  [data-md-color-scheme="slate"] .md-header { box-shadow: 0 3px 12px -4px rgba(0, 0, 0, .55); }
}
/* Title + icons inherit the (now dark) header text colour. */
.md-header__title { color: inherit; font-weight: 700; }
.md-header__button { color: inherit; }
/* Search field on a light header: subtle filled pill instead of translucent-on-teal. */
.md-search__form { background-color: rgba(16, 24, 40, .05); }
.md-search__form:hover { background-color: rgba(16, 24, 40, .08); }
[data-md-color-scheme="slate"] .md-search__form { background-color: rgba(255, 255, 255, .06); }
.md-search__input,
.md-search__input::placeholder { color: var(--md-default-fg-color--light); }
/* Tabs: muted by default, brand teal when active/hovered. */
.md-tabs__link { color: inherit; opacity: .72; }
.md-tabs__link--active,
.md-tabs__link:hover { color: var(--md-primary-fg-color); opacity: 1; }

/* ── Layout & readability ──────────────────────────────────────────────────── */
/* Use more horizontal space — Material's default content column leaves big
   whitespace on wide screens. Wider grid, but the content keeps a readable
   measure (the nav + ToC flank it, so lines stay ~80-90 chars). */
.md-grid { max-width: 1440px; }

/* Wide preformatted blocks (ASCII diagrams, long code lines) must SCROLL,
   never wrap or get clipped. */
.md-typeset pre { overflow-x: auto; }
.md-typeset pre > code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.md-typeset__table { overflow-x: auto; }

/* ── Search box: constant width + visible magnifier (desktop inline search). ── */
/* The box grows via .md-search__inner (11.7rem → 23.4/34.4rem on focus) — pin it so it
   stays a fixed, slightly larger size and never jumps. (Mobile overlay search untouched.) */
/* Resting search bar a touch wider than Material's default — but DON'T clamp the focused
   width: the results dropdown shares this element, so a fixed-narrow value clipped the
   result text. Letting it expand on focus keeps the results panel full-width & readable. */
@media screen and (min-width: 60em) {
  .md-search__inner { width: 18rem; }
}
/* Magnifier: Material colours it with --md-primary-bg-color (white) — invisible on our light
   header. Force a visible, scheme-aware tone in both modes. */
.md-header .md-search__icon,
.md-search__icon { color: var(--md-default-fg-color--light); }