/* ============================================================
   SIPI v10 — Pages
   Extracted from docs/v2-source-of-truth/sipi_v10_mock.html (Task A2)
   Page visibility toggling, home hero, page-header (ph) for inner
   routes, color-accent hooks for Grand Challenges and Leverage Points.
   ============================================================ */

/* --- Page visibility ---
   The mock prototype used `.page { display:none }` + `.page.active { display:block }`
   for SPA-style virtual page routing. WordPress mode does NOT use this:
   each WP post is its own URL with its own template render. The v10 page
   templates DO wrap content in `<div class="page" id="page-X">` (kept for
   structural CSS hooks), but they should always be visible.
   Rule REMOVED entirely — both `.page` (matched WP body) and `div.page`
   (matched template wrappers) caused regressions. */
/* (intentionally empty — visibility is controlled by WordPress routing) */

/* --- Home hero --- */
.hero{position:relative;min-height:calc(100vh - 72px);display:flex;align-items:center;background:var(--navy);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 75% 30%,rgba(26,156,123,.18),transparent 60%),radial-gradient(ellipse 50% 40% at 15% 80%,rgba(184,151,62,.10),transparent 60%);pointer-events:none}
.hero-inner{position:relative;max-width:var(--con);margin:0 auto;padding:0 var(--gut);width:100%}
.hero-tag{font-size:11px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:24px}
.hero h1{margin-bottom:28px;max-width:980px}
.hero-sub{font-size:18px;line-height:1.7;color:rgba(255,255,255,.78);max-width:640px;margin-bottom:40px;font-weight:300}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{position:absolute;bottom:48px;right:var(--gut);font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.12em;text-transform:uppercase}

/* --- Hero — SIPI Teal accent variant (v1.0.35, Anjali architecture spec) ---
   Navy bg stays for legibility. Accents shift gold → teal-pale on the eyebrow
   and CTAs get a vivid teal flash on hover/focus. Background ambient glow
   shifted toward teal for cohesion. */
.hero--teal::before{
  background:
    radial-gradient(ellipse 70% 50% at 75% 30%,rgba(26,156,123,.22),transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 80%,rgba(225,245,238,.06),transparent 60%);
}
.hero--teal .hero-tag{color:var(--teal-pale);letter-spacing:.22em}
.hero--teal .btn-p{background:var(--navy);border-color:var(--navy)}
.hero--teal .btn-p:hover,
.hero--teal .btn-p:focus-visible{background:var(--teal);border-color:var(--teal-lt)}
.hero--teal .btn-o{border-color:rgba(225,245,238,.45)}
.hero--teal .btn-o:hover,
.hero--teal .btn-o:focus-visible{
  background:rgba(26,156,123,.10);
  border-color:var(--teal-lt);
  color:#fff;
}

/* --- Page header (ph) for inner routes --- */
.ph{background:var(--navy);color:#fff;padding:120px 0 80px;position:relative;overflow:hidden}
/* 2026-05-19 — When a hero has an inline background-image (set per-post
 * via the page_hero_bg ACF meta), darken it with a navy gradient overlay
 * so the white H1 + sub copy stay legible. Applies to any .ph with a
 * background-image inline style — generic enough for all framework pages. */
.ph[style*="background-image"]{background-size:cover;background-position:center;background-color:var(--navy)}
.ph[style*="background-image"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,28,44,0.55),rgba(5,28,44,0.85));pointer-events:none;z-index:1}
.ph[style*="background-image"] > *{position:relative;z-index:2}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 80% 50%,rgba(184,151,62,.10),transparent 60%);pointer-events:none}
.ph-inner{position:relative;max-width:var(--con);margin:0 auto;padding:0 var(--gut)}
.ph .lbl{color:var(--gold-pale);margin-bottom:14px}
.ph .rule{background:var(--gold-pale);margin-bottom:24px}
.ph h1{font-family:var(--ff-display);font-size:clamp(36px,4.5vw,64px);font-weight:300;line-height:1.1;color:#fff;max-width:840px;margin-bottom:24px}
.ph p{font-size:17px;color:rgba(255,255,255,.75);max-width:640px;font-weight:300;line-height:1.7}

/* --- Color-accent overrides (Grand Challenges + Leverage Points sub-pages) ---
   The mock uses data-domain on gc cards (handled in components.css). These
   data-accent overrides are the page-level hooks the v10 IA plans to use on
   inner pages so hero/rule/label tints match the topic theme. Kept here as
   the place the template layer will hang page chrome off of. */
[data-accent="food"] .ph .lbl,[data-accent="food"] .lbl{color:var(--food)}
[data-accent="food"] .ph .rule,[data-accent="food"] .rule{background:var(--food)}
[data-accent="health"] .ph .lbl,[data-accent="health"] .lbl{color:var(--health)}
[data-accent="health"] .ph .rule,[data-accent="health"] .rule{background:var(--health)}
[data-accent="circ"] .ph .lbl,[data-accent="circ"] .lbl{color:var(--circ)}
[data-accent="circ"] .ph .rule,[data-accent="circ"] .rule{background:var(--circ)}
[data-accent="narr"] .ph .lbl,[data-accent="narr"] .lbl{color:var(--narr)}
[data-accent="narr"] .ph .rule,[data-accent="narr"] .rule{background:var(--narr)}

/* ============================================================================
 * 2026-05-18 — index.php editorial wrapper (used by default-template pages:
 * Privacy Policy, Editorial Independence Charter, Imprint, Cookies, etc.)
 *
 * Anjali 14-May docx FOOTER tab:
 *   "TO-DO-IMPROVE the following pages: Privacy Policy + Editorial
 *    Independence Charter. The content is currently all left aligned,
 *    similar size fonts, and hard to read. Use one column format with
 *    padding and ensure the appropriate use of headings to increase
 *    professionalism."
 *
 * The wrapper markup is `<main class="sipi-main"><div class="sipi-container">
 * <article class="sipi-article">…</article></div></main>` and previously
 * had no styling, so content rendered at browser defaults. This block
 * introduces a one-column reading layout with proper typography hierarchy.
 * ============================================================================ */
.sipi-main {
  padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 100px);
  background: var(--off);
  color: var(--text);
}
.sipi-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.sipi-article__title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--heading);
  margin: 0 0 32px;
}
.sipi-article__body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}
.sipi-article__body > * + * { margin-top: 1.2em; }
.sipi-article__body h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--heading);
  margin-top: 2em;
  margin-bottom: .6em;
  letter-spacing: -.005em;
}
.sipi-article__body h3 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--heading);
  margin-top: 1.8em;
  margin-bottom: .5em;
  letter-spacing: 0;
}
.sipi-article__body h4 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 1.6em;
  margin-bottom: .5em;
}
.sipi-article__body p { margin: 0 0 1em; }
.sipi-article__body strong { font-weight: 600; color: var(--heading); }
.sipi-article__body em { font-style: italic; color: var(--text); }
.sipi-article__body a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.sipi-article__body a:hover { color: var(--gold-text); }
.sipi-article__body ul,
.sipi-article__body ol { margin: 0 0 1.4em 1.6em; padding: 0; }
.sipi-article__body li { margin-bottom: .6em; }
.sipi-article__body ul { list-style: disc; }
.sipi-article__body ol { list-style: decimal; }
.sipi-article__body blockquote {
  border-left: 3px solid var(--gold);
  margin: 1.5em 0;
  padding: .2em 0 .2em 1.2em;
  font-style: italic;
  color: var(--muted);
}
.sipi-article__body code {
  background: var(--off2);
  padding: .1em .3em;
  border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

/* Privacy Policy uses an older sipi-page-hero* + sipi-con/sipi-2col block
 * inserted as raw HTML inside post_content. Style its hero and column so
 * the page coheres with the rest of the site. */
.sipi-page-hero__inner {
  background: var(--navy);
  color: #fff;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  text-align: left;
  margin: calc(-1 * clamp(72px, 9vw, 120px)) calc(-1 * clamp(20px, 4vw, 48px)) clamp(48px, 6vw, 80px);
  border-radius: 2px;
}
.sipi-page-hero__title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: #fff;
  margin: 14px 0 20px;
  max-width: 28ch;
}
.sipi-page-hero__lead {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 56ch;
  margin: 0;
}
.sipi-eyebrow {
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin: 0 0 4px;
}
.sipi-eyebrow--on-dark { color: var(--gold-pale); }
.sipi-con { width: 100%; }
.sipi-2col { display: block; }
.sipi-2col__main { width: 100%; }


/* ============================================================
 * Hero brand lockup (A+B, 2026-06-03) — "SIPI." wordmark + full name,
 * reveal-&-settle entrance. Animates opacity/transform/colour only (CLS
 * stays 0); one-time on load; gated on prefers-reduced-motion so
 * motion-averse visitors get the resting state immediately. The wordmark
 * is aria-hidden (decorative brand display); the full name (.hero-tag,
 * from $home_hero_label) remains the accessible identity text.
 * ============================================================ */
.hero-brand{ margin-bottom:24px; }
.hero-brand .hero-tag{ margin:8px 0 0; }
.hero-wordmark{
  display:inline-block;
  font-family:var(--ff-serif,"Cormorant Garamond",Georgia,serif);
  font-weight:600;
  font-size:clamp(2.6rem,5.2vw,3.7rem);
  line-height:.95;
  letter-spacing:.015em;
  color:#fff;
  transform-origin:left center;
}
.hero-wordmark-dot{ color:var(--gold); }
/* make the full name a touch more legible than the prior pale-teal */
.hero--teal .hero-brand .hero-tag{ color:rgba(255,255,255,.8); }

@media (prefers-reduced-motion: no-preference){
  .hero-wordmark            { animation:sipiReveal 2.4s cubic-bezier(.16,1,.3,1) both; }
  .hero-brand .hero-tag     { animation:sipiTagIn  1.4s ease .55s both; }
  .hero--video .h1          { animation:sipiUp     1s   ease .85s both; }
  .hero--video .hero-sub    { animation:sipiUp     1s   ease 1.05s both; }
  .hero--video .hero-ctas   { animation:sipiUp     1s   ease 1.25s both; }
}
@keyframes sipiReveal{
  0%  { opacity:0; transform:translateY(12px) scale(.94); text-shadow:0 0 0 rgba(212,175,82,0); }
  30% { opacity:1; transform:translateY(0) scale(1.045); text-shadow:0 0 26px rgba(212,175,82,.55); }
  60% { transform:scale(1.045); text-shadow:0 0 22px rgba(212,175,82,.42); }
  100%{ transform:scale(1); text-shadow:0 0 0 rgba(212,175,82,0); }
}
@keyframes sipiTagIn{
  0%  { opacity:0; transform:translateY(6px); letter-spacing:.34em; }
  100%{ opacity:1; transform:none; }
}
@keyframes sipiUp{ 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:none} }
/* ============================================================
   W4 (2026-08-16) — Sounding Board institution marks + disclaimer
   The roster's institutional weight (Roche, EPFL, ETH, UZH, PwC…) is the
   page's strongest credibility signal but was text-only. The mark sits under
   the role, greyscale at rest so 23 different brand palettes don't fight the
   navy/gold system, and resolves to full colour on hover/focus-within.
   ============================================================ */
/* Scoped to .person-tile so it outranks the circular `.person-tile img`
   portrait rule — otherwise the mark inherits the 120px round crop and
   renders as a cut-off circle. border-radius/object-fit reset explicitly. */
.person-tile .ptile-org {
    display: block;
    width: auto !important;
    max-width: 72px;
    height: 22px !important;
    margin: 10px auto 0;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter: grayscale(1);
    opacity: .55;
    transition: filter .2s ease, opacity .2s ease;
}
.person-tile:hover .ptile-org,
.person-tile:focus-within .ptile-org {
    filter: grayscale(0);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .ptile-org { transition: none; }
}

.sounding-disclaimer {
    max-width: 68ch;
    margin: 22px auto 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted, #5a6470);
    text-align: center;
    font-style: italic;
}

/* ============================================================
   W5 + W6 (2026-08-16) — roster polish
   ============================================================ */

/* W6 — roster size badge beside each section heading. Purely decorative:
   each grid already exposes its length via role="list", so the numeral is
   aria-hidden and would otherwise be announced twice. With the mobile page
   running ~9,700px tall, showing "23 / 5 / 17" up front tells a visitor how
   much roster is ahead before they commit to the scroll. */
.sec-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    padding: .28em .6em;
    margin-left: 14px;
    border: 1px solid var(--rule, #e7e3d8);
    border-radius: 999px;
    background: rgba(13, 36, 56, .03);
    font-family: var(--ff-sans, system-ui, sans-serif);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--muted, #5a6470);
    vertical-align: middle;
    position: relative;
    top: -.35em;
}

@media (max-width: 560px) {
    /* W5 — placeholder initials must occupy exactly the portrait box.
       components.css drops portraits to 88px here but left .ptile-initials
       at 96px, so the two remaining placeholder tiles sat proud of every
       photo tile beside them. */
    .person-tile--placeholder .ptile-initials,
    .people-grid--sm .person-tile--placeholder .ptile-initials {
        width: 88px;
        height: 88px;
        font-size: 26px;
    }

    /* W6 — the Secretariat grid (--lg) fell to a SINGLE column for just 5
       people (minmax(160px,1fr) cannot fit two at 390px) while the 23- and
       17-person grids stayed 2-up. That read as inconsistent and cost ~700px
       of extra scroll for the shortest section. Match the other rosters. */
    .people-grid--lg {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sec-count {
        font-size: .75rem;
        margin-left: 10px;
    }
}

/* ============================================================
   PROSPER Profile explorer — Phase 2 (D3/D4)
   Radar is inline SVG (strict CSP forbids a chart library).
   ============================================================ */
.pp-intro { margin-bottom: 26px; }
.pp-step { border: 0; padding: 0; margin: 0 0 28px; }
.pp-step-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--ff-display, Georgia, serif);
    font-size: 1.25rem; color: var(--heading, #0a2540);
    padding: 0; margin-bottom: 14px;
}
.pp-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--navy, #0a2540); color: #fff;
    font-family: var(--ff-sans, system-ui); font-size: .8rem; font-weight: 600;
}

/* vantage point */
.pp-scale-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-scale-opt { position: relative; }
.pp-scale-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-scale-opt span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 20px;           /* WCAG 2.5.5 touch target */
    border: 1px solid var(--rule, #e7e3d8); border-radius: 999px;
    background: #fff; cursor: pointer; font-size: .95rem;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pp-scale-opt input:checked + span {
    background: var(--navy, #0a2540); border-color: var(--navy, #0a2540); color: #fff;
}
.pp-scale-opt input:focus-visible + span {
    outline: 3px solid var(--gold, #b8973e); outline-offset: 2px;
}

/* weights */
.pp-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 26px; }
.pp-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.pp-slider label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.pp-pill-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 4px; flex: 0 0 auto;
    background: rgba(21,122,96,.10); color: var(--teal-dark, #085041);
    font-weight: 700; font-size: .75rem;
}
.pp-slider input[type="range"] { width: 100%; accent-color: var(--teal, #157a60); min-height: 24px; }
.pp-slider output {
    min-width: 1.6em; text-align: center; font-weight: 600;
    font-size: .85rem; color: var(--muted, #5a6470);
}
.pp-reset { margin-top: 16px; }

/* result */
.pp-result { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule, #e7e3d8); }
.pp-result-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 30px; align-items: start; }
.pp-radar-wrap { position: relative; }
/* aspect-ratio reserves the box before the SVG mounts -> CLS = 0 */
.pp-radar { width: 100%; aspect-ratio: 460 / 380; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
    .pp-radar-poly { transition: none; }
}
.pp-list { list-style: none; padding: 0; margin: 0; counter-reset: ppl; }
.pp-list-item { padding: 12px 0; border-top: 1px dashed var(--rule, #e7e3d8); }
.pp-list-item:first-child { border-top: 0; }
.pp-list-pillar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-weight: 600; color: var(--heading, #0a2540); font-size: .95rem;
}
.pp-list-w {
    font-size: .75rem; font-weight: 600; color: var(--teal-dark, #085041);
    background: rgba(21,122,96,.10); border-radius: 999px; padding: 2px 8px;
}
.pp-list-empty { color: var(--muted, #5a6470); }
.pp-ind { margin: 6px 0 0; padding-left: 1.1rem; }
.pp-ind li { font-size: .88rem; color: var(--muted, #5a6470); line-height: 1.5; padding: 1px 0; }

/* static fallback / full framework */
.pp-static { margin-top: 30px; }
.pp-pillar { padding: 20px 0; border-top: 1px solid var(--rule, #e7e3d8); }
.pp-pillar-sum { color: var(--muted, #5a6470); margin: 4px 0 12px; }
.pp-scales { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.pp-scale-h {
    font-family: var(--ff-sans, system-ui); font-size: .78rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--gold-dk, #7d6418);
    margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
}
.pp-n { color: var(--muted, #5a6470); font-weight: 500; }

@media (max-width: 760px) {
    .pp-result-grid { grid-template-columns: 1fr; }
    .pp-radar-wrap { max-width: 420px; margin-inline: auto; }
}