/*
Theme Name:   Dibujar una vida — GeneratePress Child
Theme URI:    https://dibujarunavida.com
Description:  Child theme minimalista para GeneratePress. Une el dibujo, el ikigai y el espíritu urban sketcher: papel, tinta y un único acento rojo (el sello del dibujante). Diseñado para documentar el avance en el dibujo, técnicas, materiales y sentido de la vida.
Author:       Antonio
Author URI:   https://dibujarunavida.com
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dibujarunavida-child
*/

/* =========================================================
   0. CONCEPTO
   ---------------------------------------------------------
   La web es un cuaderno de bocetos abierto:
   · Papel      → fondo blanco cálido, sin ruido
   · Tinta      → texto negro estilográfica
   · Sello rojo → un único acento (el hanko japonés,
                  guiño al ikigai y firma del dibujante)
   · Lápiz      → líneas finas grises para separar
   ========================================================= */

:root {
  --papel:        #FCFBF7;   /* fondo papel */
  --tinta:        #1C1B18;   /* tinta negra */
  --tinta-media:  #55524B;   /* tinta diluida (texto secundario) */
  --tinta-suave:  #8B877D;   /* anotaciones, metadatos */
  --sello:        #C63D2F;   /* rojo sello — usar con moderación */
  --lapiz:        #E6E3DA;   /* líneas de lápiz, bordes */
  --fuente-titulo: "Zen Old Mincho", "Georgia", serif;
  --fuente-cuerpo: "Karla", "Helvetica Neue", sans-serif;
  --fuente-mano:   "Caveat", cursive; /* pequeñas anotaciones a mano */
}

/* =========================================================
   1. BASE
   ========================================================= */

body {
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Contenido estrecho, como una página de cuaderno */
.container.grid-container {
  max-width: 760px;
}

a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--lapiz);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease;
}

a:hover,
a:focus {
  color: var(--sello);
  text-decoration-color: var(--sello);
}

::selection {
  background: var(--sello);
  color: var(--papel);
}

/* =========================================================
   2. TIPOGRAFÍA
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  color: var(--tinta);
  letter-spacing: .01em;
  line-height: 1.3;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

/* Anotación a mano: úsala en frases cortas
   <span class="trazo">como esta</span> */
.trazo {
  font-family: var(--fuente-mano);
  font-size: 1.35em;
  color: var(--sello);
  line-height: 1.2;
}

/* =========================================================
   3. CABECERA Y NAVEGACIÓN
   ========================================================= */

.site-header {
  background-color: var(--papel);
  border-bottom: 1px solid var(--lapiz);
}

.main-title a,
.site-logo {
  font-family: var(--fuente-titulo);
  color: var(--tinta);
  text-decoration: none;
}

/* El sello rojo tras el título del sitio: la firma */
.main-title a::after {
  content: "";
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-left: .4em;
  background: var(--sello);
  border-radius: 50%;
  vertical-align: baseline;
}

.site-description {
  color: var(--tinta-suave);
  font-size: .95rem;
}

.main-navigation,
.main-navigation .main-nav ul li a {
  background: transparent;
  color: var(--tinta-media);
  font-size: .95rem;
  letter-spacing: .03em;
  text-decoration: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] a {
  color: var(--sello);
  background: transparent;
}

/* =========================================================
   4. ENTRADAS (el cuaderno)
   ========================================================= */

.entry-title,
.entry-title a {
  color: var(--tinta);
  text-decoration: none;
}

/* Firma del tema: subrayado a mano alzada bajo el título */
.single .entry-title,
.page .entry-title {
  display: inline-block;
  padding-bottom: .35em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 8 C 60 3, 120 10, 180 6 S 270 4, 298 7' fill='none' stroke='%23C63D2F' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 10px;
}

.entry-meta,
.posted-on,
.byline {
  color: var(--tinta-suave);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.entry-meta a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.entry-meta a:hover {
  color: var(--sello);
}

/* Listado de entradas: separadas por línea de lápiz, sin cajas */
.site-main article {
  background: transparent;
  border-bottom: 1px solid var(--lapiz);
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}

.site-main article:last-of-type {
  border-bottom: none;
}

/* Imágenes: como bocetos pegados en el cuaderno */
.entry-content img,
.post-image img {
  border: 1px solid var(--lapiz);
  padding: 6px;
  background: #fff;
}

figcaption,
.wp-caption-text {
  font-family: var(--fuente-mano);
  font-size: 1.15rem;
  color: var(--tinta-suave);
  text-align: center;
  margin-top: .4em;
}

/* Citas: una línea de tinta al margen */
blockquote {
  border-left: 2px solid var(--sello);
  margin-left: 0;
  padding-left: 1.25em;
  font-family: var(--fuente-titulo);
  font-style: normal;
  color: var(--tinta-media);
}

/* Leer más */
.read-more,
a.read-more {
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sello);
}

/* =========================================================
   5. BOTONES Y FORMULARIOS
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
.button,
.wp-block-button__link {
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: 0;
  font-family: var(--fuente-cuerpo);
  font-size: .9rem;
  letter-spacing: .05em;
  padding: .7em 1.6em;
  transition: background .2s ease, color .2s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
  background: var(--sello);
  border-color: var(--sello);
  color: var(--papel);
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  background: #fff;
  border: 1px solid var(--lapiz);
  border-radius: 0;
  color: var(--tinta);
  padding: .6em .9em;
}

input:focus,
textarea:focus {
  border-color: var(--sello);
  outline: none;
}

/* =========================================================
   6. WIDGETS Y PIE
   ========================================================= */

.sidebar .widget,
.footer-widgets {
  background: transparent;
  color: var(--tinta-media);
}

.widget-title {
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  color: var(--tinta);
  border-bottom: 1px solid var(--lapiz);
  padding-bottom: .5em;
}

.site-footer,
.site-info {
  background: var(--papel);
  border-top: 1px solid var(--lapiz);
  color: var(--tinta-suave);
  font-size: .85rem;
}

.site-info a {
  color: var(--tinta-suave);
}

/* =========================================================
   7. BLOQUES ÚTILES PARA EL PROYECTO
   ---------------------------------------------------------
   Clases pensadas para las secciones de la newsletter:
   boceto reciente, aprendizaje, inspiración y reto.
   Añádelas desde el editor (Avanzado → Clase CSS adicional)
   ========================================================= */

/* Nota de cuaderno: para el reto o invitación al lector */
.nota-cuaderno {
  border: 1px dashed var(--lapiz);
  padding: 1.5em 1.75em;
  margin: 2em 0;
  background: #fff;
}

.nota-cuaderno > :first-child {
  margin-top: 0;
}

/* Etiqueta de sección: APRENDIENDO, MATERIALES, IKIGAI... */
.etiqueta {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sello);
  border: 1px solid currentColor;
  padding: .25em .75em;
  margin-bottom: 1em;
}

/* Lista de materiales: guiones como marcas de lápiz */
.lista-materiales ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.lista-materiales li {
  padding-left: 1.4em;
  position: relative;
}

.lista-materiales li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sello);
}

/* =========================================================
   8. DETALLES FINALES
   ========================================================= */

/* Separador nativo de WordPress como trazo corto de tinta */
hr,
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--lapiz);
  max-width: 80px;
  margin: 2.5em auto;
}

/* Respeto por quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Móvil: la página respira igual de bien */
@media (max-width: 768px) {
  body { font-size: 17px; }
  h1 { font-size: 1.8rem; }
}