/* Ecosistem identity on the FULL source framework. Token aliases follow source
   panda-identity.css 9–80; source geometry/controllers are not replaced. */
:root {
  --personal-font: "Manrope", system-ui, sans-serif;
  --panda-ink: #151a2d;
  --panda-body: #3b4256;
  --panda-muted: #6c7389;
  --panda-paper: #fff;
  --panda-haze: #f4f6fb;
  --panda-haze-deep: #eaf0ff;
  --panda-hairline: #e3e7f0;
  --panda-night: #121729;
  --panda-green-800: #1c3fd6;
  --panda-green-700: #1c3fd6;
  --panda-green-600: #2d5bff;
  --panda-green-500: #2d5bff;
  --panda-green-300: #e3e7f0;
  --panda-green-200: #eaf0ff;
  --panda-green-100: #f4f6fb;
  --panda-coral: #6f8dff;
  --panda-coral-text: #1c3fd6;
  --panda-focus: #ffb547;
  --bg-primary: var(--panda-haze);
  --bg-alt: var(--panda-haze-deep);
  --bg-dark: var(--panda-ink);
  --bg-footer: var(--panda-night);
  --text-heading: var(--panda-ink);
  --text-body: var(--panda-body);
  --text-muted: var(--panda-muted);
  --purple: var(--panda-green-600);
  --purple-hover: var(--panda-green-700);
  --purple-bright: var(--panda-green-500);
  --purple-light: var(--panda-haze-deep);
  --icon-bg: var(--panda-haze-deep);
  --card-bg: var(--panda-paper);
  --card-shadow: 0 1px 0 rgb(10 20 50 / 4%), 0 20px 48px -20px rgb(45 91 255 / 18%);
  --st-bg-primary: var(--bg-primary);
  --st-bg-alt: var(--bg-alt);
  --st-text-muted: var(--text-muted);
  --st-purple-bright: var(--purple-bright);
  --st-purple-light: var(--purple-light);
  --st-coral: var(--panda-coral);
  --st-coral-deep: var(--panda-coral-text);
  --st-bg-dark: var(--bg-dark);
  --st-bg-footer: var(--bg-footer);
  --st-text-heading: var(--text-heading);
  --st-text-body: var(--text-body);
  --st-purple: var(--purple);
  --st-purple-hover: var(--purple-hover);
  --st-card-bg: var(--card-bg);
  --st-card-shadow: var(--card-shadow);
  --wps-light-gray: var(--bg-primary);
  --wps-purple-bold: var(--purple-hover);
  --wps-purple-deep: var(--purple-hover);
  --wps-soft: var(--panda-haze);
  --wps-shell: var(--panda-paper);
  --wps-black: var(--panda-ink);
  --wps-purple: var(--purple);
  --wps-purple-ink: var(--panda-ink);
  --wps-text: var(--text-heading);
  --wps-text-soft: var(--text-body);
  --wps-line: var(--panda-hairline);
  --wps-green: var(--purple);
  --wps-teal: var(--purple);
  --wps-green-deep: var(--purple-hover);
  --wps-coral: var(--panda-coral);
  --wps-red: #b4233c;
  --personal-hero: var(--wp--preset--gradient--ecosistem);
  --panda-brand-lettering: "";
  --panda-brand-decoration: none;
}
::selection { background: var(--panda-haze-deep); color: var(--panda-ink); }
:focus-visible { outline: 2px solid var(--panda-focus); outline-offset: 4px; }
.hero, .standard-page__hero, .hero--events {
  background: var(--personal-hero);
}
/* ONE browser glyph definition for every text watermark, including latent
   events consumers. JSON-safe configured CSS string; no invented empty mark.
   Uploaded-logo mode deliberately omits decoration rather than inventing text. */
.hero::after, .hero--events::after, .standard-page__background-logo::after {
  content: var(--panda-brand-lettering) / "";
  display: var(--panda-brand-decoration);
  position: absolute;
  inset: auto;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: auto; height: auto; aspect-ratio: auto;
  font: 700 min(46vw, 640px) / .8 var(--personal-font);
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 2px rgb(255 255 255 / 10%);
  background: none;
  -webkit-mask: none; mask: none;
  opacity: 1; z-index: 0; filter: none;
  pointer-events: none; user-select: none;
}
/* Retain the accepted Panda default frame, including its original aspect ratio
   and height cap. Container units fit the SAME lettering inside that frame,
   rather than substituting another graphic or positioning text by viewport. */
.standard-page__background-logo {
  display: block;
  right: 4%; top: 50%;
  width: min(52vw, 650px); height: auto; max-height: 72%;
  aspect-ratio: 190 / 168;
  container-type: size;
  opacity: 1; filter: none;
  transform: translateY(-50%);
}
.standard-page__background-logo::after {
  top: 50%;
  font-size: min(84cqw, 95cqh);
}
@media (max-width: 640px) {
  .standard-page__background-logo {
    right: -12%; width: 82vw; max-height: 62%;
  }
}
.hero p, .standard-page__hero-subtitle { color: rgb(255 255 255 / 86%); }
.hero .hero-badge, .standard-page__hero-eyebrow {
  color: #fff; border-color: rgb(255 255 255 / 36%);
  text-transform: none; letter-spacing: .025em;
}
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 60px; text-decoration: none; }
.panda-brand { display: flex; align-items: center; gap: 9.6px; font: 700 17.6px var(--personal-font); letter-spacing: -.02em; white-space: nowrap; }
.panda-brand-mark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; font: 700 13.6px var(--personal-font); letter-spacing: -.04em; }
.logo-light .panda-brand { color: #fff; }
.logo-light .panda-brand-mark { background: #fff; color: var(--purple); }
.logo-dark .panda-brand { color: var(--panda-ink); }
.logo-dark .panda-brand-mark { background: var(--purple); color: #fff; }
/* Shared native-menu skin: the hero accent cannot also be its link hover.
   The canonical on-hero navbar stays fully transparent, without a scrim. */
/* Top-level WordPress menu links only; dropdowns keep their light panel skin.
   Current-page weight/ARIA still come from the existing WP menu/controller. */
.nav .nav-links > li > a {
  color: var(--panda-paper);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.nav .nav-links > li > a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
}
:is(.nav.scrolled, .nav.mobile-open, .panda-no-js .nav) .nav-links > li > a {
  color: var(--panda-ink);
}
:is(.nav.scrolled, .nav.mobile-open, .panda-no-js .nav) .nav-links > li > a:is(:hover, :focus-visible, .active),
:is(.nav.scrolled, .nav.mobile-open, .panda-no-js .nav) .nav-links > :is(.current-menu-item, .current_page_item) > a {
  color: var(--purple-hover);
}
/* Amber remains the on-hero focus. Deep cobalt contrasts with light glass. */
:is(.nav.scrolled, .nav.mobile-open, .panda-no-js .nav) :focus-visible {
  outline-color: var(--purple-hover);
}
/* Light navigation: readable fallback, then translucent frosted glass.
   No opacity on the nav itself: labels, logo and controls stay fully opaque. */
.nav.scrolled, .nav.mobile-open {
  background: rgb(244 246 251 / 96%);
  border-bottom-color: rgb(255 255 255 / 56%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 8px 28px rgb(21 26 45 / 8%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav.scrolled, .nav.mobile-open {
    background: linear-gradient(180deg, rgb(255 255 255 / 80%), rgb(244 246 251 / 64%));
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled, .nav.mobile-open {
    background: var(--panda-haze);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* The reference uses a 16px root; fixed equivalents preserve its identity
   sizes without altering the canonical framework's fluid rem scale. */
@media (min-width: 969px) and (max-width: 1200px) {
  .nav-links { gap: 32px; }
}
@media (max-width: 968px) {
  .nav:not(.scrolled).mobile-open .nav-search-toggle { color: var(--text-heading); }
  .nav-logo { min-height: 50px; }
}
@media (max-width: 640px) { .nav-logo { min-height: 48px; } }
.footer { background: var(--panda-night); }
.panda-brand-logo { width: auto; height: 30px; max-width: 96px; object-fit: contain; }
.footer-brand .panda-brand { color: #fff; white-space: normal; }
.footer-brand .panda-brand-mark { background: #fff; color: var(--purple); }
.footer-brand .panda-brand-logo { width: auto; height: 40px; filter: none; }
.footer-col h4 { color: #fff; }
.footer-brand p, .footer-col a, .footer-bottom p, .footer-bottom a { color: rgb(255 255 255 / 72%); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* Canonical component bands can be inserted natively without a corporate CTA. */
.cta-section, :is(.panda-editor-content, .editor-styles-wrapper) .cta-section { background: var(--personal-hero); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}