/*
Theme Name: GeneratePress Pango
Theme URI: https://pango.academy
Description: Child theme de GeneratePress para Pango Academy. Tokens extraídos de las páginas v1 (theme course) — pendiente validar con brand definitivo.
Author: Pango Studio
Author URI: https://pangostudio.com
Template: generatepress
Version: 0.2.3
Text Domain: generatepress-pango
*/

/* ===========================================================
   Pango Academy — Design tokens v0.2
   Extraídos del estilo inline ya en uso en /master/, /, /minicursos/.
   Familia dominante: naranja brand + navy + Inter.
   =========================================================== */

:root {
  /* Marca */
  --pa-color-accent:        #E55A25;  /* Naranja brand (CTA, highlights) */
  --pa-color-accent-hover:  #d45520;  /* Naranja oscurecido para hover */
  --pa-color-accent-light:  #FF6B35;  /* Naranja brillante para acentos */

  /* Neutrales oscuros */
  --pa-color-navy:          #0A2540;  /* Navy profundo (hero, secciones oscuras) */
  --pa-color-navy-soft:     #152d3e;  /* Navy más claro para alternancia */
  --pa-color-text:          #1a1a1a;  /* Texto principal */
  --pa-color-text-muted:    #5A6670;  /* Texto secundario */

  /* Neutrales claros */
  --pa-color-bg:            #ffffff;  /* Fondo general */
  --pa-color-bg-soft:       #F7F9FC;  /* Fondo secciones alternas */
  --pa-color-border:        #E5E5E5;  /* Bordes y separadores */

  /* Estados */
  --pa-color-success:       #10B981;
  --pa-color-warning:       #FF6B35;
  --pa-color-error:         #c0392b;

  /* Tipografía */
  --pa-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pa-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Tokens UI */
  --pa-radius-sm: 4px;
  --pa-radius:    8px;
  --pa-radius-lg: 16px;
  --pa-shadow:    0 4px 12px rgba(10, 37, 64, 0.08);
  --pa-shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12);

  /* Spacing scale */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 1rem;
  --pa-space-4: 1.5rem;
  --pa-space-5: 2rem;
  --pa-space-6: 3rem;
  --pa-space-7: 5rem;
}

/* === Base typography === */
body {
  font-family: var(--pa-font-body);
  color: var(--pa-color-text);
  background: var(--pa-color-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pa-font-display);
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-weight: 700;
  color: var(--pa-color-text);
}

a {
  color: var(--pa-color-accent);
  text-decoration: none;
}
a:hover { color: var(--pa-color-accent-hover); }

/* === Botones / CTAs === */
.pa-cta,
.pa-cta:visited {
  background: var(--pa-color-accent);
  color: #fff;
  padding: 0.875rem 1.75rem;
  border-radius: var(--pa-radius);
  font-weight: 600;
  font-size: 1.0625rem;
  display: inline-block;
  transition: background 0.18s ease, transform 0.18s ease;
  text-decoration: none;
}
.pa-cta:hover {
  background: var(--pa-color-accent-hover);
  color: #fff;
  transform: translateY(-1px);
}

.pa-cta--ghost {
  background: transparent;
  color: var(--pa-color-text);
  border: 2px solid currentColor;
}
.pa-cta--ghost:hover {
  background: var(--pa-color-text);
  color: #fff;
}

/* === Container utilities (consistentes con GP) === */
.pa-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--pa-space-3);
}
.pa-section { padding: var(--pa-space-7) 0; }
.pa-section--soft { background: var(--pa-color-bg-soft); }
.pa-section--dark { background: var(--pa-color-navy); color: #fff; }
.pa-section--dark h1, .pa-section--dark h2, .pa-section--dark h3 { color: #fff; }

/* === Compatibilidad con páginas legacy del theme course === */
/* Las páginas Master/Home/Minicursos son auto-contenidas: traen su propio
   .pa-nav y .pa-footer dentro de .entry-content. Ocultamos header/footer de
   GeneratePress para que no aparezca doble nav ni borde blanco arriba/abajo. */
body.legacy-page #masthead,
body.legacy-page .site-header,
body.legacy-page header.site-header,
body.legacy-page .site-footer,
body.legacy-page footer.site-footer,
body.legacy-page #colophon { display: none !important; }

/* Romper los containers de GP en legacy-pages: .pa-page debe ir a sangre completa. */
body.legacy-page #page,
body.legacy-page #page.grid-container,
body.legacy-page #page #content,
body.legacy-page #page #content .site-content,
body.legacy-page #page #content #primary,
body.legacy-page #page #content .content-area,
body.legacy-page #page #content main.site-main,
body.legacy-page #page #content article.page,
body.legacy-page #page #content article.page .entry-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === Fix v0.2.1 — neutralizar hide-rules legacy sobre #content ===
   Las páginas legacy (Master/Home/Minicursos) tienen un <style> inline
   con `#page > div:first-child:not(.pa-page):not(.entry-content){display:none}`
   que mata #content en cualquier theme cuya estructura sea
   #page > #content > .site-content > ... (como GeneratePress).
   También ocultamos .main-navigation de GP porque las páginas legacy
   traen su propio .pa-nav dentro de .entry-content (evita menú duplicado). */
body.legacy-page #page #content,
body.legacy-page #page #content .site-content,
body.legacy-page #page #content #primary,
body.legacy-page #page #content .content-area,
body.legacy-page #page #content main.site-main,
body.legacy-page #page #content article.page { display: block !important; }

body.legacy-page .main-navigation,
body.legacy-page #site-navigation { display: none !important; }