/* ============================================================
   Sidebar & Global Beautification — Docker Workshop
   ============================================================ */

/* ── 1. LOGO — make it bigger ── */
.md-header__button.md-logo img,
.md-logo img {
  height: 36px !important;
  width: auto !important;
}

/* ── 2. FONT NORMALISATION — all sidebar items at 0.8rem ── */

/* Top-level plain links (Getting Started, Prerequisites) */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: rgba(0, 0, 0, 0.75) !important;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover {
  color: #0091e6 !important;
  background: rgba(0, 145, 230, 0.06);
}

/* ── 3. LEVEL-1 section headings (DOCKER 101, DOCKER AND AI, etc.) ── */
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
  background: linear-gradient(135deg, #0091e6 0%, #086dd7 100%);
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  margin: 0.6rem 0 0.3rem 0;
  box-shadow: 0 2px 6px rgba(0, 145, 230, 0.3);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link:hover,
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link:hover {
  background: linear-gradient(135deg, #007acc 0%, #0057b8 100%);
  box-shadow: 0 3px 10px rgba(0, 145, 230, 0.4);
  color: #ffffff !important;
}

/* Arrow icon inside level-1 headings */
.md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link .md-nav__icon,
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link .md-nav__icon {
  color: rgba(255, 255, 255, 0.85) !important;
  fill: rgba(255, 255, 255, 0.85) !important;
}

/* ── 4. LEVEL-2 items (Docker Agent, Docker Model Runner, etc.) ── */
.md-nav--primary .md-nav__item--section .md-nav__item > .md-nav__link,
.md-nav--primary .md-nav__item--section .md-nav__item--nested > .md-nav__link {
  color: #0369a1 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  border-left: 3px solid #0091e6;
  padding: 0.3rem 0.5rem 0.3rem 0.65rem;
  margin: 0.1rem 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0 4px 4px 0;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.15s ease;
}

.md-nav--primary .md-nav__item--section .md-nav__item > .md-nav__link:hover,
.md-nav--primary .md-nav__item--section .md-nav__item--nested > .md-nav__link:hover {
  color: #0057b8 !important;
  border-left-color: #0057b8;
  background: rgba(0, 145, 230, 0.07);
}

/* Arrow icon on level-2 items */
.md-nav--primary .md-nav__item--section .md-nav__item > .md-nav__link .md-nav__icon,
.md-nav--primary .md-nav__item--section .md-nav__item--nested > .md-nav__link .md-nav__icon {
  color: #0091e6 !important;
  fill: #0091e6 !important;
}

/* ── 5. LEVEL-3 items (Overview, Tech stack, Develop, etc.) ── */
.md-nav--primary .md-nav__item--section .md-nav__item .md-nav .md-nav__item > .md-nav__link {
  color: #475569 !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  padding: 0.22rem 0.5rem 0.22rem 1.1rem;
  border-left: none;
  background: transparent;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.md-nav--primary .md-nav__item--section .md-nav__item .md-nav .md-nav__item > .md-nav__link:hover {
  color: #0091e6 !important;
  background: rgba(0, 145, 230, 0.06);
}

/* ── 6. ACTIVE / current page ── */
.md-nav__link--active {
  color: #0091e6 !important;
  font-weight: 600 !important;
  background: rgba(0, 145, 230, 0.08) !important;
  border-radius: 4px;
}

/* ── 7. RIGHT TOC — match sidebar font size ── */
.md-nav--secondary .md-nav__link {
  font-size: 0.8rem !important;
  color: rgba(0, 0, 0, 0.7) !important;
}

.md-nav--secondary .md-nav__link:hover {
  color: #0091e6 !important;
}

.md-nav--secondary .md-nav__link--active {
  color: #0091e6 !important;
  font-weight: 600 !important;
}

/* ── 8. SIDEBAR background — subtle off-white ── */
.md-sidebar--primary .md-sidebar__scrollwrap {
  background: #f8fafc;
}

/* ── 9. Spacing and divider ── */
.md-nav--primary > .md-nav__list > .md-nav__item--section {
  margin-bottom: 0.2rem;
}

.md-nav--primary > .md-nav__list > .md-nav__item--section:first-of-type {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #e2e8f0;
}