/* ==========================================================================
   BHUTAN TRAVEL MASTER — HERO COMPONENT
   Responsive / Dynamic Full-Cover Sizing (No Black Bars)
   WITH FIXED MUTE BUTTON STATE
   ========================================================================== */

/* ==========================================================================
   1. HERO CONTAINER
   --------------------------------------------------------------------------
   Full viewport height by default with overflow protection to eliminate 
   top/bottom black bars across all aspect ratios.
   ========================================================================== */

.hero-banner {
    position: relative !important;

    width: 100% !important;
    min-height: 60vh !important;
    height: 100vh !important; /* Forces hero to span full viewport height */

    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: #000000 !important; /* Pure black fallback */

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}


/* ==========================================================================
   2. VIDEO
   --------------------------------------------------------------------------
   Center-aligned and scaled edge-to-edge with object-fit: cover to completely
   fill the container and prevent letterbox spaces.
   ========================================================================== */

.hero-banner video,
.hero-banner .hero-banner-video,
.hero-banner .hero-video {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;

    display: block !important;

    object-fit: cover !important; /* Eliminates side/top black bars completely */
    object-position: center center !important;

    transform: translate(-50%, -50%) !important;

    z-index: 0 !important;

    filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: #000000 !important;
}


/* ==========================================================================
   3. HERO OVERLAY
   ========================================================================== */

.hero-banner::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(15, 23, 42, 0.25) 0%,
            rgba(15, 23, 42, 0.50) 100%
        ) !important;

    z-index: 1 !important;

    pointer-events: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* ==========================================================================
   4. HERO CONTENT
   ========================================================================== */

.hero-banner-content {
    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto !important;

    padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px) !important;

    color: #ffffff !important;

    text-align: center !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;
}


/* ==========================================================================
   5. TITLE
   ========================================================================== */

.hero-banner-title {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;

    margin: 0 0 clamp(8px, 1.5vw, 16px) 0 !important;
    padding: 0 !important;

    font-size:
        clamp(
            1.75rem,
            4.5vw,
            3.75rem
        ) !important;

    font-weight: 800 !important;

    letter-spacing: -0.5px !important;

    line-height: 1.15 !important;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.6) !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.hero-banner-title .highlight-green {
    color: var(--green, #34d399) !important;
}


/* ==========================================================================
   6. SUBTITLE
   ========================================================================== */

.hero-banner-subtitle {
    display: block !important;

    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size:
        clamp(
            0.9rem,
            1.8vw,
            1.35rem
        ) !important;

    font-weight: 400 !important;

    color: #ffffff !important;

    line-height: 1.4 !important;

    letter-spacing: 0.2px !important;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.8) !important;
}


/* ==========================================================================
   7. MEDIA CONTROLS - FIXED
   ========================================================================== */

.hero-banner-controls {
    position: absolute !important;

    top: clamp(12px, 2vw, 24px) !important;
    right: clamp(12px, 3vw, 30px) !important;

    z-index: 10 !important;

    display: flex !important;

    gap: clamp(6px, 1vw, 12px) !important;

    isolation: isolate !important;

    pointer-events: auto !important;
}


/* ==========================================================================
   8. ICON BUTTON - FIXED STATE VISIBILITY
   ========================================================================== */

.btn-icon {
    position: relative;

    z-index: 10;

    width: clamp(36px, 4vw, 44px);
    height: clamp(36px, 4vw, 44px);

    padding: 0;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.25);

    background: rgba(15, 23, 42, 0.6);

    color: #ffffff;

    cursor: pointer;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: clamp(13px, 1.5vw, 15px);

    pointer-events: auto !important;

    user-select: none;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background 0.2s ease,
        transform 0.15s ease,
        border-color 0.2s ease;
}

/* Icon inside button - ensure visibility */
.btn-icon svg,
.btn-icon i,
.btn-icon span {
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ==========================================
   MUTE BUTTON STATE STYLES - FIXED
   ========================================== */

/* MUTED state - visual indicator (video is muted) */
.btn-icon.is-muted {
    border-color: rgba(239, 68, 68, 0.6) !important;
    background: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.15) !important;
}

.btn-icon.is-muted:hover {
    background: rgba(239, 68, 68, 0.5) !important;
    border-color: rgba(239, 68, 68, 0.8) !important;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.25) !important;
}

/* UNMUTED state - visual indicator (video has sound) */
.btn-icon.is-unmuted {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(15, 23, 42, 0.6) !important;
    box-shadow: none !important;
}

.btn-icon.is-unmuted:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Focus state */
.btn-icon:focus-visible {
    outline: 2px solid var(--green, #34d399);
    outline-offset: 3px;
}

/* Hover effects */
@media (hover: hover) {
    .btn-icon:hover {
        transform: scale(1.05);
    }
}

.btn-icon:active {
    transform: scale(0.95);
}

/* ==========================================================================
   9. VERY WIDE SCREENS
   ========================================================================== */

@media (min-width: 1600px) {

    .hero-banner {
        max-height: 85vh !important;
    }

}


/* ==========================================================================
   10. TABLET / LANDSCAPE
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1199px) {

    .hero-banner-content {
        max-width: 820px !important;
    }

}


/* ==========================================================================
   11. MOBILE LANDSCAPE
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {

    .hero-banner-content {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .hero-banner-title {
        font-size: clamp(
            1.5rem,
            5vw,
            2.5rem
        ) !important;
    }

    .hero-banner-subtitle {
        font-size: clamp(
            0.85rem,
            2vw,
            1.1rem
        ) !important;
    }

}


/* ==========================================================================
   12. MOBILE PORTRAIT
   ========================================================================== */

@media (max-width: 768px) and (orientation: portrait) {

    .hero-banner {
        height: 80vh !important; /* Ensures comfortable fit on tall mobile devices */
    }

    .hero-banner-content {
        padding:
            clamp(16px, 5vw, 28px)
            clamp(14px, 5vw, 24px) !important;
    }

    .hero-banner-title {
        font-size:
            clamp(
                1.6rem,
                7vw,
                2.5rem
            ) !important;

        line-height: 1.1 !important;
    }

    .hero-banner-subtitle {
        font-size:
            clamp(
                0.85rem,
                3.5vw,
                1.1rem
            ) !important;
    }

}


/* ==========================================================================
   13. SMALL PHONES
   ========================================================================== */

@media (max-width: 380px) {

    .hero-banner-title {
        font-size: 1.5rem !important;
    }

    .hero-banner-subtitle {
        font-size: 0.85rem !important;
    }

}


/* ==========================================================================
   14. WORDPRESS / THEME LAYOUT
   ========================================================================== */

.home .hero-banner:first-child,
.home .hero-banner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.home .hero-banner img,
.home .hero-banner video {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


.home .wp-block-group:has(.hero-banner),
.home .wp-block-cover:has(.hero-banner) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ==========================================================================
   15. SAFETY — PREVENT HORIZONTAL OVERFLOW
   ========================================================================== */

.hero-banner,
.hero-banner * {
    box-sizing: border-box !important;
}


/* ==========================================================================
   16. REDUCED MOTION PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-banner video,
    .hero-banner .hero-banner-video,
    .hero-banner .hero-video {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   17. ACCESSIBILITY - HIGH CONTRAST FOCUS
   ========================================================================== */

/* Ensure focus indicators are visible on dark backgrounds */
.hero-banner a:focus-visible,
.hero-banner button:focus-visible {
    outline: 2px solid #34d399 !important;
    outline-offset: 3px !important;
}

/* Ensure text is readable on video background */
.hero-banner-content * {
    color: #ffffff !important;
}

/* Ensure highlight text is visible */
.hero-banner-title .highlight-green {
    color: #34d399 !important;
    text-shadow: 0 2px 12px rgba(52, 211, 153, 0.3) !important;
}