/* Scoped Dropdown navigation for `#hdr-nav .hdr-menu` */
:root {
    --primary-color: #DC143C;
    --secondary-color: #1E3A8A;
    --accent-color: #F59E0B;
}

#hdr-nav .hdr-menu {
    background: transparent;
    height: 100%;
    display: flex;
    align-items: center;
}

#hdr-nav .hdr-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#hdr-nav .hdr-menu,
#hdr-nav .hdr-menu a {
    color: #fff;
    text-decoration: none;
}

#hdr-nav .hdr-menu a {
    display: block;
    white-space: nowrap;
}

#hdr-nav .hdr-menu .menu-dropdown,
#hdr-nav .hdr-menu input[type="checkbox"] {
    display: none;
}

#hdr-nav .hdr-menu label:hover {
    cursor: pointer;
}

#hdr-nav .hdr-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

#hdr-nav .hdr-menu .menu-toggle-icon {
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#hdr-nav .hdr-menu .menu-toggle-icon i {
    font-size: 0.7rem;
}

/* --- Responsive Mobile Layout (<= 1024px) --- */
@media screen and (max-width: 1024px) {
    #hdr-nav .hdr-menu > ul,
    #hdr-nav .hdr-menu .menu-righticon {
        display: none;
    }

    #hdr-nav .hdr-menu > label {
        background: rgba(0, 0, 0, 0.2);
        display: block;
        padding: 12px 16px;
        text-align: right;
    }

    #hdr-nav .hdr-menu input[type="checkbox"]:checked + ul {
        display: block;
        animation: grow 0.35s ease-in-out;
    }

    #hdr-nav .hdr-menu a {
        padding: 12px 16px;
    }

    #hdr-nav .hdr-menu > ul i {
        float: right;
        padding: 6px 10px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
    }

    #hdr-nav .hdr-menu .menu-dropdown a {
        background: rgba(255, 255, 255, 0.08);
    }

    #hdr-nav .hdr-menu .menu-hasflyout > ul a {
        background: rgba(255, 255, 255, 0.12);
    }
}

/* --- Responsive Desktop Layout (>= 1025px) --- */
@media screen and (min-width: 1025px) {
    #hdr-nav .hdr-menu > label,
    #hdr-nav .hdr-menu input[type="checkbox"] {
        display: none;
    }

    /* Target ONLY top-level navbar items to prevent inheriting down to dropdown links */
    #hdr-nav .hdr-menu > ul > li > .menu-item > a {
        padding: 8px 16px;
        font-weight: 500;
        transition: color 0.2s ease;
    }

    #hdr-nav .hdr-menu > ul {
        display: flex;
        align-items: stretch;
        height: 100%;
        gap: 4px;
    }

    #hdr-nav .hdr-menu > ul > li {
        display: flex;
        align-items: center;
        position: relative;
        height: 100%;
    }

    /* Hover Show Dropdown */
    #hdr-nav .hdr-menu .menu-hasdropdown:hover > .menu-dropdown,
    #hdr-nav .hdr-menu .menu-hasdropdown:focus-within > .menu-dropdown {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Dropdown Card Styling */
    #hdr-nav .hdr-menu .menu-hasdropdown > .menu-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 230px;
        background: rgba(30, 58, 138, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.2), 0 5px 15px -3px rgba(0, 0, 0, 0.1);
        padding: 8px 0;
        z-index: 999;
        transform: translateY(10px);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Flyout Nested Dropdowns positioning */
    #hdr-nav .hdr-menu .menu-hasflyout > .menu-dropdown {
        left: 100%;
        top: 0;
        margin-left: 2px;
        margin-top: -8px;
    }

    #hdr-nav .hdr-menu .menu-hasflyout .menu-downicon {
        display: none;
    }

    /* Dropdown list item & container layout */
    #hdr-nav .hdr-menu .menu-dropdown li {
        position: relative;
        width: 100%;
    }

    #hdr-nav .hdr-menu .menu-dropdown .menu-item {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    #hdr-nav .hdr-menu .menu-dropdown li:last-child > .menu-item {
        border-bottom: none;
    }

    #hdr-nav .hdr-menu .menu-dropdown .menu-item a {
        flex: 1;
        display: block;
        padding: 10px 18px;
        font-size: 0.85rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.88);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        background: transparent !important;
    }

    #hdr-nav .hdr-menu .menu-dropdown .menu-item .menu-toggle-icon {
        margin-right: 12px;
        background: transparent;
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.2s ease;
    }

    /* Hover States for Dropdown Items (highlight entire item container) */
    #hdr-nav .hdr-menu .menu-dropdown .menu-item:hover {
        background: var(--primary-color, #DC143C) !important;
    }

    #hdr-nav .hdr-menu .menu-dropdown .menu-item:hover a {
        color: #ffffff !important;
        padding-left: 22px; /* Smooth slide transition */
    }

    #hdr-nav .hdr-menu .menu-dropdown .menu-item:hover .menu-toggle-icon {
        color: #ffffff !important;
    }
}

#hdr-nav .hdr-menu .menu-hasdropdown > .menu-item > a {
    padding-right: 6px;
}

#hdr-nav .hdr-menu .menu-hasdropdown .menu-righticon {
    display: none;
}

@keyframes grow {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}