/*!
 * Skhillz Learning System - shared page primitives
 *
 * brand.css fixes the frame. This fixes what is inside it.
 *
 * The audit found 17 different h1 definitions across 29 pages, 12 h2s, 11
 * section heads, 11 button definitions and 8 eyebrows. Three design families
 * had grown up side by side, using the same class names with different values.
 *
 * The determination: the home page is the blueprint. Worth knowing that on two
 * of these the home page was in the minority. Its .eyebrow is a pill with a
 * background and border and only two pages had it, while sixteen used plain
 * uppercase text; its .btn-primary gradient ends #4B72F2 where sixteen pages
 * ended #3091FF. Both are the home page's, because that is the blueprint.
 *
 * Loaded after each page's own <style>, so these win. It deliberately covers
 * type scale, section rhythm and the small shared components only. It does not
 * touch grids, cards or hero compositions, because pages are allowed to be
 * laid out differently; they are not allowed to be a different brand.
 *
 * Chrome lives in brand.css under .sls-. Nothing here can reach it.
 */

/* ---- Type scale -------------------------------------------------------- */
/* The home page's own value, not an average of the seventeen. At 1440px the
   7vw term governs, so this lands near 6.3rem; the 7.35rem ceiling only
   applies above about 1680px. */
h1 {
  font-size: clamp(4.2rem, 7vw, 7.35rem);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--navy);
  text-wrap: balance;
}

/* A hero headline takes its color from the hero, not from the rule above.
   27 of the 29 heroes are dark and already set color:#fff on .hero itself,
   and a bare h1 selector beats inheritance, so without this the headline is
   painted navy on navy and is effectively invisible. */
.hero h1 { color: inherit; }
/* The two light heroes say so with a class, because page.css is loaded after
   each page's own <style> and would otherwise win the tie against them. */
.hero-light h1 { color: var(--navy); }
h2 {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--navy);
  text-wrap: balance;
}
h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}

/* On a dark band the headings invert. */
.section.navy h1, .section.navy h2, .section.navy h3,
.cta h1, .cta h2, .cta h3 { color: #fff; }
.section.navy p, .cta p { color: #C7D6F1; }

/* ---- Section rhythm ---------------------------------------------------- */
.section { padding: 88px 0; }
.section.white { background: #fff; }
.section.mist  { background: var(--mist); }
.section.navy  { background: var(--navy); color: #fff; }

.section-head {
  max-width: 880px;
  margin: 0 auto 42px;
  text-align: center;
}
.section-head p { margin: 16px 0 0; color: var(--muted); }
.section.navy .section-head p { color: #C7D6F1; }

/* ---- Eyebrow ----------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: #EEF4FF;
  border: 1px solid #CADBFF;
  /* Not var(--blue). #176CEB on this #EEF4FF pill is 4.34:1, and eyebrow text
     is 12.16px at weight 900, which is not WCAG "large text" (that needs
     18.66px bold), so it must reach 4.5:1. #1560D0 is 5.26:1 and is the
     smallest darkening that clears it. The footer claims WCAG 2.2 AA on every
     page, so this had to be right. --blue is untouched everywhere else. */
  color: #1560D0;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* On a dark band the pill inverts instead of disappearing.
 *
 * .eyebrow-on-dark is applied to the 49 eyebrows that used to carry a pale
 * inline color like #9DEFFF or #ffd4be. That color was the evidence they sat
 * on a dark hero: pale text was right there and is unreadable on the pale pill
 * this file now gives every eyebrow. The inline colors are gone and the
 * intent is preserved as a class. */
.section.navy .eyebrow, .cta .eyebrow, .hero.navy .eyebrow, .eyebrow-on-dark {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
  color: var(--aqua);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 14px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 800;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(7, 31, 85, .18); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn-primary { background: linear-gradient(135deg, var(--blue), #4B72F2); color: #fff; }
.btn-outline { background: #fff; border-color: #BFD1F6; color: var(--navy); }
.btn-orange  { background: var(--orange); color: #472E00; }

/* Outline buttons sitting on a dark band need to be legible. */
.section.navy .btn-outline, .cta .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.cta .btn-primary { background: #fff; color: var(--navy); }

/* ---- Closing call to action -------------------------------------------- */
.cta, .cta-band {
  background:
    radial-gradient(circle at 15% 20%, rgba(77, 216, 255, .22), transparent 23%),
    linear-gradient(135deg, var(--blue), #2244AC);
  color: #fff;
  border-radius: 0;
  padding: 0;
}
.cta .inner, .cta .container, .cta .wrap,
.cta-band .inner, .cta-band .container, .cta-band .wrap { padding-block: 76px; }

/* ---- Scroll reveal ----------------------------------------------------- */
/* The hidden state is gated on a class the script adds, so a script that
   fails to load leaves the content visible instead of blanking the page.
   It was not gated once, and nine pages shipped with their bodies at
   opacity zero. */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.js-reveal .reveal.visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .section { padding: 62px 0; }
  .section-head { margin-bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn { transition: none !important; }
  .btn:hover { transform: none; }
}

/* ---- Decorative wave ----------------------------------------------------
 * .wave::before is left:-5% right:-5%, so it is 110% of the section on
 * purpose: the curve has to be wider than the box for the arc to look shallow.
 * On a full-bleed section that spills 5% past each viewport edge and inflated
 * document.scrollWidth by ~50px on /how-it-works and /reading.
 *
 * overflow-x:clip rather than hidden. `clip` does not create a scroll
 * container, and pairing it with overflow-y:visible is allowed, so the curve
 * keeps its vertical overhang (it sits at top:-58px) and only the horizontal
 * spill is cut. `hidden` would force the other axis to auto and flatten it.
 * ---------------------------------------------------------------------- */
.wave { overflow-x: clip; overflow-y: visible; }

/* ---- Grids that cannot shrink -------------------------------------------
 * A grid item has min-width:auto, so a `1fr` track will not compress below
 * its content's minimum. repeat(4, 1fr) therefore overflows rather than
 * shrinking, and /organizations did exactly that between 681px and about
 * 1100px: .impact-grid pushed 82px past the viewport, because its only
 * breakpoint was at 680px.
 *
 * auto-fit with a minmax floor wraps instead of overflowing, and still shows
 * four across when there is room.
 * ---------------------------------------------------------------------- */
.impact-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* The real cause was the type, not just the track. "Implementation" set at
   35.2px is 299px wide, and the original repeat(4, 1fr) gave each box 238px of
   content even at full desktop width, so this overflowed at every size and
   body{overflow-x:hidden} hid it. A single unbreakable word cannot be made to
   fit by the grid alone.

   Smaller type, a wider minimum track so it goes three across rather than
   four when space is tight, and break-word as a floor so no future word can
   reintroduce this. */
.impact-box strong {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.impact-box { min-width: 0; }

/* ---- Brand icons ------------------------------------------------------ */
/* Tracy's artwork, replacing emoji in the places it matches. Emoji are drawn
   by the operating system, so the same character is a different picture on
   every device, which a licensed product cannot have. */
.bi { width: 62px; height: 62px; display: block; margin: 0 0 14px; }
.bi-mark { width: 74px; height: 74px; display: block; margin: 0 auto 14px; }
.section-head .bi-mark { margin-bottom: 10px; }
@media (max-width: 760px) { .bi { width: 54px; height: 54px; }
  .bi-mark { width: 62px; height: 62px; } }