/* ============================================================
   ORORO STUDY BOOKS — Custom callout box styles
   ------------------------------------------------------------
   Each of your tag types gets its own colour and label.

   HOW TO CHANGE A COLOUR:
   Find the box in the "PALETTE" section near the bottom.
   Each box sets just two colours:
       --box-accent  = the strong colour (left bar + title text)
       --box-soft    = the pale colour  (header background)
   Change those two hex codes and the whole box re-themes.
   You never need to touch the styling rules above the palette.
   ============================================================ */


/* ---- 1. Shared shape & spacing for every Ororo box -------- */
.callout[class*="box-"] {
  --box-accent: #666666;                 /* fallback, overridden below */
  --box-soft:   #f1f3f5;                  /* fallback, overridden below */
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 5px solid var(--box-accent);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  margin: 1.4rem 0;
  overflow: hidden;
}

/* ---- 2. The title row (header) ---------------------------- */
.callout[class*="box-"] > .callout-header {
  background: var(--box-soft) !important;
  padding: 0.55rem 0.95rem;
  align-items: center;
}

.callout[class*="box-"] .callout-title-container {
  color: var(--box-accent);
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---- 3. The content area ---------------------------------- */
.callout[class*="box-"] .callout-body-container,
.callout[class*="box-"] .callout-body {
  padding: 0.85rem 0.95rem;
  line-height: 1.7;
}

/* The little expand/collapse arrow on collapsible boxes */
.callout[class*="box-"] .callout-btn-toggle,
.callout[class*="box-"] .callout-toggle {
  color: var(--box-accent);
}


/* ============================================================
   PALETTE  —  the only part you'll usually edit.
   Format:  .callout.box-NAME { --box-accent: X; --box-soft: Y; }
   ============================================================ */

/* Curiosity Corner — the recurring signature box (violet) */
.callout.box-curiosity   { --box-accent: #7048e8; --box-soft: #f3f0ff; }

/* Definition (blue) — permanent, not collapsible */
.callout.box-definition  { --box-accent: #1c7ed6; --box-soft: #e7f5ff; }

/* Principle / Law (crimson) — permanent, not collapsible */
.callout.box-law         { --box-accent: #e03131; --box-soft: #fff0f0; }

/* Sidebar quick question (teal) — collapsible */
.callout.box-sidebar     { --box-accent: #0ca678; --box-soft: #e6fcf5; }

/* Extra Numerical (orange) — collapsible */
.callout.box-numerical   { --box-accent: #f76707; --box-soft: #fff4e6; }

/* Side Note (slate grey) — collapsible */
.callout.box-sidenote    { --box-accent: #5c6773; --box-soft: #eef1f4; }

/* Scenario (pink) — collapsible */
.callout.box-scenario    { --box-accent: #d6336c; --box-soft: #fff0f6; }

/* Real Incident / Discovery (warm brown) — collapsible */
.callout.box-incident    { --box-accent: #9c6b30; --box-soft: #f6efe7; }

/* Real-World Application (green) — collapsible */
.callout.box-application { --box-accent: #2f9e44; --box-soft: #ebfbee; }

/* Solved Example (ink) — deliberately neutral.
   There are 205 of these and they run long, so a bright
   colour here would drown out Definition and Law.
   Change the two hex codes if you'd rather it stood out. */
.callout.box-example     { --box-accent: #212529; --box-soft: #f1f3f5; }

/* Try Yourself (cyan) — an activity for the student to do */
.callout.box-tryyourself { --box-accent: #1098ad; --box-soft: #e3fafc; }


/* ============================================================
   FIGURE PLACEHOLDER
   Used while the real diagram image is not ready yet.
   Replace with a real image when you have it (see notes).
   ============================================================ */
.figure-placeholder {
  border: 2px dashed #adb5bd;
  border-radius: 10px;
  background: #f8f9fa;
  color: #495057;
  padding: 1.1rem 1rem;
  margin: 1.5rem 0;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
}
.figure-placeholder strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #868e96;
  margin-bottom: 0.4rem;
}


/* ============================================================
   DARK MODE  (only applies if your Quarto theme has a dark toggle)
   ============================================================ */
[data-bs-theme="dark"] .callout[class*="box-"] > .callout-header,
body.quarto-dark .callout[class*="box-"] > .callout-header {
  background: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .callout[class*="box-"],
body.quarto-dark .callout[class*="box-"] {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .figure-placeholder,
body.quarto-dark .figure-placeholder {
  background: rgba(255, 255, 255, 0.03);
  border-color: #495057;
  color: #ced4da;
}

@media (prefers-reduced-motion: reduce) {
  .callout[class*="box-"] { transition: none; }
}