@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

/* Kompass CSS - Read the Docs Theme Customization */

/* Light Mode - Kompass Brand Colors */
:root,
[data-theme="light"] {
  --md-text-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --md-code-font: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --background: hsl(0 0% 100%);
  --foreground: hsl(215 25% 18%);
  --card: hsl(0 0% 100%);
  --card-foreground: oklch(0.09 0 0);
  --popover: hsl(0 0% 100%);
  --popover-foreground: oklch(0.09 0 0);
  --primary: hsl(215 45% 32%);
  --primary-foreground: oklch(0.99 0 0);
  /* Clear hyperlink blue (distinct from body text + --primary) */
  --link: hsl(221 72% 38%);
  --link-hover: hsl(221 78% 28%);
  /* MkDocs Material uses this for .md-typeset links — set explicitly or theme wins */
  --md-typeset-a-color: var(--link);
  --secondary: hsl(215 15% 93%);
  --secondary-foreground: oklch(0.09 0 0);
  --muted: hsl(215 15% 93%);
  --muted-foreground: oklch(0.5 0 0);
  --accent: hsl(215 25% 85%);
  --accent-foreground: oklch(0.09 0 0);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: oklch(0.985 0 0);
  --border: hsl(215 18% 88%);
  --input: hsl(215 18% 88%);

  /* Header / navigation */
  --header-bg: var(--primary);
  --header-fg: var(--primary-foreground);
  --nav-hover-fg: var(--primary);
  --nav-hover-bg: rgba(120, 165, 255, 0.12);
  --nav-hover-soft-bg: rgba(120, 165, 255, 0.08);

  --scrollbar-track: hsl(0 0% 88%);
  --scrollbar-thumb: hsl(215 15% 55%);
  --scrollbar-thumb-hover: hsl(215 25% 45%);
  --scrollbar-thumb-active: hsl(215 30% 40%);

  /* Sidebar typography */
  --blockquote-fg: var(--foreground);
  --blockquote-link: var(--link);

  --nav-link-fg: var(--link);
  --nav-link-hover-fg: hsl(215 55% 28%);
  --nav-heading-fg: var(--foreground);
  --nav-heading-hover-fg: hsl(215 30% 12%);

  --nav-title-size: 0.79rem;
  --nav-level-1-size: 0.77rem;
  --nav-level-2-size: 0.74rem;
  --nav-level-3-size: 0.70rem;
  --nav-level-4-size: 0.68rem;
  --nav-level-5-size: 0.67rem;
  --nav-level-6-size: 0.65rem;
  --nav-nested-heading-size: 0.76rem;
  --nav-nested-link-size: 0.67rem;
  --nav-heading-margin-top: 0.2rem;

  /* Admonitions / accents */
  --tip-bg: hsl(0 0% 100%);
  --tip-fg: hsl(211 100% 12%);
  --tip-title-bg: hsl(211 100% 12%);
  --tip-title-fg: hsl(0 0% 100%);

  /* HR / headings */
  --hr-color: hsl(0 0% 33%);
  --step-title-fg: var(--foreground);
}

body,
button,
input,
select,
textarea {
  font-family: var(--md-text-font) !important;
}

code,
pre,
kbd,
samp {
  font-family: var(--md-code-font) !important;
}

/* Dark Mode - Kompass Brand Colors */

[data-theme="dark"] {
  --link: hsl(215 65% 72%);
  --link-hover: hsl(215 75% 80%);
  --md-typeset-a-color: var(--link);
  --background: hsl(215 20% 9%);
  --foreground: hsl(215 15% 92%);
  --card: hsl(215 18% 12%);
  --card-foreground: hsl(215 10% 95%);
  --popover: hsl(215 18% 12%);
  --popover-foreground: hsl(215 10% 95%);
  --primary: hsl(215 60% 65%);
  --primary-foreground: hsl(215 25% 12%);
  --secondary: hsl(215 20% 18%);
  --secondary-foreground: hsl(215 15% 92%);
  --muted: hsl(215 18% 16%);
  --muted-foreground: hsl(215 10% 65%);
  --accent: hsl(215 25% 22%);
  --accent-foreground: hsl(215 15% 92%);
  --destructive: hsl(0 70% 55%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(215 20% 25%);
  --input: hsl(215 20% 20%);
  --header-bg: hsl(215 42% 28%);
  --header-fg: hsl(215 15% 95%);
  --nav-hover-fg: hsl(215 60% 78%);
  --nav-hover-bg: rgba(120, 165, 255, 0.12);
  --nav-hover-soft-bg: rgba(255, 255, 255, 0.1);
  --scrollbar-track: hsl(0 0% 12%);
  --scrollbar-thumb: hsl(0 0% 34%);
  --scrollbar-thumb-hover: hsl(0 0% 44%);
  --scrollbar-thumb-active: hsl(0 0% 40%);
  --blockquote-fg: hsl(215 15% 92%);
  --blockquote-link: hsl(215 60% 65%);
  --nav-link-fg: hsl(215 55% 72%);
  --nav-link-hover-fg: hsl(215 68% 82%);
  --nav-heading-fg: hsl(215 18% 94%);
  --nav-heading-hover-fg: hsl(215 26% 98%);
  --nav-title-size: 0.79rem;
  --nav-level-1-size: 0.77rem;
  --nav-level-2-size: 0.74rem;
  --nav-level-3-size: 0.70rem;
  --nav-level-4-size: 0.68rem;
  --nav-level-5-size: 0.67rem;
  --nav-level-6-size: 0.65rem;
  --nav-nested-heading-size: 0.76rem;
  --nav-nested-link-size: 0.67rem;
  --nav-heading-margin-top: 0.2rem;
  --tip-bg: hsl(0 0% 100%);
  --tip-fg: hsl(211 100% 12%);
  --tip-title-bg: hsl(211 100% 12%);
  --tip-title-fg: hsl(0 0% 100%);
  --hr-color: hsl(0 0% 33%);
  --step-title-fg: hsl(0 0% 100%);
}


/* ─── Theme Toggle Button ───────────────────────────────────── */
.theme-toggle-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid hsl(215 15% 85%);
  background-color: hsl(215 15% 97%);
  color: hsl(215 25% 35%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn:hover {
  background-color: hsl(215 20% 92%);
  border-color: hsl(215 20% 75%);
}

.theme-toggle-btn[data-theme="dark"] {
  background-color: hsl(215 18% 16%);
  border-color: hsl(215 20% 25%);
  color: hsl(215 15% 75%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-toggle-btn[data-theme="dark"]:hover {
  background-color: hsl(215 20% 22%);
  border-color: hsl(215 25% 35%);
}

/* ─────────────────────────────────────────────────────────────── */

/* Top-bar logo: replace Material inline SVG with our PNG */
.md-header__button.md-logo,
.md-nav__button.md-logo {
  width: 100px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  /* avoid any pseudo-element bleed */
  position: relative;
}

.md-header__button.md-logo>svg,
.md-nav__button.md-logo>svg {
  display: none !important;
}

.md-header__button.md-logo::before,
.md-nav__button.md-logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-image: url("../img/kompass logo white 1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Hide the logo in the left sidebar navigation */
.md-nav__button.md-logo {
  display: none !important;
}

/* Tighten spacing between logo and header text */
.md-header__button.md-logo {
  margin-right: 0.35rem !important;
}

/* Header ordering (all viewports): menu → logo → title → search */
.md-header__inner {
  display: flex;
  align-items: center;
}

.md-header__button.md-icon[for="__drawer"] {
  order: 0;
}

.md-header__button.md-logo {
  order: 1;
}

.md-header__title {
  order: 2;
}

/* Search bar/container in Material */
.md-search {
  order: 3;
}

/* Read the Docs - Header Styling */

.md-header__inner {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.md-main__inner {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.header-nav,
.navbar,
[role="navigation"] {
  background-color: var(--header-bg) !important;
  color: var(--header-fg) !important;
}

.header-nav a,
.navbar a,
[role="navigation"] a {
  color: var(--header-fg) !important;
}

.header-nav a:hover,
.navbar a:hover {
  background-color: var(--nav-hover-soft-bg) !important;
}

/* Material header (actual top bar in MkDocs Material) */
.md-header,
.md-tabs {
  background-color: var(--header-bg) !important;
  color: var(--header-fg) !important;
}

.md-header a,
.md-header__title,
.md-tabs__link {
  color: var(--header-fg) !important;
}

/* Larger topbar title for better readability */
.md-header__title,
.md-header__topic .md-ellipsis {
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  margin-left: 0.35rem !important;
}

/* Keep site_name as "Kompass Documentation" globally, but show only "Documentation" in the header. */
.md-header__topic:not([data-md-component="header-topic"]) .md-ellipsis {
  font-size: 0 !important;
  /* hide original site name text */
}

.md-header__topic:not([data-md-component="header-topic"]) .md-ellipsis::after {
  content: "Documentation";
  font-size: 1.06rem !important;
  font-weight: 600 !important;
  color: var(--header-fg) !important;
}

/* More compatible hover states for top navigation links */
.md-tabs__link:hover,
.md-header a:hover,
.navbar a:hover {
  color: var(--nav-hover-fg) !important;
  background-color: var(--nav-hover-bg) !important;
}

/* Sidebar nav typography by actual Material nav depth */
.md-nav--primary>.md-nav__list>.md-nav__item>.md-nav__link {
  font-size: var(--nav-level-1-size) !important;
}

.md-nav--primary nav.md-nav[data-md-level="2"]>.md-nav__list>.md-nav__item>.md-nav__link {
  font-size: var(--nav-level-2-size) !important;
}

.md-nav--primary nav.md-nav[data-md-level="3"]>.md-nav__list>.md-nav__item>.md-nav__link {
  font-size: var(--nav-level-3-size) !important;
}

.md-nav--primary nav.md-nav[data-md-level="4"]>.md-nav__list>.md-nav__item>.md-nav__link {
  font-size: var(--nav-level-4-size) !important;
}

.md-nav--primary nav.md-nav[data-md-level="5"]>.md-nav__list>.md-nav__item>.md-nav__link {
  font-size: var(--nav-level-5-size) !important;
}

.md-nav--primary nav.md-nav[data-md-level="6"]>.md-nav__list>.md-nav__item>.md-nav__link {
  font-size: var(--nav-level-6-size) !important;
}

/* Clickable links: bluish and non-bold */
a.md-nav__link {
  color: var(--nav-link-fg) !important;
  font-weight: 400 !important;
}

a.md-nav__link:hover {
  color: var(--nav-link-hover-fg) !important;
}

/* Dropdown headings: white-ish and semibold */
.md-nav--primary .md-nav__item--nested>.md-nav__link,
.md-nav--primary .md-nav__item--nested>label.md-nav__link {
  color: var(--nav-heading-fg) !important;
  font-weight: 400 !important;
  margin-top: var(--nav-heading-margin-top) !important;
  font-size: var(--nav-nested-heading-size) !important;
}

/* Dropdown heading hover should remain heading-like (not blue) */
.md-nav--primary .md-nav__item--nested>.md-nav__link:hover,
.md-nav--primary .md-nav__item--nested>label.md-nav__link:hover {
  color: var(--nav-heading-hover-fg) !important;
}

/* Child links under nested headings (e.g. About -> What is Kompass) */
.md-nav--primary .md-nav__item--nested>nav.md-nav>.md-nav__list>.md-nav__item>a.md-nav__link {
  font-size: var(--nav-nested-link-size) !important;
}

/* Body background */
body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
}

/* Main content width control */
.md-grid {
  max-width: 80rem !important;
}

.md-content__inner {
  max-width: 62rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.75rem !important;
}

/* Sidebars: no top padding on scrollwrap — otherwise scrolled nav paints in that gap above the sticky title */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  padding-top: 0 !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

.md-sidebar--primary,
.md-sidebar--secondary {
  padding-top: 0 !important;
}

/* Clip scroll overflow to the sidebar box so items cannot draw above the header strip */
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--secondary .md-sidebar__scrollwrap {
  overflow-x: hidden !important;
}

/* More compatible dark scrollbar colors */
html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

/* Neutral scrollbar specifically for nav sidebars */
.md-sidebar__scrollwrap,
.md-sidebar__inner,
.md-nav {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* When cursor is inside navbar, keep thumb at hover color */
.md-sidebar__scrollwrap:hover,
.md-sidebar__inner:hover,
.md-nav:hover {
  scrollbar-color: var(--scrollbar-thumb-hover) var(--scrollbar-track);
}

.md-sidebar__scrollwrap::-webkit-scrollbar,
.md-sidebar__inner::-webkit-scrollbar,
.md-nav::-webkit-scrollbar {
  width: 10px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-track,
.md-sidebar__inner::-webkit-scrollbar-track,
.md-nav::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb,
.md-sidebar__inner::-webkit-scrollbar-thumb,
.md-nav::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb) !important;
  border-radius: 8px;
  border: 2px solid var(--scrollbar-track) !important;
  box-shadow: none !important;
}

.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb,
.md-sidebar__inner:hover::-webkit-scrollbar-thumb,
.md-nav:hover::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-hover) !important;
  box-shadow: none !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover,
.md-sidebar__inner::-webkit-scrollbar-thumb:hover,
.md-nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover) !important;
  box-shadow: none !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:active,
.md-sidebar__inner::-webkit-scrollbar-thumb:active,
.md-nav::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active) !important;
  box-shadow: none !important;
}

/* Text styling */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--foreground) !important;
}

/* Material for MkDocs: Markdown blockquotes (e.g. `> **Note:**`) */
/* Dark-only site: force readable note/blockquote text and links. */
.md-typeset blockquote,
.md-typeset blockquote * {
  color: var(--blockquote-fg) !important;
}

.md-typeset blockquote a {
  color: var(--blockquote-link) !important;
}

.md-typeset blockquote {
  background: transparent !important;
  border-left-color: var(--border) !important;
}

/* Dark-only site: fix Material sidebar and TOC "white panels" */
.md-sidebar,
.md-sidebar__scrollwrap,
.md-sidebar__inner,
.md-nav,
.md-toc,
.md-toc__inner {
  background-color: var(--background) !important;
}

/* Sidebar and TOC sticky header bars */
.md-nav__title,
.md-sidebar .md-nav__title,
.md-sidebar--secondary .md-nav__title,
.md-nav__title[for="__drawer"] {
  background: var(--background) !important;
  background-color: var(--background) !important;
  background-image: none !important;
  color: var(--nav-heading-fg) !important;
  font-size: var(--nav-title-size) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Sticky site / TOC title: opaque strip at top of scrollport (no gap above top: 0) */
.md-sidebar--primary .md-nav--primary>.md-nav__title,
.md-sidebar--secondary .md-nav>.md-nav__title {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  isolation: isolate !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  background-color: var(--background) !important;
  box-shadow: 0 8px 16px -6px var(--background) !important;
}

/* Cover any subpixel bleed above the sticky title */
.md-sidebar--primary .md-nav--primary>.md-nav__title::before,
.md-sidebar--secondary .md-nav>.md-nav__title::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -1px !important;
  height: 1px !important;
  background-color: var(--background) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Top-level section label (e.g. "User Guide") */
.md-nav--primary>.md-nav__list>.md-nav__item--section>.md-nav__link,
.md-nav--primary>.md-nav__list>.md-nav__item--section>label.md-nav__link {
  color: var(--nav-heading-fg) !important;
  font-size: var(--nav-level-1-size) !important;
  font-weight: 700 !important;
  margin-top: var(--nav-heading-margin-top) !important;
}

.md-nav--primary>.md-nav__list>.md-nav__item--section>.md-nav__link:hover,
.md-nav--primary>.md-nav__list>.md-nav__item--section>label.md-nav__link:hover {
  color: var(--nav-heading-hover-fg) !important;
}

/* Use --link / --link-hover (light: dark blue; dark: light blue). Never use --accent for link text — it is a pale fill in light mode. */
a {
  color: var(--link, var(--primary)) !important;
}

a:hover {
  color: var(--link-hover, var(--primary)) !important;
}

.md-typeset a {
  color: var(--link, var(--primary)) !important;
}

.md-typeset a:hover {
  color: var(--link-hover, var(--primary)) !important;
}

/* Stronger override for main article links (Material theme can beat a single .md-typeset a rule) */
.md-content .md-typeset a {
  color: var(--link) !important;
}

.md-content .md-typeset a:hover {
  color: var(--link-hover) !important;
}

/* Sidebar */
.sidebar,
.wy-side-nav-search,
.wy-nav-side {
  background-color: var(--secondary) !important;
  color: var(--foreground) !important;
}

@media (prefers-color-scheme: dark) {

  .sidebar,
  .wy-side-nav-search,
  .wy-nav-side {
    background-color: var(--card) !important;
  }
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .wy-side-nav-search,
[data-theme="dark"] .wy-nav-side {
  background-color: var(--card) !important;
}

/* Logo styling */
.logo img,
img[alt="Logo"] {
  max-height: 40px;
  max-width: 40px;
}

/* Hide Scribe links */
a[href*="scribe.how"],
a[href*="scribehow"] {
  display: none !important;
}

/* Custom admonition tip styling matching Kompass theme */
.admonition.tip {
  background-color: var(--tip-bg) !important;
  /* body white */
  color: var(--tip-fg) !important;
  /* navy text */
  border-left: 4px solid var(--tip-fg) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
}

.admonition.tip .admonition-title {
  background-color: var(--tip-title-bg) !important;
  color: var(--tip-title-fg) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 3px 3px 0 0 !important;
}

.admonition.tip p,
.admonition.tip li {
  color: var(--tip-fg) !important;
}

/* Code highlighting */
pre,
code {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) pre,
  :root:not([data-theme="light"]) code {
    background-color: var(--input) !important;
  }
}

[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: var(--input) !important;
}

/* Content spacing for better readability */
main p {
  margin: 1.2rem 0 !important;
  line-height: 1.7 !important;
}

/* ─── Prominent 3D Divider ──────────────────────────────────── */
main hr {
  margin: 2.5rem 0 !important;
  border: none !important;
  height: 3px !important;
  background: linear-gradient(to right,
      transparent,
      hsl(215 25% 75%) 20%,
      hsl(215 35% 60%) 50%,
      hsl(215 25% 75%) 80%,
      transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 -1px 0 rgba(0, 0, 0, 0.06) !important;
  border-radius: 2px !important;
  opacity: 1 !important;
}

[data-theme="dark"] main hr {
  background: linear-gradient(to right,
      transparent,
      hsl(215 30% 30%) 20%,
      hsl(215 40% 45%) 50%,
      hsl(215 30% 30%) 80%,
      transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 -1px 0 rgba(0, 0, 0, 0.3) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) main hr {
    background: linear-gradient(to right,
        transparent,
        hsl(215 30% 30%) 20%,
        hsl(215 40% 45%) 50%,
        hsl(215 30% 30%) 80%,
        transparent) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05),
      0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  }
}

/* ─────────────────────────────────────────────────────────────── */

/* Step section titles */
main strong:has(+ br) {
  display: block !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  font-size: 1.1em !important;
  color: var(--step-title-fg) !important;
}

@media (prefers-color-scheme: dark) {
  main strong:has(+ br) {
    color: var(--step-title-fg) !important;
  }
}

[data-theme="dark"] main strong:has(+ br) {
  color: #ffffff !important;
}

/* FIX: Admonition icon alignment (Tip overlap issue) */
.md-typeset .admonition-title {
  position: relative;
  padding-left: 2rem !important;
  display: flex;
  align-items: center;
}

.md-typeset .admonition-title::before {
  position: absolute !important;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}