/*
 * Barra principal de escritorio (#main-nav). Por debajo de 1150px se usa el
 * menú lateral (css/mobile.css), así que todo va dentro de min-width: 1151px.
 *
 * Se carga después de style.css y le gana sin tocarlo.
 */

@media (min-width: 1151px) {

    /* ─── Estructura: tres zonas alineadas con las columnas de la página ───
       La barra ocupa todo el ancho, con el mismo margen que las cajas de las
       barras laterales (5px, o lo que sobre de 1590px a cada lado). El
       clima y el idioma quedan en la esquina izquierda, la búsqueda, la
       campana y el usuario en la derecha, y el menú justo en el centro de la
       pantalla, sobre las noticias y el logo. */
    #main-nav .section-inner.menu-move {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        padding-right: max(5px, calc((100% - 1590px) / 2));
        padding-left: max(5px, calc((100% - 1590px) / 2));
    }

    /* Esquina izquierda: el clima y la hora de Habbo en una sola píldora
       oscura (dos <li> que se leen como uno) y, separado, el idioma. */
    #main-nav .user-menu > .user-language-item {
        margin-left: 10px;
    }

    #main-nav .user-menu > .user-weather-item,
    #main-nav .user-menu > .user-clock-item {
        height: 32px;
        margin-top: 8px;
        background: rgb(0 20 40 / 28%);
    }

    #main-nav .user-menu > .user-weather-item {
        border-radius: 8px 0 0 8px;
    }

    #main-nav .user-menu > .user-clock-item {
        border-radius: 0 8px 8px 0;
    }

    /* El enlace del clima lleva la clase "search" (fondo y línea propios):
       aquí se quitan para que se vea la píldora. */
    #main-nav .user-menu > .user-weather-item > a {
        display: flex;
        align-items: center;
        height: 32px;
        padding: 0 4px 0 10px;
        border: 0;
        background: none;
        box-shadow: none;
    }

    #main-nav .user-menu > .user-weather-item > a:hover,
    #main-nav .user-menu > .user-clock-item > a:hover {
        background: none;
    }

    /* Hora de Habbo, dentro de la píldora junto al clima. */
    #main-nav .user-menu > .user-clock-item > a {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 32px;
        padding: 0 12px 0 6px;
        font-size: 0.9rem;
        color: #fff;
        text-shadow: 1px 1px rgb(0 0 0 / 48%);
        white-space: nowrap;
    }

    #main-nav .user-menu > .user-clock-item .fa-clock {
        color: #bfe9f7;
    }

    #main-nav .user-menu > .user-clock-item .ht-hpe-label {
        font-size: 0.7rem;
        font-weight: bold;
        opacity: 0.75;
    }

    #main-nav #my-menu {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        width: max-content;
        transform: translateX(-50%);
    }

    /* Nombres muy largos se acortan con "…" para no chocar con el menú; los
       muy cortos tienen un ancho mínimo para que el botón no quede diminuto. */
    #main-nav .user-menu > .user-session-item > a {
        box-sizing: border-box;
        min-width: 90px;
        text-align: center;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ─── Elementos principales ───
       La barra mide 1200px como mucho y va justa: el relleno es el de
       siempre y la flecha de los desplegables se acerca al texto. */
    #main-nav .header-top-menu > li.menu-item-has-children > a,
    #main-nav .header-top-menu > li.page_item_has_children > a {
        padding-right: 24px;
    }

    #main-nav .header-top-menu > li.menu-item-has-children > a:after,
    #main-nav .header-top-menu > li.page_item_has_children > a:after {
        right: 9px;
    }

    /* Iconos de cada elemento, los mismos del menú de móvil
       (inc/mobile-menu.php). */
    #main-nav .header-top-menu > li > a .ht-mm-icon {
        width: auto;
        margin-right: 6px;
        font-size: 0.9em;
        color: #bfe9f7;
    }

    #main-nav .header-top-menu > li:hover > a .ht-mm-icon,
    #main-nav .header-top-menu > li.current-menu-item > a .ht-mm-icon {
        color: #fff;
    }

    /* Página actual: la franja un poco más clara y una línea azul oscuro abajo.
       (Al pasar el ratón se mantiene el oscuro de style.css, que enlaza con
       el desplegable azul.) */
    #main-nav #my-menu .header-top-menu > li.current-menu-item > a,
    #main-nav #my-menu .header-top-menu > li.current_page_item > a,
    #main-nav #my-menu .header-top-menu > li.current-menu-ancestor > a {
        background: rgb(255 255 255 / 14%);
        box-shadow: inset 0 -3px 0 #004a68;
    }
}

/* Portátiles pequeños: la barra va justa y el último elemento caía a una
   segunda fila. Se compacta: sin iconos, con menos relleno y letra algo
   menor. */
@media (min-width: 1151px) and (max-width: 1349px) {
    #main-nav .header-top-menu > li > a .ht-mm-icon {
        display: none;
    }

    #main-nav .user-menu > .user-session-item > a {
        max-width: 130px;
    }

    #main-nav .header-top-menu > li {
        font-size: 0.85rem;
    }

    #main-nav .header-top-menu > li > a {
        padding-right: 7px;
        padding-left: 7px;
    }

    #main-nav .header-top-menu > li.menu-item-has-children > a,
    #main-nav .header-top-menu > li.page_item_has_children > a {
        padding-right: 21px;
    }

    #main-nav .header-top-menu > li.menu-item-has-children > a:after,
    #main-nav .header-top-menu > li.page_item_has_children > a:after {
        right: 7px;
    }
}

/* ─── Panel de usuario (burgermenu: html.opened-right) ───
   style.css fija la página (position: fixed) al abrirlo, y eso la devolvía
   arriba del todo. El panel ya es fixed por sí mismo: basta con que la página
   no se desplace mientras está abierto, y así se queda donde estabas. */
html.opened-right,
html.opened-right body {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
}

/* En móvil la barra solo lleva lo esencial: sin hora (está en el menú, en
   Tiempo atmosférico). */
@media (max-width: 1150px) {
    #main-nav .user-menu > .user-clock-item {
        display: none;
    }
}