/*
Theme Name: El Dink
Theme URI: https://eldink.es
Author: Tu nombre
Description: Tema para un blog de pickleball en español. Diseño inspirado en la pista: verde de cancha, línea de cocina discontinua y el amarillo de la bola.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: eldink
*/

/* ============ TOKENS ============ */
:root{
  --court:  #1B4B3E; /* verde profundo de la superficie de juego */
  --court-dark: #10312A;
  --line:   #F6F3E9; /* blanco tiza cálido, fondo general */
  --ball:   #D7E94F; /* amarillo-verde de la bola, acento principal */
  --kitchen:#E2602E; /* naranja de la línea de cocina, acento secundario */
  --ink:    #16231D; /* casi negro con tinte verde, texto */
  --mid:    #5C7A6D; /* salvia apagado, texto secundario */
  --radius: 2px;
  --max-w: 1120px;
}

/* ============ BASE ============ */
*{ box-sizing:border-box; }
body{
  background:var(--line);
  color:var(--ink);
  font-family:'Public Sans', -apple-system, sans-serif;
  font-size:17px;
  line-height:1.6;
  margin:0;
}
a{ color:var(--court); text-decoration:none; }
a:hover{ color:var(--kitchen); }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{
  font-family:'Archivo Black', 'Arial Black', sans-serif;
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
}
.meta-mono, .scoreboard, .site-tagline{
  font-family:'Space Mono', monospace;
}

/* ============ SKIP LINK / A11Y ============ */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ball); color:var(--ink);
  padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{ outline:3px solid var(--kitchen); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============ HEADER ============ */
.site-header{
  background:var(--court);
  color:var(--line);
  border-bottom:4px solid var(--ball);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px; flex-wrap:wrap; gap:16px;
}
.site-branding{ display:flex; flex-direction:column; }
.site-title{
  font-size:28px; margin:0; letter-spacing:-0.02em;
}
.site-title a{ color:var(--ball); }
.site-title a:hover{ color:var(--line); }
.site-tagline{
  color:var(--line); opacity:.75; font-size:12px; margin-top:4px; text-transform:uppercase; letter-spacing:.08em;
}
.primary-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0; flex-wrap:wrap;
}
.primary-nav a{
  color:var(--line); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.05em;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.primary-nav a:hover{ color:var(--ball); border-color:var(--ball); }

/* ============ KITCHEN LINE DIVIDER (elemento firma) ============ */
.kitchen-line{
  border:none;
  border-top:3px dashed var(--kitchen);
  margin:48px 0;
  opacity:.6;
}

/* ============ HERO ============ */
.hero{ padding:56px 0 40px; }
.hero-court{
  position:relative;
  border:2px solid var(--court);
  padding:36px;
  background:#fff;
}
.hero-court::before, .hero-court::after,
.hero-court .corner-tl, .hero-court .corner-br{
  content:""; position:absolute; width:18px; height:18px;
  border-color:var(--kitchen); border-style:solid;
}
.hero-court::before{ top:-2px; left:-2px; border-width:4px 0 0 4px; }
.hero-court::after{ bottom:-2px; right:-2px; border-width:0 4px 4px 0; }
.hero-eyebrow{
  display:inline-block; font-family:'Space Mono',monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.1em; background:var(--ball);
  color:var(--ink); padding:4px 10px; margin-bottom:16px;
}
.hero h1{ font-size:clamp(32px,5vw,52px); max-width:18ch; }
.hero p.lede{ font-size:19px; color:var(--mid); max-width:60ch; margin-top:16px; }

/* ============ CATEGORÍAS DESTACADAS ============ */
.cat-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px;
  margin:32px 0 0;
}
.cat-pill{
  display:block; background:#fff; border:1px solid rgba(27,75,62,.15); border-left:4px solid var(--kitchen);
  padding:16px 18px; transition:border-color .15s ease, transform .15s ease;
}
.cat-pill:hover{ border-color:var(--court); border-left-color:var(--kitchen); transform:translateX(2px); }
.cat-pill .cat-name{ font-family:'Archivo Black',sans-serif; font-size:15px; color:var(--ink); display:block; }
.cat-pill .cat-count{ font-family:'Space Mono',monospace; font-size:11px; color:var(--mid); text-transform:uppercase; letter-spacing:.06em; }

/* ============ CARDS / SCOREBOARD META ============ */
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:32px; padding:8px 0 56px;
}
.post-card{
  background:#fff; border:1px solid rgba(27,75,62,.15);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(16,49,42,.14);
  border-color:var(--court);
}
@media (prefers-reduced-motion: reduce){ .post-card{ transition:none; } .post-card:hover{ transform:none; } }
.post-card .thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--court) 0%,var(--court-dark) 100%); position:relative; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.post-card:hover .thumb img{ transform:scale(1.05); }
.post-card .body{ padding:20px; }
.post-card .cat{
  font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--kitchen);
}
.post-card h3{ font-size:20px; margin:8px 0; }
.post-card h3 a{ color:var(--ink); }
.post-card p{ color:var(--mid); font-size:15px; }
.scoreboard{
  display:flex; gap:14px; font-size:12px; color:var(--mid); margin-top:14px;
  border-top:1px dashed rgba(92,122,109,.4); padding-top:10px;
}

/* ============ SINGLE POST ============ */
.single-post{ padding:48px 0 64px; }
.single-post .cat{ font-family:'Space Mono',monospace; color:var(--kitchen); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.single-post h1{ font-size:clamp(30px,4.5vw,46px); margin-top:10px; max-width:22ch; }
.single-post .scoreboard{ border:none; padding-top:0; margin-bottom:32px; }
.entry-content{ max-width:72ch; font-size:18px; }
.entry-content h2{ font-size:26px; margin-top:1.4em; }
.entry-content h3{ font-size:21px; margin-top:1.2em; }
.entry-content p{ margin:0 0 1.2em; }
.entry-content ul,.entry-content ol{ margin:0 0 1.2em; padding-left:1.3em; }
.entry-content blockquote{
  border-left:4px solid var(--ball); margin:1.6em 0; padding:.2em 1.2em; color:var(--mid); font-style:italic;
}
.entry-content img{ margin:1.6em 0; }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }

/* ============ AD SLOTS ============ */
.ad-slot{
  max-width:72ch; margin:32px 0; padding:14px; text-align:center;
  background:rgba(27,75,62,.05); border:1px dashed rgba(27,75,62,.3);
  font-family:'Space Mono',monospace; font-size:11px; color:var(--mid); text-transform:uppercase; letter-spacing:.08em;
}

/* ============ RELACIONADOS ============ */
.related-posts h2{ font-size:20px; margin-bottom:16px; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }

/* ============ SIDEBAR ============ */
.content-layout{ display:grid; grid-template-columns:1fr; gap:48px; }
@media(min-width:900px){ .content-layout{ grid-template-columns:2.2fr 1fr; } }
.widget{ background:#fff; border:1px solid rgba(27,75,62,.15); padding:20px; margin-bottom:24px; }
.widget h2{ font-size:15px; text-transform:uppercase; letter-spacing:.06em; border-bottom:2px solid var(--ball); padding-bottom:8px; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--court-dark); color:var(--line); padding:40px 0; margin-top:40px; }
.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.site-footer a{ color:var(--ball); }
.site-footer small{ color:rgba(246,243,233,.6); font-family:'Space Mono',monospace; font-size:12px; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-block; background:var(--ball); color:var(--ink); font-weight:700;
  padding:12px 22px; border:2px solid var(--ink); text-transform:uppercase; font-size:13px; letter-spacing:.05em;
}
.btn:hover{ background:var(--kitchen); color:var(--line); border-color:var(--kitchen); }

/* ============ PAGINATION ============ */
.pagination{ display:flex; gap:10px; padding:24px 0 56px; font-family:'Space Mono',monospace; font-size:13px; }
.pagination a, .pagination span{ padding:6px 12px; border:1px solid var(--court); }
.pagination .current{ background:var(--court); color:var(--line); }