/* ================================================================
   HERO BACKGROUND VIDEO  —  paste into style.css
   Use class="hero-section" on the <section>
   Use class="hero-bg-video" on the <video>
   ================================================================ */

/* 1. Section wrapper */
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;          /* ensures full-screen hero */
}

/* 2. Video — full-bleed background, never interactive */
.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;

    /* Block every form of touch/pointer so the browser
       NEVER shows its native play/pause overlay */
    pointer-events: none !important;
    touch-action:   none !important;
    user-select:    none !important;
    -webkit-user-select: none !important;
}

/* 3. Hide ALL native browser video controls — every vendor */
.hero-bg-video::-webkit-media-controls                       { display:none !important; }
.hero-bg-video::-webkit-media-controls-enclosure            { display:none !important; }
.hero-bg-video::-webkit-media-controls-overlay-play-button  { display:none !important; }
.hero-bg-video::-webkit-media-controls-panel                { display:none !important; }
.hero-bg-video::-webkit-media-controls-play-button          { display:none !important; }
.hero-bg-video::-webkit-media-controls-timeline             { display:none !important; }
.hero-bg-video::-webkit-media-controls-current-time-display { display:none !important; }
.hero-bg-video::-webkit-media-controls-volume-slider        { display:none !important; }
.hero-bg-video::-moz-media-controls                         { display:none !important; }

/* 4. Invisible shield — sits above the video, absorbs all
      stray touches before they reach the video element */
.hero-video-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
    touch-action: none;
    background: transparent;
    cursor: default;
}

/* 5. Overlay (de-overlay dark tint) above shield */
.hero-section .de-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* 6. Content above everything */
.hero-section .container {
    position: relative;
    z-index: 3;
}