/**
 * Nav Tab Dropdown Override — Styles
 * Overrides the standard MkDocs Material navbar to support dropdown menus
 * on nav tabs with children (e.g. "Ops Lab").
 * Works alongside nav-dropdown.js and the tabs-item.html template override
 * in overrides/partials/.
 * To remove: delete this file, nav-dropdown.js, tabs-item.html override,
 * and their references in mkdocs.yml (extra_javascript / extra_css).
 */

/* ── Override Material clipping ── */
.md-tabs { overflow: visible !important; }
.md-tabs__list { overflow: visible !important; contain: none !important; }

.md-tabs__item--has-dropdown {
  position: relative;
}

/* Chevron icon appended to dropdown triggers */
.md-tabs__chevron {
  margin-left: 2px;
  opacity: .4;
  transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.md-tabs__item--open .md-tabs__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.md-tabs__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  z-index: 200;
  padding: 6px;
  border-radius: 10px;
  pointer-events: none;
}

/* Invisible bridge prevents gap between tab and dropdown */
.md-tabs__dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Show on hover (pointer devices only) */
@media (hover: hover) {
  .md-tabs__item--has-dropdown:hover .md-tabs__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .md-tabs__item--has-dropdown:hover .md-tabs__chevron {
    transform: rotate(180deg);
    opacity: 1;
  }
}
/* Show when JS toggles --open (works on all devices) */
.md-tabs__item--open .md-tabs__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.md-tabs__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-tabs__dropdown-item + .md-tabs__dropdown-item {
  margin-top: 2px;
}

.md-tabs__dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none !important;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}

.md-tabs__dropdown-icon {
  flex-shrink: 0;
  transition: opacity .18s ease, color .18s ease, filter .18s ease;
}

/* Per-icon accent colors — always visible */
.md-tabs__dropdown-icon--terminal   { color: #14b8a6; opacity: .72; }
.md-tabs__dropdown-icon--powershell  { color: #38bdf8; opacity: .72; }
.md-tabs__dropdown-icon--code        { color: #f59e0b; opacity: .72; }
.md-tabs__dropdown-icon--log         { color: #ec4899; opacity: .72; }

/* Brighten on hover */
.md-tabs__dropdown-link:hover .md-tabs__dropdown-icon--terminal   { color: #2dd4bf; opacity: 1; filter: drop-shadow(0 0 4px rgba(20,184,166,.35)); }
.md-tabs__dropdown-link:hover .md-tabs__dropdown-icon--powershell  { color: #7dd3fc; opacity: 1; filter: drop-shadow(0 0 4px rgba(56,189,248,.35)); }
.md-tabs__dropdown-link:hover .md-tabs__dropdown-icon--code        { color: #fbbf24; opacity: 1; filter: drop-shadow(0 0 4px rgba(245,158,11,.35)); }
.md-tabs__dropdown-link:hover .md-tabs__dropdown-icon--log         { color: #f472b6; opacity: 1; filter: drop-shadow(0 0 4px rgba(236,72,153,.35)); }

/* ── Slate theme dropdown ── */
[data-md-color-scheme="slate"] .md-tabs__dropdown {
  background: #1a2332;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 1px rgba(255,255,255,0.06);
}
[data-md-color-scheme="slate"] .md-tabs__dropdown-link {
  color: rgba(224,230,237,0.65);
}
[data-md-color-scheme="slate"] .md-tabs__dropdown-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
[data-md-color-scheme="slate"] .md-tabs__dropdown-link--active {
  color: var(--highlight-color);
}

/* ── Light theme dropdown ── */
[data-md-color-scheme="light"] .md-tabs__dropdown {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 12px 36px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.06);
}
[data-md-color-scheme="light"] .md-tabs__dropdown-link {
  color: rgba(0,0,0,0.6);
}
[data-md-color-scheme="light"] .md-tabs__dropdown-link:hover {
  background: rgba(0,0,0,0.04);
  color: #102a43;
}
[data-md-color-scheme="light"] .md-tabs__dropdown-link--active {
  color: var(--highlight-color);
}