/* --- Brand colors (adjust if you have official JMT navy) --- */
:root {
  --jmt-navy: #0B1F3B;
  --jmt-white: #FFFFFF;
}

/* --- Header + Tabs already navy (keep these if you have them) --- */
.md-header,
.md-tabs {
  background-color: var(--jmt-navy) !important;
}

/* Make header icons & title white */
.md-header__button,
.md-header__topic,
.md-header__title {
  color: var(--jmt-white) !important;
}

/* Tab text readable on navy */
.md-tabs__link {
  color: rgba(255, 255, 255, 0.85) !important;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--jmt-white) !important;
}

/* ============================================================
   SEARCH BAR: White background with navy text
   ============================================================ */

/* A) Primary selectors (common in Material) */
.md-search__form {
  background-color: var(--jmt-white) !important;
  border-radius: 6px !important;
}

.md-search__input {
  color: var(--jmt-navy) !important;
  caret-color: var(--jmt-navy) !important;
}

/* Placeholder text */
.md-search__input::placeholder {
  color: rgba(11, 31, 59, 0.60) !important;
}

/* Search icon (magnifier) inside the input */
.md-search__icon,
.md-search__icon svg {
  color: var(--jmt-navy) !important;
  fill: var(--jmt-navy) !important;
}

/* Focus ring / outline */
.md-search__input:focus {
  outline: none !important;
}
.md-search__form:focus-within {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 0 4px rgba(11, 31, 59, 0.35) !important;
}

/* B) Fallbacks (covers theme/internal class variations) */
.md-header .md-search__form input {
  background-color: var(--jmt-white) !important;
  color: var(--jmt-navy) !important;
}
.md-header .md-search__form input::placeholder {
  color: rgba(11, 31, 59, 0.60) !important;
}

/* Dropdown results panel */
.md-search__output {
  background: var(--jmt-white) !important;
}
.md-search-result__meta,
.md-search-result__teaser,
.md-search-result__title {
  color: var(--jmt-navy) !important;
}

/* ============================================================
   RESPONSIVE VIDEO EMBEDS (YouTube / Vimeo / Training Videos)
   ============================================================ */

/* Container keeps 16:9 aspect ratio */
.video-container {
  position: relative;
  width: 100%;
  max-width: 960px;            /* keeps videos readable on wide screens */
  margin: 1.5rem auto;         /* spacing above/below */
  padding-bottom: 56.25%;      /* 16:9 ratio */
  height: 0;
  overflow: hidden;

  /* Subtle Material-style polish */
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11, 31, 59, 0.15);
  background-color: #000;      /* prevents white flash before load */
}

/* Actual iframe */
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Slightly reduce size when inside admonitions */
.md-typeset .admonition .video-container {
  max-width: 100%;
  margin: 1rem 0;
}

/* Optional: tighter spacing inside tabbed content */
.md-typeset .tabbed-set .video-container {
  margin-top: 1rem;
}