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


/* =========================================================
   01. HEADER BASE
   ========================================================= */

.site-header {
    position: fixed;
    z-index: var(--z-header);
    width: 100%;
    border-bottom: 1px solid transparent;
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


/* Header after scroll */

.site-header.is-scrolled {
    background: rgba(248, 249, 251, 0.92);
    border-bottom-color: var(--color-border);

    box-shadow: var(--shadow-sm);

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


/* =========================================================
   02. NAVBAR
   ========================================================= */

.site-header .navbar {
    min-height: 88px;

    padding: 0 var(--page-padding);
}


/* Bootstrap container-fluid already handles width */

.site-header .container-fluid {
    padding: 0;
}


/* =========================================================
   03. LOGO
   ========================================================= */

.site-header .site-logo {
    display: inline-flex;
    align-items: baseline;

    margin: 0;
    padding: 0;

    color: var(--color-text);

    font-size: 25px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;

    letter-spacing: -0.04em;

    transition: color var(--transition);
}

.site-header .site-logo span {
    color: var(--color-primary);
}

.site-header .site-logo:hover {
    color: var(--color-primary);
}


/* =========================================================
   04. DESKTOP NAVIGATION
   ========================================================= */

.site-header .navbar-nav {
    align-items: center;

    gap: 38px;
}

.site-header .navbar-nav .nav-link {
    position: relative;

    padding: 8px 0 !important;

    color: var(--color-text-muted);

    font-size: 14px;
    font-weight: var(--font-weight-medium);

    line-height: 1.4;

    transition:
        color var(--transition);
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link.active {
    color: var(--color-text);
}


/* Small active indicator */

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

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: var(--radius-pill);

    background: var(--color-primary);

    transform: translateX(-50%);

    transition: width var(--transition);
}

.site-header .navbar-nav .nav-link:hover::after,
.site-header .navbar-nav .nav-link.active::after {
    width: 18px;
}


/* =========================================================
   05. HEADER CTA
   ========================================================= */

.site-header .header-action {
    display: flex;
    align-items: center;
}

.site-header .header-action .btn-custom {
    min-height: 44px;

    padding-inline: 20px;

    font-size: 13px;
}


/* =========================================================
   06. NAVBAR TOGGLER
   ========================================================= */

.site-header .navbar-toggler {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    color: var(--color-text);

    box-shadow: none !important;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.site-header .navbar-toggler:hover {
    background: var(--color-white);
    border-color: var(--color-border-dark);
}

.site-header .navbar-toggler i {
    display: block;

    font-size: 21px;
    line-height: 1;
}


/* =========================================================
   07. OFFCANVAS
   ========================================================= */

.site-header .offcanvas {
    width: min(380px, 88vw);

    background: var(--color-bg);

    border-left: 1px solid var(--color-border);
}

.site-header .offcanvas-header {
    min-height: 88px;

    padding: 0 var(--page-padding);

    border-bottom: 1px solid var(--color-border);
}

.site-header .offcanvas-body {
    display: flex;
    flex-direction: column;

    padding: 40px var(--page-padding);
}


/* =========================================================
   08. OFFCANVAS NAVIGATION
   ========================================================= */

.site-header .offcanvas-body .navbar-nav {
    align-items: stretch;

    gap: 0;
}

.site-header .offcanvas-body .nav-item {
    border-bottom: 1px solid var(--color-border);
}

.site-header .offcanvas-body .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 64px;

    padding: 0 !important;

    color: var(--color-text);

    font-size: 20px;
    font-weight: var(--font-weight-medium);

    transition:
        color var(--transition),
        padding-left var(--transition);
}

.site-header .offcanvas-body .nav-link:hover {
    color: var(--color-primary);
    padding-left: 8px !important;
}


/* =========================================================
   09. OFFCANVAS CTA
   ========================================================= */

.site-header .offcanvas-cta {
    margin-top: auto;
    padding-top: 40px;
}

.site-header .offcanvas-cta .btn-custom {
    min-height: 52px;

    font-size: 14px;
}


/* =========================================================
   10. CLOSE BUTTON
   ========================================================= */

.site-header .offcanvas .btn-close {
    width: 18px;
    height: 18px;

    padding: 0;

    margin-left: auto;

    opacity: 0.8;

    box-shadow: none;

    transition:
        opacity var(--transition),
        transform var(--transition);
}

.site-header .offcanvas .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}


/* =========================================================
   11. BOOTSTRAP OFFCANVAS BACKDROP
   ========================================================= */

.offcanvas-backdrop {
    background: rgba(17, 19, 24, 0.35);
}

.offcanvas-backdrop.show {
    opacity: 1;
}


/* =========================================================
   12. TABLET / MOBILE
   ========================================================= */

@media (max-width: 991.98px) {
    
    .site-header.is-scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-header .navbar {
        min-height: 76px;
    }

    .site-header .navbar-collapse {
        display: none !important;
    }

    .site-header .navbar-toggler {
        display: inline-flex;

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

}


/* =========================================================
   13. SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .site-header .navbar {
        min-height: 70px;
    }

    .site-header .site-logo {
        font-size: 23px;
    }

    .site-header .navbar-toggler {
        width: 42px;
        height: 42px;
    }

    .site-header .offcanvas {
        width: 100%;
    }

    .site-header .offcanvas-header {
        min-height: 70px;
    }

}