/* --- Orq brand fonts (self-hosted, vendored from orquesta-web) ----------
   Body = Avio Sans, headings = Kurrent, code = Kurrent Mono. `theme.font:
   false` in mkdocs.yml stops Material loading Google Fonts so these win. */
@font-face {
  font-family: "Avio Sans";
  src: url("fonts/AvioSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avio Sans";
  src: url("fonts/AvioSans-RegularItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Avio Sans";
  src: url("fonts/AvioSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avio Sans";
  src: url("fonts/AvioSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avio Sans";
  src: url("fonts/AvioSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kurrent";
  src: url("fonts/ESKlarheitKurrent-Md.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kurrent";
  src: url("fonts/ESKlarheitKurrent-Smbd.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kurrent Mono";
  src: url("fonts/ESKlarheitKurrentMono-Md.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
:root {
  --md-text-font-family: "Avio Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font-family: "Kurrent Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Headings in Kurrent (brand display face); body stays Avio Sans. */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6,
.md-header__title { font-family: "Kurrent", var(--md-text-font-family); }

/* Orq brand palette + design language (see /DESIGN.md).
   Rule: teal carries the interface, orange punctuates — one accent per view. */
:root {
  --orq-teal: #025558;
  --orq-teal-light: #299d8f;
  --orq-teal-dark: #013a3c;
  --orq-orange: #ff8f34;
  --orq-orange-deep: #df5325; /* orange for fills/buttons (white text on top) */
  --orq-orange-text: #c4421a; /* orange for TEXT on light surfaces — ~4.6:1 AA */
  --orq-ink: #25232e;
  --orq-sand: #f9f8f6;
}

/* Light scheme: teal identity, orange accent. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--orq-teal);
  --md-primary-fg-color--light: var(--orq-teal-light);
  --md-primary-fg-color--dark: var(--orq-teal-dark);
  --md-accent-fg-color: var(--orq-orange-deep); /* hover accent, AA on white */
  --md-typeset-a-color: var(--orq-teal);
  --md-code-bg-color: var(--orq-sand);
}

/* Dark scheme: lighten teal so it stays legible on slate. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--orq-teal-light);
  --md-primary-fg-color--light: #3db8a8;
  --md-primary-bg-color: #ffffff; /* text/icons on the primary header */
  --md-accent-fg-color: var(--orq-orange);
  --md-typeset-a-color: var(--orq-teal-light); /* teal-light, not blinding cyan */
}

/* Headings in brand teal (light only — slate handles its own contrast). */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: var(--orq-teal);
}

/* Widen the content column (Material default is 61rem). */
.md-grid { max-width: 70rem; }

/* --- Typography scale -------------------------------------------------
   Material defaults to 125% root, upscaling to 150% on wide screens —
   reads oversized. Pin body to ~16px, gentle wide-screen bump. */
html { font-size: 100%; }
@media screen and (min-width: 100em) { html { font-size: 106.25%; } }
@media screen and (min-width: 125em) { html { font-size: 112.5%; } }
.md-typeset { font-size: 0.98rem; }           /* ~15.7px body — 15% up from 0.85rem */
.md-typeset h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 700; }
.md-typeset h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.md-typeset h3 { font-size: 1.1rem; }
/* Material pins admonitions/tables/footnotes to a fixed 0.64rem that ignores the
   body bump above. Pull them to the exact body size so all prose reads uniform. */
.md-typeset .admonition,
.md-typeset details,
.md-typeset table:not([class]),
.md-typeset .footnote { font-size: 0.98rem; }

/* Sidebar nav + TOC: ~content size, a touch bigger so the menu reads as chrome. */
.md-nav { font-size: 1rem; }
.md-nav__title { font-size: 1rem; }
.md-nav__link { font-size: 1rem; }
.md-tabs__link { font-size: 0.95rem; }

/* --- Logo: circular mark, square aspect ------------------------------ */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.6rem;
  width: auto;
}

/* --- Grid cards: teal field, orange spark on hover -------------------
   Design language: cards are neutral/teal at rest; orange only appears
   as the single hover accent (left edge + arrow). */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 1rem 1.1rem;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--orq-orange);
  box-shadow: -3px 0 0 0 var(--orq-orange), 0 2px 12px rgba(2, 85, 88, 0.1);
  transform: translateY(-2px);
}
/* Card title icon in teal. */
.md-typeset .grid.cards .lg.middle {
  color: var(--orq-teal);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards .lg.middle {
  color: var(--orq-teal-light);
}
/* The :octicons-arrow-right: "go" links — teal at REST (calm field), orange
   only on hover/focus, so each card shows its one accent only when engaged
   (DESIGN.md: one orange spark per view, orange is the hover accent). */
.md-typeset .grid.cards a:last-child {
  color: var(--orq-teal);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards a:last-child {
  color: var(--orq-teal-light);
}
.md-typeset .grid.cards > ul > li:hover a:last-child,
.md-typeset .grid.cards a:last-child:hover,
.md-typeset .grid.cards a:last-child:focus {
  color: var(--orq-orange-text);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover a:last-child {
  color: var(--orq-orange);
}

/* --- Links: teal, orange on hover (one consistent interaction) ------- */
.md-typeset a:hover { color: var(--md-accent-fg-color); }

/* --- "Get Started" primary button: the one orange CTA --------------- */
/* Hero buttons: Material's default is oversized — tighten. */
.md-typeset .md-button {
  font-size: 0.7rem;
  padding: 0.35em 0.9em;
}
.md-typeset .md-button--primary {
  background-color: var(--orq-orange-deep);
  border-color: var(--orq-orange-deep);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--orq-orange);
  border-color: var(--orq-orange);
}

/* --- Termynal animated terminal ------------------------------------- */
/* Control links (fast-forward / restart) ship a periwinkle default that's
   off-palette — recolor to brand teal-light. */
[data-terminal] a,
[data-termynal] a,
.termynal-control {
  color: var(--orq-teal-light) !important;
}
/* Kill the tall reserved void: let the block size to its content instead of
   the JS-injected min-height, and tighten padding. */
[data-termynal] {
  min-height: 0 !important;
  padding: 2.4rem 1.1rem 1.1rem !important;
}
/* Dark mode: give the terminal an edge so it doesn't merge into the page. */
[data-md-color-scheme="slate"] [data-termynal] {
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* --- Search: ⌘K hint badge (binding lives in js/keyboard.js) --------- */
.md-search__form { position: relative; }
.md-search__form::after {
  content: "⌘K";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0.2rem;
  padding: 0.15rem 0.32rem;
  pointer-events: none;
  opacity: 0.75;
}
.md-search__form:focus-within::after { display: none; } /* hide once typing */
@media screen and (max-width: 76.1875em) {
  .md-search__form::after { display: none; }            /* mobile uses overlay */
}

/* ponytail: NOT overriding Material's sidebar-collapse breakpoint (76.25em).
   A CSS-only override leaves a broken half-state — drawer-mode and sidebar-mode
   render different DOM. Widen the window past ~1220px for the permanent sidebar. */

/* Dashboard guide screenshots — subtle framing so captures sit apart from prose. */
.dashboard-shot {
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  margin: 1em 0;
}