/* ==========================================================================
   MI TEMA — Páginas Legales
   ========================================================================== */

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

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

.mt-legal-hero__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) var(--mt-space-2);
  line-height: var(--mt-line-height-tight);
}

.mt-legal-hero__updated {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  margin: 0;
}

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

/* --------------------------------------------------------------------------
   BREADCRUMB (standalone — woocommerce.css no se carga aquí)
   -------------------------------------------------------------------------- */

.mt-legal-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-legal-hero .mt-breadcrumb__item {
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

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

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

/* --------------------------------------------------------------------------
   BODY
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   ÍNDICE — navegación rápida para documentos largos (13+ secciones)
   -------------------------------------------------------------------------- */

.mt-legal-toc {
  max-width: 760px;
  margin-bottom: var(--mt-space-10);
  background-color: var(--mt-color-bg-subtle);
  border: var(--mt-border);
  border-radius: var(--mt-radius-lg);
}

.mt-legal-toc__summary {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-text-heading);
  padding: var(--mt-space-4) var(--mt-space-5);
  user-select: none;
}

.mt-legal-toc__summary::-webkit-details-marker {
  display: none;
}

.mt-legal-toc__summary::before {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--mt-color-primary);
  border-bottom: 2px solid var(--mt-color-primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.mt-legal-toc[open] > .mt-legal-toc__summary::before {
  transform: rotate(-135deg);
}

.mt-legal-toc__count {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-xs);
  font-weight: var(--mt-font-weight-medium);
  letter-spacing: normal;
  color: var(--mt-color-text-secondary);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-pill);
  padding: 1px var(--mt-space-2);
  margin-left: auto;
}

.mt-legal-toc__list {
  margin: 0;
  padding: 0 var(--mt-space-5) var(--mt-space-5);
  list-style: none;
  columns: 1;
  column-gap: var(--mt-space-8);
}

@media (min-width: 640px) {
  .mt-legal-toc__list {
    columns: 2;
  }
}

.mt-legal-toc__list li {
  break-inside: avoid;
}

.mt-legal-toc__list a {
  display: block;
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  text-decoration: none;
  padding: var(--mt-space-2) 0;
  transition: color 0.2s ease;
}

.mt-legal-toc__list a:hover {
  color: var(--mt-color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   CONTENT — tipografía y estructura del texto legal
   -------------------------------------------------------------------------- */

.mt-legal-content {
  max-width: 760px;
  font-size: var(--mt-font-size-base);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-body);
  scroll-margin-top: var(--mt-space-8);
}

.mt-legal-content h1,
.mt-legal-content h2 {
  scroll-margin-top: var(--mt-space-8);
}

/* Encabezados */

.mt-legal-content h2 {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-xl);
  color: var(--mt-color-text-heading);
  margin-block: var(--mt-space-10) var(--mt-space-4);
  padding-bottom: var(--mt-space-2);
  border-bottom: 2px solid var(--mt-color-primary);
  line-height: var(--mt-line-height-snug);
}

.mt-legal-content h2:first-child {
  margin-top: 0;
}

.mt-legal-content h3 {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  color: var(--mt-color-text-heading);
  margin-block: var(--mt-space-8) var(--mt-space-3);
  line-height: var(--mt-line-height-snug);
}

.mt-legal-content h4 {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  margin-block: var(--mt-space-6) var(--mt-space-2);
}

/* Párrafos */

.mt-legal-content p {
  margin-block: 0 var(--mt-space-4);
}

/* Listas */

.mt-legal-content ul,
.mt-legal-content ol {
  margin-block: 0 var(--mt-space-4);
  padding-inline-start: var(--mt-space-6);
}

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

.mt-legal-content ul li {
  list-style-type: disc;
}

.mt-legal-content ol li {
  list-style-type: decimal;
}

.mt-legal-content li > ul,
.mt-legal-content li > ol {
  margin-block: var(--mt-space-2) var(--mt-space-2);
}

/* Enlaces */

/* Texto sobre blanco: primary-dark (5,06:1) en reposo y primary-darker (6,68:1)
   al pasar por encima. El turquesa de marca se quedaba en 2,49:1, también en el
   correo de la declaración de accesibilidad (D-014, variables.css). */
.mt-legal-content a {
  color: var(--mt-color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.mt-legal-content a:hover {
  color: var(--mt-color-primary-darker);
}

/* Negrita */

.mt-legal-content strong {
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-primary);
}

/* Tablas (política de cookies) */

/* `display: block` aquí rompía todas las tablas de una página legal: saca la tabla del layout
   tabular, o sea que las celdas dejan de alinearse en columnas y la tabla se despliega hacia
   abajo. Iba acompañado de `overflow-x: auto` buscando scroll lateral, pero el scroll de una
   tabla ancha va a su CONTENEDOR (la regla de abajo), nunca a la tabla. */
.mt-legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mt-font-size-sm);
  margin-block: 0 var(--mt-space-6);
}

/* Una tabla ancha puesta desde el editor sí puede necesitar desplazamiento lateral: Gutenberg
   ya la envuelve con `figure.wp-block-table`, que es donde toca. La tabla de cookies del plugin
   no pasa por aquí -- lleva su propio CSS y en el móvil se convierte en fichas. */
.mt-legal-content figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
}

.mt-legal-content thead {
  background-color: var(--mt-color-bg-light);
}

.mt-legal-content th {
  font-family: var(--mt-font-body);
  font-weight: var(--mt-font-weight-semibold);
  font-size: var(--mt-font-size-sm);
  text-align: left;
  padding: var(--mt-space-3) var(--mt-space-4);
  border: var(--mt-border);
  color: var(--mt-color-text-heading);
  white-space: nowrap;
}

.mt-legal-content td {
  padding: var(--mt-space-3) var(--mt-space-4);
  border: var(--mt-border);
  vertical-align: top;
}

.mt-legal-content tbody tr:nth-child(even) {
  background-color: var(--mt-color-bg-subtle);
}

/* La tabla de cookies sale del carril de lectura.

   El texto legal se queda en 760px porque una línea más larga se lee peor; una tabla de
   cinco columnas, en cambio, agradece todo el ancho que haya, y encajonada allí los nombres de
   cookie y los dominios se partían por la mitad. `.mt-legal-content` va alineado a la izquierda
   dentro del contenedor, no centrado, así que la tabla crece hacia la DERECHA hasta el borde del
   contenedor en lugar de hacerlo por ambos lados.

   `max(100%, …)` deja la regla inofensiva por debajo: cuando el contenedor es más estrecho que el
   carril —móvil— la tabla se queda exactamente como estaba. El colchón de 4rem contra `100vw` tiene
   en cuenta que esa unidad incluye el ancho de la barra de desplazamiento. */
.mt-legal-content .ldc-cookie-table {
  width: max(
    100%,
    min(
      calc(var(--mt-container-max) - 2 * var(--mt-space-6)),
      calc(100vw - 4rem)
    )
  );
}

/* Separadores */

.mt-legal-content hr {
  border: none;
  border-top: var(--mt-border);
  margin-block: var(--mt-space-8);
}

/* Código inline */

.mt-legal-content code {
  font-size: var(--mt-font-size-sm);
  background-color: var(--mt-color-bg-light);
  padding: 0.1em 0.4em;
  border-radius: var(--mt-radius-sm);
  font-family: monospace;
}