.spotify-embed iframe{
  width: 100%;
  height: 100%;
  max-width: 720px;
  border: 0;
  border-radius: 12px;
}

/* Grid width - 85% of browser window (all modes) */
.md-grid {
  max-width: 90% !important;
}

/* ============================================
   HEADER - black background with white font
   Applies to ALL color schemes
   ============================================ */
.md-header {
  background-color: black !important;
  color: white !important;
}

.md-header .md-header__title,
.md-header .md-header__topic,
.md-header .md-header__ellipsis,
.md-header .md-ellipsis {
  color: white !important;
}

.md-header__button {
  color: white !important;
}

.md-header__button.md-logo img {
  filter: none;
}

.md-header .md-icon svg {
  fill: white;
}

/* Header search icon */
.md-header .md-search__icon svg {
  fill: white;
}

/* Search input in header */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Search modal/expanded search styling */
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  color: black !important;
  background-color: white !important;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder {
  color: rgba(0, 0, 0, 0.54) !important;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__icon svg {
  fill: black;
}

/* ============================================
   TABS - Light mode: white bg, black text
   ============================================ */
[data-md-color-scheme="default"] .md-tabs {
  background-color: white !important;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: black !important;
}

[data-md-color-scheme="default"] .md-tabs__link:hover,
[data-md-color-scheme="default"] .md-tabs__link:focus {
  color: black !important;
  opacity: 0.7;
}

[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
  color: black !important;
  font-weight: bold;
}

/* ============================================
   TABS - Dark mode: dark bg, white text
   ============================================ */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1e1e1e !important;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: white !important;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link:focus {
  color: white !important;
  opacity: 0.7;
}

[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
  color: white !important;
  font-weight: bold;
}

/* ============================================
   Reduce top padding on main content area (all modes)
   ============================================ */
.md-main__inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.md-sidebar {
  padding-top: 0.5rem !important;
}

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

/* ============================================
   Active navigation item - bolder font (all modes)
   ============================================ */
.md-nav__item--active > .md-nav__link {
  font-weight: 700 !important;
}

.md-nav__link--active {
  font-weight: 700 !important;
}

/* ============================================
   Mobile navigation drawer header - black background
   ============================================ */
.md-nav__title[for="__drawer"] {
  background-color: black !important;
  color: white !important;
}

.md-nav__title[for="__drawer"] .md-nav__button.md-logo {
  color: white !important;
}

/* ============================================
   Left sidebar navigation - wider width
   Only applies when sidebar is fully visible (wide screens)
   Default is ~12.1rem, increased to 15rem
   ============================================ */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 15rem !important;
  }
}

/* ============================================
   Hero headline - responsive font sizes
   "Navigate the Era of Applied AI"
   ============================================ */

/* Base/mobile size (smallest screens) */
.mdx-hero__content h1 {
  font-size: 1.5rem;
}

/* Small tablets and up */
@media screen and (min-width: 30em) {
  .mdx-hero__content h1 {
    font-size: 1.75rem;
  }
}

/* Tablets and up */
@media screen and (min-width: 45em) {
  .mdx-hero__content h1 {
    font-size: 2rem;
  }
}

/* Small desktops and up */
@media screen and (min-width: 60em) {
  .mdx-hero__content h1 {
    font-size: 2.5rem;
  }
}

/* Large desktops and up */
@media screen and (min-width: 76.25em) {
  .mdx-hero__content h1 {
    font-size: 3rem;
  }
}

/* ============================================
   Hero tagline - responsive font sizes
   "Start where you are. Learn what matters..."
   ============================================ */

/* Base/mobile size (smallest screens) */
.mdx-hero__content p {
  font-size: 0.875rem;
}

/* Small tablets and up */
@media screen and (min-width: 30em) {
  .mdx-hero__content p {
    font-size: 0.9rem;
  }
}

/* Tablets and up */
@media screen and (min-width: 45em) {
  .mdx-hero__content p {
    font-size: 0.95rem;
  }
}

/* Small desktops and up */
@media screen and (min-width: 60em) {
  .mdx-hero__content p {
    font-size: 1.05rem;
  }
}

/* Large desktops and up */
@media screen and (min-width: 76.25em) {
  .mdx-hero__content p {
    font-size: 1.2rem;
  }
}

/* ============================================
   Main content text - responsive font sizes
   Applies to article/documentation body text
   ============================================ */

/* Base/mobile size (smallest screens) */
.md-content__inner {
  font-size: 0.8rem;
}

/* Small tablets and up */
@media screen and (min-width: 30em) {
  .md-content__inner {
    font-size: 0.8rem;
  }
}

/* Tablets and up */
@media screen and (min-width: 45em) {
  .md-content__inner {
    font-size: 0.8rem;
  }
}

/* Small desktops and up */
@media screen and (min-width: 60em) {
  .md-content__inner {
    font-size: 0.8rem;
  }
}

/* Large desktops and up */
@media screen and (min-width: 76.25em) {
  .md-content__inner {
    font-size: 0.8rem;
  }
}

/* ============================================
   Navigation sidebar text - responsive font sizes
   ============================================ */

/* Base/mobile size (smallest screens) */
.md-nav {
  font-size: 0.75rem;
}

/* Small tablets and up */
@media screen and (min-width: 30em) {
  .md-nav {
    font-size: 0.8rem;
  }
}

/* Tablets and up */
@media screen and (min-width: 45em) {
  .md-nav {
    font-size: 0.85rem;
  }
}

/* Small desktops and up */
@media screen and (min-width: 60em) {
  .md-nav {
    font-size: 0.7rem;
  }
}

/* Large desktops and up */
@media screen and (min-width: 76.25em) {
  .md-nav {
    font-size: 0.75rem;
  }
}

/* ============================================
   Tabs text - responsive font sizes
   ============================================ */

/* Base/mobile size (smallest screens) */
.md-tabs__link {
  font-size: 0.7rem;
}

/* Small tablets and up */
@media screen and (min-width: 30em) {
  .md-tabs__link {
    font-size: 0.75rem;
  }
}

/* Tablets and up */
@media screen and (min-width: 45em) {
  .md-tabs__link {
    font-size: 0.8rem;
  }
}

/* Small desktops and up */
@media screen and (min-width: 60em) {
  .md-tabs__link {
    font-size: 0.8rem;
  }
}

/* Large desktops and up */
@media screen and (min-width: 76.25em) {
  .md-tabs__link {
    font-size: 0.8rem;
  }
}