/***********************************************
 *  GIGANTIQ CUSTOM MKDOCS THEME CSS
 *  Organized, commented, and mode-aware
 ***********************************************/


/* =============================================
   =============== IMAGE STYLING ===============
   ============================================= */

/* Display multiple images in a row */
.image-row {
  display: flex;
  gap: 10px; /* space between images */
  align-items: center;
}

/* Image size classes for markdown <img> tags */
.small-image { width: 30%; }
.medium-image { width: 60%; }
.large-image { width: 100%; }



/* =============================================
   ============= NAVIGATION CLEANUP =============
   ============================================= */

/* Hide redundant "site name" from sidebar nav */
.md-nav__title[data-md-component="title"],
.md-sidebar .md-nav__title,
.md-sidebar .md-nav__link--site,
nav.md-nav .md-nav__title {
  display: none !important;
}

/* Hide links to home if repeated in sidebar */
.md-sidebar a[href="/"],
.md-sidebar a[href="./"],
.md-sidebar a[href="index.html"] {
  display: none !important;
}

/* Keep site name/logo visible in top header bar */
.md-header .md-header-nav__title,
.md-header .md-logo, 
.header .md-logo {
  display: block !important;
}


/* Hide site name in the top header bar */
.md-header__title,
[data-md-component="header-title"] {
  display: none !important;
}


/* Center the search + toggle group inside the header */
.md-header__inner {
  display: flex !important;
  justify-content: center;     /* center everything by default */
  align-items: center;
}

/* Keep the logo stuck to the left */
.md-header__title,
.md-logo {
  margin-right: auto !important;   /* pushes logo left */
}

/* Optional: keep spacing tight */
[data-md-component="search"],
[data-md-component="palette"] {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}


/* =============================================
   ============ NAV LINK COLOR & STYLE ==========
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Light mode nav headings */
[data-md-color-scheme="default"] .md-nav__item--section > .md-nav__link {
  color: #2c2c2c !important;
  font-weight: 600;
  font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2px;
}

/* Dark mode nav headings */
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link {
  color: #fff !important;
  font-weight: 600;
  font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2px;
}

/* Add vertical space between nav items for readability */
.md-nav__item {
  margin-bottom: 0.9rem; /* adjust to taste */
}

/* Keep nested nav sections expanded */
.md-nav__list.md-nav__list--nested {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
}

/* Align icon and text horizontally */
.md-nav__link {
  display: flex;
  align-items: center;
  font-family: "Segoe UI Symbol", "Arial", sans-serif;
}

/* Space between icon and text */
.md-nav__link::before {
  margin-right: 2rem;
  font-size: 1em;
  display: inline-block;
}

/* Reserve same space for all icons */
.md-nav__link span {
  display: inline-block;
  min-width: 1.2em;
}

/* Light mode text color override */
[data-md-color-scheme="default"] .md-nav__link {
  color: #3c3c3c !important; /* softer neutral grey */
}

/* Dark mode text color override */
[data-md-color-scheme="slate"] .md-nav__link {
  color: #dddddd92 !important;
}

/* ---------- ACTIVE PAGE HIGHLIGHT ---------- */
.md-nav__item:not(.md-nav__item--section) > .md-nav__link--active {
  font-weight: 600 !important;
  border-radius: 10px;
  background-color: rgba(127, 174, 255, 0.123); /* Light mode */
  color: #2f8cff !important;

  
  /* Make the box bigger */
  padding: 0.3rem 0rem;   /* increase vertical & horizontal padding */

}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  background-color: rgba(127, 174, 255, 0.123); /* Dark mode */
  color: #2f8cff !important;
}



/* =============================================
   ========= DARK MODE BACKGROUND OVERRIDE ======
   ============================================= */

/* Make dark mode background slightly darker */
[data-md-color-scheme="slate"] {
  /* Dark base background */
  --md-default-bg-color: #0e1116;

  /* Apply a blue-tinted gradient overlay */
  background: radial-gradient(
      circle at top left,
      rgba(0, 80, 255, 0.05),
      rgba(0, 40, 120, 0.15),
      rgba(0, 0, 0, 0.85)
    )
    fixed;

  /* Ensure all child elements inherit dark tint smoothly */
  color-scheme: dark;
}



/* =============================================
   ============ TEXT AND TYPOGRAPHY =============
   ============================================= */

/* Heading size adjustments for clarity */
.md-typeset h1 {
  font-size: 1.5rem;
  line-height: 1.3;
}

.md-typeset h2 {
  font-size: 1.2rem;
  line-height: 1.35;
}

.md-typeset h3 {
  font-size: 1.0rem;
  line-height: 1.4;
}

.md-typeset h4 {
  font-size: 0.9rem;
  line-height: 1.4;
}

.md-typeset h5 {
  font-size: 0.8rem;
  line-height: 1.4;
}

.md-typeset h6 {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Add consistent spacing around headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

/* Body text readability */
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  font-size: 0.7rem;
  line-height: 1.5;
  color: #222; /* default text color for light mode */
}

/* Improve clarity in dark mode */
[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li,
[data-md-color-scheme="slate"] .md-typeset td,
[data-md-color-scheme="slate"] .md-typeset th {
  color: #ddd;
}

/* Lighter grey headings in light mode */
[data-md-color-scheme="default"] .md-nav__title {
  color: #777 !important;
}

/* Slightly darker light-mode body text */
[data-md-color-scheme="default"] .md-typeset {
  color: #333 !important;
}


/* Slightly wider content area without breaking layout */
.md-grid {
  max-width: 1500px;   /* default is 1100px */
}

/* Reliable gap between nav section heading and its pages */
.md-nav__item--section > .md-nav__link {
  padding-bottom: 0.2rem !important; /* keeps the heading visually separated */
}

.md-nav__item--section > .md-nav__list {
  margin-top: 0.7rem !important;     /* the actual space between heading and pages */
  padding-top: 0 !important;         /* clear any internal padding that could collapse spacing */
}


@media (prefers-color-scheme: light) {
    /* Add a subtle glow behind the page content */
    .md-main {
        background-color: #ffffff;  /* keep base white */
        box-shadow: 0 0 30px 15px rgba(0, 0, 255, 0.05); /* soft blue glow */
        border-radius: 12px;  /* optional rounded edges */
    }

    /* Optional: add glow around sections too */
    .md-typeset {
        box-shadow: 0 0 20px 10px rgba(0, 0, 255, 0.03);
        border-radius: 8px;
    }
}


/* =============================================
   ============== header to site space =========
   ============================================= */ 


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

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




/* Apply colors only to Behavioral Model cards */
.behavioral-model > ul > li:nth-child(1) {
    background-color: #1976d2;
    color: #fff;
}
.behavioral-model > ul > li:nth-child(2) {
    background-color: #0d47a1;
    color: #fff;
}
.behavioral-model > ul > li:nth-child(3) {
    background-color: #6a1b9a;
    color: #fff;
}
.behavioral-model > ul > li:nth-child(4) {
    background-color: #ad1457;
    color: #fff;
}

/* Optional: hover effect only for Behavioral Model */
.behavioral-model > ul > li:hover {
    transform: scale(1.03);
    transition: 0.3s ease;
}



.md-typeset .grid.cards > ul > li:hover {
    transform: scale(1.03);
    transition: 0.3s ease;
}


.md-typeset .grid.cards > ul > li {
    border-radius: 8px;
    padding: 16px;