/* Below consists of styling predefined by bookdown, be careful touching these */

p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

/* Below consists of css elements added for the purpose of this template*/

#sponsors { /*styling the sponsors header at the bottom of the sidebar, comes from the toc in _output.yml*/
  text-align: center;
}

.center { /* General utility class, can be kept if used elsewhere */
  text-align: center;
}

/* Insert any of your specific css additions below*/

/* --- SHARED HELPER CLASSES (Primarily for Static Callouts & Base for Dropdown Icons) --- */
.callout-icon {
    margin-right: 0.8em;
    font-size: 1.2em;
    line-height: 1; /* Helps with baseline alignment */
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -0.125em; /* Nudges Font Awesome icon down slightly */
}

.callout-content { /* Used by static callouts for the main content area */
    flex-grow: 1;
}

/* For static callouts, if no title div precedes the first paragraph */
.callout-content > p:first-child {
    margin-top: 0;
}

/* Optional: A general class for titles within static callouts if generated by Lua/R */
.callout-title-static { /* Used by the Lua filter for static callout titles */
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: 1.1em;
}


/* === STATIC CALLOUT STYLES (Non-collapsible divs) === */
/* Each class includes padding, flex for icons, colors, borders, baseline alignment */

.callout-red, .callout-blue, .callout-green, .callout-yellow, .callout-purple, .callout-orange, .callout-gray,
.callout-red-important, .callout-green-important, .callout-yellow-important,
.callout-red-subtle, .callout-blue-subtle, .callout-green-subtle, .callout-yellow-subtle, .callout-purple-subtle, .callout-orange-subtle, .callout-gray-subtle {
    padding: 1em 1.2em; border-radius: 10px; margin-bottom: 1.2em;
    font-size: 0.98em; line-height: 1.65; display: flex; align-items: baseline;
    box-sizing: border-box;
}

.callout-red { background: #FADBD8; color: #5D0005; border: 2px solid #C0392B;}
.callout-red .callout-icon { color: #C0392B; }
.callout-blue { background: #D6EAF8; color: #1A237E; border: 2px solid #2980B9;}
.callout-blue .callout-icon { color: #2980B9; }
.callout-green { background: #D5F5E3; color: #0D3D00; border: 2px solid #229954;}
.callout-green .callout-icon { color: #229954; }
.callout-yellow { background: #FFFDE7; color: #5F4300; border: 2px solid #FFC107;}
.callout-yellow .callout-icon { color: #FFC107; }
.callout-purple { background: #F3E5F5; color: #4A148C; border: 2px solid #8E24AA;}
.callout-purple .callout-icon { color: #8E24AA; }
.callout-orange { background: #FFF3E0; color: #E65100; border: 2px solid #FB8C00;}
.callout-orange .callout-icon { color: #FB8C00; }
.callout-gray { background: #F5F5F5; color: #212121; border: 2px solid #9E9E9E;}
.callout-gray .callout-icon { color: #757575; }

.callout-red-important { background: #F39A9D; color: #333333; border: 2px solid #D9534F;}
.callout-red-important .callout-icon { color: #D9534F; }
.callout-green-important { background: #8DB580; color: #111111; border: 2px solid #5C9447;}
.callout-green-important .callout-icon { color: #5C9447; }
.callout-yellow-important { background: #FFF59D; color: #212121; border: 2px solid #FFB300;}
.callout-yellow-important .callout-icon { color: #FFB300; }

.callout-red-subtle, .callout-blue-subtle, .callout-green-subtle, .callout-yellow-subtle,
.callout-purple-subtle, .callout-orange-subtle, .callout-gray-subtle {
    background-color: #f8f9fa; color: #212529;
    border-left-width: 5px; border-left-style: solid;
    border-top: 1px solid #e9ecef; border-right: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
}
.callout-red-subtle { border-left-color: #e74c3c;}
.callout-red-subtle .callout-icon { color: #e74c3c; }
.callout-blue-subtle { border-left-color: #3498db;}
.callout-blue-subtle .callout-icon { color: #3498db; }
.callout-green-subtle { border-left-color: #2ecc71;}
.callout-green-subtle .callout-icon { color: #2ecc71; }
.callout-yellow-subtle { border-left-color: #f1c40f;}
.callout-yellow-subtle .callout-icon { color: #f1c40f; }
.callout-purple-subtle { border-left-color: #8e44ad;}
.callout-purple-subtle .callout-icon { color: #8e44ad; }
.callout-orange-subtle { border-left-color: #e67e22;}
.callout-orange-subtle .callout-icon { color: #e67e22; }
.callout-gray-subtle { border-left-color: #7f8c8d;}
.callout-gray-subtle .callout-icon { color: #7f8c8d; }


/* --- DROPDOWN CALLOUT STYLES (<details> and <summary>) --- */
.callout-dropdown { /* This is the <details> tag */
    margin-bottom: 1.2em; border-radius: 10px; border-width: 2px;
    border-style: solid; overflow: hidden; display: flex; flex-direction: column;
    font-size: 0.98em; /* Base font size for em calculations within */
    box-sizing: border-box;
}
.callout-dropdown-summary { /* This is the <summary> tag */
    padding: 1em 1.2em;
    line-height: 1.65;
    display: flex; align-items: baseline; cursor: pointer;
    list-style: none; position: relative;
    background-color: transparent; /* Shows parent <details> background for colored dropdowns */
    box-sizing: border-box;
}
.callout-dropdown-summary::-webkit-details-marker { display: none; }
.callout-dropdown-summary::marker { display:none; }

.callout-dropdown-summary .callout-icon {
    /* Inherits from general .callout-icon */
}
.callout-dropdown-summary .callout-dropdown-title {
    font-weight: bold; font-size: 1.1em;
    flex-grow: 1;
}
.callout-dropdown-summary .callout-dropdown-caret {
    margin-left: auto; padding-left: 0.8em; transition: transform 0.2s ease-in-out;
}
.callout-dropdown[open] > .callout-dropdown-summary .callout-dropdown-caret {
    transform: rotate(90deg);
}
.callout-dropdown-content { /* This is the div holding the collapsible content */
    padding: 0.5em 1.2em 1.2em 3.2em;
    font-size: 1em;
    line-height: 1.6;
    background-color: transparent; /* Shows parent <details> background for colored dropdowns */
    box-sizing: border-box;
}
.callout-dropdown-content > :first-child { margin-top: 0; }
.callout-dropdown-content > :last-child { margin-bottom: 0; }

/* Color styling for REGULAR & IMPORTANT dropdowns: Apply background to <details>, text color to summary & content */
.callout-dropdown.callout-red { background: #FADBD8; border-color: #C0392B; color: #5D0005;}
.callout-dropdown.callout-red > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-red > .callout-dropdown-summary .callout-dropdown-caret { color: #C0392B; }

.callout-dropdown.callout-blue { background: #D6EAF8; border-color: #2980B9; color: #1A237E;}
.callout-dropdown.callout-blue > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-blue > .callout-dropdown-summary .callout-dropdown-caret { color: #2980B9; }

.callout-dropdown.callout-green { background: #D5F5E3; border-color: #229954; color: #0D3D00;}
.callout-dropdown.callout-green > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-green > .callout-dropdown-summary .callout-dropdown-caret { color: #229954; }

.callout-dropdown.callout-yellow { background: #FFFDE7; border-color: #FFC107; color: #5F4300;}
.callout-dropdown.callout-yellow > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-yellow > .callout-dropdown-summary .callout-dropdown-caret { color: #FFC107; }

.callout-dropdown.callout-purple { background: #F3E5F5; border-color: #8E24AA; color: #4A148C;}
.callout-dropdown.callout-purple > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-purple > .callout-dropdown-summary .callout-dropdown-caret { color: #8E24AA; }

.callout-dropdown.callout-orange { background: #FFF3E0; border-color: #FB8C00; color: #E65100;}
.callout-dropdown.callout-orange > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-orange > .callout-dropdown-summary .callout-dropdown-caret { color: #FB8C00; }

.callout-dropdown.callout-gray { background: #F5F5F5; border-color: #9E9E9E; color: #212121;}
.callout-dropdown.callout-gray > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-gray > .callout-dropdown-summary .callout-dropdown-caret { color: #757575; }

.callout-dropdown.callout-red-important { background: #F39A9D; border-color: #D9534F; color: #333333;}
.callout-dropdown.callout-red-important > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-red-important > .callout-dropdown-summary .callout-dropdown-caret { color: #D9534F; }

.callout-dropdown.callout-green-important { background: #8DB580; border-color: #5C9447; color: #111111;}
.callout-dropdown.callout-green-important > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-green-important > .callout-dropdown-summary .callout-dropdown-caret { color: #5C9447; }

.callout-dropdown.callout-yellow-important { background: #FFF59D; border-color: #FFB300; color: #212121;}
.callout-dropdown.callout-yellow-important > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-yellow-important > .callout-dropdown-summary .callout-dropdown-caret { color: #FFB300; }

/* SUBTLE Dropdowns: <details> gets the main subtle background and text color for summary, content area ALSO gets subtle background */
.callout-dropdown.callout-subtle {
    border-width: 1px; border-style: solid; border-color: #e9ecef;
    border-left-width: 5px;
    background-color: #f8f9fa; /* Main subtle background on details */
    color: #212529; /* Default text color for subtle summary & content */
}
.callout-dropdown.callout-subtle > .callout-dropdown-summary {
    background-color: transparent; /* Summary shows details background */
}
.callout-dropdown.callout-subtle > .callout-dropdown-content {
    background-color: transparent; /* Content area shows details background */
    color: #212529;
}

.callout-dropdown.callout-red-subtle { border-left-color: #e74c3c; }
.callout-dropdown.callout-red-subtle > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-red-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #e74c3c; }

.callout-dropdown.callout-blue-subtle { border-left-color: #3498db; }
.callout-dropdown.callout-blue-subtle > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-blue-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #3498db; }

/* ... (other subtle dropdown color variants) ... */
.callout-dropdown.callout-green-subtle { border-left-color: #2ecc71; }
.callout-dropdown.callout-green-subtle > .callout-dropdown-summary .callout-icon, .callout-dropdown.callout-green-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #2ecc71; }
.callout-dropdown.callout-yellow-subtle { border-left-color: #f1c40f; }
.callout-dropdown.callout-yellow-subtle > .callout-dropdown-summary .callout-icon, .callout-dropdown.callout-yellow-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #f1c40f; }
.callout-dropdown.callout-purple-subtle { border-left-color: #8e44ad; }
.callout-dropdown.callout-purple-subtle > .callout-dropdown-summary .callout-icon, .callout-dropdown.callout-purple-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #8e44ad; }
.callout-dropdown.callout-orange-subtle { border-left-color: #e67e22; }
.callout-dropdown.callout-orange-subtle > .callout-dropdown-summary .callout-icon, .callout-dropdown.callout-orange-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #e67e22; }
.callout-dropdown.callout-gray-subtle { border-left-color: #7f8c8d; }
.callout-dropdown.callout-gray-subtle > .callout-dropdown-summary .callout-icon, .callout-dropdown.callout-gray-subtle > .callout-dropdown-summary .callout-dropdown-caret { color: #7f8c8d; }


/* --- PLAIN DROPDOWN CALLOUT --- */
.callout-dropdown.callout-plain {
    background: transparent !important; border: none !important;
    box-shadow: none !important; border-radius: 0;
    padding: 0; margin-bottom: 0.8em;
    font-size: 1em; /* Make plain dropdowns use base page font-size */
}
.callout-dropdown.callout-plain > .callout-dropdown-summary {
    background: transparent !important; color: inherit !important;
    padding: 0.3em 0; /* Minimal padding for summary */
    border-bottom: 1px dashed #adadad;
    line-height: 1.5;
}
.callout-dropdown.callout-plain > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain > .callout-dropdown-summary .callout-dropdown-caret {
    color: currentColor !important;
}
.callout-dropdown.callout-plain > .callout-dropdown-summary .callout-dropdown-title {
    font-weight: normal;
    font-size: 1em;
}
.callout-dropdown.callout-plain > .callout-dropdown-content {
    background: transparent !important; color: inherit !important;
    padding: 0.8em 0 0.5em 0;
    border-top: none !important;
    font-size: 0.95em;
}
.callout-dropdown.callout-plain > .callout-dropdown-summary.summary-has-icon + .callout-dropdown-content {
    padding-left: calc(1.2em + 0.8em);
}

/* Type-specific icon/caret colors for PLAIN dropdowns */
.callout-dropdown.callout-plain.callout-red > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-red > .callout-dropdown-summary .callout-dropdown-caret {
    color: #C0392B !important;
}
.callout-dropdown.callout-plain.callout-blue > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-blue > .callout-dropdown-summary .callout-dropdown-caret {
    color: #2980B9 !important;
}
.callout-dropdown.callout-plain.callout-green > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-green > .callout-dropdown-summary .callout-dropdown-caret {
    color: #229954 !important;
}
.callout-dropdown.callout-plain.callout-yellow > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-yellow > .callout-dropdown-summary .callout-dropdown-caret {
    color: #FFC107 !important;
}
.callout-dropdown.callout-plain.callout-purple > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-purple > .callout-dropdown-summary .callout-dropdown-caret {
    color: #8E24AA !important;
}
.callout-dropdown.callout-plain.callout-orange > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-orange > .callout-dropdown-summary .callout-dropdown-caret {
    color: #FB8C00 !important;
}
.callout-dropdown.callout-plain.callout-gray > .callout-dropdown-summary .callout-icon,
.callout-dropdown.callout-plain.callout-gray > .callout-dropdown-summary .callout-dropdown-caret {
    color: #757575 !important;
}