/**
 * Colegio Savanna - Brand Design Layer & Legacy Token Remapping
 * 
 * Version 1.2.0 (Official Approved Institutional Palette)
 *
 * This stylesheet is enqueued AFTER main.css to enforce the approved
 * color hierarchy:
 * - Institutional Yellow (#f5c518) as the predominant visual tone.
 * - Wine Red (#6d1f2e, #4b1220, #3a0d19, #8a2b40) for noble dark surfaces and buttons.
 * - Cream (#f7f1e5) for light surfaces.
 * - Amber (#9a6b00) for accents over yellow.
 * - Ink (#2e1f1a) for body typography.
 *
 * @package Colegio_Savanna
 * @version 1.2.0
 */

/* ==========================================================================
   1. Token Remapping & Legacy Compatibility
   ========================================================================== */
:root {
  /* Approved Institutional Palette */
  --c-brand-yellow: #f5c518;
  --c-brand-wine: #6d1f2e;
  --c-brand-wine-dark: #4b1220;
  --c-brand-wine-deep: #3a0d19;
  --c-brand-wine-light: #8a2b40;
  --c-brand-cream: #f7f1e5;
  --c-brand-amber: #9a6b00;
  --c-brand-ink: #2e1f1a;
  --c-brand-white: #ffffff;

  /* Legacy Token Remappings (Intentionally preserved for backward compatibility) */
  --c-gold: var(--c-brand-yellow);
  --c-gold-dark: #e0ab00;
  --c-gold-light: #ffde59;
  --c-burgundy: var(--c-brand-wine);
  --c-burgundy-dark: var(--c-brand-wine-dark);
  --c-burgundy-deep: var(--c-brand-wine-deep);
  --c-burgundy-light: var(--c-brand-wine-light);
  --c-cream: var(--c-brand-cream);
  --c-amber: var(--c-brand-amber);
  --c-ink: var(--c-brand-ink);
}

/* ==========================================================================
   2. Role-Based Overrides
   ========================================================================== */

/* Cabecera Principal */
.site-header {
  background-color: var(--c-brand-yellow) !important;
  border-bottom-color: var(--c-brand-amber) !important;
}

.site-header .nav-menu > li > a {
  color: var(--c-brand-wine-dark) !important;
}

.site-header .nav-menu > li > a:hover,
.site-header .nav-menu > li.current-menu-item > a {
  background-color: var(--c-brand-wine) !important;
  color: var(--c-brand-white) !important;
}

/* Banda de Estadísticas */
.section-stats {
  background-color: var(--c-brand-yellow) !important;
  border-color: var(--c-brand-amber) !important;
}

.section-stats .stat-num {
  color: var(--c-brand-wine-dark) !important;
}

.section-stats .stat-label {
  color: var(--c-brand-wine) !important;
}

/* Gran Banda CTA Final */
.section-cta {
  background-color: var(--c-brand-yellow) !important;
  border-color: var(--c-brand-amber) !important;
}

.section-cta .cta-title {
  color: var(--c-brand-wine-dark) !important;
}

.section-cta .cta-text {
  color: var(--c-brand-wine) !important;
}

/* Barra Fija Inferior */
.fixed-action-bar {
  background-color: var(--c-brand-yellow) !important;
  border-top-color: var(--c-brand-amber) !important;
}

.fixed-action-bar .fixed-action-bar__label {
  color: var(--c-brand-wine-dark) !important;
}

/* Pie de Página */
.site-footer {
  background-color: var(--c-brand-wine-dark) !important;
}

.site-footer .footer-widget-title {
  color: var(--c-brand-yellow) !important;
}

/* ==========================================================================
   3. Legacy Class Aliases & Specific Utility Overrides
   ========================================================================== */
.btn-burgundy {
  background-color: var(--c-brand-wine);
  color: var(--c-brand-white) !important;
  border-color: var(--c-brand-wine);
  box-shadow: 0 4px 14px rgba(109, 31, 46, 0.25);
}

.btn-burgundy:hover {
  background-color: var(--c-brand-wine-dark);
  border-color: var(--c-brand-wine-dark);
  color: var(--c-brand-white) !important;
  transform: translateY(-2px);
}

.btn-gold {
  background-color: var(--c-brand-yellow);
  color: var(--c-brand-wine-dark) !important;
  border-color: var(--c-brand-yellow);
}

.btn-gold:hover {
  background-color: #e5b60e;
  border-color: #e5b60e;
  color: var(--c-brand-wine-dark) !important;
}

.explore-card--burgundy {
  border-top: 4px solid var(--c-brand-wine);
}

.explore-card--gold {
  border-top: 4px solid var(--c-brand-yellow);
}

/* Micro-animations and hover enhancements */
.btn, .explore-card, .program-card, .pillar-card, .content-card, .fixed-action-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}