/**
 * AI20 Visual Identity v1 — Core components (Staging).
 * Cards, containers, tags, forms, people/org/news surfaces.
 */

/* Content containers / sections */
body.ai20-vi-system .ai20-homepage-experience,
body.ai20-vi-system .ai20-homepage-experience__section {
  font-family: var(--ai20-vi-font);
}

body.ai20-vi-system .ai20-homepage-experience__section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

body.ai20-vi-system .ai20-ecosystem-nav,
body.ai20-vi-system .ai20-countries,
body.ai20-vi-system .ai20-economy-highlights,
body.ai20-vi-system .ai20-search-teaser,
body.ai20-vi-system .ai20-join-teaser {
  border-bottom-color: var(--ai20-vi-border);
}

/* Cards — institutional, quiet borders */
body.ai20-vi-system .ai20-ecosystem-nav__link,
body.ai20-vi-system .ai20-countries__card,
body.ai20-vi-system .ai20-economy-highlights__card,
body.ai20-vi-system .ai20-ecosystem-entry__link,
body.ai20-vi-system .ai20-awaiting-content {
  border-radius: var(--ai20-vi-radius-card);
  border-color: var(--ai20-vi-border);
  background-color: var(--ai20-vi-white);
  box-shadow: none;
  transition: border-color var(--ai20-vi-ease), transform var(--ai20-vi-ease);
}

body.ai20-vi-system .ai20-countries__card.is-awaiting {
  background-color: var(--ai20-vi-future-white);
  border-style: dashed;
  border-color: var(--ai20-vi-border-strong);
}

body.ai20-vi-system .ai20-ecosystem-nav__link:hover,
body.ai20-vi-system .ai20-ecosystem-nav__link:focus-visible,
body.ai20-vi-system .ai20-countries__card:not(.is-awaiting):hover,
body.ai20-vi-system .ai20-economy-highlights__card:hover,
body.ai20-vi-system .ai20-ecosystem-entry__link:hover {
  border-color: color-mix(in srgb, var(--ai20-vi-azure) 45%, var(--ai20-vi-border));
  transform: none;
}

body.ai20-vi-system .ai20-ecosystem-nav__item.is-current .ai20-ecosystem-nav__link {
  border-color: var(--ai20-vi-azure);
  box-shadow: inset 0 -2px 0 var(--ai20-vi-azure);
}

/* People / leadership / org cards */
body.ai20-vi-system .edpf-entity-card {
  font-family: var(--ai20-vi-font);
  border-radius: var(--ai20-vi-radius-card);
}

body.ai20-vi-system .edpf-entity-card__media,
body.ai20-vi-system .ai20-person-profile .edpf-entity-profile__media,
body.ai20-vi-system .ai20-entity-profile .edpf-entity-profile__media {
  border-color: var(--ai20-vi-border) !important;
  background: linear-gradient(180deg, var(--ai20-vi-future-white), #eef3f8) !important;
  box-shadow: none !important;
}

body.ai20-vi-system .edpf-entity-card__title a,
body.ai20-vi-system .edpf-entity-card__title {
  color: var(--ai20-vi-midnight);
  font-family: var(--ai20-vi-font);
}

body.ai20-vi-system .edpf-entity-card__title a:hover {
  color: var(--ai20-vi-azure);
}

body.ai20-vi-system .edpf-entity-card__subtitle,
body.ai20-vi-system .edpf-entity-card__meta {
  color: var(--ai20-vi-muted);
  font-size: var(--ai20-vi-body-sm);
}

/* Tags / badges */
body.ai20-vi-system .edpf-entity-card__badges li,
body.ai20-vi-system .edpf-entity-card__badge,
body.ai20-vi-system .ai20-tag,
body.ai20-vi-system .ai20-badge {
  font-family: var(--ai20-vi-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ai20-vi-graphite);
  background: var(--ai20-vi-future-white);
  border: 1px solid var(--ai20-vi-border);
  border-radius: var(--ai20-vi-radius);
  box-shadow: none;
}

/* Forms */
body.ai20-vi-system .edpf-directory__filters,
body.ai20-vi-system .ai20-search-teaser__form,
body.ai20-vi-system .ai20-public-search__form,
body.ai20-vi-system .wpcf7 form,
body.ai20-vi-system form.contact-form {
  font-family: var(--ai20-vi-font);
}

body.ai20-vi-system .edpf-directory__filters {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: var(--ai20-vi-border) !important;
  border-radius: var(--ai20-vi-radius-card);
}

body.ai20-vi-system input[type="text"],
body.ai20-vi-system input[type="email"],
body.ai20-vi-system input[type="search"],
body.ai20-vi-system input[type="url"],
body.ai20-vi-system input[type="tel"],
body.ai20-vi-system select,
body.ai20-vi-system textarea,
body.ai20-vi-system .edpf-directory__field input,
body.ai20-vi-system .edpf-directory__field select,
body.ai20-vi-system .ai20-search-teaser__field,
body.ai20-vi-system .ai20-public-search__field,
body.ai20-vi-system .wpcf7 input:not([type="submit"]),
body.ai20-vi-system .wpcf7 textarea,
body.ai20-vi-system .wpcf7 select {
  font-family: var(--ai20-vi-font);
  color: var(--ai20-vi-graphite);
  background-color: var(--ai20-vi-white);
  border: 1px solid var(--ai20-vi-border-strong);
  border-radius: var(--ai20-vi-radius);
  box-shadow: none;
}

body.ai20-vi-system input:focus,
body.ai20-vi-system select:focus,
body.ai20-vi-system textarea:focus,
body.ai20-vi-system .ai20-search-teaser__field:focus,
body.ai20-vi-system .ai20-public-search__field:focus,
body.ai20-vi-system .wpcf7 input:focus,
body.ai20-vi-system .wpcf7 textarea:focus {
  border-color: var(--ai20-vi-azure);
  outline: 2px solid var(--ai20-vi-azure-soft);
  outline-offset: 0;
}

/* P0 contact remediation keeps the existing email enquiry pathway while
 * restoring native form semantics and clear required/error affordances. */
body.ai20-vi-system .ai20-contact-email-form label {
  display: inline-block;
}

body.ai20-vi-system .ai20-contact-email-form .ai20-required {
  color: #9f1d24;
  font-weight: 700;
}

body.ai20-vi-system .ai20-contact-email-form button[type="submit"] {
  cursor: pointer;
}

body.ai20-vi-system #contact-form {
  scroll-margin-top: calc(var(--ai20-vi-header-height) + 1rem);
}

/* Contact's approved hero is dark; keep its lead copy in the inherited
 * light-on-dark contrast system rather than the generic body-text color. */
body.ai20-vi-system .ai20-contact .ai20-hero .ai20-lead {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Directory page chrome — Future White / Midnight, not forest green */
body.ai20-vi-system .ai20-people-directory,
body.ai20-vi-system .ai20-events-directory,
body.ai20-vi-system .ai20-organizations-directory,
body.ai20-vi-system .ai20-countries-page {
  background:
    radial-gradient(ellipse 70% 45% at 8% -5%, rgba(20, 125, 255, 0.07), transparent 58%),
    radial-gradient(ellipse 40% 30% at 100% 10%, rgba(37, 217, 232, 0.05), transparent 50%),
    var(--ai20-vi-future-white) !important;
  color: var(--ai20-vi-graphite);
}

body.ai20-vi-system .ai20-awaiting-content {
  border-left: 3px solid var(--ai20-vi-azure);
  background: color-mix(in srgb, var(--ai20-vi-future-white) 88%, #fff);
}