/* =========================================================================
   DynVision — Diátaxis visual identity
   -------------------------------------------------------------------------
   Palette philosophy: muted, earthy, brand-adjacent. The header colours are
   desaturated natural tones that harmonise with the two brand hues — amber
   #CF8A2A and deep purple #672E6B — rather than shrill primaries. All colours
   are defined in HSL for readable, tunable hue/saturation/lightness.

   Brand hues
     amber   hsl(35, 66%, 49%)   #CF8A2A  — global link / hover / emphasis
     purple  hsl(296, 40%, 30%)  #672E6B  — secondary accent (badges, borders)

   Default header (Home / About — no Diátaxis quadrant)
     moss    hsl(143, 23%, 22%)  #2C4636  — dark, organic moss-green

   Diátaxis quadrant headers (each distinct so users know their "mode")
     Tutorials      sage-green  hsl(142, 22%, 39%)  #4E7A5E  (learning)
     How-to Guides  warm ochre  hsl(34, 37%, 39%)   #8A6A3F  (task)
     Reference      slate       hsl(212, 20%, 36%)  #4A5B6E  (information)
     Explanation    deep teal   hsl(171, 30%, 32%)  #3A6B64  (understanding)

   All header colours carry white text and pass WCAG AA (>=4.5:1 contrast).

   The body receives a `data-diataxis` attribute set by overrides/main.html
   (based on the page URL). All section theming keys off that attribute, so it
   works regardless of the on-disk directory names.
   ========================================================================= */

:root {
  /* --- Brand hues -------------------------------------------------------- */
  --dv-brand: hsl(35, 66%, 49%);          /* amber  #CF8A2A */
  --dv-brand-dark: hsl(35, 71%, 38%);     /* deeper amber #A86E1C — link text on light bg (AA) */
  --dv-brand-purple: hsl(296, 40%, 30%);  /* purple #672E6B — secondary accent */
  --dv-brand-purple-soft: hsla(296, 40%, 30%, 0.10);

  /* --- Default header (no quadrant): dark moss-green --------------------- */
  --dv-default: hsl(143, 23%, 22%);       /* #2C4636 */
  --dv-default-dark: hsl(143, 24%, 17%);  /* #223529 — hover/darker variant */

  /* --- Diátaxis quadrant headers (muted, earthy) ------------------------ */
  --dv-tutorial: hsl(142, 22%, 39%);      /* sage-green #4E7A5E */
  --dv-tutorial-dark: hsl(142, 24%, 31%); /* #3E6149 */
  --dv-howto: hsl(34, 37%, 39%);          /* warm ochre #8A6A3F */
  --dv-howto-dark: hsl(34, 40%, 31%);     /* #6E5330 */
  --dv-reference: hsl(212, 20%, 36%);     /* slate #4A5B6E */
  --dv-reference-dark: hsl(212, 22%, 29%);/* #3A4859 */
  --dv-explanation: hsl(171, 30%, 32%);   /* deep teal #3A6B64 */
  --dv-explanation-dark: hsl(171, 32%, 25%); /* #2C5450 */
}

/* -------------------------------------------------------------------------
   0. Global brand colours (all quadrants)
   - Header (primary) defaults to dark moss-green; quadrants override below.
   - Links use a slightly deeper amber for readability on white;
     hover/accent decoration keeps the bright brand amber.
   ------------------------------------------------------------------------- */
:root {
  /* Default primary (header/footer) — used on Home, About, and any page
     without a Diátaxis quadrant. Fed by `primary: custom` in mkdocs.yml. */
  --md-primary-fg-color: var(--dv-default);
  --md-primary-fg-color--light: var(--dv-default);
  --md-primary-fg-color--dark: var(--dv-default-dark);

  /* Accent (hover, active, focus) — bright brand amber. */
  --md-accent-fg-color: var(--dv-brand);
  --md-accent-fg-color--transparent: hsla(35, 66%, 49%, 0.1);

  /* Link text — deeper amber for AA contrast on the light background. */
  --md-typeset-a-color: var(--dv-brand-dark);
}

/* Dark scheme (slate): Material's slate scheme ships blue-ish primary/accent
   defaults — re-point them to the brand palette so nothing renders blue.
   The bright brand amber reads well on dark backgrounds (contrast ~5.6:1). */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--dv-brand);
  --md-accent-fg-color: var(--dv-brand);
  --md-accent-fg-color--transparent: hsla(35, 66%, 49%, 0.12);
  --md-primary-fg-color: var(--dv-default);
  --md-primary-fg-color--light: var(--dv-default);
  --md-primary-fg-color--dark: var(--dv-default-dark);

  /* Lightened purple so the secondary accent stays visible on dark. */
  --dv-brand-purple: hsl(296, 40%, 58%);
  --dv-brand-purple-soft: hsla(296, 40%, 58%, 0.16);
}

/* -------------------------------------------------------------------------
   1. Per-section header colour
   Override Material's primary header variable per quadrant. The `body[...]`
   selector out-specifies both `:root` and the `[data-md-color-scheme]` blocks,
   so these apply identically in light and dark mode. We set --light as well so
   the slate scheme cannot fall back to its blue default anywhere.
   ------------------------------------------------------------------------- */
body[data-diataxis="tutorial"] {
  --md-primary-fg-color: var(--dv-tutorial);
  --md-primary-fg-color--light: var(--dv-tutorial);
  --md-primary-fg-color--dark: var(--dv-tutorial-dark);
}
body[data-diataxis="howto"] {
  --md-primary-fg-color: var(--dv-howto);
  --md-primary-fg-color--light: var(--dv-howto);
  --md-primary-fg-color--dark: var(--dv-howto-dark);
}
body[data-diataxis="reference"] {
  --md-primary-fg-color: var(--dv-reference);
  --md-primary-fg-color--light: var(--dv-reference);
  --md-primary-fg-color--dark: var(--dv-reference-dark);
}
body[data-diataxis="explanation"] {
  --md-primary-fg-color: var(--dv-explanation);
  --md-primary-fg-color--light: var(--dv-explanation);
  --md-primary-fg-color--dark: var(--dv-explanation-dark);
}

/* -------------------------------------------------------------------------
   2. Diátaxis breadcrumb badge (rendered by overrides/partials)
   ------------------------------------------------------------------------- */
.dv-quadrant-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18em 0.7em;
  border-radius: 1em;
  margin-bottom: 1rem;
  color: #fff;
}
.dv-quadrant-badge svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.dv-quadrant-badge--tutorial { background: var(--dv-tutorial); }
.dv-quadrant-badge--howto { background: var(--dv-howto); }
.dv-quadrant-badge--reference { background: var(--dv-reference); }
.dv-quadrant-badge--explanation { background: var(--dv-explanation); }

/* Accent the left border of the content area per section */
body[data-diataxis] .md-content__inner { position: relative; }
body[data-diataxis="tutorial"] .md-content__inner { border-top: 3px solid var(--dv-tutorial); }
body[data-diataxis="howto"] .md-content__inner { border-top: 3px solid var(--dv-howto); }
body[data-diataxis="reference"] .md-content__inner { border-top: 3px solid var(--dv-reference); }
body[data-diataxis="explanation"] .md-content__inner { border-top: 3px solid var(--dv-explanation); }

/* -------------------------------------------------------------------------
   3. Per-section layout adjustments
   - Tutorials: single-column, immersive (hide the right-hand TOC, widen).
   - Explanation: reading typeface + roomier line height.
   - Reference: tighter, denser tables.
   ------------------------------------------------------------------------- */

/* Tutorials: hide the secondary TOC for a linear, single-column flow. */
body[data-diataxis="tutorial"] .md-sidebar--secondary {
  display: none;
}
body[data-diataxis="tutorial"] .md-content {
  max-width: 48rem;
  margin: 0 auto;
}

/* Explanation: extra whitespace for readability (same Inter font as rest). */
body[data-diataxis="explanation"] .md-content__inner {
  line-height: 1.85;
}
body[data-diataxis="explanation"] .md-content__inner p {
  max-width: 42rem;
}

/* Reference: denser tables, no italic conversational filler emphasis. */
body[data-diataxis="reference"] .md-typeset table:not([class]) {
  font-size: 0.74rem;
}
body[data-diataxis="reference"] .md-typeset table:not([class]) th {
  background: var(--dv-reference);
  color: #fff;
}

/* -------------------------------------------------------------------------
   4. Callout components ("Goal", "API Spec") layered on Material admonitions
   Usage in Markdown:
     !!! goal "Goal"
     !!! api-spec "API"
   "tip", "warning", "note" are built-in Material admonition types.
   ------------------------------------------------------------------------- */
:root {
  --md-admonition-icon--goal: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></svg>');
  --md-admonition-icon--api-spec: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4Zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4Z"/></svg>');
}

.md-typeset .admonition.goal,
.md-typeset details.goal {
  border-color: var(--dv-howto);
}
.md-typeset .goal > .admonition-title,
.md-typeset .goal > summary {
  background-color: hsla(35, 66%, 49%, 0.12);
}
.md-typeset .goal > .admonition-title::before,
.md-typeset .goal > summary::before {
  background-color: var(--dv-howto);
  -webkit-mask-image: var(--md-admonition-icon--goal);
          mask-image: var(--md-admonition-icon--goal);
}

.md-typeset .admonition.api-spec,
.md-typeset details.api-spec {
  border-color: var(--dv-reference);
}
.md-typeset .api-spec > .admonition-title,
.md-typeset .api-spec > summary {
  background-color: hsla(212, 20%, 36%, 0.10);
  font-family: "Fira Code", monospace;
}
.md-typeset .api-spec > .admonition-title::before,
.md-typeset .api-spec > summary::before {
  background-color: var(--dv-reference);
  -webkit-mask-image: var(--md-admonition-icon--api-spec);
          mask-image: var(--md-admonition-icon--api-spec);
}

/* -------------------------------------------------------------------------
   5. Tutorial Previous/Next buttons (.md-footer already provides these;
   we just emphasise them in the tutorial section).
   ------------------------------------------------------------------------- */
body[data-diataxis="tutorial"] .md-footer__inner {
  border-top: 2px solid var(--dv-tutorial);
}

/* -------------------------------------------------------------------------
   5b. Secondary brand accent — deep purple #672E6B
   Used sparingly for small UI touches so both brand hues are present without
   competing with the amber link accent or the earthy quadrant headers:
     - a thin purple keyline beneath the header (pairs with the quadrant colour)
     - ==highlighted== text (pymdownx.mark)
     - the active table-of-contents marker
   ------------------------------------------------------------------------- */
.md-header {
  border-bottom: 2px solid var(--dv-brand-purple);
}

.md-typeset mark {
  background-color: var(--dv-brand-purple-soft);
  box-shadow: 0 0 0 0.08em var(--dv-brand-purple-soft);
}

/* Active heading marker in the right-hand table of contents. */
.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  color: var(--dv-brand-purple);
}
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--dv-brand-purple);
}

/* -------------------------------------------------------------------------
   6. Accessibility: ensure focus rings remain visible (WCAG 2.1 — 2.4.7)
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.md-nav__link:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   7. Header logo sizing
   ------------------------------------------------------------------------- */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.2rem;
}

/* -------------------------------------------------------------------------
   8. Header wordmark
   site_name is set to "DynVision" for SEO (<title>, og:site_name), but the
   logo already contains the wordmark — hide the redundant header text so the
   visual header stays logo-only. The <title>/metadata are unaffected.
   ------------------------------------------------------------------------- */
.md-header__title .md-header__topic:first-child .md-ellipsis {
  visibility: hidden;
}