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

/* Light Mode - Kompass Brand Colors */
:root {
  --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);
  --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);
}

/* Dark Mode - Kompass Brand Colors */
@media (prefers-color-scheme: dark) {
  :root {
    --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%);
  }
}

/* Read the Docs - Header Styling */
.header-nav,
.navbar,
[role="navigation"] {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

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

.header-nav a:hover,
.navbar a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

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

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

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

a:hover {
  color: var(--accent) !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;
  }
}

/* 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: #ffffff !important;          /* body white */
  color: #001f3f !important;                     /* navy text */
  border-left: 4px solid #001f3f !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  border-radius: 4px !important;
}
.admonition.tip .admonition-title {
  background-color: #001f3f !important;
  color: #ffffff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 3px 3px 0 0 !important;
}
.admonition.tip p,
.admonition.tip li {
  color: #001f3f !important;
}

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

@media (prefers-color-scheme: dark) {
  pre,
  code {
    background-color: var(--input) !important;
  }
}

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

main hr {
  margin: 2.5rem 0 !important;
  border: none !important;
  border-top: 1px solid #ddd !important;
  opacity: 0.3 !important;
}

@media (prefers-color-scheme: dark) {
  main hr {
    border-top-color: #555 !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: #001f3f !important;
}

@media (prefers-color-scheme: dark) {
  main strong:has(+ br) {
    color: #ffffff !important;
  }
}