/*
 * site-chrome.css — one header and one footer for the public marketing pages.
 *
 * Before this, startdiscipling.com wore five different header class names
 * (.header, .landing-header, .site-header, .cc-header, plus .header-nav-mini),
 * five nav treatments, two heights, and five pages carried no header or footer
 * at all — a visitor landing on a guide from search had no way into the site.
 * Each page had hand-rolled its own (Robert, 13 Sep: "update all front facing
 * pages so they are congruent and flow through to each page well").
 *
 * The classes are namespaced sc-* so they cannot collide with anything a page
 * already defines; the old rules are simply left orphaned.
 *
 * Built to be reused by missiontripplanning.com, so everything that differs
 * between sites is a custom property. Override them on :root in the host page:
 *
 *   :root { --sc-accent: #2563eb; --sc-accent-ink: #fff; }
 */

:root {
  --sc-brand: #2b6b5f;        /* wordmark + active nav */
  --sc-brand-dark: #1f4e45;
  --sc-accent: #c4451a;       /* the one button in the bar */
  --sc-accent-ink: #ffffff;
  --sc-ink: #12201d;
  --sc-ink-muted: #5b6b67;
  --sc-ink-faint: #7c8a86;
  --sc-surface: #ffffff;
  --sc-surface-soft: #f7f9f8;
  --sc-hairline: #e8edeb;
  --sc-footer-bg: #12201d;
  --sc-footer-ink: #c9d4d1;
  --sc-header-h: 68px;
  --sc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* The header is sticky, so an in-page anchor would otherwise drop its target
   underneath the bar. Keep jumps clear of it. */
html {
  scroll-padding-top: calc(var(--sc-header-h) + 16px);
}

/* ---------------------------------------------------------------- header */

.sc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-hairline);
  font-family: var(--sc-font);
  /* The shadow arrives on scroll rather than sitting there permanently, which
     is most of what separates a current bar from a 2014 one. */
  box-shadow: none;
  transition: box-shadow 0.18s ease;
}

.sc-header.is-scrolled {
  box-shadow: 0 1px 3px rgba(18, 32, 29, 0.08);
}

.sc-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  min-height: var(--sc-header-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.sc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sc-brand);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.sc-brand:hover {
  text-decoration: none;
  color: var(--sc-brand-dark);
}

.sc-brand img {
  height: 32px;
  width: auto;
  display: block;
}

.sc-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

/* Plain text links. Boxing every nav item was the single most dated thing
   about the old bar. The box is reserved for the one call to action. */
.sc-nav a,
.sc-nav button.sc-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--sc-ink-muted);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.sc-nav a:hover,
.sc-nav button.sc-link:hover {
  color: var(--sc-ink);
  background: var(--sc-surface-soft);
  text-decoration: none;
}

/* The page you are on says so. */
.sc-nav a[aria-current='page'] {
  color: var(--sc-brand);
  font-weight: 600;
}

.sc-nav .sc-login {
  color: var(--sc-brand);
  font-weight: 600;
}

.sc-nav .sc-cta {
  margin-left: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(18, 32, 29, 0.1);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.sc-nav .sc-cta:hover {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  filter: brightness(1.07);
  box-shadow: 0 2px 6px rgba(18, 32, 29, 0.14);
}

.sc-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: -8px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--sc-ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sc-burger:hover {
  background: var(--sc-surface-soft);
}

.sc-burger svg {
  display: block;
}

.sc-scrim {
  display: none;
  position: fixed;
  inset: var(--sc-header-h) 0 0;
  z-index: 90;
  background: rgba(18, 32, 29, 0.38);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sc-scrim.is-open {
  display: block;
  opacity: 1;
}

.sc-header :focus-visible,
.sc-footer :focus-visible {
  outline: 2px solid var(--sc-brand);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  :root {
    --sc-header-h: 60px;
  }

  .sc-header-inner {
    padding: 0 16px;
  }

  .sc-burger {
    display: inline-flex;
  }

  /* Full-width rows in a white sheet, left aligned, 48px tall, with a scrim
     behind. The old drawer was a centre-aligned gradient panel with no scrim
     and no way to tell it had opened. */
  .sc-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 95;
    display: block;
    max-height: 0;
    overflow: hidden;
    background: var(--sc-surface);
    border-bottom: 1px solid var(--sc-hairline);
    box-shadow: 0 10px 24px -12px rgba(18, 32, 29, 0.3);
    transition: max-height 0.24s ease;
  }

  .sc-nav.is-open {
    max-height: 82vh;
    overflow-y: auto;
  }

  .sc-nav a,
  .sc-nav button.sc-link {
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 0;
    border-bottom: 1px solid var(--sc-hairline);
    font-size: 1rem;
  }

  .sc-nav .sc-cta {
    margin: 14px 20px 18px;
    width: calc(100% - 40px);
    min-height: 46px;
    justify-content: center;
    border-radius: 10px;
    border-bottom: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-header,
  .sc-nav,
  .sc-scrim {
    transition: none;
  }
}

/* ---------------------------------------------------------------- footer */

.sc-footer {
  background: var(--sc-footer-bg);
  color: var(--sc-footer-ink);
  font-family: var(--sc-font);
  padding: 48px 24px 40px;
  margin-top: 0;
}

.sc-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: flex-start;
  justify-content: space-between;
}

.sc-footer-brand {
  flex: 1 1 260px;
  min-width: 0;
}

.sc-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 10px;
}

.sc-footer-mark:hover {
  text-decoration: none;
  color: #ffffff;
}

.sc-footer-mark img {
  height: 28px;
  width: auto;
  display: block;
}

.sc-footer-brand p {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--sc-footer-ink);
  max-width: 42ch;
}

.sc-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
}

.sc-footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 120px;
}

.sc-footer-col h4 {
  margin: 0 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.6;
}

.sc-footer-col a {
  color: var(--sc-footer-ink);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sc-footer-col a:hover {
  color: #ffffff;
  text-decoration: none;
}

.sc-footer-base {
  max-width: 1080px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78125rem;
  line-height: 1.6;
  color: var(--sc-footer-ink);
  opacity: 0.85;
}

.sc-footer-base p {
  margin: 0 0 4px;
}

@media (max-width: 640px) {
  .sc-footer {
    padding: 36px 20px 32px;
  }

  .sc-footer-cols {
    gap: 26px 36px;
  }
}

/* ------------------------------------------------------------ page icons */
/* Drawn icons in place of the emoji these pages used to use. They sit in
   headings, pills and cards, so they align to the text baseline by default. */
/* fill and stroke have to be set on the REFERENCING element: presentation
   attributes on the sprite host's <svg> do not cross into the <use> shadow
   tree, so without this every icon painted as a solid black blob. They are
   inherited CSS properties, so from here they do reach the symbol's paths. */
.sc-ico {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
  overflow: visible;
}

/* -------------------------------------------------------- body link colour */
/* Marketing body copy had no link rule anywhere, so every in-content link
   rendered as default browser blue (#0000EE) with a default underline. */
/* Scoped to links that sit INSIDE a sentence. A plain a:not([class]) also
   caught chip and pill anchors -- the gift guide's jump list, for one -- and
   underlined them. */
.sc-body-links p > a:not([class]),
.sc-body-links li > a:not([class]),
.sc-body-links td > a:not([class]),
.sc-body-links blockquote a:not([class]) {
  color: var(--sc-brand);
  text-decoration: underline;
  text-decoration-color: rgba(43, 107, 95, 0.35);
  text-underline-offset: 2px;
}

.sc-body-links p > a:not([class]):hover,
.sc-body-links li > a:not([class]):hover,
.sc-body-links td > a:not([class]):hover,
.sc-body-links blockquote a:not([class]):hover {
  color: var(--sc-brand-dark);
  text-decoration-color: currentColor;
}

/* ========================================================= Reading rhythm
   Robert, 13 Sep: "emphasize the rhythm of the site like we have been working
   on for the courses on MKDSCPLS. There should be a look, a feel, that welcomes
   people in."
 
   The audit says the prose itself is already healthy on both sites: no
   paragraph over 117 words, medians in the twenties and thirties. What is
   missing is somewhere for the eye to rest. how-to-plan-a-mission-trip.html
   ran 62 paragraphs with no list, quote or callout anywhere in it, and each
   site had invented its own device (.note on one page, .tip on another).
 
   Two devices, shared, used sparingly. A pull-quote for a line worth slowing
   down on, and a note for the thing a reader would otherwise learn the hard
   way. Not more than two on a page.
   ------------------------------------------------------------------------ */

.sc-pull {
  margin: 34px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--sc-brand);
  font-size: 1.22rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--sc-ink);
  text-wrap: balance;
}

.sc-pull cite {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sc-brand);
}

.sc-note {
  margin: 30px 0;
  padding: 18px 22px;
  background: var(--sc-surface-soft);
  border: 1px solid var(--sc-hairline);
  border-left: 3px solid var(--sc-brand);
  border-radius: 10px;
}

.sc-note > :first-child { margin-top: 0; }
.sc-note > :last-child { margin-bottom: 0; }

.sc-note-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-brand);
}

.sc-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--sc-ink-muted);
}

@media (max-width: 640px) {
  .sc-pull { font-size: 1.08rem; padding-left: 18px; }
  .sc-note { padding: 15px 17px; }
}

/* ---- big figures ----
   Robert, 13 Sep: "even large numbers or letters can help bring people in or
   callouts to draw people's attention to potent ideas that emphasize the power
   of the platform."

   A stat row is a rest-device and an argument at the same time, so it earns its
   place twice. The rule that keeps it from becoming decoration: only use it
   where the figures ARE the point of the section. A number nobody would quote
   back to you does not belong at 2.75rem.

   This replaces .stats-row / .stat-number, which existed on one MTP page only
   and at half the size. */

.sc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px 40px;
  margin: 36px 0;
  padding: 30px 28px;
  background: var(--sc-surface-soft);
  border: 1px solid var(--sc-hairline);
  border-radius: 14px;
}

.sc-stat {
  text-align: center;
}

.sc-stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sc-brand);
  font-variant-numeric: tabular-nums;
}

.sc-stat-number small {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0;
}

.sc-stat-label {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--sc-ink-muted);
}

/* On a coloured ground (a hero), the figures invert rather than fight it. */
.sc-stats.is-on-brand {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

.sc-stats.is-on-brand .sc-stat-number { color: #ffffff; }
.sc-stats.is-on-brand .sc-stat-label { color: rgba(255, 255, 255, 0.86); }

@media (max-width: 640px) {
  .sc-stats { padding: 24px 18px; gap: 22px 24px; }
  .sc-stat-number { font-size: 2.25rem; }
}