/*
 * Projekt Inspire brand system
 *
 * This file is loaded after the legacy and page-specific stylesheets so the
 * active website uses one approved palette without rewriting vendor CSS.
 */
:root {
  --brand-purple: #5b2e93;
  --brand-purple-light: #a582cd;
  --brand-purple-dark: #32184d;
  --brand-teal: #48b5d2;
  --brand-teal-light: #a7e0ed;
  --brand-teal-dark: #19778f;
  --brand-pink: #ee1887;
  --brand-pink-light: #ff80bd;
  --brand-pink-dark: #a80e5e;
  --brand-green: #2da251;
  --brand-green-light: #83d19b;
  --brand-green-dark: #1d7439;

  --brand-ink: #24152d;
  --brand-muted: #675c6e;
  --brand-line: rgba(91, 46, 147, 0.16);
  --brand-surface: #f8f5fb;
  --brand-teal-surface: #edf9fc;
  --brand-pink-surface: #fff0f7;
  --brand-green-surface: #edf8f0;
  --brand-white: #ffffff;

  /* Active public CMS aliases. */
  --pi-purple: var(--brand-purple);
  --pi-purple-dark: var(--brand-purple-dark);
  --pi-cyan: var(--brand-teal);
  --pi-cyan-dark: var(--brand-teal-dark);
  --pi-orange: var(--brand-pink);
  --pi-ink: var(--brand-ink);
  --pi-muted: var(--brand-muted);
  --pi-soft: var(--brand-surface);
  --pi-line: var(--brand-line);

  /* Active modern page aliases. */
  --programmes-purple: var(--brand-purple);
  --programmes-purple-light: var(--brand-purple-dark);
  --programmes-cyan: var(--brand-teal);
  --programmes-cyan-dark: var(--brand-teal-dark);
  --programmes-cyan-soft: var(--brand-teal-surface);
  --programmes-ink: var(--brand-ink);
  --programmes-muted: var(--brand-muted);
  --programmes-line: var(--brand-line);
  --programmes-soft: var(--brand-surface);

  --news-purple: var(--brand-purple);
  --news-purple-light: var(--brand-purple-dark);
  --news-cyan: var(--brand-teal);
  --news-cyan-dark: var(--brand-teal-dark);
  --news-cyan-soft: var(--brand-teal-surface);
  --news-green: var(--brand-green);
  --news-gold: var(--brand-pink);
  --news-ink: var(--brand-ink);
  --news-muted: var(--brand-muted);
  --news-line: var(--brand-line);
  --news-soft: var(--brand-surface);

  --parks-purple: var(--brand-purple);
  --parks-purple-light: var(--brand-purple-dark);
  --parks-cyan: var(--brand-teal);
  --parks-cyan-dark: var(--brand-teal-dark);
  --parks-cyan-soft: var(--brand-teal-surface);
  --parks-green: var(--brand-green);
  --parks-gold: var(--brand-pink);
  --parks-ink: var(--brand-ink);
  --parks-muted: var(--brand-muted);
  --parks-line: var(--brand-line);
  --parks-soft: var(--brand-surface);

  /* Aliases still used by the original site shell. */
  --orange-100: var(--brand-teal);
  --light-orange-100: var(--brand-teal);
  --green-100: var(--brand-green);
  --purple-color: var(--brand-pink);
  --chroride-gradient: var(--brand-purple);
  --argon-gradient: linear-gradient(90deg, var(--brand-pink-dark), var(--brand-pink));
  --oxide-gradient: linear-gradient(90deg, var(--brand-purple), var(--brand-purple));
}

#about-modern {
  --about-purple: var(--brand-purple);
  --about-purple-soft: var(--brand-purple-dark);
  --about-cyan: var(--brand-teal);
  --about-orange: var(--brand-pink);
  --about-ink: var(--brand-ink);
  --about-muted: var(--brand-muted);
  --about-line: var(--brand-line);
  --about-surface: var(--brand-surface);
}

#youth-modern {
  --youth-purple: var(--brand-purple);
  --youth-deep: var(--brand-purple-dark);
  --youth-cyan: var(--brand-teal);
  --youth-gold: var(--brand-pink);
  --youth-green: var(--brand-green);
  --youth-ink: var(--brand-ink);
  --youth-muted: var(--brand-muted);
  --youth-line: var(--brand-line);
}

#contact-modern {
  --contact-purple: var(--brand-purple);
  --contact-purple-dark: var(--brand-purple-dark);
  --contact-cyan: var(--brand-teal);
  --contact-cyan-dark: var(--brand-teal-dark);
  --contact-gold: var(--brand-pink);
  --contact-green: var(--brand-green);
  --contact-ink: var(--brand-ink);
  --contact-muted: var(--brand-muted);
  --contact-line: var(--brand-line);
}

::selection {
  color: var(--brand-white);
  background: var(--brand-purple);
}

body {
  accent-color: var(--brand-purple);
}

/* Shared keyboard focus treatment. */
:where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--brand-teal-dark);
}

/* Main navigation and shared footer. */
header.mega-header.nav--sticky.nav--down {
  background: var(--brand-teal);
}

.home-site-footer,
.home-footer-main {
  background: var(--brand-purple-dark) !important;
}

.home-site-footer .home-newsletter {
  background: var(--brand-teal);
}

.home-newsletter-icon,
.home-newsletter-button,
.home-subscribe-submit {
  border-color: var(--brand-purple);
  background: var(--brand-purple);
}

.home-newsletter-icon,
.home-newsletter-button:hover,
.home-newsletter-button:focus-visible,
.home-subscribe-dialog h2,
.home-subscribe-form label,
.home-subscribe-close {
  color: var(--brand-purple);
}

.home-subscribe-badge {
  background: var(--brand-teal);
  box-shadow: 0 6px 0 var(--brand-purple);
}

.home-subscribe-kicker,
.home-footer-contact h2,
.home-footer-contact-list i,
.home-footer-title,
.home-footer-report-label,
.home-footer-credit a {
  color: var(--brand-teal-light);
}

.home-footer-socials a:hover,
.home-footer-socials a:focus-visible,
.home-site-footer #auto-top-link {
  border-color: var(--brand-teal);
  background: var(--brand-teal);
}

/* Homepage: purple leads, teal supports STEM interaction. */
body#ip3-Homepage {
  background-color: var(--brand-purple-dark) !important;
}

#home-hero-banner .hero-banner-slider-wrapper .slick-dots li.active button,
#home-hero-banner .hero-banner-slider-wrapper .slick-dots li.slick-active button {
  background: var(--brand-teal) !important;
}

.home-section.home-section-deep,
.home-programme-explorer,
.home-who-video-card,
.home-stem-icon {
  background: var(--brand-purple-dark);
}

.home-who-video-caption {
  background: linear-gradient(135deg, var(--brand-purple-dark), var(--brand-purple));
}

.home-section:not(.home-section-deep) h2,
.home-who-copy h2,
#partners .partner-heading {
  color: var(--brand-purple);
}

.home-section-deep h2,
.home-programme-caption span,
.home-programme-number,
.home-location,
.home-purpose-number {
  color: var(--brand-teal-light);
}

.home-who-point span,
.home-who-badge,
.home-programme-item::before,
.home-programme-item.is-active .home-programme-icon {
  border-color: var(--brand-teal);
  background: var(--brand-teal);
}

.home-who-point strong,
.home-card h3,
.home-card-label,
.home-programme-title,
.home-programme-icon {
  color: var(--brand-purple);
}

.home-stem-icon {
  box-shadow: 0 7px 0 var(--brand-teal), 0 16px 28px rgba(91, 46, 147, 0.18);
}

.home-stem-card:nth-child(2) .home-stem-icon {
  box-shadow: 0 7px 0 var(--brand-pink), 0 16px 28px rgba(91, 46, 147, 0.18);
}

.home-stem-card:nth-child(3) .home-stem-icon {
  box-shadow: 0 7px 0 var(--brand-green), 0 16px 28px rgba(91, 46, 147, 0.18);
}

#partners .partner-logo-tile::after {
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-pink));
}

/* Page headings are purple; small labels use readable supporting colours. */
#about-modern .about-section-title,
#about-modern .about-people-heading h2,
#programmes-modern h2,
#news-modern h2,
.youth-intro-copy h2,
.youth-section-heading h2,
.youth-participation-copy h2,
.contact-modern-heading h2,
.contact-modern-form-intro h2,
.contact-modern-location-copy h2 {
  color: var(--brand-purple);
}

#about-modern .about-section-label,
#programmes-modern .programmes-section-label,
#news-modern .news-section-label {
  color: var(--brand-teal-dark);
}

.youth-kicker,
.youth-section-label,
.contact-modern-kicker,
.contact-modern-label {
  color: var(--brand-pink-dark);
}

.youth-hero .youth-kicker,
.contact-modern-hero .contact-modern-kicker {
  color: var(--brand-pink-light);
}

.youth-video-copy h2,
.youth-final-cta h2,
#programmes-modern .programmes-final-cta h2 {
  color: var(--brand-teal-light);
}

.youth-button-primary,
.youth-image-badge {
  background: var(--brand-pink);
  color: var(--brand-purple-dark);
}

.contact-modern-form input:focus,
.contact-modern-form textarea:focus,
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  border-color: var(--brand-teal-dark);
  box-shadow: 0 0 0 3px rgba(72, 181, 210, 0.2);
}

/* Database-driven cards and detail pages. */
.pi-managed-heading h2,
.pi-results-heading h2 {
  color: var(--brand-purple);
}

.pi-eyebrow {
  color: var(--brand-teal-dark);
}

.pi-page-hero .pi-eyebrow,
.pi-detail-hero .pi-eyebrow {
  color: var(--brand-teal-light);
}

.pi-alert-banner {
  border-bottom: 3px solid var(--brand-pink);
  background: var(--brand-pink-dark);
}

.pi-update-type {
  color: var(--brand-teal-dark);
  background: var(--brand-teal-surface);
}

.pi-update-type-announcement {
  color: var(--brand-pink-dark);
  background: var(--brand-pink-surface);
}

.pi-status,
.pi-status-open {
  color: var(--brand-green-dark);
  background: var(--brand-green-surface);
}

.pi-page-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(72, 181, 210, 0.58), transparent 35%),
    var(--brand-purple);
}

.pi-public-header,
.pi-public-footer {
  background: var(--brand-purple-dark);
}

.pi-filter-actions button,
.pi-primary-button {
  background: var(--brand-purple);
}

.pi-filter-actions button:hover,
.pi-filter-actions button:focus-visible,
.pi-primary-button:hover,
.pi-primary-button:focus-visible {
  background: var(--brand-purple-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}