/*
Theme Name: erase_una_vez
Theme URI: https://www.muchoscuentos.com
Author: Ibai Moneo
Author URI: https://www.muchoscuentos.com
Description: Estilo del menú secundario del tema
érase 1 vez formado por imágenes enlazadas a cada seccion.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erase_una_vez
*/
/* Custom Theme Styles for erase_una_vez secondary menu - menu-secundario.css */
.content {
    gap: .3em;
    font-family: 'Patrick Hand SC', verdana, Arial, sans-serif; 
}
.content__header {
    margin:0 auto;
    text-align: center;
}
.content__titulo__secundario {
    -webkit-text-fill-color: transparent;
    background: var(--grad-title); 
    filter: var(--filter-title);
    -webkit-background-clip: text;
    -webkit-text-stroke: .03em rgba(240, 255, 255, 0.15);
    background-clip: text;
}
.content__secundario { /*Contenedor general del menú*/
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
}
.content__secundario a {/*Contenedor que organiza imagen y texto*/
    position: relative;
    display: flex;
    flex-direction: column; /* Organiza la imagen y el texto en columna */
    align-items: center; /* Centra el contenido horizontalmente */
    text-decoration: none;
    width: calc(70% / 2);
    max-width: 9rem; /* Máximo ancho para las imágenes y textos */
    flex-grow: 1;
    margin: 1.5em auto;   
}
.content__secundario img { /*contenedor de las imágenes*/
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    filter: drop-shadow(-.03em .06em .68em rgba(0, 0, 0, 0.6)); 
    border-radius: 50%;
    border: .07em solid darkturquoise;
}
.content__secundario span { /*Contenedor encargado de todo lo relacionado con el texto*/
    position: relative;
    width: 125%;
    height: auto;
    font-size: var(--p);
    text-align: center;
    font-weight: bolder;
    -webkit-text-fill-color: transparent;
    background: var(--grad-title); 
    filter: var(--filter-title);
    -webkit-background-clip: text;
    -webkit-text-stroke: .01em rgba(240, 255, 255, 0.25); 
    background-clip: text;
}
.content__secundario--cuentos, 
.content__secundario--multimedia {
    margin: 0 auto 25%;
    gap: .3em;
}
.content__secundario--cuentos a,
.content__secundario--multimedia a {
    margin: 0 auto;
}
@media (orientation: landscape) { 
    .content__secundario {
        margin: 0 auto 25% auto;
        gap: .3em;
    }
    .content__secundario a {
        max-width: calc(80% / 3);
        margin: 0 auto;
    }
}
@media (min-width: 1024px) {
    .content__secundario a {
        width: calc(100% / 3);
        max-width: 15rem;
    }
}