/* Extras for the Classroom Climate deck. Load after sluh.css. */

/* Big headline numbers */
.stat { margin: 0 0 0.9em 0; }
.stat .num {
  display: block;
  font-family: var(--headline);
  font-size: 96px;
  line-height: 1;
  color: var(--sluh-navy);
}
.stat .lbl { display: block; font-size: 24px; color: var(--dark-gray); line-height: 1.25; }
.navy .stat .num { color: var(--white); }
.navy .stat .lbl { color: var(--spirit-blue); }

/* One-line statement slides */
.statement h1 { font-size: 64px; line-height: 1.15; max-width: 85%; }
.statement p { font-size: 28px; }

/* Three columns (fight / flight / freeze) */
.cols3 { display: flex; gap: 28px; margin-top: 0.6em; }
.cols3 > div {
  flex: 1;
  background: var(--white);
  border-top: 8px solid var(--sluh-blue);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 51, 102, 0.14);
  padding: 0.5em 0.9em 0.7em 0.9em;
  font-size: 25px;
}
.cols3 h3 { margin: 0.1em 0 0.3em 0; font-size: 36px; color: var(--sluh-navy); }
.cols3 p { margin: 0.25em 0; color: var(--sluh-navy); }

/* Two pillars -> outcome */
.pillars { display: flex; gap: 28px; margin-top: 0.8em; }
.pillars > div {
  flex: 1;
  background: var(--sluh-navy);
  color: var(--white);
  border-radius: 6px;
  padding: 0.7em 1em;
  font-family: var(--headline);
  font-size: 34px;
  line-height: 1.2;
  text-align: center;
}
.pillars .plus { flex: 0 0 auto; background: none; color: var(--sluh-blue); font-size: 60px; padding: 0.4em 0; }
.arrow-down { text-align: center; font-size: 40px; color: var(--sluh-blue); margin: 0.15em 0; line-height: 1; }
.outcome {
  background: #E7F4FB;
  border-left: 8px solid var(--spirit-blue);
  border-radius: 6px;
  padding: 0.45em 1em;
  font-size: 30px;
  text-align: center;
  color: var(--sluh-navy);
}

/* Misconceptions: struck-through list */
.myths { list-style: none !important; padding-left: 0; margin: 0.4em 0; }
.myths li {
  font-size: 30px;
  color: var(--dark-gray);
  text-decoration: line-through;
  text-decoration-color: var(--sluh-blue);
  text-decoration-thickness: 3px;
  margin: 8px 0 !important;
}

/* Book cover */
.cover { width: 100%; border-radius: 4px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); }

/* Placeholder for the survey QR */
.qr-placeholder {
  width: 380px; height: 380px;
  border: 4px dashed var(--spirit-blue);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 24px;
  color: var(--spirit-blue);
}

/* Inline chart */
.chart svg { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--body); }

/* ---- Fixes after first render ---- */
.cover { width: auto; max-width: 100%; max-height: 560px; }
.arrow-down { display: block; }
.pull-quote {
  margin-top: 0.9em;
  text-align: center;
  font-family: var(--headline);
  font-size: 36px;
  color: var(--sluh-blue);
}
.myths li { font-size: 28px; margin: 4px 0 !important; }
.callout h3 { font-size: 32px; margin: 0.2em 0; }
.split .left-panel h1 { font-size: 44px; }
.split .stat { margin-bottom: 0.4em; }
.split .stat .num { font-size: 76px; }
.steps { margin-top: 0.8em; }
.steps > div { display: flex; align-items: center; gap: 30px; margin: 0 0 28px 0; font-size: 38px; line-height: 1.2; }
.steps .n {
  flex: 0 0 84px; height: 84px; border-radius: 50%;
  background: var(--spirit-blue); color: var(--sluh-navy);
  font-family: var(--headline); font-size: 52px;
  display: flex; align-items: center; justify-content: center;
}
.steps b { color: var(--spirit-blue); font-weight: 800; }
.split .right-panel > * { flex-shrink: 0; }
.stat-row { display: flex; gap: 60px; }
.chart-caption { font-size: 22px; color: var(--dark-gray); text-align: center; margin-top: 4px; }
/* Effect-size chips (Hattie) */
.pull-quote { margin-top: 0.6em; }
.es-row { display: flex; gap: 14px; margin-top: 0.7em; }
.es-row > div {
  flex: 1; text-align: center; font-size: 19px; line-height: 1.2; color: var(--dark-gray);
  border-top: 3px solid var(--spirit-blue); padding-top: 6px;
}
.es-row .es { display: block; font-family: var(--headline); font-size: 40px; color: var(--sluh-blue); }
.pillars > div { padding: 0.5em 1em; }
.pull-quote { margin-top: 0.5em; font-size: 32px; }
.es-row { margin-top: 0.5em; }