/* WattStack Help KB — brand stylesheet for MkDocs Material
 * Implements the developer-docs token set from wattstack-brand/css/brand.css
 * and mirrors wattstack-cloud-api/interactive-docs/app/styles/app.css.
 *
 * Loaded via extra_css in the generated mkdocs-kb.yml (no Google Fonts —
 * Inter is self-hosted via @font-face below for full offline reproducibility).
 */

/* ---------------------------------------------------------------------------
 * Self-hosted Inter (variable font — single file covers all weights)
 * Source: rsms.me/inter — InterVariable.woff2 committed at docs/public/help/theme/Inter.woff2
 * and copied to kb-docs/assets/ by scripts/build-kb.mjs at build time.
 * --------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("Inter.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
 * Custom properties — brand tokens
 * --------------------------------------------------------------------------- */
:root {
  /* Electric Blue */
  --ws-blue: #0066ff;
  --ws-blue-hover: #0052cc;
  --ws-blue-light: #e6f0ff;

  /* Midnight Navy */
  --ws-navy: #0a1428;

  /* Charcoal */
  --ws-charcoal: #141419;

  /* Slate (muted text) */
  --ws-slate: #788291;

  /* Cool Silver (borders) */
  --ws-silver: #d7dce6;

  /* Code surface */
  --ws-code-bg: #f5f7fb;
}

/* ---------------------------------------------------------------------------
 * MkDocs Material variable overrides (light scheme only — no dark toggle for
 * the public KB; single light palette matches the developer-docs reference)
 * --------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--ws-blue);
  --md-primary-fg-color--light: var(--ws-blue-light);
  --md-primary-fg-color--dark: var(--ws-blue-hover);
  --md-accent-fg-color: var(--ws-blue);
  --md-default-fg-color: var(--ws-charcoal);
  --md-default-fg-color--light: var(--ws-slate);
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #f5f7fb;
  --md-code-bg-color: var(--ws-code-bg);
  --md-typeset-a-color: var(--ws-blue);
}

/* ---------------------------------------------------------------------------
 * Typography — Inter for body/UI, ui-monospace stack for code
 * --------------------------------------------------------------------------- */
body,
.md-typeset {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ws-charcoal);
}

.md-typeset code,
.md-typeset pre,
code,
pre,
kbd {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Fira Mono", "Consolas",
    monospace;
}

/* ---------------------------------------------------------------------------
 * Header — Midnight Navy topbar, 56px height
 * --------------------------------------------------------------------------- */
.md-header {
  background-color: var(--ws-navy) !important;
  height: 56px;
}

.md-header__inner {
  height: 56px;
}

.md-header__title {
  color: #ffffff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

/* Logo sizing within the 56px header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 28px;
  width: auto;
  margin-right: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Navigation
 * --------------------------------------------------------------------------- */
/* Active nav link — Electric Blue */
.md-nav__link--active,
.md-nav__link:is([aria-current]) {
  color: var(--ws-blue) !important;
}

.md-nav__link:hover {
  color: var(--ws-blue-hover) !important;
}

/* Sidebar section headings */
.md-nav__title {
  font-weight: 600;
  color: var(--ws-charcoal);
}

/* ---------------------------------------------------------------------------
 * Headings — Navy
 * --------------------------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--ws-navy);
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
 * Links — Electric Blue with hover state
 * --------------------------------------------------------------------------- */
.md-typeset a {
  color: var(--ws-blue);
  text-decoration: none;
}

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

/* ---------------------------------------------------------------------------
 * Code blocks — #f5f7fb surface, Cool Silver border, 4px radius
 * --------------------------------------------------------------------------- */
.md-typeset pre {
  background-color: var(--ws-code-bg) !important;
  border: 1px solid var(--ws-silver);
  border-radius: 4px;
  padding: 1rem;
}

.md-typeset code {
  background-color: var(--ws-code-bg);
  border: 1px solid var(--ws-silver);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--ws-charcoal);
  font-size: 0.875em;
}

/* Inline code inside pre — no double border */
.md-typeset pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* ---------------------------------------------------------------------------
 * Content area — max-width 56rem, 8px corner radius on cards/blocks
 * --------------------------------------------------------------------------- */
.md-content__inner {
  max-width: 56rem;
}

.md-grid {
  max-width: 72rem; /* outer grid wider to give sidebar room */
}

/* ---------------------------------------------------------------------------
 * Index page — use-case-style card grid
 *
 * Markup produced by build-kb.mjs for the index:
 *   <div class="kb-cards" markdown>
 *     - [Feature title](feature-id.md)
 *     ...
 *   </div>
 *
 * The .kb-cards wrapper + attr_list extension makes the list a card grid.
 * --------------------------------------------------------------------------- */
.kb-cards > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

/* MkDocs renders the list inside a <ul> */
.kb-cards li {
  background: #ffffff;
  border: 1px solid var(--ws-silver);
  border-radius: 8px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  padding: 0;
  /* Material gives .md-typeset li markers and indent margins; both break the
     card grid, so neutralise them here. */
  list-style: none;
  margin: 0 !important;
}

.kb-cards li:hover {
  border-color: var(--ws-blue);
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.1);
}

.kb-cards li a {
  display: block;
  padding: 1.25rem 1.5rem;
  color: var(--ws-navy) !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  border-radius: 8px;
}

.kb-cards li a:hover {
  color: var(--ws-blue) !important;
}

/* ---------------------------------------------------------------------------
 * Footer — Midnight Navy
 * --------------------------------------------------------------------------- */
.md-footer {
  background-color: var(--ws-navy);
}

/* ---------------------------------------------------------------------------
 * Muted / secondary text
 * --------------------------------------------------------------------------- */
.md-typeset .md-typeset__table thead th,
.md-typeset small,
.md-typeset figcaption {
  color: var(--ws-slate);
}

/* Horizontal rules — Cool Silver */
.md-typeset hr {
  border-color: var(--ws-silver);
}

/* ---------------------------------------------------------------------------
 * Responsive — 375px mobile (in-app browser primary viewport)
 *
 * At 375px:
 *   - Topbar remains full-width; logo + title legible
 *   - Navigation drawer slides in from the left (MkDocs default behaviour kept)
 *   - Content has comfortable 16px horizontal padding
 *   - Card grid collapses to a single column
 * --------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .md-header {
    height: 56px; /* lock header height at mobile */
  }

  .md-content__inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .kb-cards {
    grid-template-columns: 1fr; /* single column on narrow screens */
  }

  /* Ensure header title doesn't overflow on narrow screens */
  .md-header__title {
    font-size: 0.9rem;
  }
}