/*
Theme Name: Educreando A.C.
Text Domain: educreando
Theme URI: https://www.aprendamos.org/
Description: Tema de WordPress para el Sitio Web de Educreando A.C.
Version: 2.0
Author: aprendamos.org
Author URI: https://www.aprendamos.org/
*/

/* ========================================
RESET Y ESTILOS BASE
======================================== */
body {
background-color: #f2ebfa;
color: #0b0b0d;
overflow-x: hidden;
}

a {
color: #7b2658;
}

.text-educreando {
--bs-text-opacity: 1;
color: #793ebd !important;
}

.bg-educreando {
--bs-bg-opacity: 1;
background-color: #793ebd !important;
}

/* ========================================
NAVBAR PRINCIPAL
======================================== */
#main-navbar {
transition: padding 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.3s ease;
padding-top: 1rem;
will-change: padding;
}

/* Estado comprimido al hacer scroll */
#main-navbar.compressed {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.navbar-educreando,
.navbar[data-bs-theme=educreando] {
--bs-navbar-color: rgba(255, 255, 255, 0.6);
--bs-navbar-hover-color: rgba(255, 255, 255, 0.8);
--bs-navbar-disabled-color: rgba(255, 255, 255, 0.4);
--bs-navbar-active-color: #ffffff;
--bs-navbar-brand-color: #ffffff;
--bs-navbar-brand-hover-color: #ffffff;
--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.2);
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#sub-navbar {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ========================================
LOGOTIPO (imagen o icono)
======================================== */
.navbar-brand {
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}

/* Logo imagen */
.navbar-brand img.custom-logo {
height: 140px !important;
width: 140px;
object-fit: contain;
transition: height 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Logo icono (Iconify) */
.navbar-brand iconify-icon {
font-size: 4em;
transition: font-size 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
display: inline-block;
line-height: 1;
}

/* Estado comprimido: logo imagen más pequeño */
#main-navbar.compressed .navbar-brand img.custom-logo {
height: 60px;
}

/* Estado comprimido: icono más pequeño */
#main-navbar.compressed .navbar-brand iconify-icon {
font-size: 2em;
}

/* ========================================
BUSCADOR (expansión suave con hover/clic)
======================================== */
.educreando-search {
display: inline-block;
position: relative;
width: auto;
}

.educreando-search .input-group {
display: flex;
align-items: center;
gap: 0;
}

/* Estado normal: input reducido */
.educreando-search input[type="search"] {
width: 100px !important; /* Ancho base en todos los dispositivos */
min-width: 60px; /* Ancho mínimo absoluto */
max-width: 250px;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.25rem 0 0 0.25rem;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.educreando-search input[type="search"]::placeholder {
color: rgba(255, 255, 255, 0.8);
}

.educreando-search input[type="search"]:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6);
}

/* Botón de búsqueda (lupa) */
.educreando-search .educreando-search-toggle {
border-radius: 0 0.25rem 0.25rem 0;
border: 1px solid rgba(255, 255, 255, 0.4);
border-left: none;
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 0.25rem 0.5rem;
transition: background-color 0.3s ease, border-color 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 31px;
}

.educreando-search .educreando-search-toggle:hover,
.educreando-search .educreando-search-toggle:focus {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6);
}

/* Estado expandido (hover, focus o show) */
.educreando-search.show input[type="search"],
.educreando-search:hover input[type="search"],
.educreando-search input[type="search"]:focus {
width: 200px !important;
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6);
}

.educreando-search.show .educreando-search-toggle,
.educreando-search:hover .educreando-search-toggle,
.educreando-search input[type="search"]:focus + .educreando-search-toggle {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6);
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 576px) {
.educreando-search input[type="search"] {
width: 80px !important;
min-width: 50px;
}

.educreando-search.show input[type="search"],
.educreando-search:hover input[type="search"],
.educreando-search input[type="search"]:focus {
width: 150px !important;
}
}

/* ========================================
REDES SOCIALES
======================================== */
.educreando-socials a {
transition: transform 0.2s ease;
display: inline-block;
font-size: 1.25rem;
}

.educreando-socials a:hover {
transform: scale(2);
}

/* ========================================
LAYOUT DEL CONTENEDOR DERECHO (buscador + redes)
======================================== */
.educreando-right {
display: flex;
align-items: center;
justify-content: flex-end;/* Alinear a la derecha */
gap: 0.75rem;
flex-wrap: nowrap;
}

/* En tablets y desktop (>=768): buscador arriba, redes abajo */
@media (min-width: 768px) {
.educreando-right {
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
min-width: 180px;
}
}

/* En móviles pequeños (<576): dos filas (buscador arriba, redes abajo) */
@media (max-width: 575.98px) {

/* Contenedor principal: separar elementos y permitir wrap */
.navbar > .container {
justify-content: space-between !important;
flex-wrap: wrap !important;
}

 /* Contenedor derecho: columna, ocupa espacio restante */
 .educreando-right {
flex-direction: column !important;
align-items: flex-end !important;
flex: 1 1 auto !important;
gap: 0.25rem !important;
margin-top: 0 !important;
min-width: 0 !important;
}

 /* Buscador ocupa todo el ancho disponible, alineado a la derecha */
 .educreando-search-wrapper {
display: flex;
justify-content: flex-end;
width: 100%;
}

/* Redes sociales: misma anchura, alineadas a la derecha */
.educreando-socials {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
width: 100%;
}

 /* Ajustar ancho del buscador en móviles */
 .educreando-search input[type="search"] {
width: 100px !important;
min-width: 60px;
}
}

/* Ajuste extra para pantallas muy pequeñas (<400px) */
@media (max-width: 399.98px) {
 .educreando-search input[type="search"] {
width: 70px !important;
min-width: 50px;
}
.educreando-search.show input[type="search"],
.educreando-search:hover input[type="search"],
.educreando-search input[type="search"]:focus {
width: 130px !important;
}
}

/* ========================================
MENÚ DE NAVEGACIÓN (evitar wrap en desktop)
======================================== */
@media (min-width: 1200px) {
#main-menu .navbar-nav {
flex-wrap: nowrap;
}
}

/* En móviles permite wrap para que el collapse funcione bien */
@media (max-width: 576px) {
#main-menu .navbar-nav {
flex-wrap: wrap;
}
}

/* Ajustes adicionales para que el toggler se vea bien */
.navbar-toggler {
border: none;
outline: none;
transition: all 0.2s;
}

/* ===========================
PIE DE SITIO
==========================	*/

.pie {
background-color: #be9ae4;
color: #ffffff;
font-size: 14px;
}

.pie a {
color: #ffffff;
}

.pie .wp-block-latest-posts__list {
list-style: circle !important;
}