a:focus,
button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}




.elementor-nav-menu a:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}


/* ===== Accessible focus styles (keep these) ===== */
a:focus,
button:focus,
.elementor-nav-menu a:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* =======================================================================
   WordPress MediaElement (mejs) — Branded, consistent, non-conflicting CSS
   Colors: primary #054f63 (icons, played portion), secondary #90c2c0 (bar)
   ======================================================================= */

/* Make the control bar visible and neat */
.mejs-container .mejs-controls {
  background-color: #90c2c0 !important;  /* secondary brand color */
  border-radius: 8px;
  padding: 6px;
  /* Use flex to stop overlaps and keep items aligned */
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Ensure the timeline fills available space without colliding with the timer */
.mejs-container .mejs-time-rail {
  flex: 1 1 auto !important;          /* take remaining space */
  min-width: 120px;                    /* avoid collapsing too small */
}

/* Timer (current time / duration) — readable and non-overlapping */
.mejs-container .mejs-time {
  position: static !important;         /* reset any absolute positioning */
  display: inline-block !important;
  margin-left: 8px !important;
  margin-right: 4px !important;
  background: transparent !important;
  color: #054f63 !important;           /* primary brand color */
  white-space: nowrap;                 /* prevent wrapping/collisions */
}

/* Buttons: play, pause, mute, volume — make icons visible in ALL skins */
/* Modern MEJS uses inline SVG */
.mejs-container .mejs-button svg {
  fill: #054f63 !important;
  stroke: #054f63 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Legacy skins use ::before or font icons */
.mejs-container .mejs-button > button::before {
  color: #054f63 !important;
  opacity: 1 !important;
}

/* Prevent old sprite/image backgrounds from hiding icons */
.mejs-container .mejs-button > button {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #054f63 !important;          /* fallback if using font icons */
  opacity: 1 !important;
  padding: 0 !important;
}

/* Progress rail: track + played + buffered (branded and readable) */
.mejs-container .mejs-time-total {
  background: #e9f2f1 !important;     /* light neutral for contrast */
  border-radius: 6px !important;
  height: 8px !important;
}
.mejs-container .mejs-time-current {
  background: #054f63 !important;     /* played portion (primary) */
  border-radius: 6px !important;
}
.mejs-container .mejs-time-loaded {
  background: #b9d7d5 !important;     /* buffered portion (soft tint) */
  border-radius: 6px !important;
}

/* Volume slider to match the rail */
.mejs-container .mejs-horizontal-volume-slider,
.mejs-container .mejs-volume-slider {
  background: #e9f2f1 !important;
  border-radius: 6px !important;
  height: 8px !important;
}
.mejs-container .mejs-horizontal-volume-total,
.mejs-container .mejs-horizontal-volume-current {
  background: #054f63 !important;
  border-radius: 6px !important;
}

/* Modern browsers: unify slider/timeline thumb color */
audio,
.mejs-container audio {
  accent-color: #054f63;               /* affects thumb colors */
}

/* OPTIONAL: If any theme rule forces weird positioning inside controls, neutralize it */
.mejs-container .mejs-controls > * {
  position: static !important;
  float: none !important;              /* avoid float-based overlaps */
}