/*
Theme Name: Astra Child - IE La Esperanza
Theme URI: https://www.ieesperanza.edu.co
Description: Child theme de Astra para separar contenido pedagógico y administrativo, con estética sobria.
Author: Oscar Javier Neira Quigua
Template: astra
Version: 1.0.0
*/

/* ==========================================================
   PALETA Y TIPOGRAFÍA BASE
   Ajusta estos valores: son el único lugar donde defines
   los colores/tamaños de todo el sitio.
   ========================================================== */
:root {
  --ie-fondo: #fbfaf7;        /* casi blanco, cálido */
  --ie-tinta: #1f2422;        /* casi negro, no puro */
  --ie-acento-pedagogico: #2f6e62;  /* verde-teal: material de clase */
  --ie-acento-administrativo: #a9752f; /* ocre: trámites/circulares */
  --ie-borde: #e4e0d8;
  --ie-fuente-titulos: Georgia, "Times New Roman", serif;
  --ie-fuente-texto: -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---- Enganche directo a las variables globales de Astra ----
     Astra 4.x pinta TODO el sitio (botones, enlaces, títulos,
     header) con estas variables. Al sobreescribirlas aquí,
     el cambio se aplica solo con activar el tema, sin tener
     que tocar nada en el Personalizador. */
  --ast-global-color-0: var(--ie-tinta);
  --ast-global-color-1: var(--ie-acento-pedagogico);
  --ast-global-color-2: var(--ie-acento-administrativo);
  --ast-global-color-3: var(--ie-fondo);
  --ast-global-color-4: var(--ie-tinta);
  --ast-global-color-5: var(--ie-acento-pedagogico);
  --ast-global-color-6: var(--ie-acento-administrativo);
  --ast-global-color-7: var(--ie-fondo);
  --ast-global-color-8: var(--ie-fondo);
}

body,
.ast-separate-container,
.site {
  background-color: var(--ie-fondo) !important;
  color: var(--ie-tinta) !important;
  font-family: var(--ie-fuente-texto) !important;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title {
  font-family: var(--ie-fuente-titulos) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ie-tinta) !important;
}

/* Enlaces y elementos interactivos: acento verde-teal en vez del
   color por defecto de Astra */
a,
a:visited {
  color: var(--ie-acento-pedagogico);
}
a:hover,
a:focus {
  color: var(--ie-acento-administrativo);
}

/* Botones (incluye los que trae Astra nativo: formularios, "leer más", etc.) */
.ast-button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
  background-color: var(--ie-acento-pedagogico) !important;
  border-color: var(--ie-acento-pedagogico) !important;
  color: #fff !important;
  border-radius: 4px;
}
.ast-button:hover,
.wp-block-button__link:hover {
  background-color: var(--ie-acento-administrativo) !important;
  border-color: var(--ie-acento-administrativo) !important;
}

/* Header y footer: fondo consistente y borde sobrio en vez de sombra */
.site-header,
.main-header-bar,
.ast-above-header,
.site-footer,
.ast-footer-container {
  background-color: var(--ie-fondo) !important;
  box-shadow: none !important;
  border-color: var(--ie-borde) !important;
}

/* ==========================================================
   ETIQUETAS VISUALES: distinguen a simple vista si el
   visitante está viendo material pedagógico o un trámite.
   Se aplican automáticamente vía body class en functions.php
   ========================================================== */
.single-pedagogico .entry-header,
.archive-pedagogico .page-header {
  border-left: 4px solid var(--ie-acento-pedagogico);
  padding-left: 1rem;
}

.single-administrativo .entry-header,
.archive-administrativo .page-header {
  border-left: 4px solid var(--ie-acento-administrativo);
  padding-left: 1rem;
}

.ie-etiqueta {
  display: inline-block;
  font-family: var(--ie-fuente-texto);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.ie-etiqueta--pedagogico {
  background: color-mix(in srgb, var(--ie-acento-pedagogico) 15%, white);
  color: var(--ie-acento-pedagogico);
}

.ie-etiqueta--administrativo {
  background: color-mix(in srgb, var(--ie-acento-administrativo) 15%, white);
  color: var(--ie-acento-administrativo);
}

/* ==========================================================
   PORTADA NUEVA (front-page.php)
   Estructura en dos dimensiones: Pedagógico / Administrativo
   ========================================================== */
.ie-portada {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.ie-hero {
  text-align: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ie-borde);
  margin-bottom: 3rem;
}
.ie-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--ie-acento-pedagogico);
  margin-bottom: 0.5rem;
}
.ie-hero-title {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  margin: 0 0 0.75rem;
}
.ie-hero-desc {
  font-size: 1.1rem;
  color: #555;
  max-width: 40em;
  margin: 0 auto;
}

.ie-dimensiones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 700px) {
  .ie-dimensiones { grid-template-columns: 1fr; }
}

.ie-dimension {
  background: #fff;
  border: 1px solid var(--ie-borde);
  border-top-width: 4px;
  border-radius: 6px;
  padding: 1.75rem;
}
.ie-dimension--pedagogico { border-top-color: var(--ie-acento-pedagogico); }
.ie-dimension--administrativo { border-top-color: var(--ie-acento-administrativo); }

.ie-dimension-header h2 {
  font-size: 1.5rem !important;
  margin: 0 0 0.5rem;
}
.ie-dimension-header p {
  color: #555;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.ie-dimension-cta {
  font-weight: 600;
  font-size: 0.9rem;
}
.ie-dimension--pedagogico .ie-dimension-cta { color: var(--ie-acento-pedagogico); }
.ie-dimension--administrativo .ie-dimension-cta { color: var(--ie-acento-administrativo); }

.ie-dimension-lista {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--ie-borde);
}
.ie-dimension-lista li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--ie-borde);
}
.ie-dimension-lista li:last-child { border-bottom: none; }
.ie-dimension-lista .ie-vacio {
  color: #999;
  font-style: italic;
  font-size: 0.9rem;
}

.ie-institucional-previo {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ie-borde);
}
.ie-institucional-previo a {
  font-weight: 600;
}

/* Sobriedad general: menos sombras y bordes duros que el Astra por defecto */
.ast-container,
.entry-content {
  box-shadow: none !important;
}

.site-header,
.main-header-bar {
  border-bottom: 1px solid var(--ie-borde);
}