/*
 * Alto del panel del buscador de la portada.
 *
 * El JS mide el hueco real que queda bajo el campo —descontando la cabecera,
 * las barras del navegador móvil y el teclado virtual— y lo deja en
 * `--site-search-panel-max` sobre el contenedor del buscador. Aquí sólo hay
 * que consumirlo: sin esto el panel crece hasta donde haga falta y empuja la
 * caja de búsqueda por detrás de la cabecera.
 *
 * El respaldo en `svh` cubre el instante entre abrir el panel y la primera
 * medida, y el caso de que el JS no llegue a ejecutarse.
 */
.site-search--home .site-search__panel {
  max-height: var(--site-search-panel-max, 70svh);
  overflow-y: auto;
  /* Al llegar al final del panel no se arrastra la página de debajo. */
  overscroll-behavior: contain;
}


/* Título de la página de resultados */

.search-results-header__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.15;
  font-weight: 700;
}

/* El término buscado, destacado dentro del título. */
.search-results-header__term {
  color: var(--color-primary, #fdc400);
}

/* Página de contacto */

.contact-page {
  /*
   * Ancho del formulario de Pardot. Todo el contenido de la página se alinea
   * con él, para que migas, título y formulario compartan el mismo eje.
   * Cambiando este valor se mueve todo a la vez.
   */
  --contact-width: 1076px;
}

/*
 * El contenedor general del tema es más ancho: aquí se estrecha y se centra.
 * `max-width` y no `width`, porque por debajo de 1076px la página tiene que
 * encoger con la pantalla; si no, en el móvil aparece scroll horizontal.
 */
.contact-page .inner-container {
  max-width: var(--contact-width);
  margin-inline: auto;
}

.contact-page__header {
  margin-block: 1.5rem 3rem;
}

.contact-page__title {
  margin: 0.25rem 0 1rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 700;
}

.contact-page__description p {
  margin: 0 0 0.5rem;
}

/*
 * El alto sale del campo ACF y se escribe en el propio elemento, por eso aquí
 * no se fija: el formulario está en otro dominio y la página no puede medir
 * su contenido para ajustarse sola.
 */
.contact-page__iframe {
  display: block;
  width: 100%;
  max-width: var(--contact-width);
  margin-inline: auto;
  border: 0;
}

.contact-page__noscript {
  margin: 0;
}



/* El título del header, ahora enlazado a la portada */

.site-title__link {
  color: inherit;
  text-decoration: none;
}

.site-title__link:hover,
.site-title__link:focus-visible {
  text-decoration: underline;
}

/* Migas de pan: color por defecto */

/*
 * El componente se diseñó para ir sobre la foto del hero de la PLP, así que
 * sus enlaces llevan color claro. Al usarlo también en páginas de fondo
 * blanco —categorías, fichas, contacto, resultados, perfil— quedaba texto
 * blanco sobre blanco: el bloque estaba y ocupaba su sitio, pero no se veía.
 *
 * Se invierte el criterio: oscuro por defecto, que es el caso mayoritario, y
 * claro sólo donde va sobre una imagen. Así una página nueva no vuelve a
 * nacer con el problema.
 *
 * Se pintan los hijos y no sólo el contenedor porque el color que trae cada
 * enlace gana sobre el que heredaría del padre.
 */

.breadcrumbs,
.breadcrumbs__link,
.breadcrumbs__current,
.breadcrumbs__separator {
  color: var(--color-gray-900, #1a1a1a);
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  text-decoration: underline;
}

.breadcrumbs__current {
  font-weight: 700;
}

/* Sobre imagen: el hero de la PLP y el de las fichas. */

.plp-hero__breadcrumb,
.plp-hero__breadcrumb .breadcrumbs__link,
.plp-hero__breadcrumb .breadcrumbs__current,
.plp-hero__breadcrumb .breadcrumbs__separator {
  color: #fff;
}