/* Citizen Activate · Leadership Institute school board orientation section
   Broadside system: Alfa Slab One / Barlow / Barlow Condensed, flat 3px buttons.
   Every rule is scoped to .ca-li so this file cannot restyle the rest of site.css
   or the Dallas section (.ca-ev). Fonts are expected from the site's existing
   Google Fonts link; the fallbacks below match the brand tokens.

   Ground: cream in light, navy-900 in dark. Chosen so the section reads as a
   different beat from the navy Dallas section it sits beside. Contrast ratios
   are measured against the section's own ground, named in each comment. */

.ca-li {
  /* Complete light palette first (three-state theming: every token declared here
     before any dark block redefines it). */
  --li-ground: #F6F4EC;          /* cream */
  --li-ink: #121826;             /* ink on cream 16.1 */
  --li-muted: #5A6377;           /* slate on cream 5.47 */
  --li-rule: #C9CFDB;            /* limestone, hairlines only */
  --li-accent: #B3030D;          /* red-500 on cream 6.50, live dot + current row */
  --li-link: #B3030D;            /* red-500 on cream 6.50 */
  --li-link-hover: #8C0209;      /* red-700 on cream 8.96 */
  --li-focus: #8F5E00;           /* gold-700 on cream 5.06 */

  --li-primary-bg: #B3030D;      /* red-500; white label 7.15 */
  --li-primary-fg: #FFFFFF;
  --li-primary-hover: #8C0209;   /* red-700; white label 9.87 */
  --li-primary-press: #5C0105;   /* red-900 */
  --li-secondary-fg: #02204F;    /* navy-700 on cream 14.4 */
  --li-secondary-border: #02204F;
  --li-secondary-hover: #EEF2F8; /* navy-50; navy-700 label on it 14.1 */
  --li-tertiary-fg: #B3030D;
  --li-tertiary-line: #D1952B;   /* gold-500 underline, graphic only */

  --li-card: #02204F;            /* navy-700 cover */
  --li-card-ink: #F8F8F8;        /* paper on navy-700 15.0 */
  --li-card-muted: #C9CFDB;      /* limestone on navy-700 10.2 */
  --li-card-gold: #D1952B;       /* gold-500 on navy-700 6.09 */
  --li-card-edge: transparent;   /* cream ground already separates the card */

  --li-font-display: 'Alfa Slab One', Rockwell, 'Roboto Slab', serif;
  --li-font-text: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --li-font-accent: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* The section above, .ca-what, is var(--cream) -- the same #f6f4ec as this
     ground in light, so without a hairline the two beats run together. */
  border-top: 1px solid var(--li-rule);
  background: var(--li-ground);
  color: var(--li-ink);
  font-family: var(--li-font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding: 4rem 1rem;            /* spacing ramp: 4rem block, 1rem phone gutter */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ca-li {
    --li-ground: #01132F;        /* navy-900 */
    --li-ink: #F8F8F8;           /* paper on navy-900 17.4 */
    --li-muted: #C9CFDB;         /* limestone on navy-900 11.8 */
    --li-rule: #1E4278;          /* navy-500, hairlines only */
    --li-accent: #D1952B;        /* gold-500 on navy-900 7.09; red never touches navy */
    --li-link: #E8C267;          /* gold-300 on navy-900 10.9 */
    --li-link-hover: #FDF6E3;    /* gold-50 */
    --li-focus: #D1952B;         /* gold-500 focus on navy */
    --li-primary-bg: #D1952B;    /* gold-500; navy-900 label 7.09 */
    --li-primary-fg: #01132F;
    --li-primary-hover: #E8C267; /* gold-300; navy-900 label 10.9 */
    --li-primary-press: #8F5E00;
    --li-secondary-fg: #F8F8F8;  /* paper outline on navy */
    --li-secondary-border: #F8F8F8;
    --li-secondary-hover: #02204F;
    --li-tertiary-fg: #F8F8F8;
    --li-card-edge: #D1952B;     /* navy-700 card on navy-900 needs a keyline */
  }
}
:root[data-theme="dark"] .ca-li {
  --li-ground: #01132F;
  --li-ink: #F8F8F8;
  --li-muted: #C9CFDB;
  --li-rule: #1E4278;
  --li-accent: #D1952B;
  --li-link: #E8C267;
  --li-link-hover: #FDF6E3;
  --li-focus: #D1952B;
  --li-primary-bg: #D1952B;
  --li-primary-fg: #01132F;
  --li-primary-hover: #E8C267;
  --li-primary-press: #8F5E00;
  --li-secondary-fg: #F8F8F8;
  --li-secondary-border: #F8F8F8;
  --li-secondary-hover: #02204F;
  --li-tertiary-fg: #F8F8F8;
  --li-card-edge: #D1952B;
}

/* The state switch depends on [hidden]; site resets sometimes set display on
   these elements, so this wins deliberately. */
.ca-li [hidden] { display: none !important; }

.ca-li *, .ca-li *::before, .ca-li *::after { box-sizing: border-box; }

.ca-li__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
/* 52rem: below this the cover would shrink under ~280px and its title wraps
   to four lines, so the layout stacks. Copy stays first and the cover shrinks
   to 15rem so the headline and sign-up button aren't pushed below the fold. */
@media (max-width: 52rem) {
  .ca-li { padding: 3rem 1rem; }
  .ca-li__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* ---------- Copy ---------- */
.ca-li__eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font: 600 .875rem/1.3 var(--li-font-accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--li-muted);
}
.ca-li__dot {
  flex: none;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--li-accent);
}
/* Three pulses (3.6s) then rest: under the 5-second line in WCAG 2.2.2, so no
   pause control is needed. */
.ca-li__dot { animation: ca-li-pulse 1.2s ease-out 3; }
@keyframes ca-li-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--li-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 .6rem transparent; }
}

.ca-li__title {
  margin: 0 0 1rem;
  font-family: var(--li-font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);   /* brand H2 → H1; Alfa never under 24px */
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--li-ink);
  text-wrap: balance;
}

.ca-li__body p { margin: 0 0 1rem; max-width: 38rem; }
.ca-li__body strong { font-weight: 600; }
.ca-li a:not(.ca-li__btn) {
  color: var(--li-link);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.ca-li a:not(.ca-li__btn):hover { color: var(--li-link-hover); }

.ca-li__note {
  margin: 0 0 1rem;
  font-size: .9375rem;
  color: var(--li-muted);
  max-width: 38rem;
}

/* ---------- Schedule ---------- */
.ca-li__schedule {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--li-rule);
  max-width: 38rem;
}
.ca-li__schedule li {
  display: grid;
  gap: .125rem;
  padding: .75rem 0 .75rem 1rem;
  border-bottom: 1px solid var(--li-rule);
  border-left: 3px solid transparent;
}
.ca-li__when {
  font: 600 .875rem/1.3 var(--li-font-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--li-muted);
}
.ca-li__what { font-size: 1rem; line-height: 1.45; }
.ca-li__schedule li.is-current { border-left-color: var(--li-accent); }
.ca-li__schedule li.is-current .ca-li__what { font-weight: 600; }
/* Finished rows get a check, not dimming: opacity pushed slate under 4.5 on cream. */
.ca-li__schedule li.is-done .ca-li__when::before { content: "\2713\00a0"; color: var(--li-accent); }

/* ---------- Buttons (brand button system) ---------- */
.ca-li__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin: 1.5rem 0 1rem;
}
.ca-li__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* default size, touch target */
  padding: .5rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 3px;
  font: 600 1.0625rem/1 var(--li-font-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ca-li__btn--primary { background: var(--li-primary-bg); color: var(--li-primary-fg); }
.ca-li__btn--primary:hover { background: var(--li-primary-hover); }
.ca-li__btn--primary:active { background: var(--li-primary-press); }
.ca-li__btn--secondary {
  background: transparent;
  color: var(--li-secondary-fg);
  border-color: var(--li-secondary-border);
}
.ca-li__btn--secondary:hover { background: var(--li-secondary-hover); }
.ca-li__btn--tertiary {
  min-height: 44px;
  padding: .5rem 0;
  color: var(--li-tertiary-fg);
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  line-height: 1.25;
  /* A real underline follows the text if the label wraps on a narrow phone. */
  text-decoration: underline 2px var(--li-tertiary-line);
  text-underline-offset: .3em;
}
.ca-li__btn--tertiary::after { content: "\2192"; margin-left: .4em; }
.ca-li__btn--tertiary:hover { color: var(--li-link-hover); }
.ca-li__btn:focus-visible,
.ca-li a:focus-visible {
  outline: 3px solid var(--li-focus);
  outline-offset: 2px;
}

/* Brand rule: full-width stacked below 480px, primary first. */
@media (max-width: 30rem) {
  .ca-li__actions { flex-direction: column; align-items: stretch; }
  .ca-li__btn--tertiary { align-self: flex-start; }
}

.ca-li__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Playbook cover (decorative) ---------- */
.ca-li__visual {
  display: flex;
  justify-content: center;
  /* Depth for the settle below; no effect on the resting cover. */
  perspective: 1200px;
}
.ca-li__cover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: min(100%, 22rem);
  aspect-ratio: 17 / 22;         /* Letter portrait, the PDF's page shape */
  padding: 2rem 1.75rem;
  background: var(--li-card);
  color: var(--li-card-ink);
  border: 1px solid var(--li-card-edge);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(2,32,79,.18), 0 12px 32px rgba(2,32,79,.22);
  transform: rotate(-2deg);
  overflow: hidden;
}
/* Gold edge strip, like a bound report; keeps the cover from reading as a card. */
.ca-li__cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--li-card-gold);
}
/* Double-ring motif from the badge. */
.ca-li__rings {
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  border: 3px solid var(--li-card-gold);
  box-shadow: inset 0 0 0 4px var(--li-card), inset 0 0 0 6px var(--li-card-gold);
}
.ca-li__kicker {
  margin-top: auto;
  font: 600 .875rem/1 var(--li-font-accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--li-card-gold);
}
.ca-li__cover-title {
  font-family: var(--li-font-display);
  font-size: clamp(1.625rem, 3vw, 2rem);
  line-height: 1.08;
  color: var(--li-card-ink);
}
.ca-li__cover-meta {
  font-size: .875rem;
  line-height: 1.4;
  color: var(--li-card-muted);
}
.ca-li__stamp {
  position: absolute;
  top: 1.75rem;
  right: 1.25rem;
  padding: .45rem .7rem;
  border: 3px double var(--li-card-gold);
  border-radius: 3px;
  font: 700 .9375rem/1 var(--li-font-accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--li-card-gold);
  transform: rotate(8deg);
}
/* Stacked layout (same 52rem line as above): smaller cover. Declared after the
   base cover rules so it wins at equal specificity. */
@media (max-width: 52rem) {
  .ca-li__cover { width: min(100%, 15rem); padding: 1.5rem 1.25rem; gap: .5rem; }
  .ca-li__cover-title { font-size: 1.5rem; }
  .ca-li__stamp { top: 1.25rem; right: .875rem; font-size: .8125rem; }
}

/* The cover settles the first time it scrolls into view: it eases forward off
   its edge and comes to rest at exactly the transform it has when sitting
   still, so nothing moves afterwards. One pass of .8s, under the 5-second line
   in WCAG 2.2.2, so it needs no pause control for the same reason the live dot
   does not. JS sets data-li-cover; without it, or under reduced motion, the
   cover simply is where it lands. */
.ca-li[data-li-cover="wait"] .ca-li__cover { opacity: 0; }
.ca-li[data-li-cover="in"] .ca-li__cover {
  animation: ca-li-settle .8s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes ca-li-settle {
  from {
    opacity: 0;
    transform: rotate(-2deg) translateY(1.5rem) rotateY(-14deg) scale(.97);
  }
  to {
    opacity: 1;
    transform: rotate(-2deg) translateY(0) rotateY(0deg) scale(1);
  }
}

/* One-shot stamp when the state changes (added by JS, never on first paint). */
.ca-li__stamp.is-thunk { animation: ca-li-thunk .45s cubic-bezier(.2,.8,.3,1.2); }
@keyframes ca-li-thunk {
  0%   { opacity: 0; transform: rotate(8deg) scale(1.5); }
  100% { opacity: 1; transform: rotate(8deg) scale(1); }
}

/* One block switches off every animation and transition in the section. */
@media (prefers-reduced-motion: reduce) {
  .ca-li *, .ca-li *::before, .ca-li *::after {
    animation: none !important;
    transition: none !important;
  }
}