/*
 * =================================
 * Custom Styles for Collapsible Detail Sections
 * File: collapsible-details.css
 * =================================
*/

/* General styling for the toggle button */
.read-more-btn {
    margin-top: 15px; /* Adds some space above the button */
    cursor: pointer;  /* Ensures the cursor changes to a hand pointer on hover */
    display: inline-block; /* Ensures proper spacing and alignment */
}

/* The :after pseudo-element is used to add the arrow icon */
.read-more-btn:after {
    font-family: 'FontAwesome'; /* This relies on the Font Awesome library already loaded on your site */
    content: "\f078";          /* This is the unicode for the down-arrow icon (fa-chevron-down) */
    margin-left: 8px;           /* Adds space between the button text and the arrow */
    transition: transform 0.2s ease-in-out; /* Adds a smooth animation effect if you want one */
}

/* This rule targets the button ONLY when the content area is expanded */
.read-more-btn[aria-expanded="true"]:after {
    content: "\f077"; /* This changes the icon to the up-arrow (fa-chevron-up) */
}