@charset "UTF-8";
/*
 lvi/video
 The frame fills its container: a 16:9 poster with a play button. Two play
 buttons, as in the designs: dark with a lime glyph (centered video bands) and
 light with a teal glyph over a soft scrim (split layouts, article videos).
 Portrait videos (--portrait, --video-ratio on the wrapper): the frame stays
 16:9 in layouts with the poster contained over a blurred fill of itself;
 with --fit (standalone doctor / story frames) the frame takes the ratio.
 The modal (.lvi-video-modal) is created by script.js and tints Vidstack's
 default player to the palette.
========================================================================== */
:root .lvi-video {
  --video-radius: 24px;
  width: 100%;
  box-sizing: border-box;
  /* Frame: poster + play; a <button> on the front end */
}
:root .lvi-video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--video-radius);
  overflow: hidden;
  background: var(--wp--preset--color--deep-teal);
  cursor: pointer;
  isolation: isolate;
  font: inherit;
  color: inherit;
  text-align: center;
}
:root .lvi-video__frame:focus-visible {
  outline: 3px solid var(--wp--custom--color--focus);
  outline-offset: 3px;
}
:root .lvi-video__poster, :root .lvi-video__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
:root .lvi-video__poster {
  transition: transform 0.3s ease;
}
:root .lvi-video__fill, :root .lvi-video__fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
:root .lvi-video__fill {
  inset: -24px;
  z-index: -1;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  filter: blur(24px) brightness(0.7);
}
:root .lvi-video--portrait :is(.lvi-video__poster, .lvi-video__poster img) {
  object-fit: contain;
}
:root .lvi-video--fit .lvi-video__frame {
  aspect-ratio: var(--video-ratio, 9/16);
}
:root .lvi-video--fit :is(.lvi-video__poster, .lvi-video__poster img) {
  object-fit: cover;
}
:root .lvi-video--fit .lvi-video__fill {
  display: none;
}
:root .lvi-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(0, 51, 54, 0.85);
  color: var(--wp--preset--color--lime);
  box-shadow: 0 8px 24px rgba(0, 51, 54, 0.35);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
:root .lvi-video__play svg {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  fill: currentColor;
  stroke: none;
}
@media screen and (max-width: 575px) {
  :root .lvi-video__play {
    width: 64px;
    height: 64px;
  }
  :root .lvi-video__play svg {
    width: 24px;
    height: 24px;
  }
}
:root .lvi-video__frame:hover .lvi-video__poster, :root .lvi-video__frame:focus-visible .lvi-video__poster {
  transform: scale(1.02);
}
:root .lvi-video__frame:hover .lvi-video__play, :root .lvi-video__frame:focus-visible .lvi-video__play {
  transform: scale(1.05);
}
:root .lvi-video__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--wp--preset--color--on-dark);
  font-family: var(--wp--preset--font-family--primary);
  font-size: 15px;
}
:root .lvi-video {
  /* Light play button with a soft scrim */
}
:root .lvi-video--light .lvi-video__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 51, 54, 0.1), rgba(0, 51, 54, 0.35));
  pointer-events: none;
}
:root .lvi-video--light .lvi-video__play {
  width: 78px;
  height: 78px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--wp--preset--color--deep-teal);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
:root .lvi-video--light .lvi-video__play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px;
}
@media screen and (max-width: 575px) {
  :root .lvi-video--light .lvi-video__play {
    width: 60px;
    height: 60px;
  }
  :root .lvi-video--light .lvi-video__play svg {
    width: 22px;
    height: 22px;
  }
}
:root {
  /* Dark band: lighter frame fallback */
}
:root :is(.has-deep-teal-background-color, .has-darker-teal-background-color, .is-dark) .lvi-video .lvi-video__frame {
  background: #0B4A4D;
}

/*
 Modal: created once by script.js, appended to <body>.
========================================================================== */
.lvi-video-modal {
  --video-ratio: 16 / 9;
  --modal-max-h: 85vh;
}
@supports (height: 1dvh) {
  .lvi-video-modal {
    --modal-max-h: 85dvh;
  }
}
.lvi-video-modal {
  width: min(1100px, 100vw - 32px, var(--modal-max-h) * (var(--video-ratio)));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--wp--preset--color--deep-teal);
  color: var(--wp--preset--color--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: visible;
}
.lvi-video-modal::backdrop {
  background: rgba(0, 37, 39, 0.82);
  backdrop-filter: blur(2px);
}
.lvi-video-modal__player {
  aspect-ratio: var(--video-ratio);
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.lvi-video-modal__player media-player,
.lvi-video-modal__player .lvi-video-modal__player > * {
  width: 100%;
  height: 100%;
}
.lvi-video-modal__player media-player {
  aspect-ratio: var(--video-ratio);
  --media-brand: var(--wp--preset--color--lime);
  --media-focus-ring-color: var(--wp--preset--color--lime);
  --media-slider-track-fill-bg: var(--wp--preset--color--lime);
  border-radius: 20px;
}
.lvi-video-modal__player .vds-slider:focus-visible,
.lvi-video-modal__player .vds-slider[data-focus] {
  outline: none;
  box-shadow: none;
}
.lvi-video-modal__player .vds-slider:focus-visible .vds-slider-track,
.lvi-video-modal__player .vds-slider:focus-visible .vds-slider-chapters,
.lvi-video-modal__player .vds-slider[data-focus] .vds-slider-track,
.lvi-video-modal__player .vds-slider[data-focus] .vds-slider-chapters {
  box-shadow: none;
}
.lvi-video-modal__player .vds-chapter-title {
  opacity: 0;
}
.lvi-video-modal__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 241, 232, 0.14);
  color: var(--wp--preset--color--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lvi-video-modal__close svg {
  width: 18px;
  height: 18px;
}
.lvi-video-modal__close:hover, .lvi-video-modal__close:focus-visible {
  background: var(--wp--preset--color--lime);
  color: var(--wp--preset--color--deep-teal);
  outline: none;
}
@media screen and (max-width: 575px) {
  .lvi-video-modal {
    --modal-max-h: 92vh;
  }
  @supports (height: 1dvh) {
    .lvi-video-modal {
      --modal-max-h: 92dvh;
    }
  }
  .lvi-video-modal {
    width: min(100vw, var(--modal-max-h) * (var(--video-ratio)));
    border-radius: 0;
  }
  .lvi-video-modal__player {
    border-radius: 0;
  }
  .lvi-video-modal__close {
    top: 8px;
    right: 8px;
  }
}

/*
 Vidstack keyframes, re-declared for Remove Unused CSS.
 Vidstack's theme.css names its keyframes only inside var() fallbacks
 (`animation: var(--media-buffering-animation, vds-buffering-spin 1s …)`).
 RUCSS keeps a @keyframes block only when a kept rule names it in a plain
 animation value, so on a cached page every one of these was dropped: the
 buffering spinner froze, the keyboard bezel never faded, and the settings
 menu and control tooltips (opacity 0 until their enter animation) never
 showed. The selectors below match the (.*)vds-(.*) safelist entry and name
 the keyframes plainly; the declarations mirror Vidstack's own, including
 its reduced-motion overrides, which these higher-specificity rules would
 otherwise defeat.
========================================================================== */
@keyframes vds-buffering-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes vds-bezel-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes vds-menu-enter {
  from {
    opacity: 0;
    transform: var(--exit-transform);
  }
  to {
    opacity: 1;
    transform: var(--enter-transform);
  }
}
@keyframes vds-menu-exit {
  from {
    opacity: 1;
    transform: var(--enter-transform);
  }
  to {
    opacity: 0;
    transform: var(--exit-transform);
  }
}
@keyframes vds-tooltip-enter {
  from {
    opacity: 0;
    transform: var(--exit-transform);
  }
  to {
    opacity: 1;
    transform: var(--enter-transform);
  }
}
@keyframes vds-tooltip-exit {
  from {
    opacity: 1;
    transform: var(--enter-transform);
  }
  to {
    opacity: 0;
    transform: var(--exit-transform);
  }
}
.lvi-video-modal [data-buffering] :is(.vds-buffering-icon, .vds-buffering-spinner) {
  animation: vds-buffering-spin 1s linear infinite;
}
.lvi-video-modal .vds-kb-bezel {
  animation: vds-bezel-fade 0.35s linear 1 normal forwards;
}
.lvi-video-modal .vds-menu-items[data-root][aria-hidden=true] {
  animation: vds-menu-exit 0.2s ease-out;
}
.lvi-video-modal .vds-menu-items[data-root][aria-hidden=false] {
  animation: vds-menu-enter 0.3s ease-out forwards;
}
.lvi-video-modal .vds-tooltip-content:not([data-visible]) {
  animation: vds-tooltip-exit 0.2s ease-out;
}
.lvi-video-modal .vds-tooltip-content[data-visible] {
  animation: vds-tooltip-enter 0.2s ease-in forwards;
}
@media (prefers-reduced-motion: reduce) {
  .lvi-video-modal [data-buffering] :is(.vds-buffering-icon, .vds-buffering-spinner) {
    animation-duration: 8s;
  }
  .lvi-video-modal .vds-kb-bezel,
  .lvi-video-modal .vds-tooltip-content {
    animation: none;
  }
  .lvi-video-modal .vds-menu-items {
    animation: none;
    opacity: 1;
  }
}