/* Estilos CSS personalizados para Geotecmática */

/* Eliminar espacio en blanco del bloque de título vacío en la página de inicio */
/* Ocultar el h1 vacío dentro del header del título */
#quarto-document-content > header#title-block-header h1.title:empty,
#quarto-document-content > header#title-block-header h1.title.display-7:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
}

/* Reducir el espacio del header cuando contiene solo un título vacío */
#quarto-document-content > header#title-block-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Si el header solo tiene un h1 vacío, reducir su altura */
#quarto-document-content > header#title-block-header:only-of-type h1:empty {
  display: none !important;
}

/* Reducir el espacio del bloque de herramientas del título */
#quarto-document-content > .quarto-title-block {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Ajustar el hero-banner para que comience más arriba */
.hero-banner {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  position: relative;
}

/* Agregar overlay oscuro sobre la imagen de fondo para mejorar legibilidad */
.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Overlay oscuro semi-transparente */
  z-index: 1;
}

/* Asegurar que el contenido del hero banner esté sobre el overlay */
.hero-banner > * {
  position: relative;
  z-index: 2;
}

/* Mejorar la legibilidad del texto en el hero banner */
.hero-banner h1,
.hero-banner h3,
.hero-banner p {
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 
               0 0 10px rgba(0, 0, 0, 0.5); /* Sombra de texto para mejor contraste */
  font-weight: 600;
}

.hero-banner h1 {
  font-size: 3rem !important;
  margin-bottom: 1rem !important;
}

.hero-banner h3 {
  font-size: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.hero-banner p {
  font-size: 1.2rem !important;
  margin-bottom: 2rem !important;
}

/* Asegurar que el contenido principal no tenga padding superior innecesario en layout full */
.page-layout-full #quarto-document-content {
  padding-top: 0;
}

/* Ajustar el espaciado del hero-banner en la página de inicio específicamente */
#bienvenido-a-geotecmática.hero-banner {
  margin-top: 0 !important;
}

/* Reducir el espacio entre el header y el bloque de herramientas */
#quarto-document-content > header#title-block-header + .quarto-title-block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Estilos del navbar - Logo más grande y ocultar texto */
.navbar-logo {
  height: 60px !important; /* Aumentar el tamaño del logo */
  max-height: 60px !important;
  width: auto !important;
}

.navbar-brand {
  padding: 0.5rem 0 !important;
}

/* Ocultar el texto "Geotecmática" del navbar */
.navbar-title,
.navbar-brand-text,
span.navbar-title {
  display: none !important;
  visibility: hidden !important;
}

/* Ocultar el segundo navbar-brand que contiene el texto (el que no tiene navbar-brand-logo) */
.navbar-brand-container > .navbar-brand:not(.navbar-brand-logo),
.navbar-brand-container > a.navbar-brand:not(.navbar-brand-logo) {
  display: none !important;
}

/* Asegurar que el contenedor del logo no tenga espacio extra */
.navbar-brand-container {
  display: flex;
  align-items: center;
}

/* Ocultar cualquier texto dentro del navbar-brand que no sea el logo */
.navbar-brand:not(.navbar-brand-logo) span {
  display: none !important;
}