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


/* ----------------------------------------------------------
   1. DESKTOP HEADER
   ---------------------------------------------------------- */


/* Glass navigation pill */
#ast-desktop-header .ast-above-header-bar .ast-builder-grid-row {

    /* Burgundy-tinted glass */
    background: linear-gradient(
        135deg,
        rgba(45, 25, 32, 0.72),
        rgba(30, 20, 25, 0.66)
    );

    /* Frosted glass effect */
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    /* Border and rounded shape */
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    /* Outer shadows and inner highlight */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.22),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    /* Dimensions and spacing */
    min-height: 74px;
    margin: 24px 40px 0;
    padding: 0 20px;
}


/* Allow logo to protrude beyond navigation pill */
#ast-desktop-header .ast-above-header-bar,
#ast-desktop-header .site-above-header-wrap,
#ast-desktop-header .ast-builder-grid-row,
#ast-desktop-header .site-header-above-section-left {
    overflow: visible;
}


/* Logo positioning */
#ast-desktop-header .site-header-above-section-left {
    position: relative;
}

#ast-desktop-header .site-header-above-section-left .site-branding {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}


/* Logo dimensions */
#ast-desktop-header .site-logo-img img {
    width: 120px;
    max-width: 120px;
    height: auto;
}


/* Navigation links — default */
#ast-desktop-header .ast-above-header-bar
.main-header-menu > .menu-item > .menu-link {
    color: #FFFFFF;
    transition: color 0.2s ease;
}


/* Navigation links — active page */
#ast-desktop-header .ast-above-header-bar
.main-header-menu > .current-menu-item > .menu-link {
    color: #FFFFFF !important;
}


/* Navigation links — hover */
#ast-desktop-header .ast-above-header-bar
.main-header-menu > .menu-item:hover > .menu-link {
    color: var(--ast-global-color-1);
}

/*========== UNDERLINE: ========*/

/* Navigation links — active page */
#ast-desktop-header .ast-above-header-bar
.main-header-menu > .current-menu-item > .menu-link {
    color: var(--ast-global-color-0);
    text-decoration: none !important;
    position: relative;
}

/* Active page — pink underline */
#ast-desktop-header .ast-above-header-bar
.main-header-menu > .current-menu-item > .menu-link::after {
    content: "";
    position: absolute;

    width: 70%;
    height: 3px;

    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);

    background-color: var(--ast-global-color-0);
}


/* ----------------------------------------------------------
   2. MOBILE HEADER
   ---------------------------------------------------------- */


/* Transparent header — allows hero video to show through */
#ast-mobile-header .ast-primary-header-bar,
#ast-mobile-header .ast-main-header-wrap {
    background: transparent !important;
}


/* Hamburger toggle — circular brand-coloured button */
#ast-mobile-header .menu-toggle {
    background-color: var(--ast-global-color-0) !important;
    border-radius: 50% !important;

    width: 48px;
    height: 48px;

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

    padding: 0 !important;
}


/* ----------------------------------------------------------
   3. MOBILE NAVIGATION
   ---------------------------------------------------------- */


/* Underline the active page in the mobile menu */
@media (max-width: 767px) {

    .ast-mobile-popup-content .current-menu-item > a,
    .ast-mobile-popup-content .current_page_item > a,
    .ast-header-break-point .main-header-menu .current-menu-item > a,
    .ast-header-break-point .main-header-menu .current_page_item > a {
        text-decoration: underline !important;
        text-underline-offset: 5px;
        text-decoration-thickness: 2px;
    }

}