/*
Theme Name: Ixion Child
Theme URI: http://localhost/tu-sitio
Description: Tema hijo de Ixion
Author: Tu Nombre
Template: ixion
Version: 1.0
*/

/* =========================
   BASE: TIPOGRAFÍAS Y COLORES
   Chivo (encabezados), Roboto (texto)
   Encabezados: #b70e61
   Links / botones: #4cc2ec
   ========================= */

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    background: #ffffff;
}

/* Encabezados */
h1,h2,h3,h4,h5,h6 {
    font-family: 'Chivo', sans-serif;
    font-weight: 700;
    color: #b70e61;
    line-height: 1.2;
}

/* Enlaces globales */
a {
    color: #4cc2ec;
    text-decoration: none;
}
a:hover { color: #3aa0d1; }

/* Botones */
button, .button {
    background: #4cc2ec;
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    cursor: pointer;
}
button:hover, .button:hover { background: #3aa0d1; }

/* =========================
   ANCHO DE PÁGINA (contenedor central)
   ========================= */
.wrap,
.site-content {
    max-width: 1600px;   /* valor estimado similar al original */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Cabecera y footer al mismo ancho */
.site-header .wrap,
.site-footer .wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* =========================
   LOGO Y ALINEACIÓN
   - mantiene logo a la izquierda y menu centrado debajo
   ========================= */
.site-header .wrap {
    display: flex;
    flex-direction: column; /* logo arriba, menú abajo */
    align-items: stretch;
}

/* Mantener logo a la izquierda: 
   el child ajusta el margen izquierdo del logo si quieres moverlo */
.site-branding {
    align-self: flex-start; /* logo a la izquierda del contenedor */
    margin-left: 50px; /* ajusta a tu gusto */
}

/* =========================
   MENÚ PRINCIPAL (centrado en una sola línea)
   ========================= */
.main-navigation {
    margin-top: 18px;
}

.main-navigation ul.menu {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 30px;              /* distancia entre items; ajusta si hace falta */
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

/* controlar el ancho de cada item para evitar saltos si hay textos largos */
.main-navigation ul.menu li {
    white-space: nowrap;
}

/* estilo de los enlaces del menú */
.main-navigation a {
    color: #0095c7;
    font-family: 'Chivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.6px;
    padding: 8px 2px;
}

/* hover / focus */
.main-navigation a:hover,
.main-navigation a:focus {
    color: #b70e61;
}

/* ítem activo (Inicio etc.) */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: #999999;
}

/* desplegables (submenus) */
.main-navigation ul ul {
    background: #fff;
    border: 1px solid #eee;
    padding: 8px 0;
}
.main-navigation ul ul li a {
    color: #4cc2ec;
    font-weight: 400;
    text-transform: none;
}

/* =========================
   HERO / BANNER PRINCIPAL
   (imagen de portada con texto centrado en cursiva)
   ========================= */

/* selector genérico para cabeceras con imagen; prueba varios selectores si tu tema usa otro */
.header-image, .custom-header, .site-header .custom-header-media, .wp-block-cover {
    width: 100%;
    overflow: hidden;
}

/* Imagen responsiva */
.header-image img,
.custom-header img,
.site-header .custom-header-media img,
.wp-block-cover__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Texto superpuesto (hero blurb) */
/* Añade este HTML en el bloque/Beaver row: <p class="hero-blurb">Tu texto aquí</p> */
.hero-blurb {
    font-family: 'Chivo', sans-serif;
    font-size: 22px;        /* ajusta tamaño */
    font-weight: 700;
    font-style: italic;
    color: #222;
    text-align: center;
    margin: 18px auto;
    max-width: 1000px;
    line-height: 1.3;
}

/* en caso de que quieras el texto sobre la imagen (overlay) */
.hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    pointer-events: none; /* no interfiere con clicks */
}
.hero-overlay .hero-blurb {
    background: rgba(255,255,255,0.0); /* transparente, si quieres fondo puedes poner rgba */
    padding: 0 20px;
    pointer-events: auto;
}

/* =========================
   CTA BAND (banda azul con texto magenta y palabra resaltada)
   ========================= */
/* En la home crea un bloque / módulo con clase "cta-band" y dentro el texto:
   <div class="cta-band"><p>Recibe todas las novedades... <span class="highlight">con</span> nuestra newsletter...</p></div>
*/
.cta-band {
    background: #4cc2ec;
    padding: 60px 0;
    text-align: center;
}
.cta-band p {
    font-family: 'Chivo', sans-serif;
    color: #b70e61;
    font-size: 28px;
    font-style: italic;
    font-weight: 700;
    margin: 0;
}

/* palabra resaltada */
.cta-band .highlight {
    background: #0f61d7; /* azul oscuro para resaltar */
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 3px;
    display: inline-block;
}

/* =========================
   WIDGETS / FOOTER
   ========================= */
.widget {
    font-family: 'Roboto', sans-serif;
    color: #333333;
}
.widget a { color: #4cc2ec; }
.site-footer {
    background: #f8f8f8;
    color: #333;
    padding: 30px 0;
}

/* =========================
   IMÁGENES DESTACADAS
   ========================= */
.entry-header img,
.entry-content img,
.wp-block-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   ADAPTACIONES RESPONSIVE
   ========================= */
@media (max-width: 980px) {
    .main-navigation ul.menu { gap: 18px; }
    .main-navigation a { font-size: 13px; }
    .site-branding { margin-left: 20px; }
    .hero-blurb { font-size: 20px; padding: 0 10px; }
    .cta-band p { font-size: 22px; padding: 0 8px; }
}

@media (max-width: 600px) {
    /* en móviles permitimos que el menú rompa o use el menú hamburguesa del tema */
    .main-navigation ul.menu { flex-wrap: wrap; gap: 12px; }
    .main-navigation a { font-size: 12px; }
    .hero-blurb { font-size: 18px; }
    .cta-band p { font-size: 18px; }
}

/* === CORRECCIÓN DE COLOR DEL MENÚ PRINCIPAL === */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
    color: #0095c7; /* Azul corporativo */
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:focus,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current_page_item > a {
    color: #b70e61; /* Magenta al pasar el ratón o activo */
}

/* === CORRECCIÓN DEL TRIÁNGULO DORADO EN SUBMENÚ === */

/* Caso más común (pseudo-elemento before) */
.main-navigation ul ul::before,
.main-navigation ul ul::after,
.main-navigation .sub-menu::before,
.main-navigation .sub-menu::after {
    border-bottom-color: #0095c7 !important; /* Azul corporativo */
    border-top-color: #0095c7 !important;
    color: #0095c7 !important;
}

/* En algunos temas, el triángulo es un borde superior */
.main-navigation ul ul {
    border-top: 3px solid #0095c7 !important;
}

/* Si el triángulo pertenece a un <li> con hijos */
.main-navigation ul li.menu-item-has-children > a::after {
    border-top-color: #0095c7 !important;
}

/* Override navegación Ixion */
.post-navigation a,
.posts-navigation a {
    background-color: #1aa6d9 !important;
    color: #ffffff !important;
}

.post-navigation a:hover,
.posts-navigation a:hover {
    background-color: #148bb8 !important;
}




/* Botón publicar comentario */
#submit {
    background-color: #1aa6d9 !important;
    border-color: #1aa6d9 !important;
    color: #ffffff !important;
}
	
#submit:hover {
    background-color: #148bb8 !important;
    border-color: #148bb8 !important;
}