/* ── Container ────────────────────────────────────────────────────────────────
   Replaces UIkit uk-container + uk-container-expand.
   style.css already sets padding:0 override for .main-content .uk-container,
   so only box-model + centering are needed here. */
.uk-container {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}
.uk-container-expand {
  max-width: 100%;
}

/* ── Offcanvas overlay (the dimmed backdrop) ──────────────────────────────── */
/* z-index must beat .site-header's 1000 (style.css) — #mobile-menu and
   .site-header are siblings in the DOM with .site-header rendered later,
   so equal z-index values would let the sticky header win the paint order
   and cover the drawer's own header/close button (drawer would appear to
   start "too high", glued under the site header with no title bar). */
#mobile-menu {
  background: rgba(0, 0, 0, 0);
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: background 0.25s ease, visibility 0s linear 0.25s;
  visibility: hidden;
  z-index: 1010;
}
#mobile-menu.uk-open {
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  transition: background 0.25s ease;
  visibility: visible;
}

/* ── Offcanvas bar (the sliding side panel) ───────────────────────────────── */
.uk-offcanvas-bar {
  bottom: 0;
  left: -280px;
  overflow-y: auto;
  position: fixed;
  top: 0;
  transition: left 0.25s ease;
  width: 280px;
  z-index: 1001;
}
#mobile-menu.uk-open .uk-offcanvas-bar {
  left: 0;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.uk-offcanvas-close,
.uk-close {
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

/* ── Fade-in animation (replaces uk-animation-fade) ──────────────────────── */
@keyframes uk-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.uk-animation-fade {
  animation: uk-fade 0.35s ease both;
}

/* ── Video hover-preview — fade-in transition prevents black-flash flicker ── */
/* opacity starts at 0 (set by JS MutationObserver); transitions to 1 on canplay */
.video-preview-video {
  opacity: 0;
  transition: opacity 0.2s ease;
}