/* Shared base styles - aligned with Quarto callout system */
details.fbx-default,
details.fbx-answer,
details.fbx-question {
  /* Quarto-aligned dimensions */
  --text-color: #3c3c3c;
  --font-size: 0.9rem;
  /* Matches Quarto: 14.4px */
  --font-family: var(--bs-body-font-family, system-ui, sans-serif);
  --border-radius: 0.5rem;
  /* Increased for smoother rounding (8px) */
  --border-left-width: 5px;
  /* Matches Quarto border width */
  --icon-size: 1.22rem;
  /* Large enough that custom glyphs read in both the side nav and body. */
  --arrow-size: 1.04rem;
  /* Consistent with icon size. */
  --padding-y: 0.5rem;
  /* Reduced for snugger fit */
  --padding-x: 0.9rem;
  /* Leaves breathing room around icons and title text. */
  --padding-summary-y: 0.5rem;
  /* Set for exactly 35px header height */

  /* Quarto-style color system
     --background-color and --title-background-color are set by foldbox.lua
     from YAML config (as low-opacity rgba) on the callout class selector.
     Do NOT redeclare them here — that would override the Lua-generated
     values because a direct declaration beats inheritance. */
  --border-color: var(--color2, #acacac);

  /* Quarto-aligned borders and spacing */
  border: 1px solid #dee2e6;
  /* Matches Quarto's subtle border */
  border-left: var(--border-left-width) solid var(--border-color);
  border-radius: var(--border-radius);
  margin: 0.75rem 0;
  /* Reduced margin for less prominent appearance */
  overflow: hidden;
  color: var(--text-color);
  background-color: var(--background-color, #f8f9fa);
  box-shadow: 0 6px 18px rgba(31, 95, 122, 0.08);
  /* Subtle Arch2 blue shadow */
}

/* The Lua filter emits an outer Div for ids, xrefs, and Quarto book plumbing,
   then inserts the actual rendered callout as an inner <details>. Keep all
   visual styling on the inner foldbox so Quarto's native .callout shell never
   appears behind custom callouts. */
div.fbx-wrapper.callout {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 1.45rem 0 !important;
  padding: 0 !important;
}

div.fbx-wrapper.callout > p:empty {
  display: none;
}

div.fbx-wrapper.callout > details.fbx-default,
div.fbx-wrapper.callout > p:empty + details.fbx-default {
  margin: 0;
}

/* Remove default marker */
details.fbx-default summary,
details.fbx-answer summary,
details.fbx-question summary {
  list-style: none;
}

details.fbx-default summary::-webkit-details-marker,
details.fbx-answer summary::-webkit-details-marker,
details.fbx-question summary::-webkit-details-marker {
  display: none;
}

/* Keep foldbox headers on Quarto's sans stack, independent of page prose. */
body div details.fbx-default>summary,
body div details.fbx-answer>summary,
body div details.fbx-question>summary,
body details.fbx-default>summary,
body details.fbx-answer>summary,
body details.fbx-question>summary {
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

details.fbx-default,
details.fbx-answer,
details.fbx-question {
  --custom-font-weight: 700;
}

details.fbx-default>summary,
details.fbx-answer>summary,
details.fbx-question>summary {
  font-weight: var(--custom-font-weight) !important;
}

/* Summary layout - Quarto-aligned typography */
details.fbx-default>summary,
details.fbx-answer>summary,
details.fbx-question>summary {
  position: relative;
  background-color: var(--title-background-color, #f8f9fa);
  color: var(--text-color);
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
  font-size: var(--font-size) !important;
  /* Now 0.9rem (14.4px) like Quarto */
  font-weight: 700 !important;
  opacity: 1;
  /* Remove opacity for clarity */
  display: flex;
  align-items: center;
  /* Better alignment */
  justify-content: space-between;
  padding: var(--padding-summary-y) var(--padding-x);
  padding-left: calc(var(--padding-x) + var(--icon-size) + 0.72rem);
  /* Leave visible air between the icon and title text. */
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  text-align: left;
  line-height: 1.3;
  /* Reduced for snugger fit */
}

/* Ensure summary text (strong element) is left-aligned for foldbox callouts. */
details.fbx-default>summary strong,
details.fbx-answer>summary strong,
details.fbx-question>summary strong {
  text-align: left !important;
  flex-grow: 1;
  display: block;
  font-size: var(--font-size) !important;
  /* Enforce 0.9rem to prevent Quarto overrides */
}

/* Arrows */
details.fbx-default>summary::after,
details.fbx-answer>summary::after,
details.fbx-question>summary::after {
  content: "";
  display: inline-block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%233c3c3c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: var(--text-color);
  margin-left: 0.5rem;
  margin-top: 1px;
  vertical-align: middle;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

details.fbx-default[open]>summary::after,
details.fbx-answer[open]>summary::after,
details.fbx-question[open]>summary::after {
  transform: rotate(90deg);
}

/* Icons */
details.fbx-default>summary::before,
details.fbx-answer>summary::before,
details.fbx-question>summary::before {
  content: "";
  position: absolute;
  left: var(--padding-x);
  top: 50%;
  transform: translateY(-50%);
  background-size: var(--icon-size) var(--icon-size);
  background-repeat: no-repeat;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Per-callout colors (--border-color, --background-color, --title-background-color)
   are dynamically generated by foldbox.lua from YAML filter-metadata configuration.
   YAML is the single source of truth - do NOT hardcode colors here. */

/* Content body - Quarto-aligned styling - all callout types */
details.fbx-default>div,
details.fbx-answer>div,
details.fbx-question>div,
details.fbx-default[class*="callout-"]>div {
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size);
  /* Now 0.9rem (14.4px) like Quarto */
  font-weight: 400;
  /* Matches Quarto body weight */
  color: var(--text-color);
  background-color: var(--bs-body-bg, white);
  /* Use Bootstrap background */
  padding: 0.5rem 0.75rem 1rem 0.75rem !important;
  /* Extra bottom padding (1rem) to prevent text overlapping the border */
  line-height: 1.5;
  /* Keep good readability */
  text-align: left !important;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

details.fbx-default[class*="callout-"]>div p,
details.fbx-default[class*="callout-"]>div li {
  font-family: var(--font-family) !important;
  font-size: var(--font-size);
  line-height: 1.55;
}

details.fbx-default[class*="callout-"]>div p {
  margin-bottom: 0.75rem;
}

details.fbx-default[class*="callout-"]>div strong {
  font-family: var(--font-family) !important;
  font-weight: 700;
}

/* Ensure last element in callout content doesn't add extra space */
details.fbx-default>div>*:last-child,
details.fbx-answer>div>*:last-child,
details.fbx-question>div>*:last-child,
details.fbx-default[class*="callout-"]>div>*:last-child {
  margin-bottom: 0 !important;
}

/* Ensure first element in callout content doesn't add extra space. Without
   this, Bootstrap's `.callout-body > :first-child { padding-top: .5rem }`
   stacks on top of the body container's own padding-top, producing a
   visible blank row below the title bar — most obvious in callouts whose
   body starts with a <ul> (e.g. Learning Objectives). */
details.fbx-default>div>*:first-child,
details.fbx-answer>div>*:first-child,
details.fbx-question>div>*:first-child,
details.fbx-default[class*="callout-"]>div>*:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure all content inside custom foldbox callouts is left-aligned. */
details.fbx-default[class*="callout-"] p,
details.fbx-default[class*="callout-"] ul,
details.fbx-default[class*="callout-"] ol {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Ensure list items are left-aligned with proper indentation */
details.fbx-default[class*="callout-"] li {
  text-align: left !important;
}

details.callout-learning-objectives > div ul,
details.callout-carry-forward > div ul,
details.callout-architect-checkpoint > div ul {
  margin-bottom: 0;
}

/* Chapter-opening crux blocks are not ordinary admonitions. Keep the title
   compact, tint the whole box, and let the body read as the guiding frame. */
details.callout-crux {
  --icon-size: 1.15rem;
  background: var(--background-color, #fff8ec) !important;
  border: 0 !important;
  border-left: 3px solid var(--border-color, #d18a24) !important;
  border-radius: 0 0.55rem 0.55rem 0 !important;
  box-shadow: none !important;
  padding: 0.78rem 1rem;
}

details.callout-crux > summary {
  background: transparent !important;
  display: inline-flex;
  min-height: 0;
  padding: 0 0.35rem 0 2rem !important;
}

details.callout-crux > summary::before {
  left: 0.12rem !important;
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  background-size: var(--icon-size) var(--icon-size) !important;
}

details.callout-crux > summary::after {
  display: none !important;
}

details.callout-crux > summary strong {
  color: #6b4214;
  font-size: 0.98rem !important;
}

details.callout-crux > summary strong::after {
  content: ":";
}

details.callout-crux.fbx-default > div {
  background: transparent !important;
  display: block;
  padding: 0.32rem 0 0 2rem !important;
}

details.callout-crux.fbx-default > div,
details.callout-crux.fbx-default > div p {
  color: #53606a;
  font-style: italic;
}

details.callout-crux.fbx-default > div p {
  display: inline;
  font-size: 1.02rem;
  margin: 0 !important;
}

/* Dark mode support - Quarto-aligned dark theme */
/* Per-callout dark mode colors (--background-color, --text-color, border-color,
   summary text, code text) are dynamically generated by foldbox.lua from YAML.
   Only structural dark mode rules remain here.
   Both selectors are required:
     - @media covers OS-level dark preference
     - body.quarto-dark covers Quarto's manual toggle button */

/* OS-level dark preference */
@media (prefers-color-scheme: dark) {

  /* Base foldbox dark styling */
  details.fbx-default,
  details.fbx-answer,
  details.fbx-question {
    --text-color: #e6e6e6;
    border-color: #454d55;
  }

  /* Dark content backgrounds - applies to ALL callout types */
  details.fbx-default>div,
  details.fbx-answer>div,
  details.fbx-question>div,
  details.fbx-default[class*="callout-"]>div {
    background-color: var(--bs-dark, #212529);
    color: #e6e6e6;
  }

  /* Dark mode arrows */
  details.fbx-default>summary::after,
  details.fbx-answer>summary::after,
  details.fbx-question>summary::after {
    background-color: var(--text-color);
  }
}

/* Quarto manual toggle button - body.quarto-dark */
body.quarto-dark details.fbx-default,
body.quarto-dark details.fbx-answer,
body.quarto-dark details.fbx-question {
  --text-color: #e6e6e6;
  border-color: #454d55;
}

body.quarto-dark details.fbx-default>div,
body.quarto-dark details.fbx-answer>div,
body.quarto-dark details.fbx-question>div,
body.quarto-dark details.fbx-default[class*="callout-"]>div {
  background-color: var(--bs-dark, #212529);
  color: #e6e6e6;
}

body.quarto-dark details.fbx-default>summary::after,
body.quarto-dark details.fbx-answer>summary::after,
body.quarto-dark details.fbx-question>summary::after {
  background-color: var(--text-color);
}