/*
Theme Name: SABDA Corporate MBI Style
Theme URI: https://sabda.com.my/
Author: SABDA
Description: A premium corporate WordPress theme for Sabak Bernam Development Area (SABDA), inspired by the editorial structure of modern Selangor corporate portals.
Version: 2.3.0
Text Domain: sabda
*/


/* ============================================================
   SABDA FULLSCREEN YOUTUBE BACKGROUND
============================================================ */


/*
------------------------------------------------------------
HERO MAIN CONTAINER
------------------------------------------------------------
*/

.hero {
    position: relative !important;

    width: 100% !important;

    height: 100vh !important;
    min-height: 720px !important;

    overflow: hidden !important;

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

    background-color: #111 !important;

    isolation: isolate;
}


/*
------------------------------------------------------------
FALLBACK BACKGROUND IMAGE
------------------------------------------------------------
*/

.hero-with-image {
    background-image: var(--hero-image);

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;
}


/*
------------------------------------------------------------
YOUTUBE BACKGROUND WRAPPER
------------------------------------------------------------
*/

.hero-video-background {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

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

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

    overflow: hidden !important;

    background: #000 !important;

    z-index: 0 !important;

    pointer-events: none !important;
}


/*
------------------------------------------------------------
YOUTUBE IFRAME
This makes YouTube behave like background-size: cover
------------------------------------------------------------
*/

.hero-video-background iframe {
    position: absolute !important;

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

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

    /*
    16:9 VIDEO COVER
    */

    width: 100vw !important;
    height: 56.25vw !important;

    min-width: 177.77777778vh !important;
    min-height: 100vh !important;

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

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

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    outline: none !important;

    pointer-events: none !important;

    z-index: 0 !important;
}


/*
------------------------------------------------------------
REMOVE WORDPRESS / PLUGIN IFRAME LIMITATIONS
------------------------------------------------------------
*/

.hero-video-background iframe,
.hero-video-background .wp-block-embed,
.hero-video-background .wp-block-embed__wrapper,
.hero-video-background .fluid-width-video-wrapper,
.hero-video-background .video-container,
.hero-video-background .embed-responsive {
    width: auto;
    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/*
------------------------------------------------------------
DARK GRADIENT OVERLAY
------------------------------------------------------------
*/

.hero-overlay {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

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

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.58) 35%,
            rgba(0, 0, 0, 0.35) 68%,
            rgba(0, 0, 0, 0.20) 100%
        ) !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


/*
------------------------------------------------------------
OPTIONAL BOTTOM GRADIENT
Makes transition into next section cleaner
------------------------------------------------------------
*/

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 160px;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.20)
        );

    z-index: 1;

    pointer-events: none;
}


/*
------------------------------------------------------------
HERO CONTENT
------------------------------------------------------------
*/

.hero-inner {
    position: relative !important;

    width: 100% !important;

    z-index: 5 !important;
}


.hero-inner *,
.hero-kicker,
.hero h1,
.hero-bottom,
.hero-bottom p,
.hero-bottom a {
    position: relative;

    z-index: 5;
}


/*
------------------------------------------------------------
HERO KICKER
------------------------------------------------------------
*/

.hero-kicker {
    color: #ffffff;
}


/*
------------------------------------------------------------
HERO TITLE
------------------------------------------------------------
*/

.hero h1 {
    color: #ffffff;
}


/*
------------------------------------------------------------
HERO PARAGRAPH
------------------------------------------------------------
*/

.hero-bottom p {
    color: rgba(255, 255, 255, 0.88);
}


/*
------------------------------------------------------------
HERO INDEX 01
------------------------------------------------------------
*/

.hero-index {
    position: absolute !important;

    z-index: 5 !important;

    pointer-events: none !important;
}


/*
------------------------------------------------------------
REMOVE PLAYER CLICKING
------------------------------------------------------------
*/

.hero iframe {
    pointer-events: none !important;

    user-select: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   ULTRA-WIDE DESKTOP
============================================================ */

@media (min-aspect-ratio: 16/9) {

    .hero-video-background iframe {

        width: 100vw !important;

        height: 56.25vw !important;

        min-width: 100vw !important;

        min-height: 100vh !important;

    }

}


/* ============================================================
   TALL DESKTOP / PORTRAIT SCREEN
============================================================ */

@media (max-aspect-ratio: 16/9) {

    .hero-video-background iframe {

        width: 177.77777778vh !important;

        height: 100vh !important;

        min-width: 100vw !important;

        min-height: 100vh !important;

    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1400px) {

    .hero {
        min-height: 650px !important;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

    .hero {

        height: 90vh !important;

        min-height: 650px !important;

    }


    .hero-video-background iframe {

        width: 177.77777778vh !important;

        height: 100vh !important;

        min-width: 100vw !important;

        min-height: 100% !important;

    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.52) 65%,
                rgba(0, 0, 0, 0.32) 100%
            ) !important;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .hero {

        width: 100% !important;

        height: 90vh !important;

        min-height: 620px !important;

        overflow: hidden !important;

    }


    .hero-video-background {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        overflow: hidden !important;

    }


    .hero-video-background iframe {

        position: absolute !important;

        top: 50% !important;

        left: 50% !important;

        width: 177.77777778vh !important;

        height: 100vh !important;

        min-width: 100vw !important;

        min-height: 100% !important;

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

    }


    .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.40) 0%,
                rgba(0, 0, 0, 0.48) 35%,
                rgba(0, 0, 0, 0.65) 75%,
                rgba(0, 0, 0, 0.78) 100%
            ) !important;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .hero {

        height: 88vh !important;

        min-height: 600px !important;

    }


    .hero-video-background iframe {

        height: 100vh !important;

        width: 177.77777778vh !important;

    }

}


/* ============================================================
   VERY SHORT SCREENS
============================================================ */

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

    .hero {

        height: 100vh !important;

        min-height: 600px !important;

    }

}


/* ============================================================
   ACCESSIBILITY - REDUCED MOTION
   Keeps fallback image if user requests reduced motion
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hero-video-background {
        display: none;
    }

}