/*
 * nBlick docs — colors and typography aligned with landing-page
 * (app/css/style.css + app/css/additional-styles/theme.css).
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&family=Outfit:wght@500;600;700&display=swap");

/* Shared landing tokens (light @theme + dark .dark / chrome) */
:root {
  --nb-chrome-dark: #222222;
  --nb-sky-600: #0284c7;
  --nb-sky-500: #0ea5e9;
  --nb-sky-400: #38bdf8;
  --nb-sky-700: #0369a1;
  --nb-neutral-50: #f8fafc;
  --nb-neutral-100: #f1f5f9;
  --nb-neutral-200: #e2e8f0;
  --nb-neutral-400: #94a3b8;
  --nb-neutral-500: #64748b;
  --nb-neutral-600: #475569;
  --nb-neutral-700: #334155;
  --nb-neutral-800: #1e293b;
  --nb-neutral-900: #0f172a;
  --nb-dark-surface: #262626;
  --nb-dark-fg: #e5e5e5;
  --nb-dark-fg-muted: #a3a3a3;

  /* Dark chrome (near-black, monochrome sidebar) */
  --nb-pf-bg: #0a0a0b;          /* page + sidebar background */
  --nb-pf-surface: #18181b;     /* hover / active pill */
  --nb-pf-surface-2: #232327;   /* icon chips, borders-as-fill */
  --nb-pf-border: rgba(255, 255, 255, 0.08);
  --nb-pf-border-strong: rgba(255, 255, 255, 0.16);
  --nb-pf-fg: #f4f4f5;          /* headings / active text */
  --nb-pf-fg-muted: #8a8a92;    /* idle nav links */
  --nb-pf-fg-faint: #6a6a72;    /* section labels */
}

/* Typography — Inter body, Outfit headings (matches landing layout) */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.017em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* ── Bigger header logo ── */
.md-header__button.md-logo img {
  height: 2rem;
  width: auto;
}

/* ── Light scheme (Material: default) ── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--nb-sky-600);
  --md-primary-fg-color--light: var(--nb-sky-500);
  --md-primary-fg-color--dark: var(--nb-sky-700);
  --md-accent-fg-color: var(--nb-neutral-600);
  --md-accent-fg-color--transparent: rgba(71, 85, 105, 0.12);
  --md-default-fg-color: var(--nb-neutral-900);
  --md-default-fg-color--light: var(--nb-neutral-700);
  --md-default-fg-color--lighter: var(--nb-neutral-600);
  --md-default-fg-color--lightest: var(--nb-neutral-500);
  --md-default-bg-color: #ffffff;
  --md-code-fg-color: var(--nb-neutral-900);
  --md-code-bg-color: var(--nb-neutral-100);
  --md-typeset-a-color: var(--nb-sky-600);
}

[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
  background-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 0 var(--nb-neutral-200);
  color: var(--nb-neutral-900);
}

[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--nb-neutral-600);
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: var(--nb-sky-600);
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: var(--nb-neutral-100);
}

[data-md-color-scheme="default"] .md-search__input {
  color: var(--nb-neutral-900);
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--nb-neutral-500);
}

/* ── Dark scheme (Material: slate) — landing .dark + chrome-dark ── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--nb-sky-400);
  --md-primary-fg-color--light: #7dd3fc;
  --md-primary-fg-color--dark: var(--nb-sky-600);
  --md-accent-fg-color: var(--nb-neutral-400);
  --md-accent-fg-color--transparent: rgba(148, 163, 184, 0.12);
  --md-default-fg-color: var(--nb-dark-fg);
  --md-default-fg-color--light: var(--nb-dark-fg-muted);
  --md-default-fg-color--lighter: #737373;
  --md-default-fg-color--lightest: #525252;
  --md-default-bg-color: var(--nb-pf-bg);
  --md-code-fg-color: var(--nb-dark-fg);
  --md-code-bg-color: #161618;
  --md-typeset-a-color: var(--nb-sky-400);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--nb-pf-bg) !important;
  box-shadow: 0 1px 0 var(--nb-pf-border);
  color: var(--nb-pf-fg);
}

[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--nb-dark-fg-muted);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: var(--nb-sky-400);
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-md-color-scheme="slate"] .md-search__input {
  color: var(--nb-dark-fg);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--nb-dark-fg-muted);
}

/* ── Move theme toggle to the right of search ── */
.md-header__inner {
  display: flex;
  align-items: center;
}

[data-md-component="palette"] {
  order: 1;
}

/*
 * Theme toggle icons — same Heroicons strokes as landing-page ThemeToggle.
 * Material sets .md-icon svg { fill: currentcolor }, which breaks stroke-only SVGs.
 */
[data-md-component="palette"] .md-header__button.md-icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: none !important;
  stroke: currentColor;
}

[data-md-component="palette"] .md-header__button.md-icon svg path {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-md-color-scheme="default"] [data-md-component="palette"] .md-header__button.md-icon {
  color: var(--nb-neutral-600);
}

[data-md-color-scheme="default"] [data-md-component="palette"] .md-header__button.md-icon:hover {
  color: var(--nb-neutral-900);
  opacity: 1;
}

[data-md-color-scheme="slate"] [data-md-component="palette"] .md-header__button.md-icon {
  color: var(--nb-dark-fg-muted);
}

[data-md-color-scheme="slate"] [data-md-component="palette"] .md-header__button.md-icon:hover {
  color: var(--nb-dark-fg);
  opacity: 1;
}

/*
 * Footer — matches landing-page footer.tsx:
 * border-t border-white/10 bg-chrome-dark/95 text-neutral-300 (+ neutral-400 for muted).
 */
.md-footer {
  background-color: rgba(34, 34, 34, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #d4d4d4;
}

.md-footer-meta {
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.md-footer__link {
  color: #a3a3a3;
}

.md-footer__link:hover {
  color: #ffffff;
}

.md-footer__title {
  color: #ffffff;
}

.md-footer__direction {
  color: #a3a3a3;
}

.md-footer-copyright {
  color: #a3a3a3;
}

.md-footer-meta .md-social__link {
  color: #a3a3a3;
}

.md-footer-meta .md-social__link:hover {
  color: #ffffff;
}


/*
 * ── Left navigation ──
 * Monochrome and icon-free: per-item section icons were intentionally removed
 * (only the Status and Blog shortcuts carry icons, defined below). Section
 * titles read as quiet group labels; leaf links sit in rounded pills that fill
 * on hover and lock in when active.
 */

/* Hide the "nBlick Documentation" site title at the top of the sidebar */
.md-nav--primary > .md-nav__title {
  display: none;
}

/* Sidebar shares the near-black page surface in dark mode */
[data-md-color-scheme="slate"] .md-sidebar--primary,
[data-md-color-scheme="slate"] .md-nav {
  background-color: transparent;
}

/* Group labels rendered by navigation.sections */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.3rem 0.6rem;
  margin: 0;
  cursor: default;
}

/* Breathing room between sections so each group reads as its own block */
.md-nav--primary > .md-nav__list > .md-nav__item--section {
  margin-top: 1.5rem;
}
.md-nav--primary > .md-nav__list > .md-nav__item--section:first-child {
  margin-top: 0.5rem;
}

/* Leaf links become rounded pills */
.md-nav__link {
  border-radius: 8px;
  padding: 0.34rem 0.6rem;
  margin: 0.06rem 0;
  transition: background-color 120ms ease, color 120ms ease;
}

/* ── Dark scheme ── */
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--nb-pf-fg);
}
[data-md-color-scheme="slate"] .md-nav__link {
  color: var(--nb-pf-fg-muted);
}
[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link:focus {
  color: var(--nb-pf-fg);
  background-color: var(--nb-pf-surface);
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: var(--nb-pf-fg) !important;
  background-color: var(--nb-pf-surface);
  font-weight: 600;
}

/* ── Light scheme (clean monochrome equivalent) ── */
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--nb-neutral-900);
}
[data-md-color-scheme="default"] .md-nav__link {
  color: var(--nb-neutral-600);
}
[data-md-color-scheme="default"] .md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav__link:focus {
  color: var(--nb-neutral-900);
  background-color: var(--nb-neutral-100);
}
[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link {
  color: var(--nb-neutral-900) !important;
  background-color: var(--nb-neutral-100);
  font-weight: 600;
}

/* Table-of-contents vertical bar — neutral gray, not the brand tint */
[data-md-color-scheme="default"] .md-nav--secondary {
  border-left-color: var(--nb-neutral-500);
  border-right-color: var(--nb-neutral-500);
}
[data-md-color-scheme="slate"] .md-nav--secondary {
  border-left-color: var(--nb-pf-border-strong);
  border-right-color: var(--nb-pf-border-strong);
}

/*
 * ── Status & Blog shortcuts (top of sidebar) ──
 * The only icons in the nav. Each external link gets a masked icon that
 * inherits the link color, so it adapts to both schemes. A divider after the
 * pair separates them from the documentation sections.
 */
.md-nav__link[href="https://status.nblick.com/"],
.md-nav__link[href="https://nblick.com/blog"] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
}
.md-nav__link[href="https://status.nblick.com/"]::before,
.md-nav__link[href="https://nblick.com/blog"]::before {
  content: "";
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: var(--nb-shortcut-icon) center / contain no-repeat;
  mask: var(--nb-shortcut-icon) center / contain no-repeat;
}
.md-nav__link[href="https://status.nblick.com/"] {
  --nb-shortcut-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.93%204.93A9.97%209.97%200%200%200%202%2012c0%202.76%201.12%205.26%202.93%207.07l1.41-1.41A7.94%207.94%200%200%201%204%2012c0-2.21.89-4.22%202.34-5.66zm14.14%200-1.41%201.41A7.96%207.96%200%200%201%2020%2012c0%202.22-.89%204.22-2.34%205.66l1.41%201.41A9.97%209.97%200%200%200%2022%2012c0-2.76-1.12-5.26-2.93-7.07M7.76%207.76A5.98%205.98%200%200%200%206%2012c0%201.65.67%203.15%201.76%204.24l1.41-1.41A4%204%200%200%201%208%2012c0-1.11.45-2.11%201.17-2.83zm8.48%200-1.41%201.41A4%204%200%200%201%2016%2012c0%201.11-.45%202.11-1.17%202.83l1.41%201.41A5.98%205.98%200%200%200%2018%2012c0-1.65-.67-3.15-1.76-4.24M12%2010a2%202%200%200%200-2%202%202%202%200%200%200%202%202%202%202%200%200%200%202-2%202%202%200%200%200-2-2%22/%3E%3C/svg%3E");
}
.md-nav__link[href="https://nblick.com/blog"] {
  --nb-shortcut-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm7%201.5L18.5%209H13zM8%2013h8v1.5H8zm0%203.5h8V18H8z%22/%3E%3C/svg%3E");
}

/* Divider under the Status/Blog pair (Blog is the 2nd top-level item) */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) {
  padding-bottom: 0.9rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--nb-pf-border);
}
[data-md-color-scheme="default"] .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) {
  border-bottom-color: var(--nb-neutral-200);
}