/* css styles */

/* Removes the line between posts */
div.quarto-post {
    border-bottom: none;
     padding-bottom: 1rem;
}

#about-header {
    text-align: center;
    align-items: center;
    padding-bottom: 3rem;
}

#about-image img {
    width: 80px;
    border-radius: 50%;
}

#social-links {
    margin-top: 1rem;
}

#social-links a {
    margin: 0 0.25rem;
}

#social-links img {
    height: 28px;
}

.navbar-logo {
    border-radius: 50%;
}

div.quarto-post .metadata {
    flex-basis: 20%;
}

div.quarto-post .body {
    flex-basis: 60%;
}

div.quarto-post .thumbnail {
    flex-basis: 20%;
}
div.quarto-post .thumbnail img {
    border-radius: 50%;
    max-height: 150px;
    max-width: 150px;
    margin-top: 0;
}

div.thumbnail p {
    margin-bottom: 0;
    text-align: center;
}

/* Center the post listings container */
#listing-post-listings {
    display: flex;
    flex-direction: column;
    align-items: left;
}

/* Set a reasonable max-width for posts and center them */
#listing-post-listings .quarto-post {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.post-thumbnail {
    text-align: center;
    aspect-ratio: 16/9
}

.post-thumbnail img {
    border-radius: 50%;
    max-width: 50%;
}

.acknowledgements {
    font-size: small;
    font-style: italic;
}

/* Collapsible sections */
.collapsible {
    cursor: pointer;
    user-select: none;
    position: relative;
    color: inherit !important; /* Force maintain the parent's color */
}

.collapsible:hover,
.collapsible:focus,
.collapsible:active,
.collapsible:visited {
    color: inherit !important; /* Force prevent color change on interaction */
    text-decoration: none !important; /* Remove any underline effects */
}

/* Remove the arrow from section elements */
section.collapsible::after {
    display: none !important;
}

/* Add arrow only to h2 headings inside collapsible sections */
.collapsible h2::after {
    content: '\25BC'; /* Down arrow - always use the same arrow */
    font-size: 0.8em;
    margin-left: 0.5em;
    transition: transform 0.3s ease;
    display: inline-block; /* Needed for rotation */
    color: inherit !important; /* Ensure arrow inherits the same color */
}

.collapsible.collapsed h2::after {
    transform: rotate(-90deg); /* Rotate the down arrow to point right */
}

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsible-content.collapsed {
    max-height: 0;
}

/* Hide ALL arrows from the listing controls - more specific selectors */
.quarto-listing .listing-actions .sort-dropdown::after,
.quarto-listing .listing-actions .filter-dropdown::after,
.quarto-listing .listing-actions button::after,
.quarto-listing .listing-actions .dropdown-toggle::after,
.quarto-listing .listing-pagination .page-link::after,
.quarto-listing .listing-pagination button::after {
    display: none !important;
}

/* Also hide any caret icons that might be used instead of ::after */
.quarto-listing .listing-actions .bi-caret-down-fill,
.quarto-listing .listing-actions .bi-caret-up-fill,
.quarto-listing .listing-actions .bi-chevron-down,
.quarto-listing .listing-actions .bi-chevron-up {
    display: none !important;
}