/* ==========================================================================
   MI TEMA — Página de Contacto

   Los estilos del hero y de las migas de pan son gemelos de los de legal.css y
   no se heredan de allí a propósito: legal.css NO se carga en esta página
   (véase inc/enqueue.php), y hacerlo cargar solo por cuatro reglas arrastraría
   toda la maquinaria de un documento legal —el índice, el ancho de lectura de
   760px— que es justamente lo que esta página deja atrás.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.mt-contacte__hero {
  background-color: var(--mt-color-bg-white);
  border-bottom: var(--mt-border);
  padding-block: var(--mt-space-10) var(--mt-space-8);
}

.mt-contacte__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-3xl);
  color: var(--mt-color-text-heading);
  margin-block: var(--mt-space-4) 0;
  line-height: var(--mt-line-height-tight);
}

@media (min-width: 768px) {
  .mt-contacte__title {
    font-size: var(--mt-font-size-4xl);
  }
}

/* --------------------------------------------------------------------------
   BREADCRUMB (autónomo — woocommerce.css no se carga aquí)
   -------------------------------------------------------------------------- */

.mt-contacte__hero .mt-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  font-size: var(--mt-font-size-sm);
  margin-bottom: var(--mt-space-4);
}

.mt-contacte__hero .mt-breadcrumb__item {
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mt-contacte__hero a.mt-breadcrumb__item:hover {
  color: var(--mt-color-primary-dark);
}

.mt-contacte__hero .mt-breadcrumb__item--current {
  color: var(--mt-color-text-primary);
  font-weight: var(--mt-font-weight-medium);
}

.mt-contacte__hero .mt-breadcrumb__sep {
  color: var(--mt-color-border);
  user-select: none;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   CUERPO — dos columnas a partir de 900px

   Una sola columna por debajo: el formulario bajo los datos, que es el orden
   en que se leen. En escritorio van de lado para que quien entra a contactar
   no tenga que pasar por delante de todo el texto para encontrar el
   formulario.
   -------------------------------------------------------------------------- */

.mt-contacte__body {
  padding-block: var(--mt-space-12) var(--mt-space-16);
}

.mt-contacte__grid {
  display: grid;
  gap: var(--mt-space-10);
}

@media (min-width: 900px) {
  .mt-contacte__grid--amb-formulari {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mt-space-12);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   INFO — el contenido que se edita desde el editor de la página
   -------------------------------------------------------------------------- */

.mt-contacte__info {
  font-size: var(--mt-font-size-base);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-body);
}

.mt-contacte__info > *:first-child {
  margin-top: 0;
}

.mt-contacte__info h2 {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-xl);
  color: var(--mt-color-text-heading);
  line-height: var(--mt-line-height-tight);
  margin-block: var(--mt-space-8) var(--mt-space-3);
}

.mt-contacte__info p,
.mt-contacte__info ul,
.mt-contacte__info ol {
  margin-block: 0 var(--mt-space-4);
}

.mt-contacte__info ul,
.mt-contacte__info ol {
  padding-left: var(--mt-space-5);
}

.mt-contacte__info li {
  margin-bottom: var(--mt-space-2);
}

/* primary-dark (5,06:1) y no el turquesa de marca (2,49:1): es texto sobre
   blanco (D-014, variables.css). */
.mt-contacte__info a {
  color: var(--mt-color-primary-dark);
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   FORMULARIO — lo pinta plugin-formularios ([ldf_form key="contact"]).

   Aquí solo se le da la caja. Los campos de dentro llevan sus estilos en el
   conector, que consume las mismas variables --mt-* de este tema: el
   formulario se ve como el resto del sitio sin que ninguno de los dos tenga
   que saber nada del otro.
   -------------------------------------------------------------------------- */

.mt-contacte__form {
  background-color: var(--mt-color-bg-subtle);
  border: var(--mt-border);
  border-radius: var(--mt-radius-lg);
  padding: var(--mt-space-6);
}

@media (min-width: 768px) {
  .mt-contacte__form {
    padding: var(--mt-space-8);
  }
}

/* El conector limita el formulario a 640 px pensando en un formulario suelto en una página
   de ancho completo (ldf-forms.css). Aquí ya vive dentro de su caja, así que el ancho lo
   manda la caja: sin esto, entre ~700 y 899 px (una sola columna) quedaba un hueco a la
   derecha. Lo mismo que hace el pie con el boletín (.mt-butlleti .ldf-form). */
.mt-contacte__form .ldf-form {
  max-width: none;
}

.mt-contacte__form-title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-xl);
  color: var(--mt-color-text-heading);
  line-height: var(--mt-line-height-tight);
  margin-block: 0 var(--mt-space-2);
}

.mt-contacte__form-intro {
  /* reset.css limita los párrafos a 75ch para que se lean bien a ancho de página. Dentro
     de la caja el ancho ya lo manda la caja, como en el formulario de debajo. */
  max-width: none;
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  margin-block: 0 var(--mt-space-6);
}