/*
Theme Name: Margot Duek Notas
Theme URI: https://iamargotduek.com
Template: twentytwentyfive
Author: Margot Duek
Description: Tema hijo. El listado de notas de campo pasa de volcar el articulo completo a un indice con extracto, la nota se lee en una columna angosta con cuerpo en serif, y el pie deja de ser el del tema padre.
Version: 1.0.3
License: Proprietary
Text Domain: margot-notas
*/

/* ============================================================
   Notas de campo — identidad propia
   ============================================================
   El listado corria con la plantilla de twentytwentyfive, que imprime
   el CONTENIDO completo de cada nota. La pagina traia 2,534 palabras y
   22 encabezados: no era un indice, era el texto entero repetido. Eso
   ademas deja la misma nota en dos URLs, compitiendo consigo misma.

   La direccion visual es de ensayo impreso: blanco, mucho aire, cuerpo
   en serif y cero tarjetas. Deliberadamente distinta a los demas sitios
   de la red, que van con fichas, numeros o fondo oscuro.

   NOTA SOBRE ANCHOS: el ancho de lectura se fija en los contenedores
   (`contentSize` de cada grupo en las plantillas), NUNCA con max-width
   sobre un parrafo suelto. El layout "constrained" de WordPress le pone
   `margin-inline: auto` a cada hijo directo del grupo, asi que en cuanto
   un parrafo es mas angosto que su contenedor se centra, y queda sangrado
   respecto al titulo de al lado. Poner `margin-inline-start: 0` no lo
   arregla: la regla del layout gana. Quitar el max-width si.
   ============================================================ */

:root {
  --md-papel: #ffffff;
  --md-tinta: #16181c;
  --md-tinta-suave: #5c636e;
  --md-tinta-mute: #949aa4;
  --md-linea: #e6e8ec;
  --md-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

body { background: var(--md-papel); color: var(--md-tinta); }

/* ---------- cabecera ---------- */

.wp-block-site-title a {
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--md-tinta);
}

.wp-block-navigation { font-size: 15.5px; }
.wp-block-navigation a { color: var(--md-tinta-suave); text-decoration: none; }
.wp-block-navigation a:hover { color: var(--md-tinta); }

/* ---------- listado de notas ---------- */

.md-cabecera { padding: 84px 0 4px; }

.md-cabecera .md-etiqueta {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--md-tinta-mute);
  margin: 0 0 18px;
}

.md-cabecera h1 {
  font-family: var(--md-serif);
  font-size: clamp(36px, 5.2vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--md-tinta);
}

.md-cabecera .md-bajada {
  font-size: 19px;
  line-height: 1.6;
  color: var(--md-tinta-suave);
  margin: 0;
}

/* Cada nota respira: sin tarjeta, sin borde, separadas por un filete fino
   y mucho espacio. Es lo que distingue este blog de los demas de la red. */
.md-nota {
  padding: 46px 0;
  border-top: 1px solid var(--md-linea);
}

.md-nota .wp-block-post-date {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-tinta-mute);
  margin: 0 0 12px;
}

.md-nota .wp-block-post-title {
  margin: 0 0 12px;
  font-family: var(--md-serif);
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.015em;
}

.md-nota .wp-block-post-title a {
  color: var(--md-tinta);
  text-decoration: none;
  background-image: linear-gradient(var(--md-tinta), var(--md-tinta));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s ease;
}

.md-nota .wp-block-post-title a:hover { background-size: 100% 1px; }

.md-nota .wp-block-post-excerpt { margin: 0; }

.md-nota .wp-block-post-excerpt__excerpt {
  font-size: 17px;
  line-height: 1.65;
  color: var(--md-tinta-suave);
  margin: 0;
}

.md-nota .wp-block-post-excerpt__more-text { display: none; }

.md-paginacion {
  padding: 40px 0 100px;
  border-top: 1px solid var(--md-linea);
  font-size: 14.5px;
  letter-spacing: .05em;
}
.md-paginacion a { color: var(--md-tinta); text-decoration: none; border-bottom: 1px solid var(--md-linea); }
.md-paginacion a:hover { border-color: var(--md-tinta); }

/* ---------- vista de nota ---------- */

.md-nota-cabecera { padding: 84px 0 0; }

.md-nota-cabecera .wp-block-post-date {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-tinta-mute);
  margin: 0 0 18px;
}

.md-nota-cabecera .wp-block-post-title {
  font-family: var(--md-serif);
  font-size: clamp(32px, 4.8vw, 48px);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.02em;
  margin: 0 0 40px;
  color: var(--md-tinta);
}

/* El cuerpo va en serif: son ensayos largos y la serif aguanta mejor la
   lectura seguida que la sans con la que venia. */
.md-cuerpo {
  font-family: var(--md-serif);
  font-size: 19px;
  line-height: 1.75;
  color: #23262c;
  padding-bottom: 40px;
}

.md-cuerpo p { margin: 0 0 24px; }

/* Los encabezados siguen en la misma serif que el cuerpo y se distinguen
   por peso y tamaño, no por cambio de familia: mezclar dos tipografias en
   un ensayo corto le quita la unidad que le da caracter. */
.md-cuerpo h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--md-tinta);
  margin: 48px 0 16px;
}

.md-cuerpo h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--md-tinta);
  margin: 34px 0 12px;
}

.md-cuerpo strong { font-weight: 600; color: var(--md-tinta); }

.md-cuerpo a {
  color: var(--md-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: #b9bec7;
}
.md-cuerpo a:hover { text-decoration-color: var(--md-tinta); }

.md-cuerpo ul,
.md-cuerpo ol { margin: 0 0 24px; padding-left: 24px; }
.md-cuerpo li { margin-bottom: 10px; }

.md-cuerpo blockquote {
  margin: 34px 0;
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--md-linea);
  color: var(--md-tinta-suave);
  font-style: italic;
}

.md-cuerpo img { margin: 30px 0; }

.md-volver {
  padding: 28px 0 60px;
  border-top: 1px solid var(--md-linea);
  font-size: 14.5px;
  letter-spacing: .05em;
}
.md-volver a { color: var(--md-tinta); text-decoration: none; border-bottom: 1px solid var(--md-linea); }
.md-volver a:hover { border-color: var(--md-tinta); }

/* ---------- pie ---------- */

/* El tema hijo trae su propia parts/footer.html. Sin ella se heredaba la del
   padre, que imprimia el menu de demostracion de Twenty Twenty-Five (About,
   FAQs, Authors, Events, Shop, Patterns, Themes) y la firma "Twenty
   Twenty-Five · Designed with WordPress" al pie de cada nota. */
.md-pie { border-top: 1px solid var(--md-linea); }

.md-pie .md-pie-marca {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--md-tinta);
}

.md-pie .md-pie-nota {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--md-tinta-suave);
}

.md-pie .md-pie-enlaces {
  margin: 0;
  font-size: 14.5px;
  color: var(--md-tinta-mute);
}

.md-pie .md-pie-enlaces a {
  color: var(--md-tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--md-linea);
}
.md-pie .md-pie-enlaces a:hover { color: var(--md-tinta); border-color: var(--md-tinta); }

/* ---------- movil ---------- */

@media (max-width: 720px) {
  .md-cabecera { padding-top: 52px; }
  .md-nota-cabecera { padding-top: 52px; }
  .md-nota { padding: 34px 0; }
  .md-cabecera .md-bajada { font-size: 17px; }
  .md-nota .wp-block-post-excerpt__excerpt { font-size: 16.5px; }
  /* La serif a 19px en pantalla chica aprieta el renglon: se baja un punto. */
  .md-cuerpo { font-size: 18px; }
  .md-cuerpo h2 { font-size: 22px; margin-top: 38px; }
}