/* Custom CSS to override theme defaults */

/* Dropdown menu container */
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: none;
    /* Optional: Remove border to blend better */
    border-radius: 10px;
    padding: 5px;
    min-width: auto;
    width: max-content;
    /* Reduce width to fit content */
}

/* Dropdown menu hover state */
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,
.navbar-custom .navbar-nav .dropdown-menu>li>a:focus {
    color: #ffffff !important;
    /* White text for better contrast on blue */
    background-color: #3b82f6 !important;
    /* Bright blue background */
}

/* Open dropdown on hover for desktop screens */
@media (min-width: 768px) {
    .navbar-custom .navbar-nav .dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* Hide the split arrow on desktop since hover works */
    .split-nav-item .dropdown-toggle-split {
        display: none !important;
    }

    /* Reset main link padding to match standard desktop items */
    .split-nav-item .main-link {
        padding: 10px 15px !important;
    }
}

/* Split navigation item for mobile/desktop compatibility */
.split-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align left */
    /* Remove padding here, let buttons handle it to match theme's hit areas */
    padding: 0;
    width: 100%;
}

.split-nav-item .main-link {
    /* Removed flex-grow: 1 to keep caret next to text */
    flex-grow: 0;
    text-decoration: none;
    /* Explicitly inheriting theme properties to prevent browser defaults */
    color: inherit;
    font-weight: 800;
    /* Match theme's font-weight */
    font-size: 17px;
    /* Match theme's font-size (line 268) */
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: capitalize;
    padding: 10px 15px;
    /* Reduced vertical padding from 10px to match standard items if needed, or keep as is. Actually 10px is fine, but let's ensure it matches */
    white-space: nowrap;
    /* Prevent wrapping */
}

.split-nav-item .dropdown-toggle-split {
    padding: 10px 15px 10px 0;
    /* Remove left padding to bring caret closer */
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
    /* Ensure caret inherits the correct color */
    display: flex;
    align-items: center;
}

/* Ensure mobile menu links (including split ones) have correct color */
/* Ensure mobile menu links (including split ones) have correct color */
@media only screen and (max-width: 767px) {
    .navbar-custom .nav li .split-nav-item a {
        color: #404040;
        /* Match theme's mobile link color (line 325) */
    }

    /* Fix container height to ensure shadow covers all items */
    .navbar-default .navbar-collapse {
        max-height: 1000px;
        /* Increase limit to prevent shadow cutoff */
    }

    /* Fix missing border on the last subitem */
    .navbar-collapse .dropdown-menu>li:last-child>a {
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        /* Simple separator */
    }
}

/* Ensure the caret is white on hover/focus in the split context if needed, 
   though the main theme handles li>a color. 
   We might need to force specific colors if the theme overrides break it. */

/* Desktop: Apply "sticky" style always (even at top) */
@media only screen and (min-width: 1170px) {
    .navbar-custom {
        background-color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid #f2f2f2;
    }

    /* Ensure links stand out against white background */
    .navbar-custom .navbar-brand {
        color: #404040;
    }

    .navbar-custom .navbar-brand:hover,
    .navbar-custom .navbar-brand:focus {
        color: #0085a1;
    }

    /* Reduce brand padding to match links and shrink navbar height */
    .navbar-custom .navbar-brand {
        padding: 15px 20px !important;
        line-height: 20px;
        height: auto;
    }

    .navbar-custom .nav li a {
        color: #404040;
        border-radius: 10px;
        margin: 5px 5px;
        transition: all 0.3s;
        padding: 10px 15px;
        /* Reduce padding to shrink height */
        line-height: 20px;
        /* Ensure text is vertically centered */
    }

    .navbar-custom .nav li a:hover,
    .navbar-custom .nav li a:focus {
        color: #ffffff !important;
        background-color: #0085a1;
    }
}

/* FIX: Professional/sober header background */
/* Removes the "flashy" background image and replaces it with a clean neutral gray */
header.intro-header {
    /* Vertical gradient (to bottom) as requested by user to hide pattern/block transitions */
    background-image: linear-gradient(to bottom, rgba(250, 251, 252, 0.98) 0%, rgba(217, 228, 245, 0.92) 100%), url('../img/header_pattern.png') !important;
    background-color: #eef2f3 !important;
    /* Fallback */
    background-repeat: repeat;
    background-size: 400px;
    /* Adjust scale of the pattern */
    background-blend-mode: multiply;
    /* Blends pattern subtly */
    border-bottom: 1px solid #e0e0e0;
}

/* Mobile: Ensure solid background for sticky nav to prevent transparency issues */
@media only screen and (max-width: 1169px) {

    /* Apply to everything below desktop breakpoint */
    .navbar-custom {
        background-color: white;
        /* Solid background */
        border-bottom: 1px solid #f2f2f2;
        /* Optional separator */
        height: 60px;
        /* Force fixed height to prevent white wrapping the open menu */
        overflow: visible;
        /* Allow the menu to flow outside the white bar */
    }

    /* Ensure hamburger menu is visible against white */
    .navbar-custom .navbar-toggle .icon-bar {
        background-color: #404040;
    }

    .navbar-custom .navbar-brand {
        color: #404040;
    }

    /* FIX: Force menu links to be dark on smaller screens (mobile sidebar + tablet header)
       This fixes the issue where text was white on light backgrounds. */
    .navbar-custom .nav li a {
        color: #404040;
    }

    /* FIX: Prevent hover text from turning white on light background */
    .navbar-custom .nav li a:hover,
    .navbar-custom .nav li a:focus {
        color: #404040;
        /* Or use theme blue #0085a1 if preferred */
    }
}

/* Offset for anchor links to prevent sticky nav from covering content */
#members,
#research-workshops,
#research-visits {
    scroll-margin-top: 100px;
    /* Offset by ~100px (header is ~60-80px) */
}

/* Style for occupations in former members page */
.occupation {
    font-style: normal;
    /* Remove italics */
    color: #d9534f;
    /* Reddish color for distinct visibility */
    font-weight: 500;
}

/* Reduce bottom padding in the header to minimize white space below logo */
.intro-header .site-heading {
    padding-bottom: 20px !important;
}

/* Also reduce the margin of the header itself on desktop */
@media only screen and (min-width: 768px) {
    .intro-header {
        margin-bottom: 0px !important;
    }
}

/* Fix button text color on hover for genealogy graph buttons */
.genealogy-graph-container .btn:hover,
.genealogy-graph-container .btn:focus {
    color: #ffffff !important;
}