/**
 * Menú principal — ítem «The Living Atlas» con submenú de secciones.
 *
 * El ítem lo inyecta wp_nav_menu_objects (src/helpers/living-atlas.php) en
 * todas las páginas, así que esta hoja se carga en todo el sitio. Solo toca
 * .menu-item-atlas y su .sub-menu: el resto del menú queda como estaba.
 * Punto de corte: 1200px (por debajo, panel con hamburguesa; ver header.css).
 * Unidades: 1rem = 10px (html { font-size: 62.5% } del tema).
 */

.c-primary-navigation .menu-item-atlas { position: relative; }

.c-primary-navigation .menu-item-atlas .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-atlas-submenu__link {
    display: block;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #184a4e;
    text-decoration: none;
    transition: background-color .2s, color .2s, padding-left .25s ease;
}

/* ---- Escritorio: desplegable ---- */
@media screen and (min-width: 1200px) {
    /* Flecha del ítem padre */
    .c-primary-navigation .menu-item-atlas::before {
        content: "";
        position: absolute;
        right: 1.8rem; /* dentro de la píldora del ítem (header.css le da padding-right 3.8rem) */
        z-index: 1;   /* por encima del fondo de la píldora */
        top: 50%;
        width: .7rem;
        height: .7rem;
        margin-top: -.6rem;
        border-right: .2rem solid currentColor;
        border-bottom: .2rem solid currentColor;
        color: #184a4e;
        transform: rotate(45deg);
        transition: transform .25s ease, margin-top .25s ease;
        pointer-events: none;
    }
    .c-primary-navigation .menu-item-atlas:hover::before,
    .c-primary-navigation .menu-item-atlas:focus-within::before { margin-top: -.2rem; transform: rotate(-135deg); }

    /* Tarjeta flotante: separada de la píldora, centrada bajo el ítem. */
    .c-global-header .c-primary-navigation .menu-item-atlas .sub-menu {
        position: absolute;
        top: calc(100% + 1.2rem);
        left: 50%;
        right: auto;
        z-index: 800;
        display: grid;
        gap: .2rem;
        min-width: 25rem;
        padding: .8rem;
        border: .1rem solid #e3ebe8;
        border-radius: 1.6rem;
        background: #ffffff;
        box-shadow: 0 .2rem .6rem rgb(24 74 78 / .06), 0 2.4rem 4.8rem -1.6rem rgb(24 74 78 / .35);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, .6rem);
        transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
    }
    /* Flecha que une la tarjeta con el ítem. */
    .c-global-header .c-primary-navigation .menu-item-atlas .sub-menu::after {
        content: "";
        position: absolute;
        top: -.7rem;
        left: 50%;
        width: 1.4rem;
        height: 1.4rem;
        border-top: .1rem solid #e3ebe8;
        border-left: .1rem solid #e3ebe8;
        border-top-left-radius: .3rem;
        background: #ffffff;
        transform: translateX(-50%) rotate(45deg);
    }
    /* Puente invisible: el ratón no «cae» en el hueco entre ítem y tarjeta. */
    .c-global-header .c-primary-navigation .menu-item-atlas .sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 1.6rem;
    }
    .c-global-header .c-primary-navigation .menu-item-atlas:hover > .sub-menu,
    .c-global-header .c-primary-navigation .menu-item-atlas:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }
    .c-atlas-submenu__link { padding: 1.1rem 1.6rem; border-radius: 1rem; white-space: nowrap; }
    .c-atlas-submenu__link:hover,
    .c-atlas-submenu__link:focus-visible { background: #f1f7f4; color: #184a4e; outline: none; }
    .c-atlas-submenu__link:focus-visible { box-shadow: 0 0 0 .2rem #6be49b; }
}
/* ---- Móvil / tableta: lista sangrada dentro del panel ---- */
@media screen and (max-width: 1199px) {
    .c-primary-navigation .menu-item-atlas .sub-menu {
        margin-top: 1.2rem;
        padding-left: 1.6rem;
    }
    .c-atlas-submenu__link { padding: .8rem 0; font-size: 1.7rem; }
    .c-atlas-submenu__link:hover { color: #24a888; }
}

/* Sección que se está leyendo (lo marca atlas-motion.js en la página del atlas). */
.c-atlas-submenu__link.is-current { color: #24a888; }
@media screen and (min-width: 1200px) {
    .c-atlas-submenu__link.is-current { background: #e1faeb; color: #184a4e; }
}

/* Ítem activo (píldora teal): flecha en blanco. */
@media screen and (min-width: 1200px) {
    .c-primary-navigation .menu-item-atlas.current-menu-item::before { color: #fff; }
}