/* --- New Header Styles --- */
header {
    background-color: #0F172B; /* Color azul oscuro solicitado */
    color: #fff;
    padding: 0; /* Remove padding, will be handled by container */
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease-in-out; /* Add transform transition */
    /* backdrop-filter: blur(10px); /* Frosted glass effect */
    /* -webkit-backdrop-filter: blur(10px); */
}

header.scrolled {
    background-color: #0F172B; /* Mantener el mismo color sólido al hacer scroll */
}

header.header-hidden {
    transform: translateY(-100%); /* Move header completely out of view */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

header h1 {
    margin: 0;
    padding-left: 10px; /* Added space for the logo */
    font-size: 1.8em; /* Slightly smaller for a cleaner look */
    font-weight: 700; /* Bolder font */
}

header h1 a {
    display: flex;
    align-items: center;
    color: inherit; /* Ensure the icon and text have the same color */
    text-decoration: none; /* Remove underline from link */
}

header h1 .site-icon {
    margin-right: 10px; /* Space between icon and text */
}

.navbar-brand {
    padding-left: 15px; /* Added space for the logo */
}

.title-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.1; /* Adjust line height for tight spacing */
}

.sub-title {
    font-size: 0.45em; /* Relative to the h1 font-size */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Adds some breathing room */
}

.website-url {
    font-size: 0.6rem; /* Reduced font size for the website URL */
    display: block;
    line-height: 1;
    color: #bbb;
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Use flexbox for nav items */
    align-items: center;
}

header nav ul li {
    margin: 0 15px;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500; /* Medium weight */
    font-size: 1.2em; /* Increased font size again */
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

header nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FEA116; /* Nuevo color naranja */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

/* Aumento de tamaño específico para los elementos del menú principal */
.navbar-nav > .nav-item > .nav-link,
.navbar-nav > .nav-item.dropdown > .nav-link.dropdown-toggle {
    font-size: 1.2em; /* Ajustado para el menú principal */
}

header nav ul li a:hover {
    color: #fff; /* Keep color white on hover */
}

header nav ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Style for the last nav item to look like a button */
header .navbar-nav > li:last-child > a {
    background-color: #FEA116; /* Nuevo color naranja */
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

header .navbar-nav > li:last-child > a:hover {
    background-color: #16a085;
}

header .navbar-nav > li:last-child > a::after {
    display: none; /* No underline for the button */
}



/* Custom Dropdown Styles for Desktop */
@media (min-width: 992px) { /* Corresponds to lg breakpoint for navbar-expand-lg */

    /* Make dropdowns appear on hover */
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Remove the gap */
    }

    /* Style the dropdown menu itself */
    .navbar-dark .navbar-nav .dropdown-menu {
        background-color: #0F172B; /* Dark blue from the header */
        border: 1px solid rgba(255, 255, 255, 0.5); /* White border with some transparency */
        border-radius: 0; /* Sharp corners to match the site style */
    }

    /* Style the links within the dropdown */
    .navbar-dark .navbar-nav .dropdown-item {
        color: #f8f9fa; /* Light color for text */
        transition: background-color 0.2s ease;
    }

    /* Style the links on hover */
    .navbar-dark .navbar-nav .dropdown-item:hover,
    .navbar-dark .navbar-nav .dropdown-item:focus {
        color: #ffffff;
        background-color: rgba(254, 161, 22, 0.2); /* Use the site's orange color with transparency */
    }

    /* Style the divider */
    .navbar-dark .navbar-nav .dropdown-divider {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
}

/* --- Explicit Bootstrap Collapse Fix for Mobile --- */
@media (max-width: 991.98px) { /* Bootstrap's 'lg' breakpoint is 992px, so this targets 'md' and below */
    .navbar-brand {
        padding-left: 0; /* Remove space for mobile */
    }
    .navbar-collapse:not(.show) {
        display: none !important;
    }
    .navbar-collapse.show {
        display: block !important;
        position: fixed; /* Changed from absolute to fixed */
        top: 100px; /* Adjusted top for fixed positioning, increased to clear header */
        left: 0;
        width: 100%;
        background-color: #0F172B; /* Match header background */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 999;
    }

    .navbar-nav {
        flex-direction: column;
        width: 100%;
        text-align: left; /* Ensure left alignment for the whole nav */
    }

    .navbar-nav .nav-item {
        width: 100%;
        text-align: left;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: left !important; /* Force left alignment */
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
        background-color: transparent; /* Remove background color */
        padding: 10px 15px; /* Reset padding to match other nav links */
        border-radius: 0; /* Remove border-radius */
    }

    /* Ensure dropdowns work correctly in mobile */
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: rgba(0, 0, 0, 0.2); /* Slightly different background for sub-items */
        border: none;
        border-radius: 0;
    }

    .navbar-nav .dropdown-item {
        padding-left: 30px; /* Indent dropdown items */
    }
}