/* Header Video plugin styles */

.kh-hv-bg{
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
}

.kh-hv-bg__media{
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* keep background non-interactive so foreground blocks are clickable */
}

.kh-hv-iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  /* Oversize and center to approximate "cover" since iframe has no object-fit */
  width: calc(210% * var(--kh-hv-scale, 1));
  height: calc(120% * var(--kh-hv-scale, 1));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.kh-hv-bg__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Real DOM shield rendered as a sibling above the iframe inside __media.
   Unlike ::after pseudo-elements, a real element with a non-zero background
   is composited by the browser on top of the iframe's texture, covering any
   YouTube overlay UI (pause flash, info cards) that renders inside the iframe.
   Background must be non-zero — fully transparent elements don't composite
   over cross-origin iframes. rgba(0,0,0,0.004) is below human perception. */
.kh-hv-bg__shield{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.004);
}


.kh-hv-bg__content{
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
}

/* Content position (similar to Cover block) */
.kh-hv-bg.is-position-top-left .kh-hv-bg__content { justify-content:flex-start; align-items:flex-start; }
.kh-hv-bg.is-position-top-center .kh-hv-bg__content { justify-content:center; align-items:flex-start; }
.kh-hv-bg.is-position-top-right .kh-hv-bg__content { justify-content:flex-end; align-items:flex-start; }

.kh-hv-bg.is-position-center-left .kh-hv-bg__content { justify-content:flex-start; align-items:center; }
.kh-hv-bg.is-position-center-center .kh-hv-bg__content { justify-content:center; align-items:center; }
.kh-hv-bg.is-position-center-right .kh-hv-bg__content { justify-content:flex-end; align-items:center; }

.kh-hv-bg.is-position-bottom-left .kh-hv-bg__content { justify-content:flex-start; align-items:flex-end; }
.kh-hv-bg.is-position-bottom-center .kh-hv-bg__content { justify-content:center; align-items:flex-end; }
.kh-hv-bg.is-position-bottom-right .kh-hv-bg__content { justify-content:flex-end; align-items:flex-end; }

/* Content width: make inner content span the full width of the background */
.kh-hv-bg.is-content-fullwidth .kh-hv-bg__content > *{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Editor-specific wrappers */
.kh-hv-bg.is-content-fullwidth .kh-hv-bg__content > .block-editor-inner-blocks,
.kh-hv-bg.is-content-fullwidth .kh-hv-bg__content > .block-editor-inner-blocks > .block-editor-block-list__layout{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.kh-hv--placeholder,
.kh-hv-bg__placeholder,
.kh-hv-embed__placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: repeating-linear-gradient(45deg, #f6f6f6, #f6f6f6 10px, #f0f0f0 10px, #f0f0f0 20px);
  min-height: 120px;
  text-align: center;
  font-size: 14px;
}

.kh-hv-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.kh-hv-embed .kh-hv-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  pointer-events: auto;
  border: 0;
}

/* Shield rendered above the iframe when controls are hidden — covers YouTube's
   centre overlay UI (pause flash, info cards). Must be a real element with a
   non-zero background to composite over the cross-origin iframe. z-index 1 sits
   above the iframe (no z-index) but below the link overlay (z-index 2). */
.kh-hv-embed__shield{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.004);
}

/* Poster image for hover-play: a normal-sized thumbnail that sits above the
   iframe (which is cropped to 600% width). Fades out on hover to reveal the
   video, fades back on leave to hide the paused frame. */
.kh-hv-embed__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.kh-hv-embed__poster--hidden{
  opacity: 0;
}

/* Hover-play mode: clip the oversized iframe and show a pointer cursor.
   overflow:hidden is what makes the crop technique work. */
.kh-hv-embed--hover-play{
  cursor: pointer;
  overflow: hidden;
}

/* Crop trick to hide YouTube UI overlays on the horizontal axis:
   The iframe is 600% wide and centred so only the middle ~17% is visible through
   the wrapper's overflow:hidden. YouTube's title, channel name, logo and end cards
   are all rendered near the left/right edges and are clipped away.
   Maths: margin-left = -(600% - 100%) / 2 = -250% */
.kh-hv-embed--hover-play .kh-hv-iframe{
  width: 600%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -250%;
  transform: none;
  pointer-events: none;
  border: 0;
}

/* Transparent full-area anchor overlay for click-to-post navigation */
.kh-hv-embed__link-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  cursor: pointer;
}

/* When link-to-post is active, disable pointer events on the iframe so all
   clicks are captured by the anchor overlay rather than being swallowed by
   the YouTube iframe */
.kh-hv-embed--linked .kh-hv-iframe{
  pointer-events: none;
}