/* 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: 0.9rem;
  /* Matches Quarto: 14.4px */
  --arrow-size: 0.9rem;
  /* Consistent with icon size */
  --padding-y: 0.5rem;
  /* Reduced for snugger fit */
  --padding-x: 0.75rem;
  /* Reduced for snugger fit */
  --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 2px 8px rgba(165, 28, 48, 0.1);
  /* Reduced shadow for subtlety */
}

/* 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;
}

/* Ultra-specific override - nuclear option */
body div details[class*="callout"]>summary,
body div details.fbx-default>summary,
body div details.fbx-answer>summary,
body div details.fbx-question>summary,
body div .callout-title-container,
body details[class*="callout"]>summary,
body details.fbx-default>summary,
body details.fbx-answer>summary,
body details.fbx-question>summary,
body .callout-title-container {
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
  font-weight: 400 !important;
  /* Normal weight for better readability */
  font-size: 0.9rem !important;
}

/* Alternative approach using CSS custom properties */
details[class*="callout"],
details.fbx-default,
details.fbx-answer,
details.fbx-question {
  --custom-font-weight: 400;
}

details[class*="callout"]>summary,
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: 400 !important;
  /* Normal weight for better readability */
  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.15rem);
  /* Tight spacing between icon and 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 - all callout types */
details.fbx-default>summary strong,
details.fbx-answer>summary strong,
details.fbx-question>summary strong,
details[class*="callout-"]>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: calc(var(--padding-x) - 0.2rem);
  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[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);
}

/* 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[class*="callout-"]>div>*:last-child,
div[class*="callout-"]>div>*:last-child,
.callout>div>*:last-child {
  margin-bottom: 0 !important;
}

/* Catch-all for any div-based callouts (non-details structure) */
div[class*="callout-"]:not(details)>div {
  padding-bottom: 1rem !important;
}

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

/* Ensure list items are left-aligned with proper indentation */
details[class*="callout-"] li {
  text-align: left !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. */
@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[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);
  }
}