/* ══════════════════════════════════════════
   Shared styles for the Quarto Book -
   ══════════════════════════════════════════ */

/* ── Box styles ── */
.box-def {
  border-left:4px solid #2ecc71; background:#eafaf1;
  padding:1rem 1.2rem; border-radius:0 6px 6px 0;
  margin:1.5rem 0; box-sizing:border-box; max-width:95%;
}
.box-def > strong:first-child { color:#2ecc71; }

.box-thm {
  border-left:4px solid #8e44ad; background:#f4ecf7;
  padding:1rem 1.2rem; border-radius:0 6px 6px 0;
  margin:1.5rem 0.0; box-sizing:border-box; max-width:95%;
}
.box-thm > strong:first-child { color:#8e44ad; }

.box-note {
  border-left:4px solid #3498db; background:#ebf5fb;
  padding:1rem 1.2rem; border-radius:0 6px 6px 0;
  margin:1.5rem 0; box-sizing:border-box; max-width:95%;
}
.box-note > strong:first-child { color:#3498db; }

.box-proof {
  border-left:4px solid #7f8c8d; background:#f7f9f9;
  padding:1rem 1.2rem; border-radius:0 6px 6px 0;
  margin:1.5rem 0; box-sizing:border-box; max-width:95%;
}

.box-warn {
  border-left:4px solid #e67e22; background:#fef5e7;
  padding:1rem 1.2rem; border-radius:0 6px 6px 0;
  margin:1.5rem 0; box-sizing:border-box; max-width:95%;
}
.box-warn > strong:first-child { color:#e67e22; }

.fig-placeholder {
  background:#f9f9f9; border:1px dashed #999; border-radius:6px;
  padding:1rem; margin:1.5rem auto; text-align:center; color:#999;
  font-style:italic; max-width:95%;
}

.etymology {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 0 0 2rem 0;
  max-width: 95%;
  font-size: 0.95rem;
  color: #495057;
}
.etymology strong { color: #343a40; }

/* ── Book cover header ── */
.cover-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.2rem 2rem;
  margin: 0 0 2rem 0;
  border-top: 3px solid #003082;
  border-bottom: 1px solid #c8d4e8;
  background: linear-gradient(135deg, #f0f4fb 0%, #e8eef8 100%);
  border-radius: 0 0 8px 8px;
}

.cover-logo {
  display: flex;            /* center the <img> vertically inside the cell */
  align-items: center;
  flex-shrink: 0;
  transform: translateY(8px);
}

.unipi-logo {
  display: block;           /* drop the inline-image baseline gap          */
  height: 95px;
  width: auto;
  flex-shrink: 0;
}

.cover-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
  margin-right: auto;     /* push text to the right, before logo */
}

.cover-degree {
  font-size: 1.35rem;
  font-weight: 600;
  color: #003082;
  letter-spacing: 0.02em;
}

.cover-course {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a202c;
  margin-top: 0.0rem;
  letter-spacing: 0.01em;
}

/* ── Quartz figure info panel ── */
.quartz-info {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
  border: 1px solid #ffe082;
  border-left: 4px solid #f9a825;
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.1rem;
  font-size: 0.90rem;
  color: #4a4a4a;
  height: 100%;
  box-sizing: border-box;
}
.quartz-info strong { color: #5d4037; }
.quartz-info table { font-size: 0.85rem; margin: 0.6rem 0; }

/* ── Showcase chapter extras ── */
.demo-box {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1rem 0;
}

/* ── Figure captions: bold label ── */
figcaption,
.quarto-float-caption,
.figure-caption {
  font-size: 0.88rem;
  color: #555;
}
/* JS (in _quarto.yml header) injects <strong> around "Figure X.X:" */
figcaption strong,
figcaption p strong,
.quarto-float-caption strong,
.quarto-float-caption p strong,
.figure-caption strong,
p.caption strong {
  font-weight: 700;
  color: #333;
}

/* ── Inline "Optional" badge used in section headings ── */
/* ── Book icon in front of @cite citations inside footnotes ──
   Quarto wraps every @cite key in <span class="citation"> with the
   bibliography handle as data-cites="…".  We inject a small book glyph
   before each citation, but ONLY inside the footnote section, so the
   in-text [@author2020] citations remain clean.                       */
section.footnotes .citation::before,
.footnotes-list .citation::before,
.footnotes .citation::before {
  content: "\01F4D6\00A0";   /* 📖 + non-breaking space                */
  font-style: normal;
  margin-right: 0.05em;
  font-size: 0.95em;
  /* Force monochrome text presentation (browser-dependent fallback)   */
  font-variant-emoji: text;
}

/* ── Footnotes: pack the items tight (no blank-line gap) ── */
section.footnotes ol > li,
.footnotes ol > li,
.footnotes-list > li {
  margin-top: 0;
  margin-bottom: 0;
}
section.footnotes ol > li > p,
.footnotes ol > li > p,
.footnotes-list > li > p {
  margin-top: 0;
  margin-bottom: 0.15em;
}

/* ── Custom callout icons ──
   Replace the default Bootstrap icons with maths symbols that fit the
   semantics of the project's callouts.
   - Definition (callout-note, blue)  → ≡  (identity / "by definition")
   - Theorem    (callout-tip,  green) → ∴  (therefore / proof)            */
div.callout-note > .callout-header .callout-icon::before,
div.callout-tip  > .callout-header .callout-icon::before {
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-style: normal;
  font-weight: 700;
  font-size: 1.45em;
  line-height: 0.85;
  text-align: center;
}
div.callout-note > .callout-header .callout-icon::before { content: "\2261"; } /* ≡ */
div.callout-tip  > .callout-header .callout-icon::before { content: "\2234"; } /* ∴ */

/* ── OPTIONAL marker: document-with-plus icon ──
   The qmd-side span is empty: `[]{.badge-optional}`.  The CSS draws
   a grey bold-outline document with a large folded corner and a
   solid disc carrying a white "+" at its bottom-right — marking the
   optional "additional material" sections.                           */
.badge-optional {
  display: inline-block;
  position: relative;           /* anchor for the hover tooltip           */
  margin-left: 0.25em;          /* ordinary word-space gap                */
  line-height: 1;               /* font-size inherited: icon scales with
                                   the surrounding text (headings too)    */
}
/* hover tooltip: "optional material" (fixed size, not heading-scaled) */
.badge-optional::after {
  content: "this is an optional section";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #555;
  color: #fff;
  font: 400 0.72rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}
.badge-optional:hover::after {
  opacity: 1;
}

/* ── ?no-optional mode: hide every section/callout marked []{.badge-optional}.
   The class is stamped on <html> by _header.html when the page URL carries
   the ?no-optional query — scripts/print-pdf.sh uses it to produce PDFs
   without the optional material.                                        */
.no-optional div.callout:has(.badge-optional),
.no-optional section:has(> h1 .badge-optional),
.no-optional section:has(> h2 .badge-optional),
.no-optional section:has(> h3 .badge-optional),
.no-optional section:has(> h4 .badge-optional) {
  display: none !important;
}

/* ── RECAP marker: small "RECAP" pill (same family as .badge-optional) ──
   For sections that revisit material from prerequisite courses.        */
.badge-recap {
  display: inline-block;
  position: relative;
  margin-left: 0.25em;
  line-height: 1;
}
.badge-recap::before {
  content: "RECAP";
  display: inline-block;
  font: 700 0.60em/1 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;
  letter-spacing: 0.05em;
  color: #888;
  border: 1.5px solid currentColor;
  border-radius: 0.35em;
  padding: 0.14em 0.32em;
  vertical-align: 0.12em;
}
.badge-recap::after {
  content: "recap of background material";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #555;
  color: #fff;
  font: 400 0.72rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}
.badge-recap:hover::after {
  opacity: 1;
}
.badge-optional::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 3 H7.2 A2.2 2.2 0 0 0 5 5.2 V18.8 A2.2 2.2 0 0 0 7.2 21 H11.3'/%3E%3Cpath d='M13.2 3 L19 8.8 V12'/%3E%3Cpath d='M13.2 3 V7 A1.8 1.8 0 0 0 15 8.8 H19'/%3E%3Ccircle cx='17.5' cy='17.5' r='6' fill='%23888' stroke='none'/%3E%3Cpath d='M17.5 14.7 V20.3 M14.7 17.5 H20.3' stroke='white'/%3E%3C/svg%3E")
              no-repeat center / contain;
}

/* ── Side-by-side figure/text .columns layouts ─────────────────────────
   Small gap between columns; stack vertically on narrow screens so the
   half-width interactive figures stay usable on mobile.               */
.columns { gap: 1.6rem; align-items: flex-start; }
.columns > .column + .column { padding-left: 1.6rem; box-sizing: border-box; }
@media (max-width: 640px) {
  .columns { display: block !important; }
  .columns .column { width: 100% !important; }
  .columns > .column + .column { padding-left: 0; }
}

/* ── Take-home message boxes ─────────────────────────────────────────
   `.callout-important` is dedicated to the end-of-chapter take-home
   messages (default title set in _quarto.yml → language). Book-red
   accent + light tint to stand out from the theorem/definition boxes. */
div.callout-important.callout {
  border-left: 5px solid #D95319 !important;
  background-color: rgba(217, 83, 25, 0.035);
}
div.callout-important .callout-header {
  background-color: rgba(217, 83, 25, 0.12);
  font-weight: 600;
}
div.callout-important .callout-body li {
  margin-bottom: 0.35rem;
}

/* ── Arrow lists ─────────────────────────────────────────────────────
   Markdown lists rendered with red arrow markers instead of bullets.
   Available anywhere with  ::: {.arrow-list} … :::  around the list;
   lists inside the end-of-chapter .callout-important boxes get the
   same treatment automatically. */
.arrow-list ul,
div.callout-important .callout-body ul {
  list-style: none;
  padding-left: 0.25rem;
}
.arrow-list ul > li,
div.callout-important .callout-body ul > li {
  position: relative;
  padding-left: 1.55rem;
  margin-bottom: 0.5rem;
}
.arrow-list ul > li::before,
div.callout-important .callout-body ul > li::before {
  content: "➜";
  position: absolute;
  left: 0;
  top: 0;
  color: #D95319;
  font-weight: 600;
}