/* @license MIT
@copyright 2026 Evelia Coss
@author Evelia Coss
Date: 5 march 2026
*/

/* css styles */

/* styles.css */

/* Importar la fuente Ubuntu */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

/* Aplicar Ubuntu solo a los títulos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', sans-serif;
}

/* Aplicar Ubuntu al menú de navegación */ 
.navbar, .navbar-brand, .nav-link { 
  font-family: 'Ubuntu', sans-serif;
}

/* Evitar que el menú convierta a mayúsculas */
.navbar .nav-link,
.navbar .navbar-brand {
  text-transform: none;
  font-family: 'Ubuntu', sans-serif; /* mantener la fuente */
}


/* Ajusta la altura de la barra de navegación al estándar Bootstrap */
.navbar {
  min-height: 56px;   /* altura típica */
  padding-top: 0.5rem;  /* ≈8px */
  padding-bottom: 0.5rem;
}


/* Ajusta el tamaño del texto dentro de la barra */
.navbar-nav .nav-link {
  font-size: 1.2rem;   /* aumenta el tamaño de los enlaces */
}

/* Ajusta el tamaño del logo en la barra de navegación */
.navbar-logo {
  max-height: 100px;   /* aumenta la altura máxima del logo */
  width: auto;         /* mantiene la proporción */
}

/* ---- HOME: Carrusel de fotos ---- */
/* Forzar visibilidad de indicadores */
.carousel-indicators [data-bs-target] {
  background-color: #666 !important; /* gris oscuro */
  width: 16px; 
  height: 16px;
  border-radius: 0; /* sin borde redondeado */
}

.carousel-indicators .active { 
  background-color: rgba(147,197,75,0.7) !important; /* rojo para el activo */ 
  
}

/* Personalizar flechas */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0,0,0,0.5); /* fondo oscuro */
  border-radius: 50%;
}

/* color en los titulos */
.carousel-caption h5 {
  background-color: rgba(0,0,0,0.5); /* negro con 50% transparencia */
  color: #fff;                       /* texto blanco para contraste */
  padding: 10px;
  width: 100%;                       /* ocupa todo el ancho */
  text-align: center;
}

/* ---- Diseño general ---- */

/* Recuadros enlistados con resalte */
/* Estilo base de las tarjetas del listing */
.quarto-listing .quarto-grid-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
}

/* Efecto al pasar el cursor */
.quarto-listing .quarto-grid-item:hover {
  transform: scale(1.05); /* agranda ligeramente */
  box-shadow: 0 8px 20px rgba(147,197,75,0.7); /* verde Sandstone con transparencia */
  z-index: 2;
}

/* ------ People -------*/

/* Ajuste de imagenes */
.listing-box {
  width: 250px;
 /* height: 250px;*/
  margin: auto; /* centra el recuadro */
  /* object-fit: cover;  */
}

/* Ajuste del diseño del titulo y espacio */

.listing-box-title {
  max-width: 80%;
  margin-top: 10px;
  margin-bottom: 12px;
  color: #222;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

/* Ajuste de la educacion, letra pequeña */
.listing-box-education {
  margin-bottom: 0;
  color: #757883;
  font-size: 12px;
  line-height: 1.5;
}

/* Espaciados de las columnas */
.quarto-listing-cols-3 {
    padding-left: 10px;
    padding-right: 10px;

}

.quarto-listing-cols-4 {
    padding-left: 10px;
    padding-right: 10px;

}

.anchored {
  padding-top: 8px;
  padding-left: 10px;
}

/*--- Publications --- */
.listing-pub-title {
    font-weight: bold;
}

.listing-pub-author, .listing-pub-journal {
    color: #757883;
    font-size: 12px;
}

/* Nueva clase para destacar revista y año */
.journal-highlight {
    font-size: 14px;   /* más grande que el resto */
    /*  font-weight: bold; opcional, si quieres resaltarlo */
    color: #000;       /* opcional, para diferenciarlo */
}

/*--- Blog - estilo de bloques --- */

.quarto-post .listing-categories .listing-category {
  border: solid 1px $_fg;

  &:hover {
    color: $_fg;
  }
}

.quarto-grid-item .listing-categories .listing-category:hover,
.quarto-listing-category .category:hover,
.quarto-title .quarto-categories .quarto-category a:hover {
  color: $_fg;
}

.listing-description {
  color: $_fg;
}

// Footer link hover
.footer a:hover {
  color: $_link-color;
}


/*--- CARD & GRID ENHANCEMENTS  --- */
/* Blog listing cards with hover effects */
.quarto-post {
  transition: all $_anim-standard $_easing-standard;
  border-radius: $_radius-md;
  overflow: hidden;
  padding: $_space-md;
  border: 2px solid $_fg;  /* borde base */

  &:hover {
    will-change: transform;
    transform: translateY(-4px);
    box-shadow: $_shadow-lg; /* sombra al hacer hover*/
    border-color: $_fg;      /* refuerza el borde en hover */
    border: 2px solid $_link-color; /* cambia el color del borde en hover*/
  } 

  .listing-title {
    transition: color 0.3s ease;
    margin-bottom: $_space-sm !important;
  }

  .listing-image {
    transition: transform 0.4s ease;
    overflow: hidden;

    img {
      transition: transform 0.4s ease;
    }
  }

  &:hover .listing-image img {
    transform: scale(1.05);
  }
}

/* Thumbnail images in listings - match featured image styling  */
.quarto-listing .thumbnail-image {
  border-radius: 1.5rem;
  box-shadow: $_shadow-lg;
}

/*  Featured images  */
.img-featured {
  border-radius: 1.5rem;
  box-shadow: $_shadow-lg;
  margin-bottom: $_space-xl;
}