/*
 Theme Name:   Astra Child
 Theme URI:    https://yourdomain.com/
 Description:  A custom child theme for the Astra WordPress theme.
 Author:       Your Name or Company Name
 Author URI:   https://yourdomain.com/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         astra, custom
 Text Domain:  astra-child
*/

/*
 * Custom Styles for single-staff.php
*/

/* Highlight the Client Status */
.client-status {
    background-color: #f0f8ff; /* Light Blue background */
    border: 1px solid #cceeff; 
    padding: 15px;
    text-align: center;
    margin: 20px 0;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
}

/* Use CSS Grid to display the detail sections (Specialties, Ages, Locations) side-by-side */
.staff-details-grid {
    display: grid;
    /* Creates 3 columns, or fewer if the screen is too small */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #eee;
}

.staff-section h3 {
    color: #333;
    border-bottom: 2px solid #ffcc00; /* Yellow accent for headers */
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 1.3em;
}

/* Styling for the lists */
.staff-section ul {
    list-style: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
}

.staff-section ul li {
    padding: 5px 0;
    border-bottom: 1px dotted #ccc;
}

.staff-section ul li:last-child {
    border-bottom: none;
}

/* This container will hold the image and text side-by-side */
.staff-header-flex {
    display: flex;
    align-items: flex-start; /* Aligns content to the top */
    gap: 30px; /* Space between the image and the text */
    margin-bottom: 20px;
}

/* Style for the image container */
.staff-headshot {
    flex-shrink: 0; /* Prevents image from shrinking */
    max-width: 150px; /* Adjust size as needed */
    overflow: hidden;
    border-radius: 50%; /* Makes the headshot circular */
    border: 4px solid #f0f8ff;
}

/* Make the image inside the container fill it */
.staff-headshot img {
    display: block;
    width: 100%;
    height: auto;
}

/* Ensure text container takes up the remaining space */
.staff-header-info {
    flex-grow: 1;
}

/* Media query for small screens (stack image and text) */
@media (max-width: 600px) {
    .staff-header-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .staff-headshot {
        max-width: 120px;
    }
}