/*
  DragoFi content blocks: the reusable styles for articles, admin pages and the site's own pages.

  Loaded on every page AND inside the admin editor, so a block looks the same while writing.
  Every block is shown with examples at /admin/style-guide/.

    Article blocks (Formats > Article blocks)     Page blocks (Formats > Page blocks)
      .callout-scenario   a worked example          p.lede         larger opening paragraph
      .callout-takeaway   one key point             p.pull-quote   a short statement set large
      .callout-caution    a limit or risk           ol.steps       numbered steps with big numerals
      .callout-action     a small next step         ul.checklist   list with check marks
                                                    ul.facts       short facts, the bold words set large

  Colors are written out here (not taken from site.css) so the editor can use this file on its own.
*/

/* The display font for headings and large figures. Declared here so the site, the editor
   and the admin style guide all get it. Fraunces, SIL Open Font License (static/fonts/). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}


/* ---- Article blocks: callout boxes ---------------------------------------- */
/* Each box is <div class="callout callout-scenario"> ... </div>; the label at the top
   ("Scenario", "Takeaway" etc.) is added here automatically, so don't type it. */

.callout {
  margin: 1.6em 0;
  padding: 18px 22px 6px;
  border-radius: 12px;
  line-height: 1.6;
}

/* The small label at the top of each box */
.callout::before {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.callout p,
.callout ul,
.callout ol {
  margin: 0 0 1em;
}

/* Scenario: a worked example with numbers. Tinted card, clearly labeled. */
.callout-scenario {
  border: 1px solid #CFE3CC;
  background: #EEF6EC;
}
.callout-scenario::before {
  content: "Scenario";
  color: #2F6B30;
}

/* Takeaway: one memorable insight. Quiet gold accent. */
.callout-takeaway {
  border-left: 5px solid #DBB71F;
  border-radius: 0 12px 12px 0;
  background: #FFFBEC;
}
.callout-takeaway::before {
  content: "Takeaway";
  color: #8A6D0B;
}

/* Caution: an important limit or risk. Warm, calm, not alarming. */
.callout-caution {
  border: 1px solid #EBCFB4;
  border-left: 5px solid #C9824A;
  background: #FBF3EC;
}
.callout-caution::before {
  content: "Caution";
  color: #9A5527;
}

/* Action: questions or a small next step. Roomy, checklist feel. */
.callout-action {
  border: 1px dashed #9CC69B;
  background: #FFFFFF;
}
.callout-action::before {
  content: "Your next step";
  color: #376837;
}
.callout-action li {
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .callout { padding: 16px 16px 4px; }
}


/* ---- Page blocks ------------------------------------------------------------ */

/* Lede: a larger opening paragraph that sets up the page */
p.lede {
  color: #24452A;
  font-size: 1.25em;
  line-height: 1.55;
}

/* Pull quote: one short sentence set large, with a gold rule. Use at most once or twice a page. */
p.pull-quote {
  margin: 1.4em 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid #DBB71F;
  color: #24452A;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.3;
}

/* Steps: a numbered list where each number is set large (01, 02, 03) */
ol.steps {
  margin: 1.2em 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

ol.steps > li {
  position: relative;
  min-height: 2.6em;
  padding: 0.2em 0 0 3.4em;
  counter-increment: step;
}

ol.steps > li + li {
  margin-top: 0.9em;
}

ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.1em;
  left: 0;
  color: #5DA95C;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1;
}

/* Checklist: a list with green check marks */
ul.checklist {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

ul.checklist > li {
  position: relative;
  padding-left: 1.9em;
}

ul.checklist > li + li {
  margin-top: 0.5em;
}

ul.checklist > li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0.15em;
  width: 0.45em;
  height: 0.8em;
  border: solid #5DA95C;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Facts: short items side by side; the bold words at the start of each are set large.
   Write each item as: <strong>Free</strong> to use, with no account needed */
ul.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2em 2em;
  margin: 1.6em 0;
  padding: 1.2em 0;
  border-top: 1px solid #D9DED5;
  border-bottom: 1px solid #D9DED5;
  list-style: none;
}

ul.facts > li {
  color: #5B6168;
  font-size: 0.95em;
  line-height: 1.45;
}

ul.facts > li > strong:first-child {
  display: block;
  margin-bottom: 4px;
  color: #24452A;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.15;
}