/************************************************************
 *  MENÚ TIPO APP – CSS
 *  Archivo: assets/css/menu-app.css
 ************************************************************/

/* ==========================================================
   0) CORRECCIONES GENERALES
   ========================================================== */

/* Al abrir el menú: bloquear scroll */
body.rl-menu-open {
    overflow: hidden;
}


/* ==========================================================
   1) HEADER GENERAL
   ========================================================== */

#rl-app-header {
    width: 100%;
    position: relative;
}

/* ---------- LOGO PRINCIPAL ARRIBA ---------- */

.site-logo-main {
    text-align: center;
    margin: 0.75rem 0 0.5rem;
}

.site-logo-main img {
    max-height: 90px;
    width: auto;
    height: auto;
}


/* ==========================================================
   2) FRANJA OSCURA (barra app)
   ========================================================== */

.rl-app-bar {
    position: relative;    /* NO sticky por defecto; lo hace el JS */
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    padding: 0.7rem 1rem;

    /* Color de fondo sincronizado con el personalizador */
    background-color: var(--rm-menufooter-color, #333);
    color: #fff;

    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;

    z-index: 50;
    transition: all 0.25s ease;
}

/* Modo sticky (activado por JS con .is-sticky) */
.rl-app-bar.is-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;

    background-color: var(--rm-menufooter-color, #333);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}


/* ==========================================================
   3) LOGO PEQUEÑO (solo sticky)
   ========================================================== */

.site-logo-sticky {
    display: none;
    margin-right: 0.5rem;
}

.rl-app-bar.is-sticky .site-logo-sticky {
    display: block;
}

.site-logo-sticky img {
    max-height: 38px;
    width: auto;
    height: auto;
}

.rl-app-bar.is-sticky .site-logo {
    justify-content: flex-start !important;
}

/* ==========================================================
   4) BOTÓN MENÚ
   ========================================================== */

.hamburger.rl-mae-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 1.4rem;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    /* Colores del personalizador (botón destacado) */
    background: var(--rm-secondary-color, #1E90FF);
    color: var(--rm-secondary-text-color, #FFFFFF);

    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    cursor: pointer;
}

.rl-mae-menu-button i {
    margin-right: 8px; /* Espacio entre el icono y la palabra MENÚ */
}

/* Hover en escritorio */
@media (hover:hover) {
    .hamburger.rl-mae-menu-button:hover {
        background: var(--rm-secondary-color-hover, #00BFFF);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }
}

/* Quitar bordes/estilos del tema viejo dentro de la barra nueva */
.rl-app-bar .hamburger,
.rl-app-bar .menu-container,
#rl-app-header nav {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   5) OVERLAY
   ========================================================== */

.rl-menu-app-overlay {
    position: fixed;
    inset: 0;
	overflow-y: auto;

    background: rgba(0,0,0,0.90);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 99999;
}

.rl-menu-app-overlay[hidden] {
    display: none !important;
}

@media (max-height: 500px) {
    .rl-menu-app-overlay {
        align-items: flex-start;
    }
    .rl-menu-app-panel {
        margin-top: 1.5rem;
    }
}

/* ==========================================================
   6) PANELES (root + subniveles)
   ========================================================== */

.rl-menu-app-panel {
    display: none;

    width: 80%;
    max-width: min(420px, 100% - 2rem);

    padding: 2rem 1.7rem;
    border-radius: 1rem;

    /* Fondo coherente con menú/footer */
    background-color: var(--rm-menufooter-color, #333);
    color: #fff;

    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.rl-menu-app-panel.rl-menu-app-panel-active {
    display: block;
}

.rl-menu-app-title {
    font-size: 1.35rem;
    margin-bottom: 1.3rem;

    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}


/* ==========================================================
   7) BOTONES DEL PANEL
   ========================================================== */

.rl-menu-app-item {
    width: 100%;

    padding: 1rem 1.1rem;
    margin: 0.3rem 0;

    border-radius: 0.8rem;
    border: 0;

    /* Botones también con colores del personalizador */
    background-color: var(--rm-secondary-color, #1E90FF);
    color: var(--rm-secondary-text-color, #FFFFFF);

    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

@media (hover:hover) {
    .rl-menu-app-item:hover {
        background-color: var(--rm-secondary-color-hover, #00BFFF);
    }
}

/* Botón con submenú (padre) – pequeño matiz si quieres diferenciar */
.rl-menu-app-item-parent {
    filter: brightness(0.95);
}


/* ==========================================================
   BOTONES VOLVER / CERRAR – EN DOS COLUMNAS
   ========================================================== */

.rl-menu-app-actions {
    margin-top: 1.2rem;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0.7rem;
}

.rl-menu-app-back,
.rl-menu-app-close {
    flex: 1; /* Ambos 50% */
    padding: 0.85rem 0.6rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    border-radius: 0.8rem;
    border: 1px solid rgba(255,255,255,0.35);

    background: transparent;
    color: #fff;

    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    cursor: pointer;
}

.rl-menu-app-back i,
.rl-menu-app-close i {
    font-size: 1rem;
}

@media (hover:hover) {
    .rl-menu-app-back:hover,
    .rl-menu-app-close:hover {
        background-color: rgba(255,255,255,0.1);
    }
}

/* ==========================================================
   9) BLOQUE GTRANSLATE DENTRO DEL PANEL
   ========================================================== */

.rl-menu-app-gtranslate {
    margin: 0.75rem 0 0.25rem;
    display: flex;
    justify-content: center;
}

.rl-menu-app-gtranslate * {
    font-size: 0.9rem;
}

.rl-menu-app-gtranslate .glink[data-gt-lang="ca"] img {
    content: url("/wp-content/themes/cartaqr/imgs/flag-va.svg");
}

.rl-menu-app-gtranslate .glink {
    margin-right: 12px;
}

/* Borde en las banderas.
   Sin él, las que llevan blanco o rojo (España, Polonia, Suiza, Japón...) se
   funden con el fondo del menú y apenas se distinguen. El borde claro las
   recorta contra cualquier color de fondo.

   Se usa un color semitransparente en lugar de blanco puro: así también
   funciona si algún día el fondo del menú es claro. */
.rl-menu-app-gtranslate .glink img {
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    /* Evita que el borde deforme la bandera. */
    box-sizing: content-box;
    vertical-align: middle;
}

.rl-menu-app-gtranslate .glink:last-of-type {
    margin-right: 0;
}

/* ==========================================================
   10) RESPONSIVE
   ========================================================== */

@media (min-width: 768px) {

    .site-logo-main img {
        max-height: 95px;
    }

    .rl-app-bar {
        padding: 0.8rem 1.8rem;
    }

    .hamburger.rl-mae-menu-button {
        font-size: 1rem;
    }

    .rl-menu-app-panel {
        padding: 2.2rem 2rem;
    }

    .rl-menu-app-title {
        font-size: 1.45rem;
    }
}

/* ==========================================================
   11) MEJORAS 2.0 - ANIMACIONES
   ========================================================== */

/* Animación para cuando aparece un panel */
@keyframes rlSlideUpFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Aplicamos la animación al panel activo */
.rl-menu-app-panel.rl-menu-app-panel-active {
    animation: rlSlideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Opcional: transición suave para el fondo negro */
.rl-menu-app-overlay {
    transition: opacity 0.3s ease;
}

/* ==========================================================
   CORRECCIÓN LOGO STICKY (Invertir color)
   ========================================================== */

.rl-app-bar.is-sticky .site-logo-sticky img {
    filter: invert(1);
    transition: filter 0.3s ease;
}

/* ==========================================================
   ALINEACIÓN VERTICAL PERFECTA DEL LOGO
   ========================================================== */

.rl-app-bar.is-sticky .site-logo-sticky {
    display: flex !important; 
    align-items: center;
    line-height: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.rl-app-bar.is-sticky .site-logo-sticky img {
    display: block;
    margin: 0 !important;
}

/* El menú de navegación usa la fuente de INTERFAZ, no la de la carta.

   Se aplica a TODOS los elementos cuyo estilo empieza por .rl-menu-app
   (paneles, títulos, botones...), y también a sus descendientes con `*`.
   Antes la regla solo cubría `.rl-menu-app` y sus enlaces/botones directos, así
   que un título como "¿Qué quieres ver?" (un <h2> dentro de un panel) se
   quedaba con la fuente de la carta. */
[class^="rl-menu-app"],
[class*=" rl-menu-app"],
[class^="rl-menu-app"] *,
[class*=" rl-menu-app"] * {
    font-family: var(--rm-font-family-ui, sans-serif);
}