/* Import Roboto Serif for headings */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

:root {
  /* Primary Navy from amininno.com */
  --md-primary-fg-color: #233454;
  --md-primary-fg-color--light: #344a71;
  --md-primary-fg-color--dark: #0a2245;

  /* Typography */
  --md-typeset-font: "Roboto Serif", serif;

  /* Custom utility variables for page layouts */
  --amininno-slate-blue: #9fb4c7;
  --amininno-light-gray: #f4f4f6;
}

.md-typeset h2 {
  font-weight: bold !important;
}

/* Hide from layout but keep for TOC/screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Ensure we don't break dark mode if a user toggles it */
[data-md-color-scheme="slate"] {
  /* Use the slate blue as primary in dark mode for better contrast */
  --md-primary-fg-color: #9fb4c7;
  --md-primary-fg-color--light: #b3c5d5;
  --md-primary-fg-color--dark: #8ba3b9;

  --amininno-light-gray: #1e1e1e;
}

/* Custom layout utility classes for two-column split and backgrounds */
.split-layout {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin: 2rem 0;
}

.split-left {
  flex: 0 0 30%;
}

.split-right {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .split-layout {
    flex-direction: column;
  }
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 40%; /* Text takes remaining, image takes exactly 40% */
  align-items: center;
  gap: 1.5rem; /* Horizontal space between text and image on desktop */
  margin-bottom: 1.5rem !important; /* Space between different pathfinders */
  margin-top: 0 !important;
}
.feature-text {
  min-width: 0; /* Essential: prevents wide math equations from breaking the column width */
}
/* Strip excess margin from mkdocs paragraphs inside the text block */
.feature-text p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.feature-image {
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr; /* Stack vertically on mobile */
    gap: 0.5rem; /* VITAL: Tight vertical space between a pathfinder's text and its OWN image on mobile */
    margin-bottom: 2rem !important; /* Keep distinct separation between DIFFERENT pathfinders */
  }
}

.bg-slate-blue {
  background-color: var(--amininno-slate-blue);
  padding: 2rem;
  border-radius: 8px;
  color: #000; /* Black text on blue background */
}

/* When in dark mode, adjust text color for bg-slate-blue so it remains readable */
[data-md-color-scheme="slate"] .bg-slate-blue {
  color: #121212;
}

.bg-light-gray {
  background-color: var(--amininno-light-gray);
  padding: 2rem;
  border-radius: 8px;
}

/* Ensure social icons maintain a consistent size and are spaced equally */
img[alt="GitHub"], img[alt="Link"] {
  width: 64px;
  height: 64px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 1rem;
}

/* Fancy link style */
.fancy-link {
  display: inline-block;
  font-weight: bold;
  padding: 0.6rem 1.2rem;
  margin: 0.5rem 0;
  border-radius: 8px; /* Smooth box */
  background-color: var(--md-primary-fg-color);
  color: white !important; /* Force white text for contrast */
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid transparent;
}

.fancy-link:hover {
  background-color: var(--md-primary-fg-color--light);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  color: white !important;
}

.fancy-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .fancy-link {
  background-color: #233454;
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .fancy-link:hover {
  background-color: #344a71;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------
 * Collapsible Integrated TOC / Subsections Navigation
 * Hides nested TOC sub-lists by default in the primary left navigation
 * and displays them only when the parent section item is active.
 * ------------------------------------------------------------------- */

/* 1. Hide all nested TOC sub-lists by default */
.md-sidebar--primary .md-nav__item > .md-nav,
.md-sidebar--primary .md-nav__item > .md-nav__list {
  display: none;
}

/* 2. Show nested TOC sub-list when the item is active as a page */
.md-sidebar--primary .md-nav__item--active > .md-nav,
.md-sidebar--primary .md-nav__item--active > .md-nav__list {
  display: block;
}

/* 3. Keep nested TOC open if ANY link inside it is active (handles on-page scrolling) */
.md-sidebar--primary .md-nav__item:has(.md-nav__link--active) > .md-nav,
.md-sidebar--primary .md-nav__item:has(.md-nav__link--active) > .md-nav__list {
  display: block;
}

/* -------------------------------------------------------------------
 * Mobile-friendly Math Equations
 * Allows long display math to scroll horizontally instead of overflowing
 * ------------------------------------------------------------------- */
.md-typeset div.arithmatex {
  overflow-x: auto !important;
  overflow-y: auto !important; /* Allows scrolling if somehow it's still too tall, without hard clipping */
  max-width: 100%;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  margin-top: -1em;
  margin-bottom: -1em;
}

.md-typeset div.arithmatex > mjx-container[display="true"] {
  /* Prevent mjx-container from creating its own overflow context that clips */
  overflow: visible !important;
}