/* ===== CSS VARIABLES & BASE SETUP ===== */
:root {
  /* Brand Colors */
  --brand-orange: #FF8201;
  --brand-blue: #02024B;
  --brand-white: #FFFFFF;
  
  /* Layout Dimensions */
  --header-height: 2.8rem;
  --sidebar-width: 19rem;
  --footer-height: 1.4rem;
  
  /* Typography */
  --font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
  --base-font-size: 0.7rem;
  --nav-font-size: 0.7rem;
  
  /* Material for MkDocs Variable Overrides */
  --md-primary-fg-color: var(--brand-orange);
  --md-primary-fg-color--light: var(--brand-orange);
  --md-primary-fg-color--dark: var(--brand-orange);
  --md-accent-fg-color: var(--brand-orange);
}

/* Prevent overscroll/rubber-band effect */
html,
body {
  overflow-x: hidden !important;
  overscroll-behavior: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure main container accounts for fixed header */
.md-container {
  padding-top: var(--header-height) !important;
}

.md-main {
  overflow-x: hidden !important;
}

/* ===== TYPOGRAPHY ===== */
/* Font Face Definitions */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Apply Font Family */
body, 
.md-header, 
.md-footer,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-nav,
.md-search__input {
  font-family: var(--font-family) !important;
}

/* Base Typography Sizing */
.md-typeset {
  font-size: var(--base-font-size) !important;
  line-height: 1.5 !important;
}

/* Heading Sizes */
.md-typeset h1 { font-size: 1.6rem !important; font-weight: 500 !important; }
.md-typeset h2 { font-size: 1.3rem !important; font-weight: 500 !important; }
.md-typeset h3 { font-size: 1.1rem !important; font-weight: 500 !important; }
.md-typeset h4 { font-size: 0.9rem !important; font-weight: 500 !important; }

/* Navigation Typography - Compact */
.md-nav {
  font-size: var(--nav-font-size) !important;
  line-height: 1.25 !important;
}

.md-nav__item {
  padding: 0.1rem 0 !important;
  margin: 0 !important;
}

/* Top-level items */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 400 !important;
  padding: 0.25rem 0.6rem !important;
  color: var(--brand-blue) !important;
}

/* Parent items that have children - make them look like headings */
.md-nav__item--nested > .md-nav__link {
  font-weight: 700 !important;
  font-family: 'Nunito', sans-serif !important;
  color: var(--brand-blue) !important;
  padding: 0.25rem 0.6rem !important;
  margin-top: 0.3rem !important;
  margin-bottom: 0.15rem !important;
}

/* Add consistent spacing after nested sections end */
.md-nav__item--nested + .md-nav__item:not(.md-nav__item--nested) {
  margin-top: 0.5rem !important;
}

/* Add consistent spacing between top-level sections */
.md-nav--primary > .md-nav__list > .md-nav__item--nested + .md-nav__item {
  margin-top: 0.5rem !important;
}

/* Regular clickable items - slightly indented and lighter */
.md-nav__item:not(.md-nav__item--nested) > .md-nav__link {
  font-weight: 400 !important;
  padding: 0.25rem 0.6rem 0.25rem 0.8rem !important;
  display: flex !important;
  align-items: center !important;
}

/* Prevent text truncation in navigation */
.md-nav__link,
.md-nav__link *,
.md-ellipsis,
.md-nav__item .md-ellipsis,
.md-nav__link span {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
  max-width: none !important;
  width: auto !important;
}

/* Force bold on parent items with all child elements */
.md-nav__item--nested > .md-nav__link,
.md-nav__item--nested > .md-nav__link *,
.md-nav__item--nested > .md-nav__link span,
.md-nav__item--nested > .md-nav__link .md-ellipsis {
  font-weight: 700 !important;
}

/* Ensure navigation items can expand */
.md-nav__item,
.md-nav__list {
  overflow: visible !important;
}

/* Nested children under parent items (first level) */
.md-nav__item--nested > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 400 !important;
  padding: 0.25rem 0.6rem 0.25rem 2.2rem !important;
  display: flex !important;
  align-items: center !important;
}

/* Second level children (under first level) */
.md-nav__item--nested .md-nav .md-nav__item--nested > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  padding: 0.25rem 0.6rem 0.25rem 2.8rem !important;
  display: flex !important;
  align-items: center !important;
}

/* Third level nesting */
.md-nav__item--nested .md-nav .md-nav__item--nested .md-nav .md-nav__item--nested .md-nav .md-nav__item > .md-nav__link {
  padding: 0.25rem 0.6rem 0.25rem 3.4rem !important;
  display: flex !important;
  align-items: center !important;
}

/* Compact nested lists */
.md-nav__item--nested > .md-nav {
  margin-top: 0.05rem !important;
  padding-top: 0 !important;
}

.md-nav__list {
  padding: 0 !important;
  margin: 0 !important;
}

/* Active navigation item - orange highlight */
.md-nav__item--active > .md-nav__link,
.md-nav__link--active,
.md-nav__item--active:not(.md-nav__item--nested) > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav__link {
  color: var(--brand-orange) !important;
  font-weight: 400 !important;
}

/* Active nested items should also be orange */
.md-nav__item--nested.md-nav__item--active > .md-nav__link {
  color: var(--brand-orange) !important;
  font-weight: 700 !important; /* Keep bold for parent items */
}

/* Active items at any nesting level */
.md-nav__item--active > .md-nav__link[href] {
  color: var(--brand-orange) !important;
}

/* Code Typography */
.md-typeset pre code,
.md-typeset code {
  font-size: 0.6rem !important;
}

/* ===== HEADER STYLING ===== */
.md-header,
.md-header__inner {
  background-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
  height: var(--header-height) !important;
}

.md-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3 !important;
}

/* Header text and icons */
.md-header__title,
.md-header__button,
.md-search__input::placeholder,
.md-header-nav__button,
.md-header-nav__title,
.md-search__icon {
  color: var(--brand-white) !important;
}

/* Header logo */
.md-header__button.md-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0.6rem !important;
  height: var(--header-height) !important;
}

.md-header__button.md-logo img {
  height: 1.8rem !important;
  width: auto !important;
}

.md-header__title {
  margin-left: 0 !important;
  line-height: var(--header-height) !important;
}

/* ===== TEXT COLORS ===== */
/* Main Text Colors */
body,
.md-typeset,
.md-typeset p,
.md-typeset ol,
.md-typeset ul,
.md-typeset li,
.md-typeset table,
.md-nav,
.md-nav__link,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--brand-blue) !important;
}

/* Product Name Styling */
.product-name {
  color: var(--brand-orange) !important;
  font-weight: 600 !important;
  font-family: var(--font-family) !important;
}

/* Link Colors */
.md-typeset a:not(.md-button) {
  color: var(--brand-blue) !important;
  text-decoration: underline !important;
}

/* Active Navigation */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--brand-orange) !important;
  font-weight: bold !important;
}

/* ===== NAVIGATION LAYOUT ===== */
/* Hide hamburger menu */
.md-header__button[for="__drawer"] {
  display: none !important;
}

/* Move sidebar to right and keep visible */
.md-sidebar--primary {
  position: fixed !important;
  right: 0 !important;
  left: auto !important;
  top: var(--header-height) !important;
  bottom: var(--footer-height) !important;
  width: var(--sidebar-width) !important;
  height: calc(100vh - var(--header-height) - var(--footer-height)) !important;
  max-height: calc(100vh - var(--header-height) - var(--footer-height)) !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  transition: none !important;
  z-index: 2 !important;
  overflow-y: auto !important;
  border-left: 2px solid var(--brand-orange) !important;
  background-color: #fafafa !important;
}

/* Scrolling container settings */
.md-sidebar__scrollwrap {
  overflow: visible !important;
  margin: 0 !important;
  display: block !important;
}

.md-sidebar__inner {
  position: static !important;
  padding: 0.4rem 0.9rem !important;
}

.md-nav--primary {
  display: block !important;
  padding-top: 0 !important;
  padding-bottom: 1rem !important;
}

/* Hide the navigation title at top of sidebar */
.md-nav__title {
  display: none !important;
}

/* Hide expand/collapse toggles and icons completely */
.md-nav__toggle,
label.md-nav__link .md-nav__icon,
.md-nav__item--nested > .md-nav__link .md-nav__icon,
.md-nav__icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove any space/padding that toggles would have used */
.md-nav__link {
  padding-right: 0.6rem !important;
}

.md-nav__item--nested > .md-nav__link {
  padding-right: 0.6rem !important;
}

/* Override any toggle behavior - keep all folder navigation expanded */
.md-nav__toggle:checked ~ .md-nav,
.md-nav__toggle:not(:checked) ~ .md-nav {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force navigation to be shown for ALL viewport sizes */
.md-nav--primary .md-nav__item--nested .md-nav {
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  height: auto !important;
  max-height: none !important;
}

/* Remove the toggle arrows from navigation items */
.md-nav__toggle + .md-nav__link::after,
.md-nav__link::after,
.md-nav__item--nested > .md-nav__link::after {
  display: none !important;
}

/* Remove any hover effects for arrows */
.md-nav__item--nested > .md-nav__link:hover::after {
  display: none !important;
}

/* COMPREHENSIVE DUPLICATE PREVENTION - Hide all page section navigation */

/* Primary rule: Hide ALL nested navigation under non-folder items */
.md-nav--primary .md-nav__item:not(.md-nav__item--nested) > .md-nav,
.md-nav--primary .md-nav__item:not(.md-nav__item--nested) .md-nav,
.md-nav--primary .md-nav__item:not(.md-nav__item--nested) .md-nav__list {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Catch active items specifically */
.md-nav__item--active:not(.md-nav__item--nested) > .md-nav,
.md-nav__item--active:not(.md-nav__item--nested) .md-nav__list {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

/* Hide secondary navigation (TOC sidebar) */
.md-nav--secondary {
  display: none !important;
}

/* Target any navigation triggered by toggles under non-nested items */
.md-nav__item:not(.md-nav__item--nested) > .md-nav__toggle ~ .md-nav,
.md-nav__list > .md-nav__item:not(.md-nav__item--nested) > .md-nav {
  display: none !important;
  visibility: hidden !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Adjust content margin for right sidebar */
.md-content {
  margin-left: 0 !important;
  margin-right: var(--sidebar-width) !important;
}

/* Ensure main container fills viewport */
.md-main__inner {
  min-height: calc(100vh - var(--header-height) - var(--footer-height)) !important;
  padding-bottom: var(--footer-height) !important;
}

/* Force navigation to always show */
[data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary,
[data-md-toggle="drawer"]:not(:checked) ~ .md-container .md-sidebar--primary {
  transform: none !important;
}

/* Hide Table of Contents (secondary sidebar) */
.md-sidebar--secondary {
  display: none !important;
}

/* Ensure content uses available space without TOC */
.md-content__inner {
  margin-right: 0 !important;
}

/* ===== FOOTER STYLING ===== */
.md-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  background-color: var(--brand-orange) !important;
  color: var(--brand-white) !important;
  height: var(--footer-height) !important;
  font-family: var(--font-family) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.md-footer-nav,
.md-footer-meta {
  background-color: var(--brand-orange) !important;
  text-align: center !important;
  width: 100% !important;
}

/* Footer text color - ALL elements */
.md-footer,
.md-footer-nav,
.md-footer-meta,
.md-footer-nav__link,
.md-footer-meta__item,
.md-footer-copyright,
.md-footer__link,
.md-footer a,
.md-footer span,
.md-footer div,
.md-footer p,
.md-copyright__highlight a {
  color: var(--brand-white) !important;
  font-family: var(--font-family) !important;
  font-size: 0.7rem !important;
}

/* Ensure all nested elements are white */
.md-footer * {
  color: var(--brand-white) !important;
}

/* Center footer content containers */
.md-footer-meta__inner,
.md-footer-copyright,
.md-copyright {
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
}

/* Remove any padding/margin from footer text elements */
.md-footer-meta__inner *,
.md-footer-copyright *,
.md-copyright * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Footer links styling */
.md-footer .md-footer-meta a {
  text-decoration: none !important;
  color: var(--brand-white) !important;
}

.md-footer .md-footer-meta a:hover {
  text-decoration: underline !important;
  color: var(--brand-white) !important;
}

/* ===== CUSTOM TABLES ===== */
.md-typeset table:not([class]) {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(2, 2, 75, 0.1) !important;
  box-shadow: 0 2px 4px rgba(2, 2, 75, 0.05) !important;
}

/* Table Headers */
.md-typeset table:not([class]) th {
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 12px 16px !important;
}

/* Table Rows - Alternating Colors */
.md-typeset table:not([class]) tr:nth-child(odd) {
  background-color: rgba(255, 130, 1, 0.05) !important;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: white !important;
}

/* Table Cells */
.md-typeset table:not([class]) td {
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: 1px solid rgba(2, 2, 75, 0.05) !important;
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none !important;
}

/* Hover Effect */
.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(255, 130, 1, 0.1) !important;
}

/* ===== CODE TABS COMPONENT ===== */
.code-tabs {
  margin: 1.5em 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(2, 2, 75, 0.07);
  border: 1px solid rgba(2, 2, 75, 0.1);
  overflow: hidden;
  background: white;
}

.tab-labels {
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 1px solid rgba(2, 2, 75, 0.1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab-label {
  color: var(--brand-blue);
  font-size: var(--base-font-size);
  font-weight: 500;
  padding: 0.8em 1.5em;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-label:hover {
  color: var(--brand-orange);
  background-color: rgba(255, 130, 1, 0.03);
}

.tab-label.active {
  color: var(--brand-orange);
  font-weight: 600;
  border-bottom: 3px solid var(--brand-orange);
  background-color: rgba(255, 130, 1, 0.05);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content pre {
  margin: 0;
  border-radius: 0;
}

/* Tab Labels Scrollbar */
.tab-labels::-webkit-scrollbar {
  height: 4px;
}

.tab-labels::-webkit-scrollbar-thumb {
  background-color: rgba(2, 2, 75, 0.2);
  border-radius: 4px;
}

.tab-labels::-webkit-scrollbar-track {
  background-color: rgba(2, 2, 75, 0.05);
}

/* Code Copy Button */
.code-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  padding: 0.3rem 0.6rem;
  font-size: 0.65rem;
  color: var(--brand-blue);
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(2, 2, 75, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.tab-content:hover .code-copy-button {
  opacity: 1;
}

.code-copy-button:hover {
  color: var(--brand-white);
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

/* Prism Copy-to-Clipboard Button - ensure proper positioning */
div.code-toolbar {
  position: relative !important;
}

div.code-toolbar > .toolbar {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
}

/* ===== SYNTAX HIGHLIGHTING ===== */
/* PKL Language */
.language-pkl .token.keyword {
  color: #8959a8;
}

.language-pkl .token.string {
  color: #718c00;
}

.language-pkl .token.property {
  color: #4271ae;
}

.language-pkl .token.comment {
  color: #8e908c;
}

/* KCL Language */
.language-kcl .token.keyword {
  color: #c678dd;
}

.language-kcl .token.string {
  color: #98c379;
}

.language-kcl .token.attribute {
  color: #e06c75;
}

.language-kcl .token.decorator {
  color: #61afef;
}

.language-kcl .token.comment {
  color: #7f848e;
}

.language-kcl .token.number {
  color: #d19a66;
}

.language-kcl .token.boolean {
  color: #d19a66;
}

/* ===== FINAL POLISH ===== */
/* Sidebar Scrollbar */
.md-sidebar--primary::-webkit-scrollbar {
  width: 4px;
}

.md-sidebar--primary::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.md-sidebar--primary::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Hide Breadcrumbs */
.md-breadcrumbs {
  display: none !important;
}

/* Hide Version Selector (RTD) */
.rst-versions,
.rst-current-version,
.md-version-select,
.md-version {
  display: none !important;
}

/* Inline Logo Styling */
.md-typeset img[src*="logo.png"] {
  height: 1.2em !important;
  vertical-align: middle !important;
  margin: 0 0.2em !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile First: Default styles for small screens (< 768px) */
@media screen and (max-width: 47.99em) {
  /* Hide the sidebar completely on mobile */
  .md-sidebar--primary {
    display: none !important;
    visibility: hidden !important;
  }

  /* Remove right margin from content since sidebar is hidden */
  .md-content {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Add padding to content for better mobile reading */
  .md-content__inner {
    padding: 1rem !important;
  }

  /* Show hamburger menu on mobile to access navigation */
  .md-header__button[for="__drawer"] {
    display: flex !important;
  }

  /* Adjust header for mobile */
  .md-header__title {
    font-size: 0.9rem !important;
  }

  .md-header__button.md-logo img {
    height: 1.5rem !important;
  }

  /* Make sure navigation drawer works on mobile */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 80% !important;
    max-width: 300px !important;
    transform: translateX(0) !important;
    z-index: 4 !important;
    top: var(--header-height) !important;
    bottom: 0 !important;
    height: calc(100vh - var(--header-height)) !important;
    border-right: 2px solid var(--brand-orange) !important;
    border-left: none !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
  }

  /* Add overlay when drawer is open */
  [data-md-toggle="drawer"]:checked ~ .md-overlay {
    display: block !important;
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 3 !important;
  }

  /* Adjust typography for mobile readability */
  .md-typeset {
    font-size: 0.8rem !important;
  }

  .md-typeset h1 { font-size: 1.4rem !important; }
  .md-typeset h2 { font-size: 1.2rem !important; }
  .md-typeset h3 { font-size: 1.0rem !important; }
  .md-typeset h4 { font-size: 0.85rem !important; }

  /* Make tables scrollable on mobile */
  .md-typeset table:not([class]) {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Adjust code blocks for mobile */
  .md-typeset pre {
    padding: 0.8rem !important;
    font-size: 0.65rem !important;
  }

  .md-typeset pre code {
    font-size: 0.65rem !important;
  }

  /* Adjust footer for mobile */
  .md-footer {
    font-size: 0.6rem !important;
    padding: 0 0.5rem !important;
  }

  .md-footer * {
    font-size: 0.6rem !important;
  }

  /* Code tabs should scroll horizontally on mobile */
  .tab-labels {
    justify-content: flex-start !important;
  }

  .tab-label {
    padding: 0.6em 1em !important;
    font-size: 0.65rem !important;
  }
}

/* Tablet and Desktop: Styles for larger screens (>= 768px) */
@media screen and (min-width: 48em) {
  /* Sidebar positioning already defined above, just ensure content margin */
  .md-content {
    margin-right: var(--sidebar-width) !important;
  }

  /* Ensure hamburger menu stays hidden on larger screens */
  .md-header__button[for="__drawer"] {
    display: none !important;
  }

  /* Keep sidebar always visible on desktop */
  .md-sidebar--primary {
    display: block !important;
    visibility: visible !important;
  }
}