/**
 * Marketing Page Header Styles
 *
 * These styles ensure the header has a navy background with white text
 * on marketing pages (FAQs, Blog, Contact) for both authenticated and
 * unauthenticated users.
 *
 * The issue: When authenticated users visit marketing pages, navbar.html
 * is used instead of marketing_navbar.html, but navbar.html is styled for
 * a white background (dashboard). This CSS ensures the header looks correct
 * on marketing pages regardless of which navbar is included.
 */

/* Scope to pages that use header.header wrapper (marketing pages) */
header.header {
    background: #10194A !important;
    padding: 20px 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 11 !important;
    height: auto !important;
}

/* Essential navbar layout styles (from dashboard.css) */
header.header .hidden {
    display: none;
}

header.header .navbar {
    padding: 0;
    flex-flow: nowrap;
    display: flex;
    align-items: center;
}

header.header .repn_menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

header.header .navbar .brand img {
    object-fit: contain;
}

header.header .navbar .wrapper {
    display: flex;
    align-items: center;
}

header.header .navbar .menu {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

header.header .navbar .menu-item a {
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    padding: 8px 0;
    transition: ease-in-out 0.3s;
    white-space: nowrap;
    text-decoration: none;
}

header.header .menu-icon svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

header.header .navbar .menu-item:last-child {
    margin-right: 0;
}

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

/* White text for all nav links on navy background */
header.header .navbar .menu-item a,
header.header .navbar .menu-item .nav-link {
    color: #FFFFFF !important;
}

header.header .navbar .menu-item a:hover {
    color: #2181FF !important;
}

/* Invert the blue logo to white on navy background */
header.header .navbar .brand img {
    filter: brightness(0) invert(1);
}

/* Make SVG icons white */
header.header .menu-icon svg path {
    fill: #FFFFFF !important;
}

/* Profile section styles for authenticated users */
header.header .menu-profile {
    position: relative;
    border-radius: 100px;
    background: rgba(255,255,255,0.15) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    width: fit-content;
    gap: 10px;
}

header.header .menu-profile img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
}

header.header .profl-dropdwn {
    color: #FFFFFF !important;
}

header.header .profl-dropdwn svg path {
    stroke: #FFFFFF !important;
}

/* Mobile menu toggle - white bars */
header.header .navbar .nav-toggle span {
    background: #FFFFFF !important;
}

/* Dropdown menu styles */
header.header .dropdown-menu {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

header.header .dropdown-menu a {
    color: #10194A !important;
}

header.header .dropdown-menu a:hover {
    background: #f5f5f5;
    color: #2181FF !important;
}

/* CV Help dropdown on navy background */
header.header .cv-help-dropdown {
    background: #FFFFFF !important;
}

header.header .cv-help-dropdown > a {
    color: #10194A !important;
}

header.header .cv-help-dropdown > a:hover {
    color: #2181FF !important;
}