/*
Theme Name:   Findus Child
Theme URI:    https://micordillera.com/
Description:  Tema hijo personalizado para el Directorio Turístico MiCordillera.
Author:       DESIGNERLO
Author URI:   https://designerlo.com/
Template:     findus
Version:      1.0.0
Text Domain:  findus-child
*/

/* Tus personalizaciones de CSS para MiCordillera irán aquí abajo */
/* ==========================================================================
   CONFIGURACIÓN TIPOGRÁFICA GLOBAL - NUNITO
   ========================================================================== */

/* 1. Importar la fuente desde Google Fonts de forma eficiente */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* 2. Aplicar Nunito a todos los encabezados del sitio */
h1, h2, h3, h4, h5, h6, 
.heading-title, 
.widget-title, 
.entry-title {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700; /* Peso por defecto para evitar saltos visuales */
    letter-spacing: -0.02em; /* Un toque sutil de tracking cerrado para títulos modernos */
}

/* 3. Jerarquía de Grosores e Impacto Visual (Escala de pesos) */
h1 {
    font-weight: 900 !important; /* Extra Black para el título de impacto del Hero */
    line-height: 1.2;
}

h2 {
    font-weight: 800 !important; /* Bold intenso para títulos de secciones (ej. "Lugares Destacados") */
    line-height: 1.25;
}

h3 {
    font-weight: 700 !important; /* Bold estructurado para nombres de tarjetas y widgets */
    line-height: 1.3;
}

h4, h5, h6 {
    font-weight: 600 !important; /* Semi Bold para subtítulos y metadatos pequeños */
    line-height: 1.4;
}
/* Traducir el botón de Guardar de forma limpia */
.apus-bookmark-not-login .bookmark-text,
#apus-bookmark-add .bookmark-text {
    font-size: 0 !important; /* Oculta el texto "Save" original */
}

.apus-bookmark-not-login .bookmark-text::after,
#apus-bookmark-add .bookmark-text::after {
    content: "Favorito" !important; /* Inyecta tu traducción */
    font-size: 14px !important; /* Devuelve el tamaño normal de tu fuente */
    font-family: 'Nunito', sans-serif;
}

/* ==========================================
   MENU STICKY LATERAL DE ABOUT: Barra horizontal de ancho completo
   ========================================== */
/* Contenedor general en Grid */
.hub-cordillera-container {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Nunito', sans-serif;
    position: relative;
}

/* ESTILOS DE LA BARRA LATERAL (DESKTOP) */
.hub-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 130px; /* Separación del header global al hacer scroll */
    height: fit-content;
}

.hub-mobile-trigger {
    display: none; /* Oculto en Computadoras */
}

.menu-anclaje-cordillera {
    background: #ffffff;
    padding: 22px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.menu-titulo-hub {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    font-weight: 700;
    margin-bottom: 15px;
}

.menu-anclaje-cordillera ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-anclaje-cordillera ul li {
    margin-bottom: 8px;
}

.menu-anclaje-cordillera ul li a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.menu-anclaje-cordillera ul li a i {
    margin-right: 10px;
    font-size: 16px;
    color: #777;
}

/* Estados Hover y Activo */
.menu-anclaje-cordillera ul li a:hover,
.menu-anclaje-cordillera ul li a.active {
    background-color: #fff5ee; /* Fondo sutil para el naranja */
    color: #ff7f27; /* Tu naranja de acento */
}

.menu-anclaje-cordillera ul li a:hover i,
.menu-anclaje-cordillera ul li a.active i {
    color: #ff7f27;
}

/* ESTILOS DEL CONTENIDO PRINCIPAL */
.hub-content {
    display: flex;
    flex-direction: column;
}

.hub-section {
    padding-bottom: 10px;
}

/* Títulos H2 en Naranja */
.hub-section h2 {
    color: #ff7f27 !important; /* Tu color Naranja oficial */
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    margin-top: 0;
    margin-bottom: 15px;
}

.hub-section p {
    color: #555555;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Línea divisoria fina de 1px */
.hub-divider {
    border: 0;
    height: 1px;
    background: #eef0f2;
    margin: 30px 0;
    width: 100%;
}

/* ==========================================
   VISTA MÓVIL: Menú Desplegable Superior
   ========================================== */
@media (max-width: 767px) {
    .hub-cordillera-container {
        grid-template-columns: 100%; /* Una sola columna completa */
        gap: 20px;
        padding: 0 15px;
    }

    .hub-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px; /* Se pega abajo de tu header móvil */
        z-index: 9999;
        background: #ffffff;
        margin: 0 -15px 15px -15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    /* Botón Lanzador Móvil */
    .hub-mobile-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
        background: #ffffff;
        border: none;
        border-bottom: 1px solid #eee;
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #ff7f27;
        text-align: left;
        cursor: pointer;
    }

    .hub-mobile-trigger .arrow-icon {
        font-size: 11px;
        transition: transform 0.3s ease;
    }

    /* Menú colapsable oculto por defecto en móvil */
    .menu-anclaje-cordillera {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid #ff7f27;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 10px 15px;
    }

    /* Clase activa para mostrar con JS */
    .menu-anclaje-cordillera.open {
        display: block !important;
    }

    .hub-mobile-trigger.open .arrow-icon {
        transform: rotate(180deg);
    }

    /* Ajustes de contenido en Móvil */
    .hub-section h2 {
        font-size: 22px !important;
    }
}
</style>