/*-----------------------------------------------------------------------------------
    Selberry - Header (all pages)
    Linked from resources/views/include/menu.blade.php, after main.css.
-----------------------------------------------------------------------------------*/

/* Menu starts from the right, next to the language dropdown and the button */
@media (min-width: 992px) {
    #header-sticky.header-1 .header-main .mean__menu-wrapper {
        margin-left: auto;
        margin-right: 20px;
    }
}

/*---------------- Transparent header over the first section (all pages, as on the home page) ----------------*/
/* At the top of the page the header lies over the dark hero / page banner with a white logo
   and menu; after scrolling, the theme's .sticky class turns it into the normal white header. */
:root {
    --sb-header-h: 78px; /* height of the header, used to keep banner text clear of it */
}
@media (max-width: 1399px) {
    :root {
        --sb-header-h: 68px;
    }
}
@media (max-width: 1199px) {
    :root {
        --sb-header-h: 45px;
    }
}
@media (max-width: 575px) {
    :root {
        --sb-header-h: 34px;
    }
}
#header-sticky.header-1:not(.sticky) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: linear-gradient(180deg, rgba(4, 24, 16, 0.55) 0%, rgba(4, 24, 16, 0) 100%);
}
#header-sticky.header-1:not(.sticky) .main-logo img {
    filter: brightness(0) invert(1);
}
#header-sticky.header-1:not(.sticky) .header-main .main-menu > nav > ul > li > a {
    color: var(--white);
}
#header-sticky.header-1:not(.sticky) .header-main .main-menu > nav > ul > li > a:hover {
    color: #B8DC8E; /* home's accent; the theme's own --theme-3 on other pages is lime */
}
#header-sticky.header-1:not(.sticky) .header-right .sidebar__toggle .header-bar span {
    background: var(--white);
}
#header-sticky.header-1:not(.sticky) .sb-translate-btn {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.5);
}
/* over the dark banner the button and the open language button use the footer newsletter
   button style (light gradient, dark text); once sticky they use the footer gradient (brand.css) */
#header-sticky.header-1:not(.sticky) .header-right .theme-btn {
    background: var(--sb-grad-light);
    color: #0B3A28;
}
#header-sticky.header-1:not(.sticky) .header-right .theme-btn::before {
    background: var(--sb-grad); /* hover fill (the theme's is flat --header) */
}
#header-sticky.header-1:not(.sticky) .sb-translate-btn:hover,
#header-sticky.header-1:not(.sticky) .sb-translate.open .sb-translate-btn {
    border-color: #B8DC8E;
    background: var(--sb-grad-light);
    color: #0B3A28;
}
/* inner page banners now start at the very top, under the header: add its height on top */
.breadcrumb-wrapper {
    padding-top: var(--sb-header-h);
}

/*---------------- Active menu item: the page that is open (li.active, set by js/header.js) ----------------*/
/* top menu: another colour and a short gradient bar under the item */
#header-sticky.header-1 .header-main .main-menu > nav > ul > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #63A04A, #076342); /* logo gradient */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s ease;
}
#header-sticky.header-1 .header-main .main-menu > nav > ul > li.active > a {
    color: var(--theme);
}
#header-sticky.header-1 .header-main .main-menu > nav > ul > li.active > a::before {
    transform: scaleX(1);
}
/* over the dark banner (header not sticky yet): light green, as the hover colour */
#header-sticky.header-1:not(.sticky) .header-main .main-menu > nav > ul > li.active > a {
    color: #B8DC8E;
}
#header-sticky.header-1:not(.sticky) .header-main .main-menu > nav > ul > li > a::before {
    background: var(--sb-grad-light);
}
/* dropdown: the open page in green */
#header-sticky.header-1 .header-main .main-menu .submenu li.active > a {
    color: var(--theme);
}
/* mobile menu in the side panel: the open page and its parent item in green (sub items are grey) */
.offcanvas__info .mean-container .mean-nav ul li.active > a {
    color: var(--theme);
}