/* ============================================
   PEGOTE — CSS PERSONALIZABLE
   Copiá todo esto en:
   Apariencia → Personalizar → CSS adicional
   ============================================ */


/* ============================================
   COLORES
   ============================================ */
:root {
  --navy:        #0a0a22;   /* color de fondo general */
  --crimson:     #c8173a;   /* color rojo/carmesí principal */
  --crimson-dark: #8a0f28;  /* carmesí oscuro (bordes, detalles) */
  --off-white:   #ddd5c4;   /* color del texto principal */
  --muted:       rgba(221,213,196,0.45); /* texto secundario/apagado */
}


/* ============================================
   TEXTOS EDITABLES
   ============================================ */

/* Frase debajo del logo en el header */
.hero-desc {
  /* Cambiá el contenido editando el archivo header.php */
  font-size: 0.82rem;   /* tamaño del texto */
  max-width: 300px;     /* ancho máximo */
}

/* "Quién escribe acá" — título del about */
.about-text strong {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
}

/* Texto del about */
.about-text p {
  font-size: 0.82rem;
  line-height: 1.85;
}

/* Texto del footer derecho */
.footer-right {
  font-size: 0.65rem;
}


/* ============================================
   TAMAÑOS — HEADER
   ============================================ */

/* Altura total del header (pantalla completa = 100vh) */
.site-header {
  height: 100vh;       /* 100vh = pantalla completa, podés poner px también */
  gap: 1.2rem;         /* espacio entre isotipo, logo y frase */
  padding: 2rem 2rem 2.5rem;
}

/* Tamaño del isotipo (garabato) */
.hero-creature {
  width: clamp(180px, 32vh, 380px);
  /* clamp(mínimo, preferido, máximo) */
}

/* Tamaño del logotipo (texto PEGOTE) */
.hero-logo {
  width: clamp(180px, 28vw, 380px);
}


/* ============================================
   TAMAÑOS — NAV
   ============================================ */

/* Logo en la barra de navegación fija */
.nav-brand img {
  height: 26px;   /* altura del logo en el nav */
}

/* Links del nav */
.site-nav a {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  padding: 1rem 0.9rem;
}


/* ============================================
   TAMAÑOS — POST DESTACADO
   ============================================ */

/* Altura mínima del bloque destacado */
.featured-image {
  min-height: 380px;
}

/* Título del post destacado */
.featured-body h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

/* Extracto del post destacado */
.featured-body .excerpt {
  font-size: 0.88rem;
  line-height: 1.85;
}


/* ============================================
   TAMAÑOS — LISTA DE NOTAS
   ============================================ */

/* Títulos de las notas (tamaños alternados) */
.post-item:nth-child(6n+1) h3 { font-size: 1.4rem; }
.post-item:nth-child(6n+2) h3 { font-size: 1rem; }
.post-item:nth-child(6n+3) h3 { font-size: 1.25rem; }
.post-item:nth-child(6n+4) h3 { font-size: 0.95rem; }
.post-item:nth-child(6n+5) h3 { font-size: 1.3rem; }
.post-item:nth-child(6n+0) h3 { font-size: 1.05rem; }

/* Extracto de cada nota */
.post-item .excerpt {
  font-size: 0.78rem;
  line-height: 1.7;
}

/* Fecha de cada nota */
.post-item-date {
  font-size: 0.6rem;
}

/* Número fantasma de fondo */
.post-item::after {
  font-size: 5rem;     /* más grande o más chico */
  opacity: 0.07;       /* más o menos visible (0 = invisible, 1 = full) */
}


/* ============================================
   TAMAÑOS — FOOTER
   ============================================ */

/* Logo en el footer */
.footer-logo img {
  width: 90px;
  opacity: 0.4;   /* entre 0 y 1 */
}


/* ============================================
   TIPOGRAFÍA
   ============================================ */

/* Fuente principal del cuerpo */
body {
  font-family: 'Courier Prime', monospace;
}

/* Fuente de títulos y nav */
.site-nav a,
.post-item h3,
.featured-body h2,
.divider span,
.post-cat {
  font-family: 'Oswald', sans-serif;
}