/**
 * Sticky Header Styles - Menu Restyling
 * Transparent menu over hero, green sticky on scroll
 */

/* Header container - positioned absolutely to sit over content */
header.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

/* Top bar - positioned absolutely over hero section initially */
.top-bar#top-bar-menu {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    z-index: 9999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* When Foundation Sticky activates - green background appears */
.top-bar#top-bar-menu.is-stuck {
    position: fixed !important;
    background-color: #2AD2C9 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Make logo white when sticky is active */
.top-bar#top-bar-menu.is-stuck .logo-container img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* Normal logo when not stuck */
.top-bar#top-bar-menu:not(.is-stuck) .logo-container img {
    filter: none;
    transition: filter 0.3s ease;
}

/* Admin bar adjustment when stuck */
.admin-bar .top-bar#top-bar-menu.is-stuck {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .top-bar#top-bar-menu.is-stuck {
        top: 46px !important;
    }
}

/* Menu items - Green/turquoise color by default (on transparent) */
.top-bar#top-bar-menu .top-bar-center #main-nav li.menu-item > a {
    color: #2AD2C9 !important;
    transition: color 0.3s ease;
}

/* Menu items turn white when sticky is active */
.top-bar#top-bar-menu.is-stuck .top-bar-center #main-nav li.menu-item > a {
    color: #fff !important;
}

/* Dropdown submenu - Green background with white dividers */
.top-bar#top-bar-menu .top-bar-center #main-nav li.menu-item.is-dropdown-submenu-parent ul.submenu {
    background: #2AD2C9 !important;
    padding: 0;
}

.top-bar#top-bar-menu .top-bar-center #main-nav li.menu-item.is-dropdown-submenu-parent ul.submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.top-bar#top-bar-menu .top-bar-center #main-nav li.menu-item.is-dropdown-submenu-parent ul.submenu li:last-child {
    border-bottom: none;
}

.top-bar#top-bar-menu .top-bar-center #main-nav li.menu-item.is-dropdown-submenu-parent ul.submenu li a {
    color: #fff !important;
}

.top-bar#top-bar-menu .top-bar-center #main-nav li.menu-item.is-dropdown-submenu-parent ul.submenu li:hover {
    background: #25beb6;
}

/* Individual Menu Styling Options (Non-Sticky State Only) */

/* Green Background Option */
body.menu-bg-green .top-bar#top-bar-menu:not(.is-stuck) {
    background-color: #2AD2C9 !important;
}

/* White Logo Option */
body.menu-logo-white .top-bar#top-bar-menu:not(.is-stuck) .logo-container img {
    filter: brightness(0) invert(1);
}

/* White Menu Text Option */
body.menu-text-white .top-bar#top-bar-menu:not(.is-stuck) .top-bar-center #main-nav li.menu-item > a {
    color: #fff !important;
}

/* White Search Bar Option */
body.menu-search-white .top-bar#top-bar-menu:not(.is-stuck) .top-search-bar {
    border-color: #fff !important;
    color: #fff !important;
}

body.menu-search-white .top-bar#top-bar-menu:not(.is-stuck) .top-search-bar::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* White LinkedIn Icon Option */
body.menu-linkedin-white .top-bar#top-bar-menu:not(.is-stuck) .top-bar-right a img[src*="linkedin"] {
    filter: brightness(0) invert(1);
}