/* ============================================================
   overrides.css — pequeños ajustes sobre el tema Highwind
   para los elementos propios de la versión estática.
   El grueso del diseño lo aporta highwind.css + opensans.css.
   ============================================================ */

/* Lista del blog */
.blog-list{list-style:none;margin:0;padding:0}
.blog-item{display:flex;gap:1.1em;padding:1.4em 0;border-bottom:1px solid #e6e6e8}
.blog-item .thumb{flex:0 0 120px}
.blog-item .thumb img{width:120px;height:90px;object-fit:cover;border-radius:3px;margin:0}
.blog-item-body{flex:1 1 auto}
.blog-item h2{margin:0 0 .15em;font-size:1.25em;line-height:1.3}
.blog-item h2 a{color:#444854}
.blog-item .post-date{margin:0 0 .4em;color:#9a9aa2;font-size:.8em;text-transform:uppercase;letter-spacing:1px}
.blog-item .excerpt{margin:0 0 .4em}
.more{font-size:.85em;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* Fecha de la entrada */
.page-header .post-date{margin:.4em 0 0;color:#9a9aa2;font-size:.85em;text-transform:uppercase;letter-spacing:1px}

/* Navegación entre entradas */
.post .back{margin-top:2em}
.post-nav{display:flex;justify-content:space-between;gap:1em;margin-top:1.5em;padding-top:1.2em;border-top:1px solid #e6e6e8;font-size:.9em}
.post-nav a{font-weight:600}
.post-nav .next{margin-left:auto;text-align:right}

/* Página de Tweets: cada aforismo como línea separada */
.tweets-page .article-content > p{padding:.8em 0;border-bottom:1px solid #e6e6e8;margin:0}

/* Imágenes del contenido */
.article-content img{max-width:100%;height:auto;margin:1.2em 0}

/* Pie */
.footer-content{font-size:.85em}

/* ---- Colores personalizados del sitio (customizer del WordPress original) ---- */
a{color:#123eab}
body,input[type=text],input[type=email],textarea{color:#6c8ad5}
h1,h2,h3,h4,h5,h6,.page-title,.post-title{color:#123eab}
.header{background-color:#123eab}
.inner-wrap,.main-nav{background-color:#f8f8f9}
body.custom-background{background-color:#f8f8f9}
hr{background:#6c8ad5}
/* En la cabecera azul, el título y el lema van en blanco */
.site-title,.site-title a,.site-description,.site-description a{color:#fff}
.blog-item h2 a,.page-header .post-date{color:#123eab}
@media only screen and (min-width:769px){
  .main-nav ul.menu ul,.main-nav ul.menu>li:hover>a,.main-nav ul.menu>li>a:hover{background:#123eab}
  .main-nav ul.menu li.current-menu-item>a{color:#123eab}
  .main-nav{border-color:#123eab}
  .main-nav ul.menu li.current-menu-item>a:before{border-color:transparent transparent #123eab transparent}
  .main-nav ul.menu ul a,.main-nav ul.menu>li:hover>a{color:#f8f8f9}
}

/* ---- Menú responsive (puro CSS, sin JS) ---- */
.nav-toggle-cb{display:none}
.nav-toggle-btn{display:none}

@media(max-width:768px){
  /* Botón hamburguesa sobre la banda azul */
  .header{position:relative}
  .nav-toggle-btn{display:block;position:absolute;top:1.1em;left:1.1em;z-index:100001;
    width:30px;height:24px;cursor:pointer}
  .nav-toggle-btn span,.nav-toggle-btn span:before,.nav-toggle-btn span:after{
    content:"";position:absolute;left:0;width:30px;height:3px;background:#fff;border-radius:2px;
    transition:transform .25s ease,top .25s ease,opacity .2s ease}
  .nav-toggle-btn span{top:11px}
  .nav-toggle-btn span:before{top:-9px}
  .nav-toggle-btn span:after{top:9px}
  /* Hamburguesa -> X al abrir */
  .nav-toggle-cb:checked ~ .nav-toggle-btn span{background:transparent}
  .nav-toggle-cb:checked ~ .nav-toggle-btn span:before{top:0;transform:rotate(45deg)}
  .nav-toggle-cb:checked ~ .nav-toggle-btn span:after{top:0;transform:rotate(-45deg)}

  /* Anula el off-canvas del tema y deja el menú como panel desplegable */
  .main-nav{position:static !important;width:auto !important;left:auto !important;
    height:auto !important;border:0 !important}
  .main-nav .buttons,.main-nav>h2,.main-nav>hr{display:none !important}
  .highwind-navigation{position:absolute;top:100%;left:0;right:0;z-index:100000;
    background:#123eab;max-height:0;overflow:hidden;
    transition:max-height .3s ease;box-shadow:0 8px 14px rgba(0,0,0,.22)}
  .nav-toggle-cb:checked ~ .main-nav .highwind-navigation{max-height:80vh}
  .main-nav ul.menu{margin:0;padding:0;list-style:none;width:auto;float:none}
  .main-nav ul.menu li{display:block;float:none;border-top:1px solid rgba(255,255,255,.18)}
  .main-nav ul.menu li:first-child{border-top:0}
  .main-nav ul.menu a{display:block;padding:.85em 1.3em;color:#fff;text-transform:none}
  .main-nav ul.menu li.current-menu-item>a{background:rgba(0,0,0,.15)}

  /* La miniatura del blog ocupa todo el ancho */
  .blog-item{flex-direction:column}
  .blog-item .thumb,.blog-item .thumb img{width:100%}
  .blog-item .thumb img{height:170px}
}