/* audience_switcher block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   tabs + panels; dot instead of emoji, colour from --aud-* */

.audience-switcher__header { margin-bottom: 1.6rem; }
.audience-switcher__intro { color: var(--muted); max-width: 62ch; }
.audience-switcher__tab-list { display: flex; border-bottom: 1px solid var(--box-border); margin-bottom: 1.6rem; flex-wrap: wrap; }
.audience-switcher__tab {
  display: flex; align-items: center; gap: .625rem;
  padding: .9rem 1.4rem; border-bottom: 4px solid transparent;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem;
  color: var(--muted);
}
/* The optional per-tab emoji (ACF field, may be set or empty). Render it as an
   actual glyph at a readable size, not the old placeholder dot which squashed
   the emoji into a 12px circle. */
.audience-switcher__tab-emoji { display: inline-flex; align-items: center; font-size: 1.2em; line-height: 1; }
.audience-switcher__tab-emoji:empty { display: none; }
.audience-switcher__tab--active { color: var(--aud-students); border-bottom-color: var(--aud-students); }
.audience-switcher__panel { display: none; }
.audience-switcher__panel--active { display: block; }
.audience-switcher__panel-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.2rem; align-items: start; }
.audience-switcher__panel-heading { font-size: 1.75rem; margin-bottom: 1rem; color: var(--aud-students); }
.audience-switcher__list { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.audience-switcher__list li { display: flex; gap: .75rem; line-height: 1.6; }
.audience-switcher__check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .15rem; color: var(--aud-students); }
.audience-switcher__callout { border-left: var(--card-edge) solid var(--aud-students); background: var(--white); padding: 1.2rem 1.4rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 1.3rem; }
.audience-switcher__callout-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.audience-switcher__callout-text { font-size: var(--fs-min); color: var(--muted); }
.audience-switcher__image { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
@media (max-width: 64em) { .audience-switcher__panel-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Audience colour wayfinding.

   The block emits a per-audience colour on three things: data-colour on the tab
   and the content column, and a --{colour} modifier on the panel heading and the
   callout. NOTHING consumed any of it, so every panel painted --aud-students
   blue whatever the editor chose. On the one block whose entire purpose is
   telling students, parents and employers apart.

   Keys are the five the field offers. Text-bearing roles take the employer
   green's TEXT variant (--aud-employers-text, 5f6b00); the flat --aud-employers
   is fills and rules only, per the token layer. Navy and dark-blue map to the
   structural tokens the (now removed) $colour_map in audience_switcher.php mirrored.
   --------------------------------------------------------------------------- */

/* active tab: label + 4px underline */
.audience-switcher__tab--active[data-colour="magenta"] { color: var(--aud-parents); border-bottom-color: var(--aud-parents); }
.audience-switcher__tab--active[data-colour="green"] { color: var(--aud-employers-text); border-bottom-color: var(--aud-employers); }
.audience-switcher__tab--active[data-colour="navy"] { color: var(--text-heading); border-bottom-color: var(--surface-dark); }
.audience-switcher__tab--active[data-colour="dark-blue"] { color: var(--dblue); border-bottom-color: var(--dblue); }

/* panel heading */
.audience-switcher__panel-heading--magenta { color: var(--aud-parents); }
.audience-switcher__panel-heading--green { color: var(--aud-employers-text); }
.audience-switcher__panel-heading--navy { color: var(--text-heading); }
.audience-switcher__panel-heading--dark-blue { color: var(--dblue); }

/* tick icons in the benefit list */
.audience-switcher__content[data-colour="magenta"] .audience-switcher__check { color: var(--aud-parents); }
.audience-switcher__content[data-colour="green"] .audience-switcher__check { color: var(--aud-employers-text); }
.audience-switcher__content[data-colour="navy"] .audience-switcher__check { color: var(--text-heading); }
.audience-switcher__content[data-colour="dark-blue"] .audience-switcher__check { color: var(--dblue); }

/* callout accent edge */
.audience-switcher__callout--magenta { border-left-color: var(--aud-parents); }
.audience-switcher__callout--green { border-left-color: var(--aud-employers); }
.audience-switcher__callout--navy { border-left-color: var(--surface-dark); }
.audience-switcher__callout--dark-blue { border-left-color: var(--dblue); }

/* Helper hint above the tabs; also the tablist's aria-describedby target. */
.audience-switcher__hint { font-size: var(--fs-min); color: var(--muted); margin-bottom: .9rem; }
/* Read a little more like tabs: top-rounded chips with a hover ground so it is
   obvious they are pickable, sitting on the tab-list's bottom rule. */
.audience-switcher__tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.audience-switcher__tab:hover { color: var(--text-heading); background: var(--light); }