/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


@media (max-width: 992px) {
	.blocks-faqs-3 .sticky-section { position: relative !important; }
}

.blocks-faqs-3 .faqs .toggle {
	background-color: var(--cnvs-contrast-0);
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.085);
}

.blocks-faqs-3 .faqs .toggle-header {
	padding: 15px 20px;
	margin: 0;
}

.blocks-faqs-3 .faqs .toggle-content {
    border-top: 1px solid var(--cnvs-contrast-100);
    padding: 20px 25px;
}
	

/* Mapbox 
.gmap {
    height: 500px;
    width: 100%;
}
*/

/* Custom Gallery Thumbnail Sizing */
.flex-control-nav.flex-control-thumbs li img.flex-active,
.flex-control-nav.flex-control-thumbs li img:hover {
    opacity: 1 !important;
}

/* Palette */
.color-box {
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.color-box:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.hex-label {
    font-size: 0.75rem;
    background: rgba(255,255,255,0.7);
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
}

/* Gallery Container */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px 0;
}

.image-wrapper {
    flex: 1 1 300px;
    max-width: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.image-wrapper:hover {
    transform: translateY(-5px);
}

.image-wrapper img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.image-wrapper:hover img {
    transform: scale(1.05);
}

/* Feature Box Media Images - Equal Size */
.feature-box .fbox-media {
    height: 250px !important;
    overflow: hidden;
}

.feature-box .fbox-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* Ensure consistent height for feature boxes */
.feature-box.media-box.fbox-bg {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-box.media-box.fbox-bg .fbox-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.feature-box.media-box.fbox-bg .fbox-content h3 {
    margin-bottom: 15px;
}

.feature-box.media-box.fbox-bg .fbox-content p:last-of-type {
    margin-bottom: 0;
}

/* Nav Morph */
@media (min-width: 992px) {

    .morph-marker {
        --cnvs-morph-height: 3px;
        --cnvs-morph-duration: .3s;
        position: absolute;
        display: block;
        background: var(--cnvs-themecolor);
        height: var(--cnvs-morph-height);
        border-radius: var(--bs-border-radius);
        transition: all var(--cnvs-morph-duration);
    }

    .morph-bg .morph-marker {
        --cnvs-morph-height: 100%;
        opacity: .1;
        bottom: 0 !important;
    }

    .morph-bg .menu-link {
        position: relative;
        --cnvs-primary-menu-padding-y: 11px;
        --cnvs-primary-menu-hover-color: var(--cnvs-primary-menu-color);
        z-index: 1;
    }
}

/* Schedule Page */
.block-expand-categories h1,
.block-expand-categories h2,
.block-expand-categories h3 { font-family: Playfair Display, serif !important; }

.block-expand-categories .expand-category {
    --height: 50vh;
    --responsive-height: 200px;
    --hover-flex: 10;

    position: relative;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin: 10px 0;
    min-height: var(--responsive-height);
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 3rem;
}

.block-expand-categories .expand-category h4 {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
}

.block-expand-categories .expand-category .event-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

/* Larger Device */
@media (min-width: 992px) {
    .block-expand-categories .expand-category {
        height: var(--height);
        flex: 1;
        margin: 0 10px;
        transition: all 1s ease;
        -webkit-backface-visibility: hidden;
        transform: translate3d(0,0,0);
    }

    .block-expand-categories:not(.on-click) .expand-category:hover,
    .block-expand-categories.on-click .expand-category.active { 
        flex: var(--hover-flex);
    }
    
    .block-expand-categories:not(.on-click) .expand-category:hover .event-content,
    .block-expand-categories.on-click .expand-category.active .event-content {
        transform: translateY(0);
    }

    .block-expand-categories .expand-category h4 {
        opacity: 1;
        top: 20px;
        transition: opacity .4s ease;
    }

    .block-expand-categories:hover .expand-category:not(.active):not(:hover) h4,
    .block-expand-categories.on-click .expand-category:not(.active) h4 { opacity: 0.6; }
}

/* Mobile Enhancement */
@media (max-width: 991px) {
    .block-expand-categories .expand-category {
        margin-bottom: 20px;
        transition: height 0.5s ease;
    }
    
    .block-expand-categories .expand-category.active,
    .block-expand-categories .expand-category:active {
        height: 300px;
    }
    
    .block-expand-categories .expand-category.active .event-content,
    .block-expand-categories .expand-category:active .event-content {
        transform: translateY(0);
    }
}

/* Mobile Menu Animation Styles */
@media (max-width: 991.98px) {
    /* Add slide down animation when menu is opened */
    body:not(.is-expanded-menu) .primary-menu .menu-container {
        display: none;
        transition: transform 0.4s ease, opacity 0.3s ease;
        transform: translateY(-10px);
        opacity: 0;
    }
    
    body:not(.is-expanded-menu).primary-menu-open .menu-container {
        display: block !important;
        transform: translateY(0);
        opacity: 1;
        animation: menuSlideDown 0.4s ease forwards;
    }
    
    /* Menu slide down animation */
    @keyframes menuSlideDown {
        0% {
            transform: translateY(-10px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* Menu slide up animation (when closed) */
    body:not(.is-expanded-menu).primary-menu-closing .menu-container {
        animation: menuSlideUp 0.3s ease forwards;
    }
    
    @keyframes menuSlideUp {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(-10px);
            opacity: 0;
        }
    }
}