/* Custom CSS for your site */

/* General font setup (Bootstrap might override, but good to have) */
body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

samp,
code {
    color: black;
    font-family: Hack, monospace;
    font-size: 95%
}

/* Fix for internal anchors with sticky header (Bootstrap 5 way) */
/* Apply this to any element that serves as a target for an internal link */
h1[id],
h2[id],
h3[id],
h4[id],
h5[id],
h6[id],
div.col[id] {
    /* Adjust this value to be slightly more than your navbar height */
    scroll-margin-top: 70px;
}

/* Small icon for external links in main navigation */
.navbar-nav .nav-item .bi {
    font-size: 0.7em;
    /* Make the icon smaller */
    vertical-align: super;
    /* Position it slightly above the text */
    margin-left: 0.2em;
}

/* Custom styling for code blocks (pre elements) */
pre.code-box {
    background-color: #f8f9fa;
    /* Light gray background, similar to Bootstrap's default */
    border: 1px solid #dee2e6;
    /* A subtle border */
    border-radius: 0.25rem;
    /* Slightly rounded corners */
    padding: 1rem;
    /* Padding inside the box */
    margin-bottom: 1rem;
    /* Standard margin below the box */
    overflow-x: auto;
    /* Ensures horizontal scrolling for long lines */
    font-size: 0.875em;
    /* Slightly smaller font size for code */
    line-height: 1.5;
    /* Good line height for readability */
}

.small-caps {
    font-variant: small-caps;
}

span.amiga {
    font-family: Palatino, Garamond, Times New Roman, Times, serif;
    font-weight: bold;
    font-style: italic;
}

span.tex {
    font-family: Times New Roman, Times, serif;
}

span.tilted {
    position: relative;
    top: .4ex;
    margin: 0 -.1em 0 -.2em;
}

/* Card Titles (H2s with .card-title) */
.card-title {
    position: relative;
    /* Keep this for potential future internal positioning */

    /* Use negative margins to pull the background to the card edges */
    /* These values counteract Bootstrap's default 1rem padding on .card-body */
    margin-top: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    /* Set margin-bottom to 0 to prevent extra space before card text */
    margin-bottom: 0;

    /* Background color and new padding for the title's content */
    /* background-color: rgba(0, 123, 255, 0.05); /* Same faint, transparent blue */
    padding: 1rem;
    /* This is the internal padding for the text within the colored background */

    /* Apply border-radius to the top corners to match the card's overall rounding */
    /* Bootstrap cards often have a border-radius of 0.375rem or 0.25rem */
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    /* No bottom border-radius, as it visually flows into the card body */
}

/* Ensure no accent line appears for card titles */
.card-title::after {
    display: none;
}

/* Interactive Card Hover Effects (from previous successful suggestion, included for completeness) */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Smooth transitions */
}

.card:hover {
    transform: translateY(-5px);
    /* Lift the card slightly */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* Enhance shadow on hover */
}

/* Add margin below card titles to separate from content */
.card-body .card-text:first-of-type {
    margin-top: 0.75rem;
    /* Adds space above the first paragraph in the card body */
}

/* Add margin below the FIRST-LEVEL card titles (H1s like "Preprints") on papers.php */
.card-body h1.card-title.h4 {
    margin-bottom: 1.2rem;
    /* Adds significant space below these section titles */
}

/* Paler pastel shade background colors for card titles */
.card-title-bg-pastel-blue {
    background-color: rgba(173, 216, 230, 0.2);
    /* Light Blue */
}

.card-title-bg-pastel-green {
    background-color: rgba(144, 238, 144, 0.2);
    /* Light Green */
}

.card-title-bg-pastel-yellow {
    background-color: rgba(255, 255, 224, 0.5);
    /* Light Yellow (higher alpha for visibility) */
}

.card-title-bg-pastel-peach {
    background-color: rgba(255, 218, 185, 0.2);
    /* Light Peach */
}

.card-title-bg-pastel-pink {
    background-color: rgba(255, 192, 203, 0.2);
    /* Light Pink */
}

.card-title-bg-pastel-lavender {
    background-color: rgba(230, 230, 250, 0.2);
    /* Lavender */
}

.card-title-bg-pastel-greyblue {
    background-color: rgba(176, 196, 222, 0.2);
    /* Light Steel Blue */
}

.card-title-bg-pastel-mint {
    background-color: rgba(189, 252, 201, 0.2);
    /* Pale Mint */
}

.card-title-bg-pastel-rose {
    background-color: rgba(255, 228, 225, 0.2);
    /* Misty Rose */
}

.card-title-bg-pastel-cyan {
    background-color: rgba(200, 255, 255, 0.2);
    /* Light Cyan */
}


.page-content-styling .content-section h1 {
    /* Preserve existing mt-5 spacing from HTML (Bootstrap's margin-top: 3rem !important;) */
    margin-top: 0rem !important;
    margin-bottom: 2rem;
    /* More space below H1 than H2/H3 for stronger separation */
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    /* Padding: top, right, bottom (more for accent line), left */
    background-color: rgba(13, 202, 240, 0.05);
    /* Very pale cyan background (like Bootstrap info's transparency) */
    border-left: 6px solid rgba(13, 202, 240, 0.7);
    /* Stronger left border accent */
    border-radius: 0.3rem;
    /* Slightly rounded corners */
    color: #343a40;
    /* Dark text color for contrast */
}

.page-content-styling .content-section h2 {
    margin-top: 3rem !important;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 123, 255, 0.05);
    border-left: 5px solid rgba(0, 123, 255, 0.6);
    border-radius: 0.3rem;
    color: #343a40;
}

.page-content-styling .content-section h3 {
    margin-top: 3rem !important;
    margin-bottom: 1rem;
    padding: 0.6rem 1.25rem;
    background-color: rgba(108, 117, 125, 0.05);
    border-left: 4px solid rgba(108, 117, 125, 0.5);
    border-radius: 0.3rem;
    color: #343a40;
}

.page-content-styling .content-section h2::after,
.page-content-styling .content-section h3::after {
    display: none;
}

.page-content-styling .content-section p,
.page-content-styling .content-section ul,
.page-content-styling .content-section ol {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.page-content-styling .content-section ul li,
.page-content-styling .content-section ol li {
    margin-bottom: 0.4rem;
}

/* Styling for blockquotes within content sections */
.page-content-styling .content-section blockquote {
    padding: 1rem 1rem;
    /* Ample padding around the quoted text */
    margin: 1.5rem 0;
    /* Vertical margin to separate the quote from surrounding content */
    font-style: normal;
    /* Override italic */
    border-left: 6px solid #adb5bd;
    /* A subtle grey left border (Bootstrap's gray-500) */
    background-color: rgba(248, 249, 250, 0.7);
    /* Very light grey background (Bootstrap's light, slightly opaque) */
    color: #495057;
    /* Slightly darker grey text for contrast */
    border-radius: 0.3rem;
    /* Slight rounding on the corners */
}

/* Style for blockquote footer (for attribution, if you use it) */
.page-content-styling .content-section blockquote footer {
    display: block;
    /* Ensure footer is on its own line below the quote */
    font-size: 0.9em;
    /* Smaller font size for the attribution */
    font-style: normal;
    /* Override italic for the footer text itself */
    margin-top: 0.75rem;
    /* Space above the attribution */
    color: #6c757d;
    /* Muted grey color for the attribution text */
}

/* Ensure <cite> within the footer is also not italic (browsers often default cite to italic) */
.page-content-styling .content-section blockquote footer cite {
    font-style: normal;
}