/* Shared visual layer. Brand values are injected per WordPress installation. */
:root {
  --brand-link: var(--brand-primary);
  --brand-hover: var(--brand-secondary);
  --brand-border: color-mix(in srgb, var(--brand-primary) 20%, var(--brand-white));
  --brand-accent: var(--brand-secondary);
  --brand-header: var(--brand-white);
  --brand-footer: var(--brand-dark);

  /* Map the active home and inner-template tokens to semantic brand values. */
  --navy: var(--brand-primary);
  --navy-2: var(--brand-dark);
  --blue: var(--brand-primary);
  --blue-2: var(--brand-secondary);
  --yellow: var(--brand-secondary);
  --yellow-2: var(--brand-primary);
  --text: var(--brand-dark);
  --muted: color-mix(in srgb, var(--brand-dark) 67%, var(--brand-white));
  --line: var(--brand-border);
  --surface: var(--brand-white);
  --bg: var(--brand-light);
  --shadow: 0 10px 28px color-mix(in srgb, var(--brand-primary) 14%, transparent);

  --pp-primary: var(--brand-primary);
  --pp-secondary: var(--brand-secondary);
  --pp-blue-800: var(--brand-primary);
  --pp-blue-700: var(--brand-secondary);
  --pp-yellow: var(--brand-secondary);
  --pp-red: var(--brand-primary);
  --pp-ink: var(--brand-dark);
  --pp-muted: color-mix(in srgb, var(--brand-dark) 67%, var(--brand-white));
  --pp-line: var(--brand-border);
  --pp-surface: var(--brand-white);
  --pp-soft: var(--brand-light);
  --pp-shadow: 0 10px 30px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

body { color: var(--brand-dark); background: var(--brand-light); }
a:hover { color: var(--brand-hover); }

.topbar,
.utility-bar { background: var(--brand-dark); color: var(--brand-white); }
.topbar p span { color: var(--brand-secondary); }

.site-header { background: var(--brand-header); color: var(--brand-dark); }
.site-header__inner { background: var(--brand-white); }
.brand { display: flex; align-items: center; }
.brand .pp-brand-logo,
.brand img { width: 100%; max-width: 145px; height: 68px; object-fit: contain; object-position: center; }
.main-header .brand .pp-brand-logo,
.main-header .brand img { max-width: 220px; height: 78px; }
.site-header .main-nav a { color: var(--brand-dark); }
.site-header__inner .main-nav { gap: clamp(8px, 1vw, 16px); }
.site-header__inner .main-nav a { font-size: 11px; }
.site-header .main-nav a::after { background: var(--brand-secondary); }

.primary-nav { background: linear-gradient(90deg, var(--brand-dark), var(--brand-primary) 50%, var(--brand-dark)); }
.nav-scroll a:hover { color: var(--brand-secondary); }

.button--yellow,
.action-yellow,
.pp-btn--primary,
.pp-contact-form__submit { background: var(--brand-primary); color: var(--brand-white); }
.button--yellow:hover,
.action-yellow:hover,
.pp-btn--primary:hover,
.pp-contact-form__submit:hover { background: var(--brand-secondary); color: var(--brand-white); }
.button--blue,
.action-blue { background: var(--brand-secondary); color: var(--brand-white); }
.button--blue:hover,
.action-blue:hover { background: var(--brand-primary); }

.hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary)); }
.hero__shape { background: var(--brand-secondary); }
.hero__messages a { background: color-mix(in srgb, var(--brand-dark) 92%, transparent); }
.tag,
.tag--red,
.tag--orange,
.tag--green,
.tag--blue,
.tag--yellow,
.pp-tag,
.pp-post-card__tag { background: var(--brand-primary); color: var(--brand-white); }
.news-card h2 a:hover,
.media-card h3 a:hover,
.video-card h3 a:hover,
.section-heading h2,
.section-heading a:hover { color: var(--brand-primary); }
.section-heading { border-color: var(--brand-secondary); }

.agenda-banner,
.results-banner,
.newsletter { background: linear-gradient(110deg, var(--brand-dark), var(--brand-primary)); }
.agenda-banner__copy > span,
.agenda-banner__copy h2,
.agenda-banner__metrics strong,
.results-banner__headline h2,
.results-banner__pillars b,
.results-banner__pillars h3 { color: var(--brand-secondary); }
.agenda-banner__photo::after { background: linear-gradient(90deg, var(--brand-primary), transparent 38%); }

.pp-page-hero,
.most-read h2,
.pp-sidebar-events h2,
.pp-contact-info { background: var(--brand-primary); }
.pp-pagination .page-numbers:hover,
.pp-pagination .page-numbers.current { background: var(--brand-secondary); border-color: var(--brand-secondary); }
form.search button,
.pp-post-card__tag,
.pp-tag { background: var(--brand-primary); }
form.search button:hover { background: var(--brand-secondary); }
.pp-article-content a,
.pp-post-nav__label,
.most-read li::before,
.pp-sidebar-link,
.pp-post-card__title a:hover,
.pp-post-card__more,
.pp-post-row__title a:hover,
.pp-event-row__title a:hover,
.pp-event-row__link,
.pp-video-card__title a:hover,
.pp-doc-row__title a:hover,
.pp-doc-row__link,
.pp-proposal-row__title a:hover { color: var(--brand-link); }
.pp-article-content blockquote { border-left-color: var(--brand-secondary); }
.pp-contact-form__group input:focus,
.pp-contact-form__group textarea:focus { border-color: var(--brand-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-secondary) 18%, transparent); }

.footer,
.site-footer { color: var(--brand-dark); background: var(--brand-light); border-top: 4px solid var(--brand-primary); }
.footer__brand img,
.footer-brand img { filter: none; background: var(--brand-white); }
.footer__brand p,
.footer section a,
.footer section p,
.footer__bottom,
.site-footer h2,
.footer-links,
.footer-contact,
.footer-bottom { color: var(--brand-dark); }
.footer__social a,
.socials a { color: var(--brand-white); background: var(--brand-primary); }
.footer__bottom,
.footer-bottom { border-top-color: var(--brand-border); }
.footer section a:hover,
.footer__bottom a:hover,
.footer-links a:hover,
.footer-contact a:hover { color: var(--brand-secondary); }

@media (max-width: 820px) {
  .brand .pp-brand-logo,
  .brand img { width: auto; max-width: min(220px, 72vw); height: 62px; }
  .main-header .brand .pp-brand-logo,
  .main-header .brand img { max-width: min(260px, 78vw); height: 72px; }
}