/*--------------------------------------------------------------
# Blog Fix Styles - Solución problemas de scroll
--------------------------------------------------------------*/

/* Asegurar que el body y html permitan scroll */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
}

body.blog-post {
  overflow-y: auto !important;
  height: auto !important;
}

/* Asegurar que el main container permita scroll */
.main {
  overflow: visible !important;
  height: auto !important;
  min-height: calc(100vh - 200px) !important;
}

/* Page title no debe bloquear scroll */
.page-title {
  overflow: visible !important;
  height: auto !important;
  position: relative !important;
}

/* Sección del blog debe permitir scroll */
.blog-post.section {
  overflow: visible !important;
  height: auto !important;
}

/* Container principal del artículo */
.blog-post-content {
  overflow: visible !important;
  height: auto !important;
}

/* Contenido del post */
.post-content {
  overflow: visible !important;
  height: auto !important;
}

/* Sidebar debe permitir scroll */
.col-lg-4 {
  overflow: visible !important;
  height: auto !important;
}

/* Footer debe estar al final */
footer {
  position: relative !important;
  overflow: visible !important;
  height: auto !important;
}

/* Contenedores de Bootstrap */
.container,
.container-fluid {
  overflow: visible !important;
  height: auto !important;
}

.row {
  overflow: visible !important;
  height: auto !important;
}

/* Widgets del blog */
.blog-widget {
  overflow: visible !important;
  height: auto !important;
}

/* Artículos relacionados */
.related-articles {
  overflow: visible !important;
  height: auto !important;
}

/* Fix para elementos con AOS */
[data-aos] {
  overflow: visible !important;
  height: auto !important;
}

/* Table of contents */
.table-of-contents {
  overflow: visible !important;
  height: auto !important;
}

/* Accordion elements */
.accordion {
  overflow: visible !important;
  height: auto !important;
}

.accordion-collapse {
  overflow: visible !important;
  height: auto !important;
}

/* Cards and highlight boxes */
.card,
.highlight-box,
.info-box,
.testimonial-box {
  overflow: visible !important;
  height: auto !important;
}

/* Timeline elements */
.timeline {
  overflow: visible !important;
  height: auto !important;
}

/* Fix específico para evitar que elementos floten */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Asegurar que no hay elementos con height: 100vh problemáticos */
* {
  box-sizing: border-box;
}

*:not(html):not(body) {
  height: auto !important;
  max-height: none !important;
}

/* Solo mantener height específicos donde sea necesario */
.logo,
.logo-large,
img {
  height: auto;
  max-height: initial;
}

/* Responsive fixes */
@media (max-width: 768px) {
  .main {
    min-height: calc(100vh - 100px) !important;
  }
  
  .blog-post.section {
    padding: 40px 0 !important;
  }
}