/* 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: var(--color1, #f8f9fa);
  --title-background-color: var(--color1);
  --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);
  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);
  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.3rem); /* Reduced space for icon */
  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 */
details.fbx-default > summary strong,
details.fbx-answer > summary strong,
details.fbx-question > summary strong,
details.callout-definition > summary strong,
details.callout-example > summary strong,
details.callout-quiz-question > summary strong,
details.callout-quiz-answer > summary strong,
details.callout-colab > summary strong {
  text-align: left !important;
  flex-grow: 1;
  display: block;
}

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

/* Subtle, distinct colors for educational callouts - Harvard Crimson Theme */
details.callout-quiz-question {
  --border-color: #5B4B8A;      /* Darker purple - for quiz questions */
  --background-color: rgba(91, 75, 138, 0.04);  /* Reduced opacity for subtlety */
  --title-background-color: rgba(91, 75, 138, 0.04);
}

details.callout-quiz-answer {
  --border-color: #4a7c59;      /* Forest green - for quiz answers */
  --background-color: rgba(74, 124, 89, 0.04);   /* Reduced opacity for subtlety */
  --title-background-color: rgba(74, 124, 89, 0.04);
}

details.callout-definition {
  --border-color: #1B4F72;      /* Deep navy blue - complements crimson beautifully */
  --background-color: rgba(27, 79, 114, 0.04);   /* Reduced opacity for subtlety */
  --title-background-color: rgba(27, 79, 114, 0.04);
}

details.callout-example {
  --border-color: #148F77;      /* Deep teal - neutral complement to crimson theme */
  --background-color: rgba(20, 143, 119, 0.04);   /* Reduced opacity for subtlety */
  --title-background-color: rgba(20, 143, 119, 0.04);
}

details.callout-colab {
  --border-color: #FF6B35;      /* Vibrant orange for interactive Colabs */
  --background-color: rgba(255, 107, 53, 0.04);   /* Reduced opacity for subtlety */
  --title-background-color: rgba(255, 107, 53, 0.04);
}

details.callout-chapter-connection {
  --border-color: #A51C30;      /* Harvard crimson - primary brand color */
  --background-color: rgba(165, 28, 48, 0.08);
  --title-background-color: rgba(165, 28, 48, 0.08);
}

details.callout-chapter-forward {
  --border-color: #A51C30;      /* Harvard crimson - primary brand color */
  --background-color: rgba(165, 28, 48, 0.08);
  --title-background-color: rgba(165, 28, 48, 0.08);
}

details.callout-chapter-recall {
  --border-color: #C06014;      /* Warm orange - for recall/connections */
  --background-color: rgba(192, 96, 20, 0.08);
  --title-background-color: rgba(192, 96, 20, 0.08);
}

details.callout-resource-slides,
details.callout-resource-videos,
details.callout-resource-exercises {
  --border-color: #20B2AA;      /* Teal - for resources */
  --background-color: rgba(32, 178, 170, 0.08);
  --title-background-color: rgba(32, 178, 170, 0.08);
}

details.callout-code {
  --border-color: #3C4858;      /* Cool gray - for code listings */
  --background-color: rgba(60, 72, 88, 0.08);
  --title-background-color: rgba(60, 72, 88, 0.08);
}

/* Specific icons - dynamically generated by foldbox.lua based on filter-metadata configuration */

/* Content body - Quarto-aligned styling */
details.fbx-default > div,
details.fbx-answer > div,
details.fbx-question > div,
details.callout-definition > div,
details.callout-example > div,
details.callout-quiz-question > div,
details.callout-quiz-answer > div,
details.callout-colab > div,
details.callout-chapter-connection > div,
details.callout-chapter-forward > div,
details.callout-chapter-recall > div,
details.callout-resource-slides > div,
details.callout-resource-videos > div,
details.callout-resource-exercises > div,
details.callout-code > 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: var(--padding-y) var(--padding-x);  /* Consistent with Quarto */
  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 all content inside callouts is left-aligned */
details.callout-definition p,
details.callout-definition ul,
details.callout-definition ol,
details.callout-example p,
details.callout-example ul,
details.callout-example ol,
details.callout-quiz-question p,
details.callout-quiz-question ul,
details.callout-quiz-question ol,
details.callout-quiz-answer p,
details.callout-quiz-answer ul,
details.callout-quiz-answer ol,
details.callout-colab p,
details.callout-colab ul,
details.callout-colab ol {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Ensure list items are left-aligned with proper indentation */
details.callout-definition li,
details.callout-example li,
details.callout-quiz-question li,
details.callout-quiz-answer li,
details.callout-colab li {
  text-align: left !important;
}

/* Dark mode support - Quarto-aligned dark theme */
@media (prefers-color-scheme: dark) {
  details.fbx-default,
  details.fbx-answer,
  details.fbx-question {
    --text-color: #e6e6e6;
    border-color: #454d55;  /* Subtle dark border */
  }

  /* Dark mode color overrides for Harvard crimson theme */
  details.callout-quiz-question {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(91, 75, 138, 0.12);   /* Darker purple tint */
    --title-background-color: rgba(91, 75, 138, 0.12);
    border-color: #5B4B8A;  /* Keep purple border visible */
  }

  details.callout-quiz-question summary,
  details.callout-quiz-question summary strong,
  details.callout-quiz-question > summary {
    color: #f0f0f0 !important;  /* Force bright text */
  }

  details.callout-quiz-answer {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --border-color: #4a7c59;
    --background-color: rgba(74, 124, 89, 0.12);    /* Forest green tint */
    --title-background-color: rgba(74, 124, 89, 0.12);
    border-color: #4a7c59;  /* Keep green border visible */
  }

  details.callout-quiz-answer summary,
  details.callout-quiz-answer summary strong,
  details.callout-quiz-answer > summary {
    color: #f0f0f0 !important;  /* Force bright text */
  }

  details.callout-chapter-connection {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(165, 28, 48, 0.12);    /* Harvard crimson tint */
    --title-background-color: rgba(165, 28, 48, 0.12);
    border-color: #A51C30;  /* Keep crimson border visible */
  }

  details.callout-chapter-connection summary {
    color: var(--text-color);
  }

  details.callout-chapter-forward {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(165, 28, 48, 0.12);    /* Harvard crimson tint */
    --title-background-color: rgba(165, 28, 48, 0.12);
    border-color: #A51C30;  /* Keep crimson border visible */
  }

  details.callout-chapter-forward summary {
    color: var(--text-color);
  }

  details.callout-chapter-recall {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(192, 96, 20, 0.12);   /* Warm orange tint */
    --title-background-color: rgba(192, 96, 20, 0.12);
    border-color: #C06014;  /* Keep orange border visible */
  }

  details.callout-chapter-recall summary {
    color: var(--text-color);
  }

  details.callout-resource-slides,
  details.callout-resource-videos,
  details.callout-resource-exercises {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(32, 178, 170, 0.12);   /* Teal tint */
    --title-background-color: rgba(32, 178, 170, 0.12);
    border-color: #20B2AA;  /* Keep teal border visible */
  }

  details.callout-resource-slides summary,
  details.callout-resource-videos summary,
  details.callout-resource-exercises summary {
    color: var(--text-color);
  }

  details.callout-code {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(60, 72, 88, 0.12);    /* Cool gray tint */
    --title-background-color: rgba(60, 72, 88, 0.12);
  }

  details.callout-code summary {
    color: var(--text-color);
  }

  /* Example callouts - improved from PR #989 */
  details.callout-example {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(20, 143, 119, 0.12);  /* Darker teal tint */
    --title-background-color: rgba(20, 143, 119, 0.12);
    border-color: #148F77;  /* Keep teal border visible */
  }

  details.callout-example summary,
  details.callout-example summary strong,
  details.callout-example > summary {
    color: #f0f0f0 !important;  /* Force bright text */
  }

  details.callout-example code {
    color: #e6e6e6 !important;
  }

  /* Definition callouts - extending dark mode support */
  details.callout-definition {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(27, 79, 114, 0.12);  /* Darker navy tint */
    --title-background-color: rgba(27, 79, 114, 0.12);
    border-color: #1B4F72;  /* Keep navy border visible */
  }

  details.callout-definition summary,
  details.callout-definition summary strong,
  details.callout-definition > summary {
    color: #f0f0f0 !important;  /* Force bright text */
  }

  details.callout-definition code {
    color: #e6e6e6 !important;
  }

  /* Colab callouts - dark mode support */
  details.callout-colab {
    --text-color: #e6e6e6;  /* Light text for dark backgrounds */
    --background-color: rgba(255, 107, 53, 0.12);  /* Darker orange tint */
    --title-background-color: rgba(255, 107, 53, 0.12);
    border-color: #FF6B35;  /* Keep orange border visible */
  }

  details.callout-colab summary,
  details.callout-colab summary strong,
  details.callout-colab > summary {
    color: #f0f0f0 !important;  /* Force bright text */
  }

  details.callout-colab code {
    color: #e6e6e6 !important;
  }

  /* Dark content backgrounds and text */
  details.fbx-default > div,
  details.fbx-answer > div,
  details.fbx-question > div,
  details.callout-quiz-question > div,
  details.callout-quiz-answer > div,
  details.callout-example > div,
  details.callout-definition > div,
  details.callout-colab > div,
  details.callout-chapter-connection > div,
  details.callout-chapter-forward > div,
  details.callout-chapter-recall > div,
  details.callout-resource-slides > div,
  details.callout-resource-videos > div,
  details.callout-resource-exercises > div,
  details.callout-code > div {
    background-color: var(--bs-dark, #212529);
    color: #e6e6e6;  /* Ensure content text is light */
  }

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