/* ==========================================================================
   SkillMzansi brand stylesheet — v1.0
   Drop-in design tokens + the component patterns used across the handbook,
   the Brand & Growth Playbook, the brand pack and the presentation template.

   Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap
   ========================================================================== */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --sm-paper: #fbf7ed;
  --sm-paper-deep: #efe6d2;
  --sm-cream-white: #fffdf6;
  --sm-black: #000000;
  --sm-ink: #0d1418;
  --sm-muted: #5c574f;
  --sm-gold: #c9a962;
  --sm-green: #087f75;
  --sm-coral: #f2714e;
  --sm-line: #d9cfba;
  --sm-white: #ffffff;
  /* print-only tones — softer than pure black, kinder to ink */
  --sm-print-dark: #17231d;
  --sm-print-lime: #b7d83f;

  /* ---- type ------------------------------------------------------------ */
  --sm-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sm-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sm-label: Montserrat, Inter, ui-sans-serif, sans-serif;

  /* ---- spacing (multiples of 8) ---------------------------------------- */
  --sm-s2: 8px;
  --sm-s3: 16px;
  --sm-s4: 24px;
  --sm-s5: 40px;
  --sm-s6: 64px;
  --sm-s7: 104px;

  /* ---- layout ---------------------------------------------------------- */
  --sm-gutter: 72px;          /* one variable drives every horizontal edge */
  --sm-measure: 680px;        /* body copy line length */
  --sm-column: 920px;         /* document column */
  --sm-container: 1180px;     /* marketing container */
}

@media (max-width: 900px) { :root { --sm-gutter: 40px; } }
@media (max-width: 580px) { :root { --sm-gutter: 24px; } }

/* ==========================================================================
   Base
   ========================================================================== */

.sm-paper {
  color: var(--sm-ink);
  background: var(--sm-paper);
  font-family: var(--sm-body);
  line-height: 1.65;
}

.sm-dark {
  color: var(--sm-white);
  background: var(--sm-black);
  font-family: var(--sm-body);
  line-height: 1.65;
}

.sm-container { width: min(var(--sm-container), calc(100% - 48px)); margin-inline: auto; }
.sm-measure { max-width: var(--sm-measure); }

/* ==========================================================================
   Typography
   ========================================================================== */

.sm-eyebrow {
  margin: 0 0 12px;
  color: var(--sm-green);
  font-family: var(--sm-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sm-dark .sm-eyebrow,
.sm-eyebrow--gold { color: var(--sm-gold); }

.sm-display-xl,
.sm-display-l,
.sm-display-m,
.sm-display-s {
  margin: 0;
  font-family: var(--sm-display);
  font-weight: 700;
}
.sm-display-xl { font-size: clamp(3rem, 6.8vw, 5.6rem); line-height: .98; letter-spacing: -.04em; }
.sm-display-l  { font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.035em; }
.sm-display-m  { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; }
.sm-display-s  { font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em; }

.sm-lede { max-width: var(--sm-measure); color: var(--sm-muted); font-size: 1.02rem; }
.sm-dark .sm-lede { color: rgb(255 255 255 / .72); }

.sm-label {
  font-family: var(--sm-label);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Lists — green markers, generous rhythm */
.sm-list { margin: 8px 0 24px; padding-left: 25px; }
.sm-list li { margin: 6px 0; padding-left: 4px; }
.sm-list li::marker { color: var(--sm-green); font-weight: 800; }

/* ==========================================================================
   Components
   ========================================================================== */

/* Gold underline bar — the single accent under a heading */
.sm-rule-gold { width: 44px; height: 3px; margin-top: 14px; background: var(--sm-gold); }

/* Quote panel */
.sm-quote {
  margin: 30px 0;
  padding: 25px 28px;
  color: var(--sm-ink);
  background: #f0eadb;
  border-left: 5px solid var(--sm-green);
  font-family: var(--sm-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.4;
}
.sm-quote p { margin: 0; }

/* Callout — tinted panel with a coloured top edge */
.sm-callout {
  margin: 32px 0;
  padding: 25px 28px;
  background: var(--sm-paper-deep);
  border: 1px solid #cdd9c8;
  border-top: 5px solid var(--sm-green);
}
.sm-callout--example { background: #f3ecdc; border-color: #dfd0af; border-top-color: var(--sm-coral); }
.sm-callout--tip { background: #f2f4dc; border-color: #d8ddaa; border-top-color: #829b28; }

/* Accent box — coral left border, used for goals/outcomes */
.sm-accent-box {
  max-width: 620px;
  padding: 24px 28px;
  background: rgb(255 255 255 / .55);
  border-left: 4px solid var(--sm-coral);
}

/* Full-bleed dark chapter header (negative margin = gutter) */
.sm-chapter-header {
  margin: calc(var(--sm-gutter) * -1);
  margin-bottom: 56px;
  padding: var(--sm-gutter);
  color: var(--sm-white);
  background: var(--sm-black);
}
.sm-chapter-header .sm-eyebrow { color: var(--sm-gold); }

/* Table — black header, alternating paper rows */
.sm-table { width: 100%; border-collapse: collapse; background: rgb(255 255 255 / .4); }
.sm-table th,
.sm-table td { padding: 13px 16px; border: 1px solid #cfc4ad; text-align: left; }
.sm-table thead th {
  color: var(--sm-white);
  background: var(--sm-black);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sm-table tbody tr:nth-child(even) { background: var(--sm-paper-deep); }

/* Buttons */
.sm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  color: var(--sm-black);
  background: var(--sm-gold);
  border: 1px solid var(--sm-gold);
  font-family: var(--sm-label);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.sm-btn--ghost { color: var(--sm-gold); background: none; border-color: rgb(201 169 98 / .55); }
.sm-btn--ghost:hover { color: var(--sm-black); background: var(--sm-gold); }

/* Tile — bordered card with a label bar and a preview stage */
.sm-tile { border: 1px solid var(--sm-line); background: rgb(255 255 255 / .5); }
.sm-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sm-line);
}
.sm-tile__stage { display: grid; place-items: center; min-height: 210px; padding: var(--sm-s4); }

/* ==========================================================================
   Motion
   ========================================================================== */

.sm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.sm-reveal.is-in { opacity: 1; transform: none; }

@keyframes sm-rise { 0%, 100% { transform: scaleY(.35); opacity: .5; } 45% { transform: scaleY(1); opacity: 1; } }
@keyframes sm-sweep { from { transform: translateX(-130%); } to { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sm-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Print — A4
   ========================================================================== */

@media print {
  @page { size: A4 portrait; margin: 16mm 16mm 18mm; }

  .sm-paper, .sm-dark { color: #111; background: #fff; font-size: 10.5pt; line-height: 1.5; }
  .sm-screen-only { display: none !important; }

  /* Dark blocks go green-black in print, eyebrows go lime */
  .sm-chapter-header {
    margin: 0 0 12mm;
    padding: 16mm 14mm;
    color: #fff !important;
    background: var(--sm-print-dark) !important;
    break-before: page;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .sm-chapter-header .sm-eyebrow { color: var(--sm-print-lime) !important; }

  .sm-table thead th {
    background: var(--sm-print-dark) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .sm-quote, .sm-callout, .sm-table, .sm-accent-box { break-inside: avoid; }
  h1, h2, h3, .sm-display-xl, .sm-display-l, .sm-display-m, .sm-display-s { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  a { color: inherit; text-decoration: none; }
}