/* ==========================================================
WURII NEKA Documentation Theme
Premium Enterprise Documentation UI
Designed for MkDocs Material
========================================================== */

/* 1. Define the custom font locally */
@font-face {
  font-family: 'Nyala';
  src: url('../fonts/nyala.woff2') format('woff2'),
       url('../fonts/nyala.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================
DESIGN TOKENS
========================================================== */
:root {

  --md-text-font: "nyala";
  --md-code-font: "nyala";
  /* ==========================================================
     BRAND COLORS (Sophisticated Enterprise Indigo & Emerald)
     ========================================================== */
  --wurii-primary: green;          /* Deep Indigo - modern, authoritative, premium */
  --wurii-primary-hover: #4338ca;   /* Darker Indigo for interactive feedback */
  --wurii-accent: #059669;          /* Emerald Green - elegant accent instead of aggressive red */

  /* ==========================================================
     LIGHT THEME (Clean, Soft Grays)
     ========================================================== */
  --wurii-bg: #f8fafc;              /* Slate 50 - smooth tech-gray background */
  --wurii-surface: #ffffff;         /* Crisp White for cards and content background */
  --wurii-surface-alt: #f1f5f9;     /* Slate 100 for search bars and side active states */
  --wurii-text: #0f172a;            /* Slate 900 - Deep charcoal for rich text legibility */
  --wurii-text-muted: #475569;      /* Slate 600 - High-contrast muted subtext */
  --wurii-border: #e2e8f0;          /* Slate 200 - Razor-thin, clean divider lines */

  /* ==========================================================
     SHADOWS (Soft, Diffusion Glows)
     ========================================================== */
  --wurii-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02);
  --wurii-shadow-md: 0 4px 24px rgba(15, 23, 42, 0.04), 0 1px 8px rgba(15, 23, 42, 0.02);
  --wurii-shadow-lg: 0 12px 48px rgba(15, 23, 42, 0.08), 0 2px 14px rgba(15, 23, 42, 0.04);

  /* ==========================================================
     RADIUS & STRUCTURAL LAYOUT
     ========================================================== */
  --wurii-radius-sm: 6px;           /* Slightly sharper corner for tight UI components */
  --wurii-radius-md: 10px;          /* Clean layout rounding */
  --wurii-radius-lg: 14px;          /* Elegant container grouping */

  /* Typography Override vars for Material Theme Engine */
  --md-text-font: 'Nyala', 'Abyssinica SIL', sans-serif;
  /*--md-text-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
  /*--md-code-font: "JetBrains Mono", "Fira Code", monospace;*/

  /* Content Width */
  --md-typeset-max-width: 82rem;

}

/* ==========================================================
DARK MODE
========================================================== */
[data-md-color-scheme="slate"] {
  --wurii-bg: #0f172a;
  --wurii-surface: #111827;
  --wurii-surface-alt: #1e293b;
  --wurii-text: #f8fafc;
  --wurii-text-muted: #94a3b8;
  --wurii-border: #334155;

  --wurii-shadow-md: 0 4px 24px rgba(0, 0, 0, .35);
  --wurii-shadow-lg: 0 10px 40px rgba(0, 0, 0, .45);
}

/* ==========================================================
GLOBAL TYPOGRAPHY
========================================================== */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--wurii-bg);
}

.md-typeset {
  font-size: .88rem;
  line-height: 1.75;
}

.md-typeset h1 {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: .75rem;
  letter-spacing: -.03em;
}

.md-typeset h2 {
  margin-top: 2.5rem;
  font-weight: 700;
  border-bottom: 1px solid var(--wurii-border);
  padding-bottom: .4rem;
}

.md-typeset h3 {
  font-weight: 700;
}

.md-typeset p {
  color: var(--wurii-text);
}

.md-typeset strong {
  color: var(--wurii-primary);
}

/* ==========================================================
HEADER
========================================================== */
.md-header {
  background: var(--wurii-primary); 
  border-bottom: 1px solid rgba(226, 232, 240, 0.1);
  box-shadow: var(--wurii-shadow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background .25s ease;
}

.md-header__topic {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

/* ==========================================================
   TOP NAVIGATION TABS ROW (Language Switcher Bar)
   ========================================================== */
.md-tabs {
  background-color: var(--wurii-surface-alt);
  border-bottom: 1px solid var(--wurii-border);
  box-shadow: var(--wurii-shadow-sm); 
  transition: background-color .25s ease;
}

.md-tabs__link {
  color: var(--wurii-text-muted) !important;
  font-weight: 500;
  transition: color .2s ease;
}

.md-tabs__link:hover {
  color: var(--wurii-primary) !important;
}

.md-tabs__item--active .md-tabs__link {
 color:red;
  font-weight: 700;
}

/* Dark mode adjustments for Top Nav Row */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1e293b;
  border-bottom: 1px solid var(--wurii-border);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: #94a3b8 !important;
}

[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
  color: #ffffff !important;
}

/* ==========================================================
SIDEBAR CONTAINER & NAVIGATION
========================================================== */
.md-sidebar__scrollwrap {
  padding: 0.75rem;
  border-right: 1px solid var(--wurii-border);
 /* overflow: visible !important; /* Prevents container boundary cutting */
}

.md-nav {
  background: var(--wurii-surface);
  border-radius: var(--wurii-radius-lg);
  padding: 0.1rem;
  box-shadow: var(--wurii-shadow-sm);
  overflow: visible !important; /* Overrides default crop fields */
}

.md-nav__link {
  border-radius: var(--wurii-radius-md);
  padding: 0.45rem 0.75rem !important; /* Optimized padding for line wraps */
  line-height: 1.35 !important;
  transition: all .2s ease;
  font-weight: 500;
  width: 100%;
  white-space: normal !important;      /* Allows line-break wrapping */
  word-break: break-word !important;   /* Splits strings cleanly if pushed */
  /*display: block !important; */
}

.md-nav__link .md-ellipsis {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 100% !important;
}

.md-nav__link:hover {
  background: rgba(79, 70, 229, 0.08); /* Fixed color linking to primary Indigo token */
  color: var(--wurii-primary);
  transform: translateX(2px);
}

.md-nav__item--active > .md-nav__link {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.14), rgba(79, 70, 229, 0.03));
  color: var(--wurii-primary);
  font-weight: 700;
  border-radius: var(--wurii-radius-md);
  box-shadow: inset 3px 0 0 var(--wurii-primary);
  position: relative;
}

.md-nav__item--active > .md-nav__link::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--wurii-primary);
  border-radius: 50%;
}

.md-nav__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wurii-text-muted);
  margin-top: 1rem;
}

/* Compressed cascading step-gaps so deep hierarchies do not clip */
.md-nav__list .md-nav__list {
  margin-left: .4rem !important;  /* Reduced from .8rem to maximize text width */
  padding-left: .5rem !important; /* Reduced from .8rem to maximize text width */
  border-left: 1.5px solid rgba(79, 70, 229, 0.12);
}

.md-nav__toggle ~ .md-nav__link .md-nav__icon {
  color: var(--wurii-primary);
  opacity: .65;
  transition: .2s ease;
}

.md-nav__toggle:checked ~ .md-nav__link .md-nav__icon {
  transform: rotate(90deg);
  opacity: 1;
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 6px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .25);
  border-radius: 999px;
}

/* ==========================================================
TABLE OF CONTENTS
========================================================== */
.md-nav--secondary .md-nav__link {
  color: var(--wurii-text-muted);
  font-size: .72rem;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--wurii-primary);
}

/* ==========================================================
SEARCH
========================================================== */
.md-search__form {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: var(--wurii-shadow-sm);
}

.md-search__input:focus {
  outline: none;
}

.md-search__input:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: var(--wurii-shadow-sm);
  border-radius: 999px;
}

/* ==========================================================
CONTENT AREA
========================================================== */
.md-content__inner {
  background: var(--wurii-surface);
  border: 1px solid var(--wurii-border);
  border-radius: var(--wurii-radius-lg);
  padding: 2rem;
  box-shadow: var(--wurii-shadow-md);
}

/* ==========================================================
IMAGES
========================================================== */
.md-typeset img {
  display: flex;
  margin: 2rem auto;
  width: 80%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--wurii-border);
  border-radius: var(--wurii-radius-md);
  box-shadow: var(--wurii-shadow-md);
  transition: transform .25s ease, box-shadow .25s ease;
  background: white;
}

.md-typeset img:hover {
  transform: translateY(-2px);
  box-shadow: var(--wurii-shadow-lg);
}

.img-tiny img, img.img-tiny     { max-width: 60px; max-height: 60px; }
.img-small img, img.img-small   { max-width: 350px; }
.img-ssmall img, img.img-ssmall { max-width: 250px; }
.img-medium img, img.img-medium { max-width: 700px; }
.img-large img, img.img-large   { max-width: 1000px; }
.img-full img, img.img-full     { max-width: 100%; }

/* ==========================================================
IMAGE GRIDS
========================================================== */
.img-grid-2, .img-grid-3, .img-grid-4 {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}
.img-grid-2 { grid-template-columns: repeat(2, 1fr); }
.img-grid-3 { grid-template-columns: repeat(3, 1fr); }
.img-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================
TABLES
========================================================== */
.md-typeset table {
  width: 100%;
  border-radius: var(--wurii-radius-md);
  overflow: hidden;
  border: 1px solid var(--wurii-border);
}

.md-typeset table th {
  background: var(--wurii-surface-alt);
  color: var(--wurii-text);
  font-weight: 700;
}

.md-typeset table tr:hover {
  background: rgba(79, 70, 229, 0.04);
}

.md-typeset table td, .md-typeset table th {
  border: 1px solid var(--wurii-border);
}

/* ==========================================================
ADMONITIONS
========================================================== */
.md-typeset .admonition, .md-typeset details {
  border-radius: var(--wurii-radius-md);
  box-shadow: none;
  border-left: 4px solid var(--wurii-primary);
}

.md-typeset .note    { border-left-color: #3b82f6; }
.md-typeset .tip     { border-left-color: var(--wurii-accent); }
.md-typeset .warning { border-left-color: #f59e0b; }
.md-typeset .danger  { border-left-color: #ef4444; }

/* ==========================================================
CODE BLOCKS
========================================================== */
.highlight pre {
  border-radius: var(--wurii-radius-lg);
  padding: 1rem;
  background: #0b1220;
  box-shadow: var(--wurii-shadow-md);
}

.highlight {
  scrollbar-width: thin;
}

.highlight::-webkit-scrollbar {
  height: 8px;
}

.highlight::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 99px;
}

/* ==========================================================
INLINE CODE
========================================================== */
.md-typeset code {
  border-radius: var(--wurii-radius-sm);
  padding: .15rem .35rem;
  background: rgba(79, 70, 229, 0.08);
  color: var(--wurii-primary);
}

/* ==========================================================
BUTTONS
========================================================== */
.md-button {
  border-radius: var(--wurii-radius-md);
  transition: .2s ease;
}

.md-button:hover {
  transform: translateY(-1px);
}

/* ==========================================================
VIDEO ![type:video](/../../videos/bitmap.mp4)
========================================================== */
/* Wrapper around the video (generated by mkdocs-video) */
.video-wrapper {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;   /* centers the video horizontally */
}

/* The actual <video> element */
.video-wrapper video {
    width: 50%;                /* adjust as needed */
    max-width: 100%;
    height: auto;
    border-radius: 8px;        /* optional rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    background: #000;          /* fallback background */
}

/* Optional: style the controls (works in some browsers) */
.video-wrapper video::-webkit-media-controls {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0 0 8px 8px;
}

/* ==========================================================
SCROLLBAR
========================================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* ==========================================================
BLOCKQUOTES
========================================================== */
.md-typeset blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--wurii-primary);
  border-radius: 0 var(--wurii-radius-md) var(--wurii-radius-md) 0;
  background: rgba(79, 70, 229, 0.04);
  color: var(--wurii-text);
  font-size: .95rem;
}

.md-typeset blockquote p:last-child {
  margin-bottom: 0;
}

.md-typeset blockquote strong:first-child {
  color: #dc2626;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ==========================================================
FOOTER
========================================================== */
.md-footer {
  background: transparent;
  border-top: 1px solid var(--wurii-border);
}

/* ==========================================================
MOBILE RESPONSIVENESS
========================================================== */
@media screen and (max-width: 960px) {
  .md-content__inner {
    padding: 1.25rem;
    border-radius: 12px;
  }

  .md-typeset h1 {
    font-size: 2rem;
  }

  .img-grid-2, .img-grid-3, .img-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .md-typeset {
    font-size: .82rem;
  }

  .md-content__inner {
    padding: 1rem;
  }

  .md-typeset h1 {
    font-size: 1.7rem;
  }
}