/**
 * ASTRA OVERRIDE SAFETY NET
 * =========================
 * Astra ships global styles for bare elements (a, button, input, h1-h6)
 * using CSS custom properties, and applies them theme-wide. Because our
 * header.php/footer.php fully replace Astra's own markup, most of Astra's
 * *contextual* selectors (.entry-content a, .ast-container ... ) never
 * match our HTML at all — but its *global element* selectors still do.
 *
 * functions.php enqueues this file LAST, with explicit dependencies on
 * both astra-theme-css and our own site.css, so on load order alone this
 * already wins most cascade ties. The rules below add a small, deliberate
 * amount of extra insurance — scoped tightly to our own component classes
 * (never a blanket reset) with !important ONLY on the handful of visual
 * properties (background, color, border, transform, box-shadow, font)
 * that Astra is most aggressive about. If you ever see a hover state or
 * button look "off" after an Astra update, this is the file to check
 * first.
 */

/* ---- Buttons: base + hover, exactly matching site.css's own values ---- */
body.vgs-theme .btn-maroon {
  background: linear-gradient(135deg, var(--maroon-700), var(--maroon-900)) !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: var(--shadow-soft) !important;
}
body.vgs-theme .btn-maroon:hover,
body.vgs-theme .btn-maroon:focus {
  transform: translateY(-3px);
  box-shadow: var(--shadow-mid) !important;
  color: var(--gold-100) !important;
  background: linear-gradient(135deg, var(--maroon-700), var(--maroon-900)) !important;
}

body.vgs-theme .btn-gold-outline {
  background: transparent !important;
  border: 1.5px solid var(--gold-500) !important;
  color: var(--maroon-700) !important;
}
body.vgs-theme .btn-gold-outline:hover,
body.vgs-theme .btn-gold-outline:focus {
  background: var(--gold-500) !important;
  color: var(--white) !important;
  transform: translateY(-3px);
}

body.vgs-theme .btn-light-pill {
  background: var(--white) !important;
  color: var(--maroon-700) !important;
  border: none !important;
}
body.vgs-theme .btn-light-pill:hover,
body.vgs-theme .btn-light-pill:focus {
  color: var(--maroon-700) !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow-mid) !important;
}

/* ---- Generic links: don't let Astra's global anchor color bleed in ---- */
body.vgs-theme a {
  color: inherit;
  text-decoration: none;
}
body.vgs-theme .link-arrow,
body.vgs-theme .link-arrow:hover,
body.vgs-theme .link-arrow:focus {
  color: var(--maroon-700) !important;
}
body.vgs-theme .link-arrow:hover { color: var(--gold-500) !important; }

/* ---- Nav links: Astra applies its own menu-item color + hover ---- */
body.vgs-theme .navbar-school .nav-link {
  color: var(--ink-700) !important;
  font-family: 'Poppins', sans-serif !important;
}
body.vgs-theme .navbar-school .nav-link:hover,
body.vgs-theme .navbar-school .nav-link.active {
  color: var(--maroon-700) !important;
}

/* ---- Headings: force our display font over Astra's global heading font ----
 * Deliberately font-family ONLY, no color here. Astra's own heading color
 * and our site.css's heading color both target bare h1-h6 at the same
 * specificity, so normal cascade order (site.css loads after Astra) is
 * already enough to win on color — and site.css has dozens of MORE
 * SPECIFIC per-component heading colors (e.g. white text on dark
 * .disclosure-header, .principal-name-tag, .hero-title, .vgs-event-title).
 * A body-scoped color rule here would outrank every one of those on
 * specificity alone and silently wash them out — it did once; don't
 * reintroduce it. */
body.vgs-theme h1,
body.vgs-theme h2,
body.vgs-theme h3,
body.vgs-theme h4,
body.vgs-theme h5,
body.vgs-theme .font-display,
body.vgs-theme .section-title,
body.vgs-theme .hero-title,
body.vgs-theme .page-banner-title {
  font-family: 'Playfair Display', serif !important;
}

/* ---- Form controls: Astra restyles input/textarea/select globally ---- */
body.vgs-theme .form-control-school {
  border: 1.5px solid var(--blush-100) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  background: var(--white) !important;
  box-shadow: none !important;
}
body.vgs-theme .form-control-school:focus {
  border-color: var(--gold-500) !important;
  box-shadow: 0 0 0 3px rgba(207,154,52,0.15) !important;
  outline: none !important;
}

/* ---- Cards / icon boxes: neutralise any Astra box-shadow or radius reset ---- */
body.vgs-theme .info-card,
body.vgs-theme .value-card,
body.vgs-theme .team-card,
body.vgs-theme .event-card,
body.vgs-theme .contact-quick-card,
body.vgs-theme .why-item {
  box-shadow: var(--shadow-soft) !important;
}

/* ---- Astra sometimes constrains max-width on wp-block-* wrapped content;
       our page templates don't use the block editor content flow, but this
       guards any block-based widgets/shortcodes dropped into a template. ---- */
body.vgs-theme .container { max-width: 1200px; }

/* ---- Prevent Astra's default site header / page title bar from ever
       flashing before our own header.php takes over on slow connections ---- */
body.vgs-theme .site-header,
body.vgs-theme .ast-breadcrumbs-container,
body.vgs-theme .page-header,
body.vgs-theme .site-footer { display: none !important; }