/**
 * Sobreescrituras puntuales a reglas del CSS del Kit Digital UC
 * (uc-kitdigital.css, cargado desde afuera de este theme) y clases que
 * el código viejo usaba pero que no existen en el kit real. Cada regla
 * acá debería tener un comentario explicando qué está corrigiendo.
 */

/**
 * El kit pone border-bottom: 2px solid en CUALQUIER .uc-btn dentro del
 * ítem de primer nivel marcado .current — como es un selector
 * descendiente (no de hijo directo), también le pinta el borde a todos
 * los links del submenú, no solo al ítem realmente activo. Se quita solo
 * dentro del submenú: el link de primer nivel conserva el subrayado para
 * marcar la sección en la que estás. Ver también el arreglo relacionado
 * en inc/walker.php (current_item_ancestor).
 */
.uc-navbar .uc-navbar_nav .nav-item.current .uc-navbar-dropdown_menu .uc-btn {
  border-bottom: 0;
}

/**
 * Scroll suave al hacer clic en los links del menú "En esta sección"
 * (bloque uc-villarrica/encabezado-seccion) — son anchors (#id) al H2
 * correspondiente.
 */
html {
  scroll-behavior: smooth;
}

/**
 * Barra amarilla de H2/H3 (la agrega inc/heading-decoration.php). Es un
 * ::after en línea con el texto, no un div al lado en un flex: así
 * queda siempre justo después de la última palabra, aunque el título
 * ocupe dos o más líneas.
 *
 * El padding-right reserva el espacio de la barra (24px de separación +
 * 36px de largo, las medidas de .uc-heading-decoration del kit) y el
 * margin-right negativo hace que la barra no ocupe ancho en la línea:
 * nunca "salta" sola a una línea nueva, se queda con la última palabra y
 * como mucho se mete en ese padding reservado.
 */
.uc-heading--decorada {
    margin-top: 0;
    margin-bottom: 44px;
    overflow-wrap: anywhere;
}

/* Selector doble para ganarle a "h3.wp-block-heading { padding: 20px 0 }"
   (más abajo en este archivo), que si no le pisa el padding-right. */
.uc-heading--decorada.uc-heading--decorada {
    padding-right: 60px;
}

.uc-heading--decorada::after {
    content: "";
    display: inline-block;
    width: 36px;
    height: 4px;
    margin-left: 24px;
    margin-right: -60px;
    vertical-align: middle;
    background-color: #f2c500;
}

/* La versión "div" del kit, que sigue en uso en títulos cortos de una
   línea (carrusel de cards, single.php) — mismo amarillo que la de
   arriba. */
.uc-heading-decoration {
    height: 4px;
    background-color: #f2c500;
}


@media (min-width: 992px) {
  .wp-block-columns.row {
    gap: 0;
  }

  .wp-block-columns.row > .wp-block-column[class*="col-lg-"] {
    flex: 0 0 auto;
  }
}

h3.wp-block-heading {
 padding: 20px 0;
}

h1.wp-block-heading{
  margin-bottom: 24px;
}

/* Sidebar de noticias: evita que textos largos (correos, links, palabras sin espacios) se salgan de la tarjeta */
#sidebar .uc-card_body {
  min-width: 0;
}

#sidebar .uc-card_body p,
#sidebar .informacion-adicional p {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}


.wp-block-uc-villarrica-alerta{
  margin: 40px 0;
}


.custom-dropdown {
  padding: 20px 0 !important;
  border-radius: 0 0 4px 4px !important;
  border-top: 1px solid #ddd !important;
  bottom: -38px !important;
}

.custom-dropdown::after {
  content: '\e5cc';
  font-family: 'Material Icons';
  font-size: 15px;
  margin-right: 10px;
  vertical-align: middle;
  color: #0176de;
  margin-top: 2px;
}


/* Breadcrumb siempre en una sola línea.
   El kit deja .uc-breadcrumb como flex sin wrap, así que un título largo
   no baja de línea sino que se parte dentro de su propio <li> y el
   breadcrumb crece hacia abajo. Acá cada tramo queda en una línea y lo
   que no cabe se corta con "…":
   - "Inicio" nunca se corta.
   - El último tramo (la página actual, el que suele ser largo) es el
     primero en cortarse; el flex-shrink alto hace que absorba todo el
     recorte antes de tocar a los demás.
   - Solo si aun así no cabe (pantallas muy angostas o varios niveles)
     se empiezan a cortar los tramos intermedios.
   El título completo sigue visible en el <h1> y en el title del tramo. */
.uc-breadcrumb {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}

.uc-breadcrumb > li {
  flex: 0 1 auto;
  min-width: 3.5em;
  white-space: nowrap;
}

.uc-breadcrumb > li:first-child {
  flex-shrink: 0;
}

.uc-breadcrumb > li:last-child {
  flex-shrink: 1000;
}

.uc-breadcrumb > li > a,
.uc-breadcrumb > li > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-breadcrumb .uc-icon {
  flex: 0 0 auto;
}


/* Videos incrustados al 100% del ancho.
   Lo normal lo resuelve WordPress solo (add_theme_support
   'responsive-embeds' en functions.php). Esto es el respaldo para los dos
   casos que eso no cubre:
   1. Bloques Incorporar guardados antes de activar ese soporte: no traen
      la clase de proporción (wp-has-aspect-ratio) hasta volver a guardar
      la página.
   2. Iframes de YouTube pegados a mano en un bloque HTML.
   Se asume 16:9. El :where() deja la especificidad al mínimo para que
   nunca le gane a las reglas propias de WordPress. */
.wp-block-embed.is-type-video:not(.wp-has-aspect-ratio) iframe,
iframe:where([src*="youtube.com/embed"], [src*="youtube-nocookie.com/embed"]) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}


/* Imagen de las cards de todos los listados: caja fija 16:9 con recorte.
   Es la misma regla que ya tienen los bloques Cards y Cards con consulta
   (src/shared/_cards-grid.scss), pero ese CSS solo aplica dentro de
   .uc-cards-grid y los listados no usan esa grilla: pintan las cards con
   los template-parts/content-*.php dentro de un .archive-content
   (/noticias/ y los archivos de recursos, publicaciones y villarrica).
   Sin esto cada foto sale con su propia proporción y las cards de una
   misma fila quedan con imágenes de distinto alto.
   Ojo: unas 1.250 de las 1.400 noticias traen la destacada del theme
   anterior, una franja de 610×220, y con 16:9 pierden cerca de un tercio
   del ancho. Se probó 610:220 y se descartó: se prefirió mantener la
   misma proporción que el resto de las cards del sitio.
   El height: auto anula el atributo height que WordPress pone en el <img>. */
.archive-content .uc-card:not(.card-bg--image) > .uc-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Excepción: el listado de personas. Ahí las destacadas son retratos
   cuadrados y un recorte 16:9 les cortaría la cabeza, así que la caja
   fija es 1:1. Las fotos actuales ya son cuadradas (no cambian); esto
   solo asegura que una que se suba con otra proporción no desarme la
   fila. */
.tax-personas_categories .archive-content .uc-card:not(.card-bg--image) > .uc-card-img {
  aspect-ratio: 1 / 1;
}