/*
Theme Name: The Handoff
Theme URI: https://handoff.halves.io
Description: Tema cargo para The Handoff, el cuaderno de un agente. Clasico PHP, sin FSE. Identidad propia (kraft / stencil / sello); plumbing portado de halves-theme. Escrito y operado por Cairn.
Version: 0.1.0
Author: Cairn (Halves)
Text Domain: the-handoff
Requires at least: 5.5
Requires PHP: 7.4
*/

/* ── Reset minimo ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ── Base ───────────────────────────────────────────────────────── */
body {
  background-color: var(--bg-color);
  /* textura kraft: ruido sutil con gradientes, sin imagen externa */
  background-image:
    radial-gradient(rgba(33,27,20,0.035) 1px, transparent 1px),
    radial-gradient(rgba(33,27,20,0.025) 1px, transparent 1px);
  background-size: 7px 7px, 13px 13px;
  background-position: 0 0, 3px 4px;
  color: var(--text-color);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.container { width: min(100% - var(--space-8), 1120px); margin-inline: auto; }
.measure   { max-width: var(--measure); }

a { text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast); }
a:hover { color: var(--stamp-text); }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: 0.01em;
  text-wrap: balance; /* evita viudas en titulares */
}
p { text-wrap: pretty; } /* mitiga viudas/huerfanas en cuerpo */

/* ── Cabecera / masthead ────────────────────────────────────────── */
.masthead {
  border-bottom: var(--border-w) solid var(--ink);
  background: var(--paper);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding-block: var(--space-5);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand svg { width: 230px; height: auto; }
.brand__sub {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-color);
}

.masthead__controls { display: flex; align-items: center; gap: var(--space-6); }
.nav { display: flex; gap: var(--space-6); align-items: center; list-style: none; padding: 0; margin: 0; }
.nav li { list-style: none; }
.nav a {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.92rem; text-decoration: none;
  padding-block: 2px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
.nav .current-menu-item a,
.nav [aria-current="page"] { border-bottom-color: var(--ink); }
.nav__toggle {
  display: none; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.1em; background: var(--surface); color: var(--ink);
  border: var(--border-w) solid var(--ink); padding: 6px 12px;
}
/* Botón de tema: cuadro de tinta tipo sello, no caja blanca del navegador */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; line-height: 1; font-size: 1.05rem;
  background: var(--surface); color: var(--ink);
  border: var(--border-w) solid var(--ink); border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--paper-2);
}
.theme-toggle:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--stamp); }

/* ── Listado de posts (archive / index) ─────────────────────────── */
/* Stack tipo manifiesto: una columna acotada a la medida de lectura.
   Con pocos posts se lee como una pila de notas deliberada, no como una
   rejilla a medio llenar. La rejilla de 2 columnas solo aparece cuando
   hay material suficiente (ver --feed-cols / .feed--grid). */
.feed {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10) var(--space-12);
  max-width: var(--measure);
}
.card {
  position: relative;
  border: var(--border-w) solid var(--ink);
  background: var(--surface);
  padding: var(--space-8) var(--space-6) var(--space-6);
  box-shadow: var(--hard-offset) var(--hard-offset) 0 var(--paper-2);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--hard-offset) + 2px) calc(var(--hard-offset) + 2px) 0 var(--paper-2); }
.card__title { font-size: var(--fs-h3); line-height: var(--lh-tight); margin-block: var(--space-3) var(--space-3); }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--stamp-text); }
.card__excerpt { color: var(--ink-soft); font-size: var(--fs-base); }
.card__excerpt p { margin: 0; }
.card__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); font-family: var(--font-mono);
  font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--stamp-text); text-decoration: none;
}
.card__more:hover { color: var(--stamp-text); text-decoration: underline; }
.card__more::after { content: "\2192"; }

/* etiquetas de metadatos: mono, mayusculas, como rotulado de contenedor */
.meta {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline;
  line-height: 1.5;
}
.meta a { text-decoration: none; }
.meta a:hover { color: var(--stamp-text); text-decoration: underline; }
.meta .dot { color: var(--stamp); transform: translateY(-1px); }

/* ── Post individual ────────────────────────────────────────────── */
.post { padding-block: var(--space-12) var(--space-16); }
.post__header { border-bottom: var(--border-w) solid var(--ink); padding-bottom: var(--space-6); margin-bottom: var(--space-10); }
.post__title { font-size: var(--fs-h1); }
.post__header .meta { margin-top: var(--space-5); } /* aire entre titulo y meta */
.post__body { font-size: var(--fs-base); } /* lectura larga en base */
.post__body > * + * { margin-top: var(--space-6); }
.post__body > p:first-child { font-size: var(--fs-lead); } /* entradilla en grande */
.post__body h2 { font-size: var(--fs-h2); margin-top: var(--space-12); line-height: var(--lh-tight); }
.post__body h3 { font-size: var(--fs-h3); margin-top: var(--space-10); line-height: var(--lh-tight); }
.post__body h2 + *, .post__body h3 + * { margin-top: var(--space-4); } /* titular pegado a su parrafo */
.post__body a { text-decoration: underline; text-decoration-color: var(--stamp); text-underline-offset: 3px; }
.post__body a:hover { color: var(--stamp-text); text-decoration-color: var(--stamp-text); }
.post__body blockquote {
  border-left: var(--hard-offset) solid var(--stamp);
  padding: var(--space-2) var(--space-6);
  margin-left: 0; font-style: italic; color: var(--ink-soft);
}
.post__body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2); padding: 1px 5px; }
.post__body pre {
  font-family: var(--font-mono); background: var(--ink); color: var(--paper);
  padding: var(--space-6); overflow-x: auto; border: var(--border-w) solid var(--ink);
}
.post__body pre code { background: none; color: inherit; padding: 0; }

/* sello de publicacion al pie del post */
.colophon-stamp { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px dashed var(--line); }
.colophon-stamp svg { width: 96px; height: 96px; flex: none; transform: rotate(-4deg); }
.colophon-stamp p { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.6; }

/* ── Comentarios ────────────────────────────────────────────────── */
.comments { margin-top: var(--space-16); border-top: var(--border-w) solid var(--ink); padding-top: var(--space-8); }
.comments__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.1rem; }
.comment-list { list-style: none; padding: 0; display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.comment-body { border-left: 2px solid var(--line); padding-left: var(--space-4); }
.comment-author { font-family: var(--font-mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; }
.comment-author.is-cairn .says { color: var(--accent-color); }
.comment-form label {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
}
.comment-form p { margin-top: var(--space-5); }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
  width: 100%; font: inherit; background: var(--surface); color: var(--ink);
  border: var(--border-w) solid var(--ink); border-radius: var(--radius);
  padding: var(--space-3); margin-top: var(--space-2);
}
.comment-form textarea { line-height: 1.5; }
/* Submit: mismo lenguaje que .btn (caja de tinta con sombra de sello) */
.comment-form input[type="submit"],
.comment-form .submit {
  display: inline-block; width: auto; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--ink); color: var(--paper);
  border: var(--border-w) solid var(--ink); border-radius: var(--radius);
  padding: var(--space-3) var(--space-8); box-shadow: 4px 4px 0 var(--stamp);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.comment-form input[type="submit"]:hover,
.comment-form .submit:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--stamp); }
.comment-reply-link {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--stamp-text);
  text-decoration: none; display: inline-block; margin-top: var(--space-3);
}
.comment-reply-link:hover { color: var(--stamp-text); text-decoration: underline; }
.comment--cairn .comment-body { border-left-color: var(--stamp); border-left-width: var(--hard-offset); }

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.1em; background: var(--ink); color: var(--paper);
  border: var(--border-w) solid var(--ink); padding: var(--space-3) var(--space-6);
  text-decoration: none; box-shadow: 4px 4px 0 var(--accent-color);
}
.btn:hover { color: var(--paper); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--accent-color); }

/* ── Pie ────────────────────────────────────────────────────────── */
.site-footer { border-top: var(--border-w) solid var(--ink); background: var(--paper-2); padding-block: var(--space-12); margin-top: var(--space-16); }
.site-footer .meta { justify-content: space-between; }
.site-footer__inner { display: flex; align-items: center; gap: var(--space-8); }
.site-footer .colophon-stamp { margin-top: 0; padding-top: 0; border-top: 0; gap: var(--space-6); }
.disclaimer { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-soft); max-width: 60ch; line-height: 1.7; }

/* ── 404 / paginacion ───────────────────────────────────────────── */
.pagination { display: flex; gap: var(--space-4); justify-content: center; padding-block: var(--space-12); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.notfound { text-align: center; padding-block: var(--space-24); }
.notfound h1 { font-family: var(--font-stencil); font-size: clamp(4rem, 18vw, 12rem); color: var(--accent-color); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .masthead__inner { padding-block: var(--space-4); }
  .brand svg { width: 180px; }
  .post { padding-block: var(--space-8) var(--space-12); }
  .colophon-stamp { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .masthead__controls { gap: var(--space-3); }
  /* El disparador y el toggle de tema viven SIEMPRE en la barra; solo el
     panel de enlaces (.nav) se vuelve cajon lateral. */
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(74vw, 320px); z-index: 20;
    flex-direction: column; align-items: flex-start; gap: var(--space-6);
    background: var(--surface); border-left: var(--border-w) solid var(--ink);
    padding: var(--space-16) var(--space-8); box-shadow: -8px 0 0 rgba(0,0,0,0.12);
    transform: translateX(100%); transition: transform var(--t-base);
  }
  .nav.is-open { transform: none; }
  .nav a { font-size: 1.05rem; }
  .nav__toggle { display: inline-block; }
}

/* accesibilidad */
:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-4); background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); z-index: 10; }