/* Draft Version: 0.0.5 - Last Updated: 2024-08-13 */

/* Table of Contents
1. Variables
2. Global Styles
3. Typography
4. Layout
5. Components
   5.1 Navbar
   5.2 Buttons
   5.4 Carousels
   5.5 Modals
   5.6 Programs
   5.7 Events
   5.8 Footer
6. Utilities
7. Media Queries
8. Prompt Library Styles
9. Partnerships Page Styles
10. Schedule Page Styles
*/

/* 1. Variables */
:root {
    --primary-green: #677C3E;
    --secondary-green: #C7D3B0;
    --medium-green: #94A870;
    --darker-grey: #282827;
    --primary-gray: #333333;
    --secondary-gray: #5E5E5E;
    --medium-gray: #848482;
    --white: #ffffff;
    --black: #000000;
    --logo-min-scale: 1;
    --logo-max-scale: 1.75;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Global Styles */
body {
    background-color: #000000;
    background-color: var(--black);
    color: #ffffff;
    color: var(--white);
    padding-top: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile specific padding adjustment */
@media (max-width: 768px) {
    body {
        padding-top: 100px;
    }
}

@media (max-width: 576px) {
    body {
        padding-top: 110px;
    }
}

html {
    scroll-behavior: smooth;
}

.bg-light {
    background-color: var(--black) !important;
}

/* 3. Typography */
a.text-white {
    color: var(--white);
    text-decoration: none;
}

a.text-white:hover,
.contact-email:hover {
    color: var(--primary-green);
}

.blue-link {
    color: var(--secondary-green);
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
}

.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--white);
}

/* 4. Layout */
.section,
#programs,
#events {
    background-color: var(--black);
    padding: 20px 0 40px;
    margin-top: 0;
    color: var(--white);
    text-align: center;
}

.section-divider {
    width: 100%;
    height: 2px;
    background-color: var(--secondary-green);
    transform: translateZ(0);
    margin: 0;
}

section {
    scroll-margin-top: 60px;
}

h2 {
    margin-top: 0;
}

/* Hide the specific section divider for Programs */
#programs.section-divider {
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    /* Ensure content doesn't spill */
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 5. Components */
/* 5.1 Navbar */
.navbar {
    background-color: var(--darker-grey);
    transition: background-color 0.3s ease;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-logo {
    height: 60px;
    margin-right: 10px;
}

.navbar-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.navbar-title {
    font-size: 1.6rem;
    font-weight: bold;
}

/* Mobile navbar adjustments */
@media (max-width: 991px) {
    .navbar-logo {
        height: 45px;
        margin-right: 8px;
    }

    .navbar-title {
        font-size: 1.2rem;
    }

    .navbar-subtitle {
        font-size: 0.75rem;
    }

    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
        margin-left: auto;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        flex: 1;
        max-width: calc(100% - 60px);
        /* Leave space for toggler */
    }
}

@media (max-width: 576px) {
    .navbar-logo {
        height: 35px;
        margin-right: 6px;
    }

    .navbar-title {
        font-size: 0.95rem;
    }

    .navbar-subtitle {
        display: none;
        /* Hide subtitle only on very small screens */
    }

    .navbar .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Mobile menu styling */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--darker-grey);
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

    .navbar-nav {
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s;
    }

    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

/* Style for the subtitle under the main brand name */
.navbar-subtitle {
    font-size: 0.85rem;
    /* Slightly larger than the original 0.75rem */
    font-weight: normal;
    /* Keeping normal weight as requested */
    color: var(--secondary-green);
    /* Use the bold green color */
    margin-top: 2px;
    /* Optional: Add a small gap */
}

.navbar-nav .nav-item {
    margin-left: 15px;
}

.navbar-nav .nav-link {
    color: var(--white) !important;
    transition: background-color 0.3s, border-radius 0.3s;
}

.navbar-nav .nav-link:active {
    background-color: var(--medium-green);
    border-radius: 5px;
}

.navbar-nav .nav-item.active .nav-link {
    color: var(--secondary-green) !important;
    font-weight: bold;
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--darker-grey);
    transition: background-color 0.3s ease, box-shadow 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sticky-placeholder {
    height: 60px;
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 5.2 Buttons */
.btn-primary,
.cta-button,
.nav-tabs .nav-link,
.event-card .sign-up-btn,
.view-more-btn,
.get-involved .btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    border-radius: 5px;
    padding: 0.5rem 1.5rem;
}

.btn-primary:hover,
.cta-button:hover,
.nav-tabs .nav-link:hover,
.event-card .sign-up-btn:hover,
.view-more-btn:hover,
.get-involved .btn-primary:hover {
    background-color: var(--medium-green);
    border-color: var(--medium-green);
    color: var(--black);
}

.btn-primary:active,
.cta-button:active,
.nav-tabs .nav-link:active,
.event-card .sign-up-btn:active,
.view-more-btn:active,
.get-involved .btn-primary:active,
.btn-primary:focus,
.cta-button:focus,
.nav-tabs .nav-link:focus,
.event-card .sign-up-btn:focus,
.view-more-btn:focus,
.get-involved .btn-primary:focus {
    background-color: var(--secondary-green) !important;
    border-color: var(--primary-green) !important;
    color: var(--black) !important;
    font-weight: bold;
    box-shadow: none !important;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--primary-green) !important;
}

/* Custom button style for secondary green */
.btn-secondary-green {
    background-color: var(--secondary-green);
    border-color: var(--secondary-green);
    color: var(--primary-gray);
    /* Darker text for contrast */
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.btn-secondary-green:hover {
    background-color: #dde4d0;
    /* Slightly lighter shade of secondary green */
    border-color: #dde4d0;
    color: var(--black);
}

.btn-secondary-green:active,
.btn-secondary-green:focus {
    background-color: var(--secondary-green) !important;
    border-color: var(--primary-green) !important;
    /* Keep primary border for focus? */
    color: var(--black) !important;
    box-shadow: none !important;
}

/* 5.4 Carousels */
.carousel {
    margin-bottom: 0;
    padding-bottom: 0;
}

.carousel-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 60vh;
    min-height: 400px;
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    padding: 20px 0;
    width: 100%;
    max-width: 100%;
    border-radius: 5px;
    z-index: 2;
}

.gradient-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 10px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: -1;
}

.carousel-caption .cta-button {
    margin-top: 10px;
}

/* Media Queries for Responsive Carousel Height */
@media (min-width: 768px) {

    /* Medium devices (tablets, 768px and up) */
    #heroCarousel .carousel-item {
        height: 70vh;
        min-height: 500px;
    }
}

@media (min-width: 992px) {

    /* Large devices (desktops, 992px and up) */
    #heroCarousel .carousel-item {
        height: 80vh;
        min-height: 600px;
    }
}

@media (min-width: 1200px) {

    /* Extra large devices (large desktops, 1200px and up) */
    #heroCarousel .carousel-item {
        height: 85vh;
        min-height: 650px;
    }
}

@media (min-width: 1400px) {

    /* Extra extra large devices (larger desktops, 1400px and up) */
    #heroCarousel .carousel-item {
        height: 90vh;
        min-height: 700px;
    }
}

#heroCarousel .carousel-caption {
    position: absolute;
}

/* 5.5 Modals */
.modal-content {
    background-color: var(--primary-gray);
    color: var(--white);
    border: 1px solid var(--medium-gray);
}

.modal-header {
    border-bottom: 1px solid var(--medium-gray);
}

.modal-footer {
    border-top: 1px solid var(--medium-gray);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    /* Makes the default close button white */
}

/* Donate Modal Specific Styling */
.donate-modal-styling .modal-content {
    background-color: var(--black);
}

.donate-modal-styling .modal-header {
    background-color: var(--secondary-green);
    border-bottom-color: var(--black);
    /* Updated border for contrast */
}

.donate-modal-styling .modal-title {
    color: var(--black);
    /* Updated color */
    font-weight: bold;
}

.donate-modal-styling .modal-body {
    /* The body background is handled by modal-content, but text color might need adjustment if default is different */
    color: var(--white);
    /* Ensure body text is readable if needed */
}

.donate-modal-styling .modal-footer {
    background-color: var(--secondary-green);
    border-top-color: var(--black);
    /* Updated border for contrast */
}

/* Change close button color specifically for the donate modal */
.donate-modal-styling .btn-close {
    filter: none;
    /* Remove the white filter to show the default black 'X' */
    opacity: 0.75;
    /* Add some opacity for better visual balance */
}

.privacy-modal .modal-body {
    text-align: left;
}

.privacy-modal .modal-body ul {
    list-style-type: disc;
    padding-left: 20px;
}

.privacy-modal .modal-body h2,
.privacy-modal .modal-body h3,
.privacy-modal .modal-body h5,
.privacy-modal .modal-body h6,
.privacy-modal .modal-body p {
    text-align: left;
}

.close {
    color: #343a40;
}

.modal,
.modal-dialog,
.modal-content {
    pointer-events: auto;
}

/* 5.6 Programs */
.programs-container {
    background-color: var(--secondary-gray);
    padding: 40px;
    border-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    border-bottom: none;
    position: relative;
    z-index: 2;
}

.nav-tabs .nav-item {
    flex: 1;
    margin: 0 2px;
}

.nav-tabs .nav-link {
    width: 100%;
    text-align: center;
    padding: 10px 5px;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--white);
    background-color: var(--primary-green);
    border: 1px solid var(--secondary-green);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    background-color: var(--secondary-green);
    color: var(--black);
    border-color: var(--secondary-green);
}

.nav-tabs .nav-link:focus {
    background-color: var(--black);
    color: var(--white);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.tab-content {
    background-color: var(--darker-gray) !important;
    color: var(--white);
    border-radius: 0 0 5px 5px;
    padding: 20px;
    margin-top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white);
    position: relative;
    z-index: 1;
}

.program-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.program-description h3 {
    color: var(--primary-green);
    margin-bottom: 10px;
}

.program-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.program-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
    fill: var(--primary-green);
}

.program-icon svg {
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.program-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.program-container .program-item {
    flex: 1 1 30%;
    max-width: 250px;
    margin: 20px;
}

/* 5.7 Events */
#events {
    background-color: var(--darker-grey);
    padding: 40px 0;
    width: 100%;
    overflow-x: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

#events .container {
    background-color: var(--darker-grey);
    max-width: 95%;
    padding: 0;
    overflow-x: visible;
    /* Changed from hidden to visible */
    padding-top: 2rem;
    /* Adjust as needed */
    padding-bottom: 1rem;
    /* Reduced bottom padding */
    margin-bottom: 0;
}

.event-card-container {
    background-color: var(--darker-grey);
    padding-bottom: 10px;
    position: relative;
    max-width: 630px;
    margin: 0 auto;
    overflow-x: visible;
    /* Changed from hidden to visible */
}

.event-card-container.expanded {
    overflow-y: auto;
    max-height: 600px;
    padding-right: 15px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overflow-x: visible;
    /* Changed from hidden to visible */
}

#eventCardsRow {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: max-height 0.3s ease;
    width: 100%;
}

.event-card {
    background-color: var(--secondary-green);
    color: var(--black);
    border: none;
    border-radius: 10px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: calc(100% - 30px);
    /* Adjusted width to account for padding */
    max-width: 570px;
    /* Adjusted max-width to account for padding */
    position: relative;
}

.event-card .card-title {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 8px 15px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-card .card-title h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.event-card .card-body {
    padding: 10px 15px 60px;
    /* Added bottom padding to accommodate the button */
    font-size: 0.9rem;
    text-align: left;
}

.event-card .card-body p {
    margin: 1px 0;
}

.event-card .description {
    margin-top: 3px;
}

.event-card .sign-up-btn {
    position: absolute;
    bottom: 15px;
    /* Changed from top to bottom */
    right: 15px;
    font-size: 1rem;
    padding: 6px 12px;
    z-index: 1;
}

/* At Capacity button styling for main page event cards */
.event-card .sign-up-btn.at-capacity {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    cursor: not-allowed !important;
    opacity: 0.9 !important;
    border-color: #dc3545 !important;
}

.event-card .sign-up-btn.at-capacity:hover {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    transform: none !important;
    border-color: #dc3545 !important;
}

.event-card .sign-up-btn.at-capacity:active,
.event-card .sign-up-btn.at-capacity:focus {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    border-color: #dc3545 !important;
    box-shadow: none !important;
}

.event-card .sign-up-btn.at-capacity:disabled {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    opacity: 0.9 !important;
    border-color: #dc3545 !important;
}

.event-icon {
    width: 24px;
    height: 24px;
}

.view-more-container {
    background-color: var(--darker-grey);
    padding: 10px 15px 10px;
    text-align: center;
    width: 100%;
}

.view-more-btn {
    background-color: var(--primary-green);
    color: var(--white);
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 0;
    width: auto;
    max-width: 100%;
}

.view-more-btn:hover {
    background-color: var(--medium-green);
}

/* Scrollbar styles */
.event-card-container.expanded::-webkit-scrollbar {
    width: 8px;
}

.event-card-container.expanded::-webkit-scrollbar-track {
    background: var(--darker-grey);
}

.event-card-container.expanded::-webkit-scrollbar-thumb {
    background-color: var(--primary-green);
    border-radius: 4px;
}

/* 5.8 Footer */
footer {
    background-color: var(--black);
    color: var(--white);
    padding: 60px 0 20px;
    text-align: center;
    width: 100%;
}

footer a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--secondary-green);
    text-decoration: none;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Connect With Us Section */
.connect-section {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--primary-gray);
}

.connect-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.connect-title {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
    color: var(--white);
}

.social-media-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--white);
    transition: all 0.3s ease;
}

.social-icon i {
    font-size: 1.1rem;
    color: var(--white);
}

.social-icon:hover {
    background-color: var(--white);
    transform: translateY(-3px);
}

.social-icon:hover i {
    color: var(--black);
}

/* Main Footer Sections */
.footer-sections {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
    text-align: left;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--primary-gray);
}

.footer-section {
    flex: 1;
    min-width: 200px;
    margin: 0 20px 20px 0;
}

.footer-section h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--white);
}

/* Bottom Footer */
.footer-bottom {
    text-align: center;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.footer-copyright p {
    margin: 0;
    font-size: 0.95rem;
}

.footer-bottom-links {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--white);
}

.footer-legal {
    margin: 20px 0;
}

.footer-legal p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Remove old social media styles */
.social-media {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.social-media .social-icon {
    font-size: 24px;
    margin: 0 10px;
    color: var(--white);
    transition: color 0.3s ease;
}

.social-media .social-icon:hover {
    color: var(--secondary-green);
}

/* Social media icon styling */
.icon-linkedin,
.icon-x,
.icon-instagram {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.social-media .social-icon:hover .icon-linkedin,
.social-media .social-icon:hover .icon-x,
.social-media .social-icon:hover .icon-instagram {
    filter: brightness(0) invert(0.8) sepia(1) hue-rotate(60deg) saturate(2);
}

.icon-linkedin {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>');
}

.icon-x {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>');
}

.icon-instagram {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/></svg>');
}

/* Responsive footer styles */
@media (max-width: 768px) {
    .footer-sections {
        flex-direction: column;
        text-align: center;
    }

    .footer-section {
        margin: 0 0 30px 0;
    }

    .footer-section h4 {
        text-align: center;
    }

    .footer-section ul {
        text-align: center;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 20px;
    }

    .footer-bottom-links {
        justify-content: center;
    }

    .connect-inline {
        flex-direction: column;
        gap: 20px;
    }

    .connect-title {
        font-size: 1.1rem;
    }

    .social-media-row {
        gap: 15px;
    }

    .social-icon {
        width: 35px;
        height: 35px;
    }

    .social-icon i {
        font-size: 0.9rem;
    }
}

/* Ensure horizontal layout on larger screens */
@media (min-width: 769px) {
    .connect-inline {
        flex-direction: row;
        justify-content: center;
    }
}

/* 6. Utilities */
.fade-section {
    opacity: 0.1;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-section.is-visible,
.fade-section:not(.preload) {
    opacity: 1;
    transform: translateY(0);
}

/* 7. Media Queries */
@media (max-width: 767px) {
    .nav-tabs .nav-link {
        font-size: 14px;
        padding: 8px 4px;
    }
}

.mission-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    overflow: hidden;
    padding-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.mission-logo-container.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mission-logo {
    transition: transform 0.6s ease-out;
}

.mission-logo img {
    max-width: 100%;
    height: auto;
    max-height: 120px;
}

/* Add this new rule for responsive text */
@media (max-width: 400px) {

    .event-card .card-body,
    .event-card .card-title h3 {
        font-size: 0.8rem;
    }
}

/* 8. Prompt Library Styles */
.category-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.category-btn {
    margin: 0.25rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--medium-green);
    border: 1px solid var(--medium-green);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background-color: var(--secondary-green);
    color: var(--black);
}

.category-btn.active {
    background-color: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green);
}

/* Pagination Styles for Prompts Page */
.pagination-container {
    margin-top: 2rem;
}

.pagination-btn {
    background-color: var(--primary-green);
    border: 2px solid var(--primary-green);
    color: var(--white);
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled) {
    background-color: var(--medium-green);
    border-color: var(--medium-green);
    color: var(--black);
    transform: scale(1.05);
}

.pagination-btn:disabled {
    background-color: var(--darker-grey);
    border-color: var(--medium-gray);
    color: var(--medium-gray);
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-btn:disabled:hover {
    transform: none;
}

.pagination-icon {
    font-size: 1.5rem;
}

.page-info {
    color: var(--white);
    font-weight: bold;
    font-size: 1rem;
    min-width: 120px;
    text-align: center;
}

/* 9. Partnerships Page Styles */
.partnership-category-header {
    display: flex;
    align-items: center;
    margin: 3rem 0 2rem 0;
}

.partnership-category-header hr {
    flex-grow: 1;
    border: none;
    border-top: 1px solid var(--medium-gray);
    /* Adjust color as needed */
}

.partnership-category-header .category-title {
    color: var(--primary-green);
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0 1rem;
    /* Space between lines and title */
    white-space: nowrap;
}

.partner-item {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    /* Ensure consistent height */
}

/* Remove the generic partner-item img rule to avoid conflicts */
/*
.partner-item img {
    max-height: 60px; 
    max-width: 150px;
    width: auto;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(1) grayscale(1) brightness(2); 
}
*/
.partner-item span {
    /* This rule seems unused/legacy as text is styled via .partner-name-display */
    color: var(--light-gray);
    /* Adjust text color */
    font-size: 1.1rem;
    font-weight: 500;
}

.partnerships-title {
    color: var(--primary-green);
    font-size: 3rem;
    /* Larger title */
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.filter-btn-partners {
    border: 1px solid var(--primary-green);
    color: var(--primary-green);
    background-color: transparent;
}

.filter-btn-partners:hover {
    background-color: #555;
    /* Darken slightly on hover */
}

/* End Partnerships Page Styles */

/* Styles for Partnerships Page - Added 2024-08-14 & Updated 2024-08-14 */

/* Style the link container itself to look like a card */
.partner-item a.partner-modal-trigger {
    text-decoration: none;
    /* Remove underline */
    color: inherit;
    /* Prevent default blue link color */
    display: flex;
    /* Use flex for better alignment */
    flex-direction: column;
    /* Stack image/icon and text vertically */
    align-items: center;
    /* Center items horizontally */
    justify-content: center;
    /* Center items vertically */
    transition: transform 0.2s ease-in-out;
    /* Keep transform transition for potential future effects */
    height: 100%;
    /* Make link fill the partner-item height */
}

/* Style placeholder icons within the link */
.partner-item a.partner-modal-trigger .partner-placeholder-icon {
    /* Specificity: Target icon inside the link */
    font-size: 4rem;
    color: var(--primary-green) !important;
    /* Use theme color for better contrast */
    display: block;
    margin-bottom: 0.5rem;
    transition: transform 0.2s ease-in-out;
    /* Add transition for scaling */
}

/* Style partner name text within the link */
.partner-item a.partner-modal-trigger .partner-name-display {
    /* Specificity: Target text span inside the link */
    display: block;
    color: white !important;
    /* Changed to white */
    font-weight: 500;
    margin-top: 0.5rem;
    transition: color 0.2s ease-in-out;
    /* Add transition for hover effect */
}

/* Hover effect for partner name text */
.partner-item a.partner-modal-trigger:hover .partner-name-display {
    color: var(--secondary-green) !important;
    /* Change color on hover */
}

/* Adjustments for logo images on the main grid */
.partner-item .partner-logo {
    /* Removed max-height to allow scaling */
    /* max-height: 75px; */
    width: 100%;
    /* Scale with container width */
    height: auto;
    /* Maintain aspect ratio */
    max-width: 150px;
    /* Set maximum width */
    margin-bottom: 0.5rem;
    transition: transform 0.2s ease-in-out;
    /* Add transition for smooth scaling */
    /* Removed filter causing white square issue */
    /* filter: brightness(0) invert(1) grayscale(1) brightness(2); */
}

/* Placeholder Icons on the main grid */
.partner-item .partner-placeholder-icon {
    font-size: 5rem;
    /* Set a base large size */
    color: var(--primary-green);
    /* Use theme color */
    display: block;
    /* Ensure block display */
    margin-bottom: 0.5rem;
    /* Match logo margin */
    transition: transform 0.2s ease-in-out;
    /* Uncomment transition for smooth scaling */
}

/* Hover effect to scale the logo/icon (applied within the hovered link) */
.partner-item a.partner-modal-trigger:hover .partner-logo,
.partner-item a.partner-modal-trigger:hover .partner-placeholder-icon {
    transform: scale(1.1);
    /* Scale up slightly on hover */
}

/* Media Query for 5 items per row on XXL screens */
@media (min-width: 1400px) {
    .partner-item {
        flex: 0 0 auto;
        width: 20%;
        /* 100% / 5 items = 20% */
    }
}

/* 10. Partner Details Modal Styles */

/* Adjust modal body padding if needed */
#universalModal .modal-body {
    padding: 1rem 1.5rem;
    /* Adjust padding */
}

/* Row styling */
.modal-body-row {
    align-items: flex-start;
    /* Align items to the top */
}

/* Left column styling */
.modal-left-column {
    /* Styles for logo/icon and name */
    padding-right: 1rem;
    /* Add some space before separator */
}

#universalModalBody .modal-left-column img.partner-logo-modal {
    /* Remove max-height to allow scaling */
    /* max-height: 100px;  */
    width: 100%;
    /* Make image fill column width */
    height: auto;
    /* Maintain aspect ratio */
    max-width: 100%;
    /* Ensure logo doesn't overflow column */
    margin-bottom: 0.5rem;
    filter: none;
}

#universalModalBody .modal-left-column i.partner-placeholder-icon-modal {
    font-size: 8rem;
    /* Significantly increase icon size */
    color: var(--secondary-green);
    display: block;
    margin-bottom: 0.5rem;
}

#universalModalBody .modal-left-column .partner-modal-name {
    color: var(--white);
    /* Partner name color */
    font-weight: bold;
    word-break: break-word;
    /* Break long names */
}

/* Vertical Separator */
.vertical-separator {
    width: 1px;
    background-color: var(--medium-gray);
    /* Separator color */
    height: 100%;
    /* Make separator full height of its container */
    min-height: 150px;
    /* Ensure minimum height */
}

/* Right column styling */
.modal-right-column {
    padding-left: 1rem;
    /* Add space after separator */
}

#universalModalBody .modal-right-column p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    /* Slightly smaller text for details */
    text-align: left;
}

#universalModalBody .modal-right-column p strong {
    color: var(--secondary-green);
    display: block;
    margin-bottom: 0.25rem;
}

#universalModalBody .modal-right-column p a {
    color: var(--secondary-green);
    word-break: break-all;
}

#universalModalBody .modal-right-column p a:hover {
    color: var(--white);
}

/* Style the copy icon */
.copy-icon {
    cursor: pointer;
    margin-left: 0.3rem;
    color: var(--secondary-green);
    transition: color 0.2s ease-in-out;
}

.copy-icon:hover {
    color: var(--white);
}

/* 11. Schedule Page Styles */
.schedule-page-body {
    background-color: var(--black);
    color: var(--white);
}

/* Search Bar */
.schedule-page-body .search-bar .form-control {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--medium-gray);
}

.schedule-page-body .search-bar .form-control::placeholder {
    color: var(--medium-gray);
}

.schedule-page-body .search-bar .btn-search {
    background-color: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green);
}

.schedule-page-body .search-bar .btn-search:hover {
    background-color: var(--medium-green);
    border-color: var(--medium-green);
}

/* Results Count */
.schedule-page-body #results-count {
    color: var(--medium-gray);
    /* Adjust color if needed */
}

/* Filters Sidebar */
.schedule-page-body .filter-title {
    color: var(--primary-green);
    font-weight: bold;
    margin-bottom: 1rem;
}

.schedule-page-body .sort-by-label {
    color: var(--medium-gray);
    /* Or white */
    white-space: nowrap;
}

.schedule-page-body .sort-dropdown {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--medium-gray);
}

.schedule-page-body .sort-dropdown:hover {
    background-color: var(--secondary-gray);
}

.schedule-page-body .dropdown-menu {
    background-color: var(--primary-gray);
    border-color: var(--medium-gray);
}

.schedule-page-body .dropdown-item {
    color: var(--white);
}

.schedule-page-body .dropdown-item:hover,
.schedule-page-body .dropdown-item.active {
    background-color: var(--secondary-gray);
    color: var(--white);
}

.schedule-page-body .accordion-item {
    background-color: var(--primary-gray);
    border-color: var(--medium-gray);
    margin-bottom: 0.5rem;
    /* Add spacing */
}

.schedule-page-body .accordion-button {
    background-color: var(--primary-gray);
    color: var(--white);
    font-weight: 500;
}

.schedule-page-body .accordion-button:not(.collapsed) {
    background-color: var(--secondary-gray);
    /* Slightly different when open */
    color: var(--white);
    box-shadow: none;
}

.schedule-page-body .accordion-button:focus {
    box-shadow: none;
    border-color: var(--primary-green);
}

.schedule-page-body .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
    /* Make arrow white */
}

.schedule-page-body .accordion-body {
    background-color: var(--darker-grey);
    /* Slightly darker body */
    color: var(--white);
}

.schedule-page-body .form-check-label {
    color: var(--white);
}

.schedule-page-body .form-check-input {
    background-color: var(--medium-gray);
    border-color: var(--secondary-gray);
}

.schedule-page-body .form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.schedule-page-body .form-control-sm {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--medium-gray);
}

.schedule-page-body .form-label.small {
    color: var(--medium-gray);
    /* Label color for date */
}

.schedule-page-body .btn-apply-filters {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
}

.schedule-page-body .btn-apply-filters:hover {
    background-color: var(--medium-green);
    border-color: var(--medium-green);
}

.schedule-page-body .btn-clear-filters {
    background-color: var(--secondary-gray);
    border-color: var(--secondary-gray);
    color: var(--white);
}

.schedule-page-body .btn-clear-filters:hover {
    background-color: var(--medium-gray);
    border-color: var(--medium-gray);
}

/* Results Column */
.schedule-page-body .result-card {
    background-color: var(--primary-gray);
    border: 1px solid var(--medium-gray);
    color: var(--white);
    border-radius: 0.375rem;
    /* Standard Bootstrap radius */
    margin-bottom: 1rem;
}

.schedule-page-body .result-card .card-body {
    padding: 1rem;
    /* Adjust padding */
}

.schedule-page-body .result-card .card-title {
    color: var(--primary-green);
    /* Highlight title */
    font-weight: bold;
}

.schedule-page-body .result-card .card-meta {
    color: var(--secondary-green);
    /* Lighter color for meta */
    font-size: 0.9rem;
}

.schedule-page-body .result-card .card-meta i {
    margin-right: 0.5rem;
}

.schedule-page-body .result-card .card-description {
    color: var(--white);
    /* Ensure description text is white */
    font-size: 0.95rem;
}

.schedule-page-body .result-card .btn-register {
    background-color: var(--primary-green);
    color: var(--white);
    border: none;
}

.schedule-page-body .result-card .btn-register:hover {
    background-color: var(--medium-green);
}

/* At Capacity Button Styling */
.schedule-page-body .result-card .btn-at-capacity {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    border: none !important;
    cursor: not-allowed !important;
    opacity: 0.9 !important;
}

.schedule-page-body .result-card .btn-at-capacity:hover {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    transform: none !important;
}

.schedule-page-body .result-card .btn-at-capacity:disabled {
    background-color: #dc3545 !important;
    color: var(--white) !important;
    opacity: 0.9 !important;
}

/* Pagination */
.schedule-page-body .pagination-btn {
    color: var(--secondary-green);
    border: none;
    background: none;
}

.schedule-page-body .pagination-btn:hover {
    color: var(--white);
}

.schedule-page-body .pagination-btn:disabled {
    color: var(--medium-gray);
    opacity: 0.5;
}

.schedule-page-body .page-info {
    color: var(--medium-gray);
}

/* Newsletter Section */
.newsletter-section {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 25px 0;
    margin-top: 0;
    text-align: center;
}

.newsletter-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-align: center;
}

.newsletter-text {
    font-size: 0.95rem;
    margin-bottom: 12px;
    line-height: 1.4;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-newsletter {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 10px 35px;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-newsletter:hover {
    background-color: var(--white);
    color: var(--primary-green);
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .newsletter-section {
        padding: 20px 0;
    }

    .newsletter-title {
        font-size: 1.1rem;
        text-align: center;
        margin-bottom: 6px;
    }

    .newsletter-text {
        text-align: center;
        margin-bottom: 12px;
        font-size: 0.9rem;
    }
}

@media (min-width: 992px) {
    .newsletter-section .row {
        align-items: center;
    }

    .newsletter-section {
        padding: 25px 0;
    }

    .newsletter-text {
        display: block;
        /* Show the text on desktop too */
    }

    .newsletter-title {
        margin-bottom: 8px;
        font-size: 1.3rem;
    }

    .btn-newsletter {
        padding: 10px 35px;
        font-size: 0.95rem;
    }
}

/* Region Headers in Location Filter */
.schedule-page-body #collapseLocation strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--secondary-green);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-page-body #collapseLocation .form-check.ms-2 {
    margin-left: 1rem !important;
}

/* 12. Events Page Styles */
.events-page-body {
    background-color: var(--black);
    color: var(--white);
}

/* Filters Sidebar - Left Column */
.events-filters-sidebar {
    background-color: var(--darker-grey);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 100px;
}

.filters-sidebar-title {
    color: #C7D3B0;
    color: var(--secondary-green);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.events-filters-sidebar .form-label {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.events-filters-sidebar .form-select,
.events-filters-sidebar .form-control {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--medium-gray);
    transition: all 0.3s ease;
}

.events-filters-sidebar .form-select:focus,
.events-filters-sidebar .form-control:focus {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(103, 124, 62, 0.25);
    transform: translateY(-1px);
}

.events-filters-sidebar .form-control::placeholder {
    color: var(--medium-gray);
}

.events-filters-sidebar .btn-clear-filters {
    background-color: var(--secondary-gray);
    border-color: var(--secondary-gray);
    color: var(--white);
    transition: all 0.3s ease;
    font-weight: 500;
}

.events-filters-sidebar .btn-clear-filters:hover {
    background-color: var(--medium-gray);
    border-color: var(--medium-gray);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Legacy filters bar styles for backward compatibility */
.events-filters-bar {
    background-color: var(--darker-grey);
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.events-filters-bar .form-label {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.events-filters-bar .form-select,
.events-filters-bar .form-control {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--medium-gray);
    transition: all 0.3s ease;
}

.events-filters-bar .form-select:focus,
.events-filters-bar .form-control:focus {
    background-color: var(--primary-gray);
    color: var(--white);
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem rgba(103, 124, 62, 0.25);
    transform: translateY(-1px);
}

.events-filters-bar .form-control::placeholder {
    color: var(--medium-gray);
}

.events-filters-bar .btn-clear-filters {
    background-color: var(--secondary-gray);
    border-color: var(--secondary-gray);
    color: var(--white);
    transition: all 0.3s ease;
    font-weight: 500;
}

.events-filters-bar .btn-clear-filters:hover {
    background-color: var(--medium-gray);
    border-color: var(--medium-gray);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Featured Events Cards - Last 4 events */
.event-featured-card {
    background-color: var(--primary-gray);
    border: 1px solid var(--medium-gray);
    border-radius: 0.5rem;
    color: var(--white);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.event-featured-card:hover {
    border-color: var(--primary-green);
    box-shadow: 0 4px 12px rgba(103, 124, 62, 0.25);
    transform: translateY(-2px);
}

.event-featured-header {
    padding: 1.25rem;
    flex-grow: 1;
}

.event-featured-title {
    color: var(--secondary-green);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0.5rem 0 0.75rem 0;
    line-height: 1.3;
}

.event-featured-meta {
    color: var(--secondary-green);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.event-featured-meta i {
    opacity: 0.8;
    font-size: 0.8rem;
}

.event-featured-teaser {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.event-featured-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--medium-gray);
    background-color: rgba(103, 124, 62, 0.05);
}

.event-featured-link {
    width: 100%;
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
    font-weight: 500;
}

.event-featured-link:hover {
    background-color: var(--medium-green);
    border-color: var(--medium-green);
    color: var(--black);
}

/* Event Details Panel - Left Column Under Filters */
.event-details-panel {
    background-color: var(--primary-gray);
    border: 1px solid var(--primary-green);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(103, 124, 62, 0.25);
    animation: fadeInDetails 0.3s ease-out;
    margin-top: 1rem;
}

.event-details-panel-content {
    color: var(--white);
}

.event-details-title {
    color: var(--secondary-green);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0.5rem 0 0 0;
}

.btn-close-details {
    background-color: transparent;
    border: 1px solid var(--medium-gray);
    color: var(--white);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
}

.btn-close-details:hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
}

.event-details-panel-content strong {
    color: var(--secondary-green);
    font-weight: 600;
    margin-right: 0.5rem;
}

.event-details-panel-content p {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Events Table - Dark theme matching site */
.table-events {
    background-color: #000000 !important;
    background-color: var(--black) !important;
    border-collapse: separate;
    border-spacing: 0;
    color: #ffffff !important;
    color: var(--white) !important;
    margin-bottom: 0;
}

.table-events thead th {
    background-color: #282827 !important;
    background-color: var(--darker-grey) !important;
    color: #ffffff !important;
    color: var(--white) !important;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid #677C3E !important;
    border-bottom: 2px solid var(--primary-green) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle;
}

.table-events thead th.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

.table-events thead th.sortable-header:hover {
    background-color: rgba(103, 124, 62, 0.2) !important;
}

.table-events thead th.sortable-header.sort-active {
    color: #C7D3B0 !important;
    color: var(--secondary-green) !important;
}

.table-events thead th .sort-icon {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.table-events thead th.sortable-header:hover .sort-icon {
    opacity: 1;
}

.table-events thead th.sortable-header.sort-active .sort-icon {
    opacity: 1;
    color: #C7D3B0;
    color: var(--secondary-green);
}

.table-events tbody tr.event-row {
    background-color: #333333 !important;
    background-color: var(--primary-gray) !important;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #848482 !important;
    border-bottom: 1px solid var(--medium-gray) !important;
    border-left: none !important;
    border-right: none !important;
    cursor: pointer;
}

.table-events tbody tr.event-row:hover {
    background-color: rgba(103, 124, 62, 0.15) !important;
}

.table-events tbody tr.event-row.active {
    background-color: rgba(103, 124, 62, 0.2) !important;
    border-left: 3px solid var(--primary-green) !important;
}

.table-events tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
    border-top: none !important;
    border-bottom: 1px solid #848482 !important;
    border-bottom: 1px solid var(--medium-gray) !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
    color: #ffffff !important;
    color: var(--white) !important;
}

.event-date {
    color: #C7D3B0;
    color: var(--secondary-green);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.event-name {
    font-weight: 500;
}

.event-name-link {
    color: #C7D3B0;
    color: var(--secondary-green);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.event-name-link:hover {
    color: var(--secondary-green);
    text-decoration: underline;
}

.event-location {
    color: var(--white);
    font-size: 0.875rem;
}

.btn-view-details-table,
.btn-signup-events {
    background-color: #C7D3B0;
    background-color: var(--secondary-green);
    border: 1px solid #C7D3B0;
    border: 1px solid var(--secondary-green);
    color: #000000;
    color: var(--black);
    border-radius: 0.375rem;
    padding: 0.35rem 0.85rem;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: inline-block;
    text-decoration: none;
}

.btn-view-details-table:hover,
.btn-signup-events:hover {
    background-color: #dde4d0;
    border-color: #dde4d0;
    color: var(--black);
    text-decoration: none;
}

.btn-view-details-table:active,
.btn-view-details-table:focus,
.btn-signup-events:active,
.btn-signup-events:focus {
    background-color: var(--secondary-green) !important;
    border-color: var(--primary-green) !important;
    color: var(--black) !important;
    box-shadow: 0 0 0 0.2rem rgba(103, 124, 62, 0.25) !important;
}

/* Event Details Row */
.event-details-row {
    background-color: var(--darker-grey);
}

.event-details-cell {
    padding: 0 !important;
    border-bottom: 1px solid var(--medium-gray);
}

.event-details-row .event-details-content {
    padding: 1.25rem 1rem;
    background-color: var(--darker-grey);
    color: var(--white);
    line-height: 1.6;
    animation: fadeInDetails 0.2s ease-out;
    font-size: 0.875rem;
}

.event-details-row .event-details-content p {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.event-details-row .event-details-content strong {
    color: var(--secondary-green);
    font-weight: 600;
    margin-right: 0.5rem;
}

@keyframes fadeInDetails {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Resource Links - Compact button style */
.event-resources-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.event-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background-color: var(--darker-grey);
    color: var(--secondary-green);
    text-decoration: none;
    border-radius: 0.25rem;
    border: 1px solid var(--medium-gray);
    transition: all 0.2s ease;
    font-size: 0.8rem;
    font-weight: 500;
}

.event-resource-link i {
    font-size: 0.8rem;
}

.event-resource-link:hover {
    background-color: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green);
}

.event-copy-link-btn {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--white);
    transition: all 0.2s ease;
    font-weight: 500;
    padding: 0.375rem 0.875rem;
    font-size: 0.8rem;
}

.event-copy-link-btn:hover {
    background-color: var(--medium-green);
    border-color: var(--medium-green);
    color: var(--black);
}

/* Event Type Badges - Enhanced with subtle shadow */
.event-type-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}


.event-type-class,
.event-type-expo,
.event-type-hackathon,
.event-type-office_hours,
.event-type-social {
    background-color: #C7D3B0;
    background-color: var(--secondary-green);
    color: #000000;
    color: var(--black);
}

/* Legacy event types - kept for backward compatibility */
.event-type-Hosted {
    background-color: var(--secondary-green);
    color: var(--black);
}

.event-type-Facilitated {
    background-color: #c2e0ff;
    color: #0b2740;
}

.event-type-Attended {
    background-color: #ffe0a3;
    color: #4a2c00;
}

/* Empty States - Enhanced with icons and better styling */
.events-page-body .alert {
    border-radius: 0.5rem;
    border: 1px solid var(--medium-gray);
    padding: 2rem;
    text-align: center;
}

.events-page-body .alert::before {
    content: '📅';
    font-size: 2rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.7;
}

/* Invite Us CTA - Enhanced styling */
.invite-us-cta {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.invite-us-cta .bg-dark {
    background: linear-gradient(135deg, var(--darker-grey) 0%, var(--primary-gray) 100%) !important;
    border: 1px solid var(--primary-green) !important;
    box-shadow: 0 4px 12px rgba(103, 124, 62, 0.2);
    transition: all 0.3s ease;
}

.invite-us-cta .bg-dark:hover {
    box-shadow: 0 6px 20px rgba(103, 124, 62, 0.3);
    transform: translateY(-2px);
    border-color: var(--secondary-green) !important;
}

.invite-us-cta h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.invite-us-cta h2::before {
    content: '🤝';
    font-size: 1.5rem;
}

.invite-us-cta .blue-link {
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
}

.invite-us-cta .blue-link:hover {
    text-decoration: underline;
    transform: translateX(4px);
}

/* Results Count */
#events-results-count {
    color: var(--medium-gray);
    font-size: 0.875rem;
}

#events-results-count strong {
    color: var(--secondary-green);
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .events-filters-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .event-details-panel {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .events-filters-sidebar {
        padding: 1rem;
    }

    .filters-sidebar-title {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .events-filters-bar {
        padding: 0.875rem 1rem;
    }

    .table-events {
        font-size: 0.875rem;
    }

    .table-events thead th {
        padding: 0.625rem 0.5rem;
        font-size: 0.75rem;
    }

    .table-events tbody td {
        padding: 0.625rem 0.5rem;
    }

    .event-date {
        font-size: 0.8rem;
    }

    .event-name-link {
        font-size: 0.875rem;
    }

    .event-location {
        font-size: 0.8rem;
    }

    .event-details-panel {
        padding: 1rem;
    }

    .event-details-title {
        font-size: 1.25rem;
    }

    .event-details-row .event-details-content {
        padding: 1rem 0.75rem;
        font-size: 0.8rem;
    }

    .event-details-row .event-details-content .row {
        flex-direction: column;
    }

    .event-resources-container {
        flex-direction: column;
    }

    .event-resource-link {
        width: 100%;
        justify-content: center;
    }

    /* Hide some columns on mobile */
    .table-events thead th:nth-child(4),
    .table-events tbody td:nth-child(4) {
        display: none;
    }
}