/* ========================== Video Header (clean) ========================= */

.vh-hero{
  --vh-offset: 0px;                 /* sticky header height */
  --vh-overlay: rgba(0,0,0,.35);    /* readability veil */
  --vh-text-color: #fff;            /* default text color */
  --vh-ctrl-bg: rgba(20,20,20,.55); /* controls background */
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-family: "Kanit", Arial, sans-serif;
  color: var(--vh-text-color);
}
.vh-hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--vh-overlay);
  z-index:1; pointer-events:none;
}

/* Video layer (NO z-index to avoid stacking-context traps) */
.vh-video-wrap{ position:absolute; inset:0; }
.vh-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Content layer fills hero area (above overlay and video) */
.vh-content{
  position:absolute; z-index:2;
  inset: var(--vh-offset, 0) 0 0 0;
  display:flex !important; flex-direction:column;
  gap:.75rem;
  max-width: 1400px; width:100%;
  margin-inline:auto;
  padding: clamp(3rem, 8vh, 6rem) 30px;

  /* defaults: left + top */
  text-align:left;
  align-items:flex-start;     /* horizontal */
  justify-content:flex-start; /* vertical */
}

/* Ensure headings are white by default (builder can override) */
.vh-hero .vh-h1, .vh-hero .vh-sub{ color: var(--vh-text-color); }

/* Horizontal alignment helpers */
.vh-content.align-left{   text-align:left;  align-items:flex-start; }
.vh-content.align-center{ text-align:center;align-items:center; }
.vh-content.align-right{  text-align:right; align-items:flex-end; }

/* Vertical alignment helpers */
.vh-content.valign-top{    justify-content:flex-start; }
.vh-content.valign-middle{ justify-content:center; }
.vh-content.valign-bottom{ justify-content:flex-end; }

/* Typography defaults */
.vh-h1{  font-weight:600; font-size: clamp(2.4rem, 6.8vw, 5.4rem); line-height:1.1; margin:0; letter-spacing:-.015em; }
.vh-sub{ font-size: clamp(1rem, 2.2vw, 1.25rem); opacity:.92; margin:0; }

/* Controls (overlay glass) — SIBLING of .vh-video-wrap so it sits above */
.vh-ctrls{
  position:absolute;
  z-index:4;
  display:flex; gap:.5rem;
  padding:.5rem .6rem; border-radius:999px;
  background: var(--vh-ctrl-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  color:#fff;
  pointer-events:auto;
}

/* Overlay placements */
.vh-ctrls--left{   left:1rem; bottom:1rem; }
.vh-ctrls--center{ left:50%; top:60%; transform: translate(-50%,-50%); }

/* Below-video placement (outside the hero) */
.vh-ctrls--below{
  position:static;
  margin:0 auto .75rem auto;
  padding-top:.75rem;
  background:transparent; border:0; box-shadow:none;
  display:flex; justify-content:center; align-items:center; gap:.6rem;
}

/* Buttons */
.vh-btn{
  appearance:none; border:0; background: rgba(255,255,255,.10);
  color:#fff; cursor:pointer; padding:.55rem; border-radius:999px;
  display:grid; place-items:center;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.vh-ctrls--below .vh-btn{ background: rgba(20,20,20,.85); }
.vh-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); }
.vh-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.vh-btn svg{ display:block; }

/* Toggle icon swap */
.vh-toggle .icon-pause{ display:none; }
.vh-toggle.is-playing .icon-play{ display:none; }
.vh-toggle.is-playing .icon-pause{ display:block; }

/* Caption styling (visual polish; position is nudged via JS) */
.vh-video::cue{
  color:#fff;
  background: rgba(0,0,0,.55);
  font-weight:600;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.2;
  text-shadow: 0 2px 3px rgba(0,0,0,.6);
  padding: .15em .4em;
  border-radius:.25em;
}

/* Mobile defaults: center unless explicitly set */
@media (max-width:600px){
  .vh-content{
    text-align:center; align-items:center; justify-content:center;
    padding: clamp(2rem, 12vh, 5rem) 5vw;
  }
  .vh-content.align-left{  text-align:left;  align-items:flex-start; }
  .vh-content.align-right{ text-align:right; align-items:flex-end; }
  .vh-content.valign-top{    justify-content:flex-start; }
  .vh-content.valign-bottom{ justify-content:flex-end; }
  .vh-ctrls--center{ left:50%; top:68%; transform: translate(-50%,-50%); }
}