/*
Theme Name: La Neta Chiapas
Text Domain: laneta
Theme URI: https://www.aprendamos.org/
Description: Tema de WordPress para el Sitio Web de La Neta Chiapas.
Version: 4.1
Author: aprendamos.org
Author URI: https://www.aprendamos.org/
*/

/* ========================================
PALETA CELESTE
======================================== */
:root {
--laneta-primary: #3f6fcf;
--laneta-primary-dark: #2d549f;
--laneta-accent: #bddcf3;
--laneta-accent-light: #e5ecf9;
--laneta-border: #c9d6eb;
--laneta-bg: #ffffff;
--laneta-text: #212529;
--laneta-muted: #6c757d;
}

/* ========================================
RESET Y BASE
======================================== */
body {
background-color: var(--laneta-bg);
color: var(--laneta-text);
overflow-x: clip; /* evita romper position: sticky */
}

a {
color: var(--laneta-primary);
}

a:hover {
color: var(--laneta-primary-dark);
}

/* ========================================
NAVBAR HORIZONTAL (reemplaza .mobile-topbar)
======================================== */
.navbar-laneta {
background-color: var(--laneta-accent);
border-bottom: 2px solid var(--laneta-primary);
padding: .4rem 0;
z-index: 1020;
}

.navbar-laneta .navbar-brand {
display: flex;
align-items: center;
gap: .5rem;
color: var(--laneta-primary-dark);
font-weight: 700;
text-decoration: none;
max-width: 70%;
}

.navbar-laneta .navbar-brand img {
height: 38px;
width: auto;
flex-shrink: 0;
}
.navbar-laneta .navbar-brand-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.navbar-laneta .navbar-nav .nav-link {
color: var(--laneta-primary-dark);
font-weight: 600;
padding: .5rem .75rem;
border-radius: .25rem;
transition: background-color .2s, color .2s;
}

.navbar-laneta .navbar-nav .nav-link:hover,
.navbar-laneta .navbar-nav .nav-link:focus {
color: var(--laneta-primary);
background-color: var(--laneta-accent-light);
}

.navbar-laneta .navbar-nav .nav-link.active {
color: var(--laneta-primary);
background-color: #fff;
}

.navbar-laneta .navbar-toggler {
border: 1px solid var(--laneta-primary);
padding: .25rem .5rem;
}
.navbar-laneta .navbar-toggler:focus {
box-shadow: 0 0 0 .2rem rgba(63, 111, 207, .25);
}

.navbar-laneta .dropdown-menu {
border-color: var(--laneta-border);
}

.navbar-laneta .dropdown-item {
color: var(--laneta-text);
font-weight: 500;
}

.navbar-laneta .dropdown-item:hover,
.navbar-laneta .dropdown-item:focus {
background-color: var(--laneta-accent-light);
color: var(--laneta-primary-dark);
}

/* Buscador dentro del navbar */
.navbar-laneta .navbar-search { width: 100%; }
@media (min-width: 992px) {
.navbar-laneta .navbar-search {
width: 230px;
flex-shrink: 0;
}
.navbar-laneta .navbar-search .laneta-search input[type="search"] {
width: 100% !important;
}
}

/* ========================================
SIDEBAR (logo + presentación)
======================================== */
.sidebar-laneta {
background-color: var(--laneta-accent-light);
border-right: 1px solid var(--laneta-border);
padding: 1rem .75rem;ç
max-width: 120px;
}

.sidebar-inner {
display: flex;
flex-direction: column;
gap: 1rem;
}

.sidebar-logo-link {
display: block;
}

.sidebar-logo-link img {
width: 100%;
height: auto;
}

.sidebar-section-title {
font-size: .95rem;
font-weight: 700;
color: var(--laneta-primary-dark);
margin: 0 0 .35rem;
text-transform: uppercase;
letter-spacing: .04em;
}

.sidebar-presentation p {
font-size: .85rem;
line-height: 1.5;
color: var(--laneta-text);
}

/* En pantallas pequeñas el sidebar va arriba del main, compacto */
@media (max-width: 767.98px) {
.sidebar-laneta {
border-right: none;
border-bottom: 1px solid var(--laneta-border);
}
.sidebar-presentation p { font-size: .85rem; }
}

/* ========================================
FEED BANNERS (Últimas en Chiapas)
======================================== */
.feed-banner {
margin-bottom: .75rem;
text-align: center;
}
.feed-banner img {
max-width: 100%;
height: auto;
border-radius: .35rem;
display: block;
margin: 0 auto;
}

/* ========================================
LAYOUT: 2 COLUMNAS
======================================== */
.site-body {
min-height: calc(100vh - 200px);
}

.sidebar-laneta {
background-color: var(--laneta-accent-light);
border-right: 1px solid var(--laneta-border);
}

/* Desktop: sidebar sticky, ocupa el viewport y tiene scroll interno */
@media (min-width: 992px) {
.sidebar-laneta {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
}

/* Cuerpo del sidebar: flex column para empujar el buscador al fondo */
.sidebar-laneta .offcanvas-body,
.sidebar-laneta .sidebar-body {
display: flex;
flex-direction: column;
padding: 1rem .75rem;
}

/* Cabecera del sidebar: logo + título + descripción */
.sidebar-header {
flex-shrink: 0;
padding-bottom: .75rem;
margin-bottom: .75rem;
}

.sidebar-logo-link {
display: block;
margin-bottom: .5rem;
}

.sidebar-logo-link img {
height: 200px;
width: auto;
display: block;
}

.sidebar-title {
display: block;
font-size: 1.05rem;
font-weight: 700;
color: var(--laneta-primary-dark);
text-decoration: none;
line-height: 1.25;
}

.sidebar-title:hover { color: var(--laneta-primary); }
.sidebar-tagline {
font-size: .8rem;
color: var(--laneta-muted);
margin-top: .2rem;
line-height: 1.2;
}

/* Menú */
.sidebar-nav {
flex-shrink: 0;
}

.sidebar-laneta .nav-section-title {
display: block;
font-weight: 700;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--laneta-primary-dark);
background-color: var(--laneta-accent);
padding: .3rem .5rem;
border-radius: .25rem;
margin: .75rem 0 .35rem;
}

.sidebar-laneta .nav-item:first-child .nav-section-title {
margin-top: 0;
}

.sidebar-laneta .nav-link {
color: var(--laneta-text);
padding: .3rem .5rem;
border-radius: .25rem;
font-size: .9rem;
}
.sidebar-laneta .nav-link:hover {
background-color: var(--laneta-accent);
color: var(--laneta-primary-dark);
}

.sidebar-laneta .nav-link.active {
background-color: var(--laneta-primary);
color: #fff;
font-weight: 600;
}

/* Buscador al fondo del sidebar */
.sidebar-search {
flex-shrink: 0;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--laneta-border);
}

/* Main */
.main-laneta {
padding: 1.5rem;
min-height: 400px;
}

/* ========================================
PORTADA (front-page.php)
======================================== */
.section-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--laneta-primary-dark);
border-bottom: 2px solid var(--laneta-accent);
padding-bottom: .25rem;
margin-bottom: 1rem;
}

.feed-card {
background-color: var(--laneta-accent-light);
border: 1px solid var(--laneta-border);
border-radius: .5rem;
padding: 1rem;
height: 100%;
}

.feed-card h3 {
font-size: 1rem;
font-weight: 700;
color: var(--laneta-primary-dark);
margin-bottom: .5rem;
}

.feed-list {
list-style: inherit;
padding: 0;
margin: 0;
font-size: .9rem;
}

.feed-list li {
padding: .25rem 0;
border-bottom: 1px dashed var(--laneta-border);
}

.feed-list li:last-child {
border-bottom: none;
}

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

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

/* Estado normal: input reducido */
.laneta-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.80rem;
border-radius: 0 0.25rem 0.25rem 0;
border: 1px solid var(--laneta-border);
background-color: var(--laneta-bg);
color: var(--laneta-text);
transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.laneta-search input[type="search"]::placeholder {
color: var(--laneta-text);
}

.laneta-search input[type="search"]:focus {
outline: none;
background-color: var(--laneta-primary);
border-color: var(--laneta-border);
}

/* Botón de búsqueda (lupa) */
.laneta-search .laneta-search-toggle {
border-radius: 0.25rem 0 0 0.25rem;
border: 1px solid var(--laneta-border);
background-color: var(--laneta-primary);
color: var(--laneta-bg);
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;
}

.laneta-search .laneta-search-toggle:hover,
.laneta-search .laneta-search-toggle:focus {
background-color: var(--laneta-primary-dark);
border-color: var(--laneta-border);
}

/* Estado expandido (hover, focus o show) */
.laneta-search.show input[type="search"],
.laneta-search:hover input[type="search"],
.laneta-search input[type="search"]:focus {
width: 200px !important;
background-color: var(--laneta-bg);
border-color: var(--laneta-border);
color: var(--laneta-text);
}

.laneta-search.show .laneta-search-toggle,
.laneta-search:hover .laneta-search-toggle,
.laneta-search input[type="search"]:focus + .laneta-search-toggle {
background-color: var(--laneta-primary);
border-color: var(--laneta-border);
color: var(--laneta-bg);
}

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

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

/* ========================================
LISTADOS DE POSTS (categoría, búsqueda, index)
======================================== */
.category-header,
.search-header {
padding-bottom: 1rem;
border-bottom: 2px solid var(--laneta-accent);
margin-bottom: 1.5rem;
}

.category-title,
.search-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--laneta-primary-dark);
margin: 0 0 .25rem;
}

.category-description {
font-size: .9rem;
}

.post-list-item:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}

.post-list-thumb img {
max-width: 100px;
height: auto;
}

.post-list-title a {
color: var(--laneta-primary-dark);
}

.post-list-title a:hover {
color: var(--laneta-primary);
text-decoration: underline;
}

.post-list-excerpt {
font-size: .95rem;
color: var(--laneta-text);
}

.post-list-excerpt p:last-child {
margin-bottom: 0;
}

/* ========================================
ENTRADAS (single.php)
======================================== */
.single-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--laneta-primary-dark);
margin: 0 0 .5rem;
}

.single-meta a {
color: var(--laneta-primary);
}

.single-content {
font-size: 1rem;
line-height: 1.7;
}

.single-content img {
max-width: 100%;
height: auto;
}

/* Caja de información de sitio web (para posts con campos personalizados) */
.site-info-box {
background-color: var(--laneta-accent-light);
border: 1px solid var(--laneta-border);
}

.site-info-logo {
max-width: 120px;
max-height: 120px;
object-fit: contain;
}

.site-info-list dt {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--laneta-muted);
font-weight: 600;
margin-top: .5rem;
}

.site-info-list dt:first-child {
margin-top: 0;
}

.site-info-list dd {
margin-bottom: 0;
font-size: .95rem;
}

/* Navegación entre posts */
.post-navigation a {
color: var(--laneta-primary-dark);
font-weight: 600;
}

.post-navigation a:hover {
color: var(--laneta-primary);
text-decoration: underline;
}

.post-nav-prev,
.post-nav-next {
flex: 1 1 45%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}

/* ========================================
PÁGINAS (page.php)
======================================== */
.page-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--laneta-primary-dark);
margin: 0;
}

/* ========================================
404 (404.php)
======================================== */
.error-404 .display-4 {
color: var(--laneta-primary);
font-weight: 800;
}

/* ========================================
COMENTARIOS
======================================== */
.comment-list .comment-body {
padding: .75rem 0;
border-bottom: 1px solid var(--laneta-border);
}

.comment-list .comment-body:last-child {
border-bottom: none;
}

.comment-author {
font-weight: 700;
color: var(--laneta-primary-dark);
}

.comment-text-meta {
font-size: .8rem;
color: var(--laneta-muted);
margin-left: .25rem;
}

.comment-date {
font-size: .8rem;
color: var(--laneta-muted);
}

.comment-content {
display: block;
margin-top: .25rem;
}

/* ========================================
PAGINACIÓN BOOTSTRAP 5
======================================== */
.pagination .page-link {
color: var(--laneta-primary);
border-color: var(--laneta-border);
}

.pagination .page-item.active .page-link {
background-color: var(--laneta-primary);
border-color: var(--laneta-primary);
color: #fff;
}

.pagination .page-item.disabled .page-link {
color: var(--laneta-muted);
}

.pagination .page-link:hover {
background-color: var(--laneta-accent-light);
color: var(--laneta-primary-dark);
}

/* ========================================
PIE (footer.php)
======================================== */
.site-footer {
background-color: var(--laneta-accent);
border-top: 2px solid var(--laneta-primary);
padding: 1rem;
margin-top: 2rem;
font-size: .9rem;
}

.site-footer a {
color: var(--laneta-primary-dark);
}

/* ========================================
RESPONSIVIDAD
======================================== */
@media (max-width: 767.98px) {
.single-title,
.page-title,
.category-title,
.search-title {
font-size: 1.35rem;
}

.post-list-thumb img {
max-width: 70px;
}
}

@media (max-width: 991.98px) {
.main-laneta {
padding: 1rem;
}
}