/* Prevent document-level horizontal dragging on every page. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    touch-action: pan-y pinch-zoom;
}

/* =========================
   HEADER
========================= */

.site-header {
    height: 88px;
    background: rgba(6, 8, 19, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.navbar {
    height: 88px;

    padding: 0;
}

.site-header .site-container {
    padding-left: 100px;
    padding-right: 100px;
}   


/* =========================
   LOGO / BRAND
========================= */

.header-logo-icon {
    width: 210px;
    height: auto;

    display: block;

    object-fit: contain;
    object-position: left center;

    flex-shrink: 0;
}   


.header-brand-text {
    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1;
}


.brand-main {
    color: #ffffff;

    font-family: "Sora", sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.7px;

    white-space: nowrap;
}


.brand-sub {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.85);

    font-family: "Inter", sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;

    text-align: center;

    white-space: nowrap;
}


/* =========================
   NAVIGATION
========================= */

.navbar-nav {
    gap: 34px;
}


.navbar-nav .nav-link {
    position: relative;
    padding: 8px 0 !important;
    color: rgba(255, 255, 255, 1)!important;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    font-weight: 500 !important;
    font-style: normal;
    transition: color 0.2s ease;
}


.navbar-nav .nav-link:hover {
    color: #ffffff !important;
}


/* Purple underline */

.navbar-nav .nav-link::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 2px;

    width: 0;

    height: 2px;

    background: #8f85ff;

    transition: width 0.25s ease;
}


.navbar-nav .nav-link:hover::after {
    width: 100%;
}


/* =========================
   ACTIVE PAGE
========================= */

.navbar-nav .nav-link.active {
    color: #8f85ff !important;
}


.navbar-nav .nav-link.active::after {
    width: 100%;
}


/* =========================
   WATCH PODCAST BUTTON
========================= */

.nav-watch-btn {
    min-width: 155px;

    height: 44px;

    align-items: center;

    justify-content: center;

    background: #5c4ecc;

    color: #ffffff;

    border: 1px solid #5c4ecc;

    border-radius: 7px;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.4px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.nav-watch-btn:hover {
    background: #6b5ddd;

    border-color: #6b5ddd;

    color: #ffffff;

    box-shadow:
        0 6px 18px rgba(92, 78, 204, 0.35);
}


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

@media (max-width: 991.98px) {

    .site-header {
        height: 78px;
        background: #060813 !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    .site-header .navbar,
    .site-header .navbar > .site-container {
        height: 78px;
        background: #060813 !important;
    }


    .navbar-collapse {
        margin-top: 15px;

        padding: 20px;

        background: #0e1122 !important;

        border-radius: 10px;
    }


    .navbar-nav {
        gap: 10px;
    }


    .navbar-nav .nav-link {
        display: inline-block;

        padding: 10px 0 !important;
    }

}

@media (max-width: 991.98px) {

    .navbar-collapse {
        margin-top: 15px;
        padding: 20px;

        background: #0e1122;

        border-radius: 10px;
    }


    /* CLOSED STATE */
    .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }


    /* OPEN STATE */
    .navbar-collapse.collapse.show {
        display: block !important;
    }


    .navbar-collapse.collapsing {
        overflow: hidden;
    }


    .navbar-nav {
        gap: 10px;
    }


    .navbar-nav .nav-link {
        display: inline-block;

        padding: 10px 0 !important;
    }

}

@media (max-width: 1199.98px) {

    .header-logo-icon {
        width: 190px;
    }

}


@media (max-width: 991.98px) {

    .header-logo-icon {
        width: 175px;
    }

}


@media (max-width: 575.98px) {

    .header-logo-icon {
        width: 155px;
    }

}

/* =========================
   MOBILE HEADER - FINAL
========================= */

@media (max-width: 991.98px) {

    .site-header .navbar {
        padding: 10px 0;
    }

    .site-header .navbar > .site-container {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr auto !important;

        align-items: center !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    /* LOGO LEFT */

    .site-header .navbar-brand {
        width: auto !important;

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

        justify-self: start !important;

        position: static !important;
        transform: none !important;
    }


    .site-header .header-logo-icon {
        width: 180px !important;
        height: auto !important;

        display: block !important;
    }


    /* HAMBURGER RIGHT */

    .site-header .navbar-toggler {
        width: 48px !important;
        height: 44px !important;

        margin: 0 !important;

        padding: 6px !important;

        justify-self: end !important;

        position: static !important;
        transform: none !important;
    }


    /* COLLAPSED MENU BELOW */

    .site-header .navbar-collapse {
        grid-column: 1 / -1 !important;

        width: 100% !important;

        margin-top: 12px;
    }

}


/* SMALL MOBILE */

@media (max-width: 575.98px) {

    .site-header .header-logo-icon {
        width: 165px !important;
    }

}