/**
Theme Name: UMMSE
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ummse
Template: astra
*/

/* Person Profile Styles - Astra Theme Optimized */

/* Main Container - Works with Astra's content width */
.person-profile {
    max-width: 100%;
    margin: 0 auto 3rem;
    padding: 0;
}

/* Header Section */
.person-header {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 3px solid var(--ast-global-color-0, #00274c); /* Uses Astra color or fallback to U-M Blue */
}

.person-image {
    position: relative;
    width: 200px;          /* or whatever size you want */
    max-width: 200px;    
}

.person-image img {
    width: 100%;
    height: auto;
    object-fit: cover;     /* crops cleanly if needed */

    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: block;
}

.person-image .image-caption {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.75rem;
    font-style: italic;
    line-height: 1.5;
}

/* Basic Info */
.person-basic-info h1.person-name {
    color: var(--ast-global-color-0, #00274c);
    font-size: 2.25rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    font-weight: 700;
}

.person-pronouns {
    color: #666;
    font-size: 1rem;
    margin: 0.25rem 0 1rem 0;
}

.person-pronunciation {
    margin: 0.75rem 0;
}

.person-pronunciation a {
    color: #fff;
    background-color: var(--ast-global-color-0, #00274c);
    padding: 0.6rem 1.25rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.person-pronunciation a:hover {
    background-color: #003366;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.person-title {
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
    margin: 1.1rem 0;
    line-height: 1.1;
}

.person-research-short {
    font-size: 1rem;
    line-height: 1.7;
    margin-top: 1.25rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-left: 4px solid var(--ast-global-color-1, #ffcb05);
    border-radius: 4px;
}

/* Sections - Integrate with Astra spacing */
.person-profile section {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.person-profile section h2 {
    color: var(--ast-global-color-0, #00274c);
    border-bottom: 3px solid var(--ast-global-color-1, #ffcb05);
    padding-bottom: 0.75rem;
    margin: 0 0 1.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Contact Information */
.person-contact {
    background-color: #f8f9fa;
}

.person-contact p {
    margin: 1rem 0;
    line-height: 1.8;
    font-size: 1rem;
}

.person-contact strong {
    color: #333;
    font-weight: 600;
}

.person-contact a {
    color: var(--ast-global-color-0, #00274c);
    text-decoration: none;
    transition: color 0.3s ease;
}

.person-contact a:hover {
    color: #003366;
    text-decoration: underline;
}

.person-address {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

/* Content Sections */
.person-biography,
.person-experience,
.person-awards,
.person-group-news {
    line-height: 1.8;
}

.person-biography div,
.person-experience div,
.person-awards div,
.person-group-news div {
    font-size: 1.05rem;
}

.person-biography p,
.person-experience p,
.person-awards p,
.person-group-news p {
    margin-bottom: 1rem;
}

/* Education and Specialties */
.person-education div,
.person-specialties div,
.person-courses {
    line-height: 1.9;
    font-size: 1rem;
}

.person-related-websites-list {
    margin: 0.35rem 0 0;
    padding-left: 0;
    list-style: none;
}

.person-related-websites-list li {
    position: relative;
    margin-bottom: 0.25rem;
    padding-left: 1.1rem;
    line-height: 1.4;
}

.person-related-websites-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0.5em;
    line-height: 1.4;
    color: #00274C;
    font-weight: 700;
}

.person-related-websites-list a {
    color: #00274C;
    text-decoration: none;
}

.person-related-websites-list a:hover {
    text-decoration: underline;
}


/* Lists */
.person-profile ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.person-profile ul li {
    padding: 0.75rem 0 0.75rem 2rem;
    position: relative;
    line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
}

.person-profile ul li:last-child {
    border-bottom: none;
}

.person-profile ul li:before {
    content: "▸";
    color: var(--ast-global-color-1, #ffcb05);
    position: absolute;
    left: 0.5rem;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* Group Photo */
.person-group-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.group-photo-caption {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 6px;
}

/* Student Info */
.person-student-info p {
    margin: 1rem 0;
    line-height: 1.8;
}

/* Responsive Design - Astra breakpoints */
@media (max-width: 921px) {
    .person-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .person-image {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .person-basic-info h1.person-name {
        font-size: 2rem;
        text-align: center;
    }
    
    .person-title,
    .person-pronouns,
    .person-research-short {
        text-align: center;
    }
    
    .person-pronunciation {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .person-profile section {
        padding: 1.5rem;
    }
    
    .person-basic-info h1.person-name {
        font-size: 1.75rem;
    }
    
    .person-profile section h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 544px) {
    .person-profile {
        padding: 0;
    }
    
    .person-profile section {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
    
    .person-basic-info h1.person-name {
        font-size: 1.5rem;
    }
    
    .person-profile section h2 {
        font-size: 1.35rem;
    }
    
    .person-header {
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
    }
}

/* Print Styles */
@media print {
    .person-pronunciation,
    .video-container {
        display: none;
    }
    
    .person-profile section {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .person-header {
        page-break-after: avoid;
    }
}

/* Astra Content Container Integration */
.ast-separate-container .person-profile {
    padding: 0;
}

.ast-separate-container .person-profile section {
    background-color: #fff;
}





/* added after it broked */



/* ==========================================================================
   People Grid - Astra Theme Compatibility
   ========================================================================== */

/* Ensure grid respects Astra's container */
.people-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix for cards overflowing */
.person-card {
    box-sizing: border-box;
    min-width: 0; /* Prevents grid blowout */
}

.person-card__image-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

.person-card__image {
    max-width: 100%;
    height: auto;
}

/* Astra container compatibility */
.entry-content .people-grid,
.ast-container .people-grid {
    margin-left: 0;
    margin-right: 0;
}

/* Mobile responsiveness for Astra */
@media (max-width: 921px) {
    .people-grid {
        gap: 20px;
    }
}

@media (max-width: 544px) {
    .people-grid {
        gap: 15px;
    }
    
    .person-card {
        padding: 15px;
    }
}

/* Event Archive Styles */
.upcoming-events,
.past-events {
    margin-bottom: 3rem;
}

.upcoming-events h2,
.past-events h2 {
    border-bottom: 3px solid #00274c; /* U-M Blue */
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.past-events {
    opacity: 0.8;
}

.past-events h2 {
    border-bottom-color: #9a9a9a;
}

.events-list {
    display: grid;
    gap: 1.5rem;
}

.event-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.event-item:hover {
    box-shadow: 0 4px 12px rgba(0, 39, 76, 0.1);
}

.event-date {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #00274c; /* U-M Blue */
    color: #fff;
    text-align: center;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event-month {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.event-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.event-details {
    flex: 1;
}

.event-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

.event-title a {
    color: #00274c;
    text-decoration: none;
}

.event-title a:hover {
    color: #ffcb05; /* U-M Maize */
}

.event-meta-brief {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.event-excerpt {
    margin-bottom: 1rem;
    color: #333;
}

.event-read-more {
    color: #00274c;
    font-weight: 600;
    text-decoration: none;
}

.event-read-more:hover {
    color: #ffcb05;
}

/* Single Event Styles */
.event-single .entry-header {
    margin-bottom: 2rem;
}

.event-meta {
    background: #f5f5f5;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.event-meta > div {
    margin-bottom: 1.5rem;
}

.event-meta > div:last-child {
    margin-bottom: 0;
}

.event-meta h3 {
    color: #00274c;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.event-datetime p {
    line-height: 1.8;
}

.event-url .button {
    display: inline-block;
    background: #00274c;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.event-url .button:hover {
    background: #ffcb05;
    color: #00274c;
}

.event-description {
    margin-top: 2rem;
}

.event-description h3 {
    color: #00274c;
    margin-bottom: 1rem;
}

.back-to-events {
    display: inline-block;
    margin-top: 2rem;
    color: #00274c;
    text-decoration: none;
    font-weight: 600;
}

.back-to-events:hover {
    color: #ffcb05;
}

/* Responsive */
@media (max-width: 768px) {
    .event-item {
        flex-direction: column;
    }
    
    .event-date {
        width: 100%;
        height: 60px;
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .event-day {
        font-size: 1.5rem;
    }
    
    .event-meta-brief {
        flex-direction: column;
        gap: 0.5rem;
    }    
}

/* Course Single Page Styles */
.course-single {
    max-width: 1200px;
    margin: 0 auto;
}

.course-header {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 3px solid #00274C;
}

.course-title {
    color: #00274C;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.course-subtitle {
    color: #666;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.course-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin-top: 1rem;
}

/* Course Meta Box */
.course-meta-box {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.course-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.course-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-meta-instructors {
    grid-column: 1 / -1;
}

.meta-label {
    font-weight: 700;
    color: #00274C;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

.instructor-link {
    display: inline-block;
    color: #00274C;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 2px solid #00274C;
    border-radius: 6px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.instructor-link:hover {
    background: #00274C;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 39, 76, 0.2);
}

/* Course Content Sections */
.course-content {
    margin-bottom: 2rem;
}

.course-section {
    margin-bottom: 2.5rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 2rem;
    transition: box-shadow 0.3s ease;
}

.course-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.section-title {
    color: #00274C;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #FFCB05;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: #00274C;
}

.section-content {
    color: #333;
    font-size: 1rem;
    line-height: 1.8;
}

.section-content ul,
.section-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.section-content li {
    margin-bottom: 0.5rem;
}

.section-content p {
    margin-bottom: 1rem;
}

.section-content strong {
    color: #00274C;
}

/* Course Footer */
.course-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e5e5;
}

.back-to-courses {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #00274C;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    background: #f9f9f9;
    border: 2px solid #00274C;
    border-radius: 8px;
}

.back-to-courses:hover {
    background: #00274C;
    color: #fff;
    transform: translateX(-4px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-title {
        font-size: 2rem;
    }
    
    .course-subtitle {
        font-size: 1.25rem;
    }
    
    .course-meta-grid {
        grid-template-columns: 1fr;
    }
    
    .course-meta-box {
        padding: 1.5rem;
    }
    
    .course-section {
        padding: 1.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .course-title {
        font-size: 1.75rem;
    }
    
    .instructor-link {
        display: block;
        text-align: center;
        margin-right: 0;
    }
}

/* Course Table Styling */
.course-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.course-table thead {
    background-color: #00274C; /* U-M Blue */
    color: #fff;
}

.course-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #FFCB05; /* U-M Maize */
}

.course-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
}

.course-table tbody tr:hover {
    background-color: #f5f5f5;
}

.course-table td:first-child {
    font-weight: 600;
    color: #00274C;
}

.course-table a {
    color: #00274C;
    text-decoration: none;
    transition: color 0.2s;
}

.course-table a:hover {
    color: #FFCB05;
    text-decoration: underline;
}

.course-table .no-instructor {
    color: #999;
    font-style: italic;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .course-table {
        border: 0;
    }
    
    .course-table thead {
        display: none;
    }
    
    .course-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .course-table td {
        display: block;
        text-align: right;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
    
    .course-table td:last-child {
        border-bottom: 0;
    }
    
    .course-table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: #00274C;
    }
}
/* ==========================================================================
   MSE Newsletter Grid
   ========================================================================== */

.mse-newsletter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.mse-newsletter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    min-width: 0; /* Prevents grid blowout - matches your existing people-grid fix */
}

.mse-newsletter-item a {
    display: block;
    width: 100%;
}

.mse-newsletter-item img {
    width: 100%;
    height: auto;
    max-width: 200px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.mse-newsletter-item img:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-3px);
}

.mse-newsletter-item p {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 1rem;
}

.mse-newsletter-item p a {
    text-decoration: none;
    color: var(--ast-global-color-0, #00274c);
}

.mse-newsletter-item p a:hover {
    text-decoration: underline;
    color: var(--ast-global-color-1, #ffcb05);
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .mse-newsletter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .mse-newsletter-grid {
        grid-template-columns: 1fr;
    }

    .mse-newsletter-item img {
        max-width: 160px;
    }
}

.ummse-breadcrumbs {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: #555;
}

.ummse-breadcrumbs a {
    color: #00274C;
    text-decoration: none;
}

.ummse-breadcrumbs a:hover {
    text-decoration: underline;
}

.ummse-breadcrumb-separator {
    margin: 0 0.4rem;
    color: #777;
}

.page .ast-breadcrumbs-wrapper {
    margin-bottom: 1.25rem !important;
}

.person-profile.person-subpage-header {
    margin-top: 1.25rem;
}


/* Custom People section breadcrumbs */
.ummse-people-section-breadcrumbs {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: #555;
}

.ummse-people-section-breadcrumbs a {
    color: #00274C;
    text-decoration: none;
}

.ummse-people-section-breadcrumbs a:hover {
    text-decoration: underline;
}

.ummse-people-section-breadcrumbs .ummse-breadcrumb-separator {
    margin: 0 0.4rem;
    color: #777;
}

/*
 * Hide Astra's incorrect native breadcrumbs only on virtual People section pages.
 * This prevents Home / Faculty from showing.
 */
.ummse-people-section-page .ast-breadcrumbs-wrapper:not(.ummse-people-section-breadcrumbs),
.ummse-people-section-page .ast-breadcrumbs:not(.ummse-people-section-breadcrumbs),
.ummse-people-section-page .breadcrumb-trail:not(.ummse-people-section-breadcrumbs) {
    display: none !important;
}

/* Search results page */
.search-results-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.ummse-search-result {
    padding: 1.5rem 0;
    border-bottom: 1px solid #ddd;
}

.ummse-search-result-title {
    margin-bottom: 0.35rem;
}

.ummse-search-result-title a {
    color: #00274C;
    text-decoration: none;
}

.ummse-search-result-title a:hover {
    text-decoration: underline;
}

.ummse-search-result-type {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #00274C;
    background: #FFCB05;
    border-radius: 3px;
}

.ummse-search-result-excerpt {
    margin-bottom: 0.75rem;
}

.ummse-search-result-read-more {
    color: #00274C;
    font-weight: 600;
    text-decoration: none;
}

.ummse-search-result-read-more:hover {
    text-decoration: underline;
}



/* Equipment Accordion */

.equipment-accordion-wrapper {
    margin: 2rem 0;
}

.equipment-category-section {
    margin-bottom: 2.5rem;
}

.equipment-category-title {
    margin-bottom: 1rem;
    color: #00274C;
    border-bottom: 3px solid #FFCB05;
    padding-bottom: 0.4rem;
}

.equipment-category-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.equipment-accordion-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.equipment-accordion-summary {
    cursor: pointer;
    padding: 1rem 1.25rem;
    background: #f7f7f7;
    color: #00274C;
    font-weight: 700;
    list-style: none;
}

.equipment-accordion-summary::-webkit-details-marker {
    display: none;
}

.equipment-accordion-summary::before {
    content: "+";
    display: inline-block;
    margin-right: 0.65rem;
    font-weight: 700;
    color: #00274C;
}

.equipment-accordion-item[open] .equipment-accordion-summary::before {
    content: "–";
}

.equipment-accordion-summary:hover,
.equipment-accordion-item[open] .equipment-accordion-summary {
    background: #FFCB05;
    color: #00274C;
}

.equipment-accordion-content {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
    border-top: 1px solid #ddd;
}

.equipment-accordion-image-wrap {
    flex: 0 0 160px;
}

.equipment-accordion-image {
    max-width: 160px;
    height: auto;
    border-radius: 4px;
    display: block;
}

.equipment-accordion-text {
    flex: 1;
}

.equipment-accordion-description {
    margin-bottom: 1rem;
}

.equipment-accordion-description p:last-child {
    margin-bottom: 0;
}

.equipment-accordion-location {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.equipment-accordion-link {
    color: #00274C;
    font-weight: 700;
    text-decoration: none;
}

.equipment-accordion-link:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 700px) {
    .equipment-accordion-content {
        flex-direction: column;
    }

    .equipment-accordion-image-wrap {
        flex: none;
    }

    .equipment-accordion-image {
        max-width: 100%;
    }
}


/* Equipment archive */

.equipment-archive-page,
.single-equipment-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.equipment-archive-header {
    margin-bottom: 2rem;
}

.equipment-archive-category {
    margin-bottom: 3rem;
}

.equipment-archive-category-title {
    color: #00274C;
    border-bottom: 3px solid #FFCB05;
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}

.equipment-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.equipment-archive-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.equipment-archive-card-image-wrap {
    background: #f5f5f5;
}

.equipment-archive-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.equipment-archive-card-content {
    padding: 1.25rem;
}

.equipment-archive-card-title {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.equipment-archive-card-title a {
    color: #00274C;
    text-decoration: none;
}

.equipment-archive-card-title a:hover {
    text-decoration: underline;
}

.equipment-archive-card-description {
    margin-bottom: 0.75rem;
}

.equipment-archive-card-location {
    margin-bottom: 0.75rem;
}

.equipment-archive-card-link {
    color: #00274C;
    font-weight: 700;
    text-decoration: none;
}

.equipment-archive-card-link:hover {
    text-decoration: underline;
}


/* Single equipment */

.equipment-single-header {
    margin-bottom: 2rem;
}

.equipment-single-title {
    color: #00274C;
    margin-bottom: 0.75rem;
}

.equipment-single-summary {
    font-size: 1.1rem;
    color: #555;
    max-width: 850px;
}

.equipment-single-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 2rem;
    align-items: start;
}

.equipment-single-media {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #ddd;
}

.equipment-single-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.equipment-single-meta-card,
.equipment-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

.equipment-single-meta-card h2,
.equipment-section h2 {
    color: #00274C;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid #FFCB05;
    padding-bottom: 0.35rem;
}

.equipment-contact-block h3,
.equipment-section-content h3 {
    color: #00274C;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.equipment-meta-list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.equipment-meta-list dt {
    font-weight: 700;
    color: #00274C;
}

.equipment-meta-list dd {
    margin: 0;
}

@media (max-width: 900px) {
    .equipment-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .equipment-single-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .equipment-archive-grid {
        grid-template-columns: 1fr;
    }

    .equipment-meta-list {
        grid-template-columns: 1fr;
    }

    .equipment-meta-list dt {
        margin-top: 0.5rem;
    }
}

/* Equipment archive table of contents */

.equipment-toc {
    margin: 2rem 0 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #ddd;
    border-left: 5px solid #FFCB05;
    background: #f7f7f7;
    border-radius: 6px;
}

.equipment-toc-title {
    margin: 0 0 0.75rem;
    color: #00274C;
    font-size: 1.25rem;
}

.equipment-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.equipment-toc-item {
    margin: 0;
}

.equipment-toc-item a {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    color: #00274C;
    text-decoration: none;
    font-weight: 600;
}

.equipment-toc-item a:hover,
.equipment-toc-item a:focus {
    background: #FFCB05;
    border-color: #00274C;
    color: #00274C;
    text-decoration: none;
}

/* Prevent anchor jumps from hiding behind sticky headers */
.equipment-archive-category {
    scroll-margin-top: 120px;
}

.equipment-back-to-toc {
    margin-top: 1rem;
    text-align: right;
}

.equipment-back-to-toc a {
    color: #00274C;
    font-weight: 600;
    text-decoration: none;
}

.equipment-back-to-toc a:hover {
    text-decoration: underline;
}

/* Equipment Directory Shortcode */

.equipment-directory-wrapper {
    margin: 2rem 0;
}

.equipment-directory-category {
    margin-bottom: 3rem;
    scroll-margin-top: 120px;
}

.equipment-directory-category-title {
    color: #00274C;
    border-bottom: 3px solid #FFCB05;
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}

.equipment-directory-category-description {
    margin-bottom: 1.25rem;
}

.equipment-directory-grid {
    display: grid;
    gap: 1.5rem;
}

.equipment-directory-columns-1 .equipment-directory-grid {
    grid-template-columns: 1fr;
}

.equipment-directory-columns-2 .equipment-directory-grid {
    grid-template-columns: repeat(2, 1fr);
}

.equipment-directory-columns-3 .equipment-directory-grid {
    grid-template-columns: repeat(3, 1fr);
}

.equipment-directory-columns-4 .equipment-directory-grid {
    grid-template-columns: repeat(4, 1fr);
}

.equipment-directory-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}

.equipment-directory-card-image-wrap {
    background: #f5f5f5;
}

.equipment-directory-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.equipment-directory-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.equipment-directory-card-title {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.equipment-directory-card-title a {
    color: #00274C;
    text-decoration: none;
}

.equipment-directory-card-title a:hover {
    text-decoration: underline;
}

.equipment-directory-card-description {
    margin-bottom: 0.75rem;
}

.equipment-directory-card-location {
    margin-bottom: 0.75rem;
}

.equipment-directory-card-link-wrap {
    margin-top: auto;
}

.equipment-directory-card-link {
    color: #00274C;
    font-weight: 700;
    text-decoration: none;
}

.equipment-directory-card-link:hover {
    text-decoration: underline;
}

/* Shared Equipment ToC styles */

.equipment-toc {
    margin: 2rem 0 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #ddd;
    border-left: 5px solid #FFCB05;
    background: #f7f7f7;
    border-radius: 6px;
}

.equipment-toc-title {
    margin: 0 0 0.75rem;
    color: #00274C;
    font-size: 1.25rem;
}

.equipment-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.equipment-toc-item {
    margin: 0;
}

.equipment-toc-item a {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    color: #00274C;
    text-decoration: none;
    font-weight: 600;
}

.equipment-toc-item a:hover,
.equipment-toc-item a:focus {
    background: #FFCB05;
    border-color: #00274C;
    color: #00274C;
    text-decoration: none;
}

.equipment-back-to-toc {
    margin-top: 1rem;
    text-align: right;
}

.equipment-back-to-toc a {
    color: #00274C;
    font-weight: 600;
    text-decoration: none;
}

.equipment-back-to-toc a:hover {
    text-decoration: underline;
}

/* Responsive */

@media (max-width: 1000px) {
    .equipment-directory-columns-3 .equipment-directory-grid,
    .equipment-directory-columns-4 .equipment-directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .equipment-directory-columns-2 .equipment-directory-grid,
    .equipment-directory-columns-3 .equipment-directory-grid,
    .equipment-directory-columns-4 .equipment-directory-grid {
        grid-template-columns: 1fr;
    }

    .equipment-directory-image {
        height: auto;
    }
}


/* VVUL Navigation - right sidebar style */

.vvul-nav {
    float: right;
    width: 260px;
    margin: 0 0 1.5rem 2rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-top: 5px solid #FFCB05;
    background: #f7f7f7;
    border-radius: 6px;
}

.vvul-nav-title {
    margin: 0 0 0.75rem;
    color: #00274C;
    font-size: 1.15rem;
    font-weight: 700;
}

.vvul-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vvul-nav-item {
    margin: 0;
}

.vvul-nav-item a {
    display: block;
    padding: 0.55rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #00274C;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
}

.vvul-nav-item a:hover,
.vvul-nav-item a:focus,
.vvul-nav-item.is-active a {
    background: #FFCB05;
    border-color: #00274C;
    color: #00274C;
    text-decoration: none;
}

/* Mobile: make it full width above/between content */
@media (max-width: 800px) {
    .vvul-nav {
        float: none;
        width: auto;
        margin: 1.5rem 0;
    }
}


Add this to your child theme style.css.

/* General Section Sidebar Navigation */

.section-nav {
    margin: 0 0 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-top: 5px solid #FFCB05;
    background: #f7f7f7;
    border-radius: 6px;
}

.section-nav-title {
    margin: 0 0 0.75rem;
    color: #00274C;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.section-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-nav-root-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.section-nav-item {
    margin: 0;
    padding: 0;
}

.section-nav-item a {
    display: block;
    padding: 0.55rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #00274C;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
}

.section-nav-item a:hover,
.section-nav-item a:focus,
.section-nav-item.is-active > a {
    background: #FFCB05;
    border-color: #00274C;
    color: #00274C;
    text-decoration: none;
}

.section-nav-item.is-ancestor > a {
    border-color: #00274C;
    background: #eef3f8;
}

/* Nested children/grandchildren */
.section-nav-item .section-nav-list {
    margin-top: 0.35rem;
    margin-left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.section-nav-item .section-nav-list .section-nav-item a {
    font-size: 0.95rem;
    padding: 0.45rem 0.65rem;
    font-weight: 500;
}

.section-nav-item .section-nav-list .section-nav-item .section-nav-list {
    margin-left: 0.75rem;
}

.section-nav-item .section-nav-list .section-nav-item .section-nav-list a {
    font-size: 0.9rem;
}

/* Single Course Layout with LEFT Sidebar - not sticky */

.single-course-page .course-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.single-course-page .course-main {
    min-width: 0;
    grid-column: 2;
}

.single-course-page .course-sidebar {
    grid-column: 1;
    grid-row: 1;
    position: static;
}

/* Make existing section_nav fit nicely in course sidebar */
.single-course-page .course-sidebar .section-nav {
    margin-top: 0;
}

/* Mobile */
@media (max-width: 900px) {
    .single-course-page .course-layout {
        grid-template-columns: 1fr;
    }

    .single-course-page .course-main,
    .single-course-page .course-sidebar {
        grid-column: auto;
        grid-row: auto;
    }

    .single-course-page .course-sidebar {
        margin-bottom: 1.5rem;
    }
}

.mse-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

@media screen and (max-width: 1024px) {
  .mse-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .mse-video-grid {
    grid-template-columns: 1fr;
  }
}

.mse-schedule-table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}

.mse-schedule-table td:first-child {
  min-width: 320px;
}

.mse-schedule-table td:nth-child(2) {
  min-width: 90px;
}

.mse-schedule-table td {
  vertical-align: middle;
}

/* Single Equipment layout with left section navigation */

.equipment-section-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.equipment-section-sidebar,
.equipment-section-main {
    min-width: 0;
}

.equipment-section-sidebar {
    position: static;
}

.equipment-section-sidebar .section-nav {
    margin-top: 0;
}

@media (max-width: 900px) {
    .equipment-section-layout {
        grid-template-columns: 1fr;
    }

    .equipment-section-sidebar {
        margin-bottom: 1.5rem;
    }
}