/*
Theme Name:    GeneratePress Child
Theme URI:     https://generatepress.com
Description:   Tema hijo para personalizar Jose Luis Armentia - PIXEL16
Author:        Patricia Quiñones
Template:      generatepress
Version:       1.0.0
*/

/* ==========================================
   1. REGLAS GLOBALES (Comunes a todo)
   ========================================== */
.site-footer, 
.page .entry-header { 
    display: none !important; 
}

/* Visibilidad de imágenes según dispositivo */
@media (max-width: 1024px) { 
    .ocultar-en-movil { display: none !important; }
}
@media (min-width: 1025px) { 
    .ocultar-en-escritorio { display: none !important; }
}

/* ELIMINAR SUBRAYADO DE LOS ENLACES DE LA WEB */
a {
    text-decoration: none !important;
}

/* ==========================================
   2. REGLAS PÁGINA DE INICIO (HOME)
   ========================================== */
.home .main-navigation { 
    display: none !important; 
}

@media (min-width: 1025px) {
    .home .site-logo, 
    .home .site-branding { display: none !important; }
}

/* ==========================================
   3. AJUSTES ESCRITORIO (PC)
   ========================================== */
@media (min-width: 1025px) {
    /* Alineación Cabecera */
    .inside-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0px !important;
    }

    /* Quitar espacios de cabecera y contenido */
    .site-header { margin-bottom: 0px !important; }
    #content { padding-top: 5px !important; }
    .separate-containers .site-main { margin-top: 0px !important; }
    .entry-content { margin-top: 0px !important; }

    /* Menú en una sola línea */
    .main-navigation .main-nav ul { flex-wrap: nowrap !important; }
    .main-navigation .main-nav ul li a {
        padding-left: 12px !important;
        padding-right: 12px !important;
        letter-spacing: -0.2px;
    }

    /* Arreglo PIXEL16: Liberar el enlace de texto */
    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 30px !important; /* Más espacio para que no se pise con la flecha */
        position: relative;
        pointer-events: auto !important; /* Fuerza a que el texto sea clicable */
    }
    
    /* Forzar la flecha como elemento independiente para abrir el menú */
    .menu-item-has-children .dropdown-menu-toggle {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
        padding: 0 5px !important;
        pointer-events: auto !important; /* La flecha mantiene su función de despliegue */
    }

    /* AMPLIAR ANCHO DEL SUBMENÚ DESPLEGABLE */
    .main-navigation ul ul {
        width: 380px !important; 
        top: auto !important;
    }

    .main-navigation ul ul li {
        width: 100% !important;
    }

    .main-navigation .main-nav ul ul li a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        white-space: normal !important; 
        line-height: 1.4 !important;    
        font-size: 13px !important;     
    }
}

/* ==========================================
   4. AJUSTES MÓVIL (MÁS JUNTO)
   ========================================== */
@media (max-width: 1024px) {
    .inside-header {
        padding-top: 10px !important;
        padding-bottom: 5px !important;
    }

    .site-header { margin-bottom: 0px !important; }
    #content { padding-top: 0px !important; }
    .separate-containers .site-main { margin-top: 0px !important; }
    .entry-content { margin-top: 0px !important; }
    
    .main-navigation .menu-toggle {
        line-height: 40px !important;
    }
}

/* ==========================================
   5. ESTILOS PERSONALIZADOS PARA LAS MIGAS DE PAN
   ========================================== */

/* Estilo general para toda la ruta */
.breadcrumbs, 
.breadcrumbs a {
    font-size: 13px !important; 
    color: #ffffff !important;  
}

/* Resaltar la HOME en negrita */
.breadcrumbs .home a {
    font-weight: bold !important;
    font-size: 14px !important; 
}

/* Estilo para el elemento final (el artículo actual, que no es un enlace) */
.breadcrumbs .current-item {
    font-size: 13px !important;
    opacity: 0.8; 
}
/* ==========================================================================
   6. MENÚ STICKY NATIVO Y PUNTO A LA IZQUIERDA
   ========================================================================== */

/* FUERZA EL COMPORTAMIENTO STICKY EN EL CONTENEDOR DE GENERATEPRESS */
.site-header,
#site-navigation {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    background-color: #000000 !important; /* Negro sólido para que no transparente nada */
}

/* Ajuste milimétrico si tienes la barra de administración de WordPress arriba */
.admin-bar .site-header,
.admin-bar #site-navigation {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header,
    .admin-bar #site-navigation {
        top: 46px !important;
    }
}

/* CONFIGURACIÓN DEL ESPACIO PARA EL PUNTO A LA IZQUIERDA */
.main-navigation .main-nav ul li > a {
    position: relative !important;
    padding-left: 22px !important; /* Espacio fijo para que el texto no pise el círculo */
}

/* Conservamos la posición y alineación nativa de las flechas de GeneratePress */
.main-navigation .main-nav ul li > a .dropdown-menu-toggle {
    vertical-align: middle !important;
    line-height: inherit !important;
    display: inline-block !important;
}

/* DIBUJO DEL CÍRCULO EN LA SECCIÓN ACTIVA */
.main-navigation .main-nav ul li[class*="current-menu-"] > a::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;            /* Centrado en el espacio del padding-left */
    top: 50% !important;             /* Centrado vertical respecto al texto */
    transform: translateY(-50%) !important;
    width: 5px !important;            /* Grosor del punto */
    height: 5px !important;
    background-color: #ffffff !important; /* Blanco sólido activo */
    border-radius: 50% !important;    /* Círculo perfecto */
}

/* EFECTO HOVER (SECCIONES NO ACTIVAS) */
.main-navigation .main-nav ul li:not([class*="current-menu-"]) > a::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 5px !important;
    height: 5px !important;
    background-color: transparent !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]) > a:hover::before {
    background-color: #555555 !important; /* El punto aparece en gris al pasar el ratón */
}