/*
Theme Name: Talentum Governance Base
Theme URI: https://talentum.com/
Author: Talentum
Author URI: https://talentum.com/
Description: Theme base (staging) para el proyecto de Gobernanza WP. Enfocado en estabilidad, performance, accesibilidad y escalabilidad. Incluye tokens de diseño, estructura limpia y plantillas listas para extender.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: talentum-governance
Tags: custom-colors, custom-logo, editor-style, featured-images, accessibility-ready, wide-blocks, translation-ready
*/

/* ============================================================
   Talentum Governance Base
   ============================================================ */
:root{
  --tg-font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  --tg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --tg-color-bg: #0b0f17;
  --tg-color-surface: #121a26;
  --tg-color-text: #e7eefc;
  --tg-color-muted: #a8b3c7;
  --tg-color-border: rgba(231,238,252,.14);

  --tg-color-primary: #6ee7ff;
  --tg-color-primary-2: #2dd4bf;
  --tg-color-accent: #a78bfa;

  --tg-color-success: #22c55e;
  --tg-color-warning: #f59e0b;
  --tg-color-danger: #ef4444;

  --tg-radius-sm: 10px;
  --tg-radius-md: 16px;
  --tg-radius-lg: 24px;

  --tg-shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --tg-shadow-md: 0 10px 30px rgba(0,0,0,.35);

  --tg-container: 1120px;
  --tg-gutter: 20px;
  --tg-line: 1.6;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--tg-font-sans);
  line-height:var(--tg-line);
  color:var(--tg-color-text);
  background:
    radial-gradient(1200px 800px at 15% 0%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(167,139,250,.18), transparent 60%),
    linear-gradient(180deg, #070a10, var(--tg-color-bg));
  min-height:100vh;
}

/* WordPress helpers */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path: inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important;
}
.screen-reader-text:focus{
  clip:auto!important; clip-path:none;
  background:var(--tg-color-surface); color:var(--tg-color-text);
  border:1px solid var(--tg-color-border);
  padding:12px 14px; border-radius:var(--tg-radius-sm);
  position:absolute; left:10px; top:10px; z-index:100000; width:auto; height:auto;
}

a{color:var(--tg-color-primary); text-decoration:none}
a:hover, a:focus{opacity:.9; text-decoration:underline}
img{max-width:100%; height:auto}
hr{border:0; border-top:1px solid var(--tg-color-border); margin:32px 0}

.container{
  width:min(100%, calc(var(--tg-container) + (var(--tg-gutter)*2)));
  margin:0 auto;
  padding:0 var(--tg-gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: var(--tg-gutter);
  top: var(--tg-gutter);
  width:auto; height:auto;
  padding:10px 12px;
  background:var(--tg-color-surface);
  border:1px solid var(--tg-color-border);
  border-radius:var(--tg-radius-sm);
  box-shadow:var(--tg-shadow-sm);
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,15,23,.62);
  border-bottom:1px solid var(--tg-color-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 220px;
}
.brand a{display:flex; align-items:center; gap:12px; color:var(--tg-color-text); text-decoration:none}
.brand-logo img{width:38px; height:38px; object-fit:contain}
.brand-title{
  display:flex; flex-direction:column;
  line-height:1.15;
}
.brand-title .name{font-weight:700; letter-spacing:.2px}
.brand-title .tagline{font-size:12px; color:var(--tg-color-muted)}

.primary-nav{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
}
.primary-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.primary-nav a{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--tg-color-text);
}
.primary-nav a:hover{
  border-color: var(--tg-color-border);
  background: rgba(255,255,255,.03);
  text-decoration:none;
}
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  border-color: rgba(110,231,255,.35);
  background: rgba(110,231,255,.08);
}

/* Mobile menu toggle (no JS dependencies) */
.menu-toggle{
  display:none;
  appearance:none;
  background: rgba(255,255,255,.04);
  border:1px solid var(--tg-color-border);
  color:var(--tg-color-text);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
}
.menu-toggle:focus{outline:2px solid rgba(110,231,255,.45); outline-offset:2px}
@media (max-width: 820px){
  .menu-toggle{display:inline-flex}
  .primary-nav{display:none}
  .primary-nav.is-open{display:flex; width:100%}
  .header-inner{flex-wrap:wrap}
  .primary-nav ul{width:100%; justify-content:flex-start}
}

/* ============================================================
   Main / Content
   ============================================================ */
.site-main{padding:28px 0 48px}
.card{
  background: rgba(18,26,38,.84);
  border:1px solid var(--tg-color-border);
  border-radius: var(--tg-radius-lg);
  box-shadow: var(--tg-shadow-sm);
}
.card.pad{padding:22px}
.prose h1,.prose h2,.prose h3{line-height:1.2; margin:0 0 12px}
.prose h1{font-size: clamp(28px, 3.2vw, 40px)}
.prose h2{font-size: clamp(22px, 2.2vw, 30px)}
.prose h3{font-size: 18px}
.prose p{margin:0 0 14px; color: var(--tg-color-text)}
.prose .muted{color: var(--tg-color-muted)}
.meta{
  font-size:13px;
  color: var(--tg-color-muted);
  display:flex; gap:12px; flex-wrap:wrap;
}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(110,231,255,.35);
  background: rgba(110,231,255,.10);
  color: var(--tg-color-text);
  text-decoration:none;
  box-shadow: var(--tg-shadow-sm);
}
.button:hover{text-decoration:none; transform: translateY(-1px)}
.button.secondary{
  border-color: var(--tg-color-border);
  background: rgba(255,255,255,.04);
}

/* Lists */
.prose ul, .prose ol{padding-left: 1.2rem}
.prose li{margin: 6px 0}

/* WP blocks sane defaults */
.wp-block{max-width: var(--tg-container)}
.alignwide{max-width: min(1200px, 96vw)}
.alignfull{max-width: 100vw; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  padding:28px 0;
  border-top:1px solid var(--tg-color-border);
  color: var(--tg-color-muted);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.footer-grid a{color: var(--tg-color-text)}
@media (max-width: 820px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   Comments
   ============================================================ */
.comment-list{list-style:none; padding:0; margin:0}
.comment-list > li{margin:18px 0}
.comment-body{
  padding:16px;
  border:1px solid var(--tg-color-border);
  border-radius: var(--tg-radius-md);
  background: rgba(255,255,255,.03);
}
.comment-meta{font-size:13px; color:var(--tg-color-muted)}
.comment-reply-link{font-size:13px}

/* ============================================================
   Forms
   ============================================================ */
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], textarea, select{
  width:100%;
  padding:11px 12px;
  border-radius: 12px;
  border:1px solid var(--tg-color-border);
  background: rgba(0,0,0,.25);
  color: var(--tg-color-text);
}
input[type="submit"], button, .wp-block-button__link{
  cursor:pointer;
}