/* EKKA docs — brand styles.
   Ground is LIGHT (paper); navy is ink; orange is the accent; code = dark terminal. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&display=swap');

:root {
  --ekka-paper: #ebebeb;
  --ekka-card: #ffffff;
  --ekka-ink: #1b3d75;
  --ekka-body: #3a4a66;
  --ekka-muted: #565f78;
  --ekka-line: #d6d9e0;
  --ekka-orange: #e07a53;
  --ekka-orange-dark: #cf6a44;
  --ekka-term: #0e1426;
  --ekka-term-line: #243047;
  --ekka-term-fg: #c7cede;
  --ekka-term-muted: #8b94ac;
  --ekka-term-ok: #5ad29a;
  --ekka-term-deny: #f0a3a3;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ekka-ink);
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--ekka-orange);
  --md-accent-fg-color--transparent: rgba(224, 122, 83, 0.1);
  --md-typeset-a-color: var(--ekka-orange-dark);
  --md-default-bg-color: var(--ekka-paper);
  /* Footer: white with brand text (Material defaults to a dark bar). */
  --md-footer-bg-color: #ffffff;
  --md-footer-bg-color--dark: #ffffff;
  --md-footer-fg-color: var(--ekka-body);
  --md-footer-fg-color--light: var(--ekka-muted);
  --md-footer-fg-color--lighter: var(--ekka-muted);
}

/* Light ground (paper) with a white readable content column. */
.md-main { background-color: var(--ekka-paper); }

/* Header: white with navy wordmark + icons (matches the marketing site). */
.md-header,
.md-tabs {
  background-color: #ffffff;
  color: var(--ekka-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--ekka-line);
}
.md-header__title { display: none; }
.md-header__button,
.md-header__option .md-icon,
.md-header [type="checkbox"] + .md-icon { color: var(--ekka-ink); }
.md-header__button.md-logo { margin-right: 0.4rem; padding: 0; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.3rem; width: auto; }

.md-search__input {
  background-color: #ffffff;
  border: 1px solid var(--ekka-line);
  color: var(--ekka-ink);
}
.md-search__input::placeholder { color: var(--ekka-muted); }
.md-search__icon,
.md-search__options .md-icon { color: var(--ekka-ink); }

/* Headings: Montserrat, navy ink. 700, not 800 — at 800 next to Plex body
   every heading shouts equally and hierarchy dies; only the hero H1 keeps 800. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ekka-ink);
}

/* H1 tracks tighter than the smaller headings — heavy Montserrat at title
   size looks inflated at -0.01em. */
.md-typeset h1 { letter-spacing: -0.02em; }

/* Reading measure: cap top-level prose near 80 characters. In rem so it
   scales with Material's viewport-stepped root font (125%/137.5%/150%):
   32rem = 40em of the 0.8rem body at every step. Headings, tables, and
   code stay full width on purpose. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol {
  max-width: 32rem;
}

.md-nav__link--active,
.md-nav__link:hover { color: var(--ekka-orange); }

/* Hero: LIGHT (never a navy box). Eyebrow → navy H1 → lead, on the page ground. */
.md-typeset .ekka-hero {
  margin: 0 0 2rem;
  padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--ekka-line);
}
.md-typeset .ekka-hero > :first-child { margin-top: 0; }
.md-typeset .ekka-hero h1 {
  /* 2em = Material's own H1 size, so hero pages and plain pages (pricing has
     no hero wrapper) carry the SAME title. The old 2.1rem was homepage volume
     on a reading page. */
  font-size: 2em;
  line-height: 1.12;
  margin: 0.35rem 0 0.6rem;
}
.md-typeset .ekka-eyebrow {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ekka-orange);
}
.md-typeset .ekka-lead {
  /* Body size, muted tone. 0.92rem sat between body and H2 — too close to
     body to look intentional, too far to look the same. */
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--ekka-muted);
  max-width: 32rem;
}
.md-typeset .ekka-hero em,
.md-typeset .ekka-hero strong { color: var(--ekka-ink); font-style: normal; font-weight: 700; }

/* Cards: white, hairline border, rounded; the "prove" row gets an orange top rule. */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--ekka-line);
  border-radius: 12px;
  background: var(--ekka-card);
}
.md-typeset .ekka-prove.grid.cards > ul > li {
  border-top: 3px solid var(--ekka-orange);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.md-typeset .ekka-prove.grid.cards > ul > li:hover {
  box-shadow: 0 8px 22px rgba(27, 61, 117, 0.10);
  transform: translateY(-2px);
}
.md-typeset .grid.cards > ul > li > p:first-child strong,
.md-typeset .grid.cards > ul > li > p:first-child a {
  color: var(--ekka-ink);
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* Code = dark terminal on the light page (the brand's signature block). */
.md-typeset .highlight {
  background: var(--ekka-term);
  border: 1px solid var(--ekka-term-line);
  border-radius: 10px;
  /* Tighter than the theme default so a command and its output read as ONE
     group, not a stack of disconnected fat cards. */
  margin: 0.7rem 0;
  position: relative;
}
/* Adjacent blocks (a command directly followed by its output) sit close. */
.md-typeset .highlight + .highlight { margin-top: 0.4rem; }
.md-typeset .highlight > pre,
.md-typeset .highlight pre > code { background: transparent; }
.md-typeset .highlight > pre { margin: 0; padding: 0; }
/* The <code> line is the horizontal scroller: a long command scrolls INSIDE
   the block instead of clipping at the rounded edge. Right padding clears the
   copy button so the first line never hides under it. */
.md-typeset .highlight > pre > code {
  display: block;
  padding: 0.8rem 2.9rem 0.8rem 1.1rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.md-typeset .highlight code { color: var(--ekka-term-fg); }
/* Thin, on-brand scrollbar so an overflowing line reads as "scrollable",
   not "cut off". */
.md-typeset .highlight > pre > code::-webkit-scrollbar { height: 8px; }
.md-typeset .highlight > pre > code::-webkit-scrollbar-track { background: transparent; }
.md-typeset .highlight > pre > code::-webkit-scrollbar-thumb {
  background: var(--ekka-term-line);
  border-radius: 8px;
}
.md-typeset .highlight > pre > code:hover::-webkit-scrollbar-thumb {
  background: var(--ekka-term-muted);
}
.md-typeset .highlight span { color: var(--ekka-term-fg); }
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .cp { color: var(--ekka-term-muted); font-style: italic; }
.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .sb { color: var(--ekka-term-ok); }
.md-typeset .highlight .gp,
.md-typeset .highlight .nb { color: var(--ekka-orange); }
/* Copy button: legible light icon on the dark terminal, no box at rest. */
.md-typeset .highlight .md-clipboard {
  color: rgba(199, 206, 222, 0.55);
  background: transparent;
}
.md-typeset .highlight .md-clipboard:hover,
.md-typeset .highlight .md-clipboard:focus {
  color: var(--ekka-term-fg);
  background: rgba(199, 206, 222, 0.14);
}
.md-typeset .highlight .filename { color: var(--ekka-term-muted); }

/* Inline code (in prose) stays a light chip so it reads inside body text. */
.md-typeset :not(pre) > code {
  background: #e4e7ee;
  color: var(--ekka-ink);
  border-radius: 4px;
}

/* Content tabs (the plain-English / engineers / auditors lenses): orange active. */
.md-typeset .tabbed-labels > label { font-weight: 700; }
.md-typeset .tabbed-set > input:checked + label {
  color: var(--ekka-orange);
  border-color: var(--ekka-orange);
}

/* Admonitions + collapsibles on-brand (Material's green/blue/teal are off-brand).
   Default = navy; tips = orange; danger/warning keep their semantic colors. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-left-width: 4px;
  border-color: var(--ekka-ink);
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary { background-color: rgba(27, 61, 117, 0.07); }
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--ekka-ink); }

.md-typeset .tip,
.md-typeset details.tip { border-color: var(--ekka-orange); }
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary { background-color: rgba(224, 122, 83, 0.10); }
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before { background-color: var(--ekka-orange); }

/* Keep semantic colors for genuine warnings/errors. */
.md-typeset .warning,
.md-typeset details.warning { border-color: #d9822b; }
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary { background-color: rgba(217, 130, 43, 0.10); }
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before { background-color: #d9822b; }
.md-typeset .danger,
.md-typeset details.danger { border-color: var(--ekka-danger, #d92d20); }
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary { background-color: rgba(217, 45, 32, 0.10); }
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before { background-color: #d92d20; }

/* Markdown tables: full-width, horizontally scrollable on small screens. */
.md-typeset .md-typeset__scrollwrap { margin: 0; }
/* Body size — Material's 0.64rem default renders tables 20% smaller than the
   prose around them, which reads as broken, not designed. */
.md-typeset table:not([class]) {
  border-color: var(--ekka-line);
  font-size: 0.8rem;
  display: table;
  width: 100%;
}
/* Full column width — Material shrink-wraps every table in an inline-block
   scroll wrapper, so the width must be forced on the WRAPPER, not the table. */
.md-typeset .md-typeset__table { display: block; width: 100%; padding: 0; }
.md-typeset .md-typeset__table table { width: 100%; }
/* Kill the wrapper's negative side margins + padding pair — with a full-width
   table it just reads as a left indent against the headings. */
.md-typeset .md-typeset__scrollwrap { margin: 1em 0; }
/* Tighter rows: Material's 0.9375em cell padding scaled up with the larger
   font and made every row read as a banner. */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td { padding: 0.55em 1em; }
.md-typeset table:not([class]) th { background: rgba(27, 61, 117, 0.06); color: var(--ekka-ink); }

/* Footer: light, brand — top hairline, mono uppercase copyright (matches brand site). */
.md-footer { background-color: #ffffff; }
.md-footer-meta { background-color: #ffffff; border-top: 1px solid var(--ekka-line); }
.md-footer-meta__inner { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.md-footer-copyright {
  color: var(--ekka-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.md-footer-social__link,
.md-footer-meta .md-icon { color: var(--ekka-muted); }

/* Mobile header: show the wordmark (Material hides it < lg) and push the
   hamburger + search to the right (logo left), matching the brand site. */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo { display: inline-flex !important; margin-right: auto; }
  .md-header__button.md-logo img { height: 1.2rem; }
}

@media screen and (max-width: 44.9em) {
  .md-typeset .ekka-hero h1 { font-size: 1.6em; }
}