/* ==================================================
   CASSIOPEIA – TOPBAR + LOGO + MENIU
   ================================================== */

@media (min-width: 992px) {

    /* Structura antetului */
    .container-header {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "topbar topbar"
            "logo meniu" !important;
        align-items: center !important;
        column-gap: 25px;
        background: #073b77;
        box-shadow: 0 5px 20px rgba(6, 47, 99, 0.08);
    }

    /* Partea superioară */
    .container-header .container-topbar {
        grid-area: topbar !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* ==================================================
       LOGO – CENTRU-STÂNGA
       ================================================== */

    .container-header > .grid-child:has(.navbar-brand) {
        grid-area: logo !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 0 12px 300px !important;
    }

    .container-header .navbar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .container-header .navbar-brand img {
        display: block;
        width: auto !important;
        max-width: 260px;
        max-height: 75px;
        object-fit: contain;
    }

    /* ==================================================
       MENIU – CENTRU-DREAPTA
       ================================================== */

    .container-header .container-nav {
        grid-area: meniu !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px clamp(300px, 5vw, 180px) 14px 0 !important;
        transform: none !important;
    }

    .container-header .container-nav nav,
    .container-header .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .container-header .container-nav .mod-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        gap: 4px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .container-nav .mod-menu > li {
        margin: 0;
        white-space: nowrap;
    }

    /* Elementele normale */
    .container-header .container-nav .mod-menu > li > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        padding: 12px 13px !important;
        color: #173b63 !important;
        border-radius: 7px;

        font-size: 14px;
        font-weight: 600;
        text-decoration: none !important;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            transform 0.2s ease;
    }

    /* Hover pentru elementele normale */
    .container-header .container-nav
    .mod-menu > li:not(:last-child) > a:hover {
        color: #0c83df !important;
        background: #eef7ff !important;
    }

    /* Pagina activă */
    .container-header .container-nav
    .mod-menu > li.active:not(:last-child) > a {
        color: #0c83df !important;
        background: #eaf5ff !important;
    }

    /* ==================================================
       ULTIMUL ELEMENT – BUTON ALBASTRU
       ================================================== */

    .container-header .container-nav
    .mod-menu > li:last-child {
        margin-left: 14px;
    }

    .container-header .container-nav
    .mod-menu > li:last-child > a {
        min-height: 50px;

        padding: 12px 24px !important;
        color: #ffffff !important;
        background: #0c83df !important;
        border-radius: 11px;

        font-weight: 700;
        text-decoration: none !important;

        box-shadow:
            0 6px 18px rgba(12, 131, 223, 0.25);

        transition:
            background 0.2s ease,
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }

    .container-header .container-nav
    .mod-menu > li:last-child > a:hover,
    .container-header .container-nav
    .mod-menu > li:last-child > a:focus {
        color: #ffffff !important;
        background: #076fc1 !important;
        transform: translateY(-2px);

        box-shadow:
            0 9px 22px rgba(12, 131, 223, 0.32);
    }

    /* Elimină sublinierea elementului activ */
    .container-header .container-nav
    .mod-menu > li:last-child > a::after {
        display: none !important;
    }
}


/* ==================================================
   TELEFON ȘI TABLETĂ
   ================================================== */

@media (max-width: 991px) {

    .container-header .container-nav
    .mod-menu > li:last-child {
        margin: 10px 0 0;
    }

    .container-header .container-nav
    .mod-menu > li:last-child > a {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100%;
        padding: 12px 18px !important;

        color: #ffffff !important;
        background: #0c83df !important;
        border-radius: 9px;

        font-weight: 700;
        text-decoration: none !important;
    }

    .container-header .container-nav
    .mod-menu > li:last-child > a:hover {
        color: #ffffff !important;
        background: #076fc1 !important;
    }
}

/* Fundal albastru pentru zona logo + meniu */
.container-header {
    background: #07366e !important;
}

/* Textul meniului alb */
.container-header .container-nav .mod-menu > li > a {
    color: #ffffff !important;
}

/* Hover pentru elementele normale */
.container-header .container-nav
.mod-menu > li:not(:last-child) > a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

/* Elementul activ */
.container-header .container-nav
.mod-menu > li.active:not(:last-child) > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.20) !important;
}

/* Ultimul element – buton albastru mai închis */
.container-header .container-nav
.mod-menu > li:last-child > a {
    color: #ffffff !important;
    background: #0878de !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 18px rgba(3, 57, 79, 0.28);
}

/* Hover pentru ultimul buton */
.container-header .container-nav
.mod-menu > li:last-child > a:hover,
.container-header .container-nav
.mod-menu > li:last-child > a:focus {
    color: #0a7fa0 !important;
    background: #ffffff !important;
    border-color: #ffffff;
}

/* Dacă logoul conține text, îl face alb */
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .navbar-brand .site-title {
    color: #ffffff !important;
}