/*
Theme Name: Lexigrid
Theme URI: https://example.com
Author: Your Studio
Author URI: https://example.com
Description: Un tema de WordPress rápido y totalmente optimizado para SEO + GEO (motores de respuesta con IA) para un puzle diario de palabras de 5 letras. Páginas editables, marcado de esquema, llms.txt para rastreadores de IA, y un diseño distintivo estilo "ticket" de puzle.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lexigrid
Tags: one-column, custom-menu, custom-logo, featured-images, translation-ready, block-styles

All colors are CSS variables set once below in :root, so the whole design
can be re-themed by editing this one block.
*/

/* ---------------------------------------------------
   0. Design tokens
--------------------------------------------------- */
:root{
  --ink:            #1b2430;
  --ink-2:          #232d3b;
  --paper:          #f2ead9;
  --paper-2:        #e9dfc7;
  --line:           #d8cca8;
  --text-ink:       #f2ead9;
  --text-dim:       #9aa6b8;
  --text-paper:     #2a2420;
  --text-paper-dim: #6b6055;
  --mustard:        #d9a441;
  --sage:           #6b8f71;
  --coral:          #c2542e;

  --font-display:   'Fraunces', Georgia, serif;
  --font-body:      'Source Sans 3', 'Segoe UI', sans-serif;
  --font-tile:      'Space Mono', 'Courier New', monospace;

  --radius:         14px;
  --radius-sm:      8px;
  --max-width:      1040px;
}

/* ---------------------------------------------------
   1. Reset & base
--------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--text-ink);
  font-family:var(--font-body); line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; color:var(--text-ink); }
h1{ font-size:clamp(2rem,5vw,3.1rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); }
h3{ font-size:1.1rem; }
p{ margin:0 0 1em; }
ul{ margin:0 0 1em; padding-left:1.2em; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }

.wrap,.container{ max-width:var(--max-width); margin:0 auto; padding:0 22px; }
.screen-reader-text{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; z-index:999; background:var(--coral); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-tile);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mustard);
}
.eyebrow::before{ content:''; width:18px; height:2px; background:var(--mustard); display:inline-block; }
.eyebrow.on-paper{ color:var(--coral); }
.eyebrow.on-paper::before{ background:var(--coral); }

/* ---------------------------------------------------
   2. Header
--------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(27,36,48,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; gap:16px; }
.site-branding{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:32px; height:32px; border-radius:7px; background:var(--mustard); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-tile); font-weight:700; flex:none;
}
.site-title{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin:0; color:var(--text-ink); }
.site-title a{ display:flex; align-items:center; gap:10px; }
img.custom-logo{ max-height:34px; width:auto; }

.main-navigation ul{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
.main-navigation a{ font-weight:600; font-size:.88rem; color:var(--text-dim); }
.main-navigation a:hover{ color:var(--text-ink); }
.menu-toggle{ display:none; background:none; border:1px solid rgba(255,255,255,.15); color:var(--text-ink); border-radius:var(--radius-sm); padding:8px 12px; font-size:1.1rem; }
@media (max-width:640px){
  .menu-toggle{ display:block; }
  .main-navigation{ display:none; width:100%; }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; gap:0; padding:12px 0; }
  .main-navigation li{ border-top:1px solid rgba(255,255,255,.08); }
  .main-navigation a{ display:block; padding:12px 4px; }
  .site-header .wrap{ flex-wrap:wrap; }
}

/* ---------------------------------------------------
   3. Generic page/article content (paper style)
--------------------------------------------------- */
.site-main{ background:var(--paper); color:var(--text-paper); padding:44px 0 64px; }
.site-main .page-hero{ text-align:left; margin-bottom:10px; }
.site-main h1{ color:var(--text-paper); }
.content-page{ max-width:760px; margin:0 auto; }
.content-page .entry-content h2,
.content-page .entry-content h3{ color:var(--text-paper); margin-top:1.5em; }
.content-page .entry-content a{ text-decoration:underline; color:var(--coral); }
.content-page .entry-content p{ color:var(--text-paper); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:18px;
}

.breadcrumbs{ font-size:.82rem; color:var(--text-paper-dim); margin-bottom:18px; }
.breadcrumbs a{ color:var(--text-paper-dim); }
.breadcrumbs a:hover{ color:var(--coral); }

/* ---------------------------------------------------
   4. Buttons / forms
--------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--coral); color:#fff; font-weight:700;
  padding:11px 22px; border-radius:999px; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:.95rem;
}
.btn:hover{ background:#a8461f; }
.btn-ghost{ background:transparent; color:var(--text-paper); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--paper-2); }

.form-field{ margin-bottom:16px; text-align:left; }
.form-field label{ display:block; margin-bottom:6px; font-weight:600; font-size:.9rem; color:var(--text-paper); }
.form-field input,
.form-field textarea{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:#fff; color:var(--text-paper);
  font-family:var(--font-body); font-size:.95rem;
}
.form-field textarea{ min-height:140px; resize:vertical; }
.form-notice{ padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:.9rem; }
.form-notice.success{ background:rgba(107,143,113,.15); border:1px solid var(--sage); }
.form-notice.error{ background:rgba(194,84,46,.12); border:1px solid var(--coral); }
.hp-field{ position:absolute; left:-9999px; }

/* ---------------------------------------------------
   5. FAQ accordion (used on paper background)
--------------------------------------------------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:16px 2px; font-weight:700; display:flex; justify-content:space-between; gap:12px; color:var(--text-paper); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--coral); font-size:1.2rem; }
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ padding:0 2px 16px; color:var(--text-paper-dim); font-size:.94rem; }

/* ---------------------------------------------------
   6. Footer
--------------------------------------------------- */
.site-footer{ background:var(--ink); padding:34px 0 22px; border-top:1px solid rgba(255,255,255,.08); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; margin-bottom:24px; }
.footer-grid h4{ color:var(--text-ink); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-tile); }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a{ color:var(--text-dim); font-size:.9rem; }
.footer-grid a:hover{ color:var(--mustard); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding-top:16px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:var(--text-dim);
}
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------------------------------------------------
   7. Ad slots
--------------------------------------------------- */
.ad-slot{ text-align:center; margin:22px auto; max-width:var(--max-width); }

/* ---------------------------------------------------
   8. 404
--------------------------------------------------- */
.error-404{ text-align:center; padding:70px 0; }
.error-404 .code{ font-family:var(--font-tile); font-size:4rem; color:var(--coral); }