/* /Layout/MainLayout.razor.rz.scp.css */
.page-container[b-fxn44a8klq] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-bg-light);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.top-navigation-bar[b-fxn44a8klq] {
    display: flex;
    align-items: center;
    justify-content: center; /* centers the logo and links together */
    gap: 3rem;
    padding: 0.8rem 2rem;
    background-color: var(--color-bg-light);
    border-bottom: 1px solid #d2d2d7;
    position: sticky;
    top: 0;
    z-index: 1000;
}

@media (max-width: 768px) {
    .top-navigation-bar[b-fxn44a8klq] {
        gap: 1rem; /* Reduce space between logo and menu */
        padding: 0.5rem; /* Reduce padding on edges */
        flex-wrap: wrap; /* Allows items to wrap if they get too crowded */
    }

    .logo-img[b-fxn44a8klq] {
        max-height: 45px; /* Slightly smaller logo for mobile */
    }
}

.logo[b-fxn44a8klq] {
    display: flex;
    align-items: center;
    margin: 0;
}

.logo-img[b-fxn44a8klq] {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

.horizontal-nav[b-fxn44a8klq] {
    display: flex;
}

/* flex + min-height: 0 is what lets Home's full-screen photo stage fill
   all remaining space below the nav; every other page just flows
   normally inside this and scrolls the whole document as usual. */
.content-area[b-fxn44a8klq] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-links[b-3ik93ofrb2] {
    display: flex;
    flex-direction: row;
    gap: 2.5rem; /* Spacing between the links */
    margin: 0;
    padding: 0;
    align-items: center;
}
@media (max-width: 768px) {
    .nav-links[b-3ik93ofrb2] {
        gap: 1rem;
    }

    [b-3ik93ofrb2] .nav-item {
        font-size: 0.75rem;
    }
}

[b-3ik93ofrb2] .nav-item {
    color: rgba(0, 0, 0, 0.8); /* Dark grey, almost black */
    text-decoration: none;
    font-size: 0.85rem; /* Slightly smaller text */
    font-weight: 400; /* Thinner, more elegant font weight */
    letter-spacing: 0.5px;
    transition: color 0.2s ease-in-out;
}

    [b-3ik93ofrb2] .nav-item:hover, [b-3ik93ofrb2] .nav-item.active {
        color: var(--color-ivy-green); /* Turns ivy green when hovered or clicked */
    }
/* /Pages/Contact.razor.rz.scp.css */
/* --- HERO BANNER & ANIMATIONS --- */
.hero-banner[b-mahd6heqns] {
    background-image: linear-gradient(var(--color-overlay-dark), var(--color-ivy-overlay)), url('images/hero-bg.png');
    background-size: cover;
    background-position: center;
    height: calc(100vh - 72px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: height 0.6s ease-in-out;
}

    .hero-banner.banner-shrunk[b-mahd6heqns] {
        height: 17.5vh;
    }

.hero-text[b-mahd6heqns] {
    color: white;
    font-size: 5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    transition: font-size 0.6s ease-in-out;
}

.banner-shrunk .hero-text[b-mahd6heqns] {
    font-size: 2.5rem;
}

.contact-section[b-mahd6heqns] {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.contact-grid[b-mahd6heqns] {
    display: flex;
    flex-direction: row;
    align-items: center; /* Centers content vertically relative to the map */
    gap: 4rem;
}

/* Wide / laptop aspect ratio: square map on the left */
.map-container[b-mahd6heqns] {
    flex: 0 0 auto;
}

    .map-container iframe[b-mahd6heqns] {
        display: block;
        width: 100%;
        max-width: 300px;
        aspect-ratio: 1 / 1; /* Keeps it a perfect square */
        height: auto;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin: 0 auto;
    }

/* Contact Info Styling */
.contact-info-container[b-mahd6heqns] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-left: 2rem;
}

.contact-row[b-mahd6heqns] {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 1.25rem;
}

.label[b-mahd6heqns] {
    font-weight: 700;
    color: black;
    min-width: 150px;
}

.black-text[b-mahd6heqns] {
    color: black;
    text-decoration: none;
}

    .black-text:hover[b-mahd6heqns] {
        text-decoration: underline;
    }

/* Tall / narrow aspect ratio: info on top, map underneath */
@media (max-width: 900px) {
    .contact-section[b-mahd6heqns],
    .contact-section *[b-mahd6heqns] {
        box-sizing: border-box; /* prevents padding/border from ever pushing width past the screen */
    }

    .contact-section[b-mahd6heqns] {
        padding: 2rem 1rem;
        width: 100%;
    }

    .contact-grid[b-mahd6heqns] {
        flex-direction: column-reverse; /* map (first in DOM) ends up on the bottom */
        gap: 2rem;
        width: 100%;
    }

    .contact-info-container[b-mahd6heqns],
    .map-container[b-mahd6heqns] {
        padding-left: 0;
        width: 100%;
        min-width: 0; /* lets these shrink below their content's natural width instead of overflowing */
    }

        .map-container iframe[b-mahd6heqns] {
            max-width: 100%;
            width: 100%;
        }

    .contact-info-container[b-mahd6heqns] {
        gap: 1.5rem;
        align-items: center;
    }

    /* Icon + label share a centered line; the actual value (phone/email/
       instagram) wraps onto its own centered line underneath via
       flex-basis: 100%, without needing any markup changes. */
    .contact-row[b-mahd6heqns] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        row-gap: 0.3rem;
        column-gap: 0.5rem;
        width: 100%;
        font-size: clamp(0.85rem, 4vw, 1.1rem); /* shrinks further on very narrow phones */
    }

        .contact-row .black-text[b-mahd6heqns] {
            flex-basis: 100%; /* forces this onto its own full-width line */
        }

    .label[b-mahd6heqns] {
        min-width: 0;
        font-size: clamp(0.8rem, 3.5vw, 1rem);
    }

    .black-text[b-mahd6heqns] {
        overflow-wrap: anywhere; /* lets long emails/links break instead of forcing width */
        word-break: break-word;
        font-size: clamp(0.8rem, 3.5vw, 1rem);
    }
}

/* --- CONTACT PAGE SPECIFIC FIXES --- */

.contact-header-bg[b-mahd6heqns] {
    background-image: linear-gradient(var(--color-overlay-dark), var(--color-ivy-overlay)), url('/images/Contact Header/contact.jpg');
}

/* --- IVY LEAF FOOTER ---
   Lives outside .contact-section so it is naturally full-bleed with
   no negative-margin math and no bottom margin/padding to fight. */
.contact-footer[b-mahd6heqns] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0; /* kills the inline-image baseline gap under the footer */
}

.contact-footer-logo[b-mahd6heqns] {
    display: block;
    width: 100%;
    height: 70px; /* fixed height at every screen size, matching the home page footer's zoom level */
    object-fit: cover;
    object-position: center;
}
/* /Pages/Gallery.razor.rz.scp.css */
.gallery-container[b-w4f1x07i2a] {
    column-count: 3; /* Adjust based on your preference */
    column-gap: 1rem;
    padding: 2rem;
}

.gallery-item[b-w4f1x07i2a] {
    margin-bottom: 1rem;
    break-inside: avoid;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

.image-wrapper[b-w4f1x07i2a] {
    position: relative;
    display: block;
}

.gallery-item img[b-w4f1x07i2a] {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* The Green Overlay */
.overlay[b-w4f1x07i2a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-ivy-green);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 1rem;
    text-align: center;
}

/* Show overlay on hover */
.gallery-item:hover .overlay[b-w4f1x07i2a] {
    opacity: 0.85; /* Adjust transparency as needed */
}
.caption[b-w4f1x07i2a] {
    font-size: clamp(0.65rem, 2vw, 1.2rem);
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
}
/* /Pages/Home.razor.rz.scp.css */
.stage-container[b-zg9jjb5j99] {
    --panel-transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --panel-peek-offset: 70%;
    /* The Fix: Force flexbox to lock exactly to the available viewport space */
    flex-grow: 1;
    height: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.photo-stage[b-zg9jjb5j99] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: height var(--panel-transition);
    overflow: hidden; /* Essential: chops off the video neatly when shrinking */
    z-index: 1; /* Sets a baseline so the video/overlay stay behind the text */
}

.photo-stage__video[b-zg9jjb5j99] {
    position: absolute;
    inset: 0; /* pins all four edges directly - more reliable than height:100% on tall/narrow phones where dvh recalculates as the browser UI hides/shows */
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* Fills the space without distorting aspect ratio */
    object-position: center;
    z-index: -2; /* Pushes the video to the very back */
    /* Forces Chrome/Edge to promote this to its own GPU-composited layer and
       start painting it immediately, instead of leaving it frozen on frame 1
       until an unrelated repaint (like a tab switch) forces one. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.photo-stage__video-fallback[b-zg9jjb5j99] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps the aspect ratio consistent with the video */
    background-size: cover;
    background-position: center;
}

.photo-stage__overlay[b-zg9jjb5j99] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Re-applies your deep green gradient over the moving video */
    background-image: linear-gradient(var(--color-overlay-dark), var(--color-ivy-overlay));
    z-index: -1; /* Sandwiched between the video and the text */
}

.photo-stage--collapsed[b-zg9jjb5j99] {
    height: 20%;
}

/* --- OPEN STATE: let the banner scroll away with the page --- */
/* Once the about panel is fully open, both sections drop out of absolute
   positioning and stack normally. The stage-container becomes the single
   scroll region, so scrolling moves the banner and the about content
   together instead of the about-panel scrolling in place under a pinned banner. */
.stage-container[data-panel-state="open"][b-zg9jjb5j99] {
    overflow-y: auto;
    overflow-x: hidden;
}

    .stage-container[data-panel-state="open"] .photo-stage[b-zg9jjb5j99] {
        position: relative;
        height: 20vh;
        flex-shrink: 0;
    }

    .stage-container[data-panel-state="open"] .about-panel[b-zg9jjb5j99] {
        position: relative;
        top: auto;
        bottom: auto;
        transform: none;
        height: auto;
        min-height: 80vh;
        overflow-y: visible;
        overscroll-behavior: auto;
    }

.photo-stage__title[b-zg9jjb5j99] {
    margin: 0;
    color: white;
    font-size: clamp(3.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: font-size 0.6s ease-in-out;
}

.photo-stage--collapsed .photo-stage__title[b-zg9jjb5j99] {
    font-size: 2.5rem;
}

.about-panel[b-zg9jjb5j99] {
    position: absolute;
    top: 20%;
    bottom: 0; /* Replaces height: 80%. This pins it to the bottom of the container! */
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    background-color: var(--color-bg-light);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform var(--panel-transition);
    z-index: 10;
}

    .about-panel.peek[b-zg9jjb5j99] {
        transform: translateY(var(--panel-peek-offset));
    }

    .about-panel.open[b-zg9jjb5j99] {
        transform: translateY(0);
    }

.about-panel__layout[b-zg9jjb5j99] {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center; /* Keeps it perfectly aligned with the top heading on desktop */
    gap: 3rem;
}

.about-panel__photo[b-zg9jjb5j99] {
    flex-shrink: 0;
    width: 220px;
}

    .about-panel__photo img[b-zg9jjb5j99] {
        width: 100%;
        height: auto;
        border-radius: 8px;
        object-fit: cover;
    }

/* --- NEW: MOBILE RESPONSIVE LAYOUT --- */
@media (max-width: 768px) {
    .about-panel__layout[b-zg9jjb5j99] {
        flex-direction: column; /* Stacks the image above the text */
        align-items: center; /* Centers the image horizontally */
        gap: 1.5rem; /* Reduces the gap slightly for mobile */
    }

    .about-panel__photo[b-zg9jjb5j99] {
        width: 100%; /* Lets the image scale up nicely on phones */
        max-width: 350px; /* Caps the size so it doesn't get too massive */
    }
}

.about-panel__copy[b-zg9jjb5j99] {
    flex-grow: 1;
}

    .about-panel__copy h3:first-of-type[b-zg9jjb5j99] {
        margin-top: 0;
    }

    .about-panel__copy h3[b-zg9jjb5j99] {
        margin-top: 2.5rem;
        margin-bottom: 0.8rem;
        color: var(--color-ivy-green);
        font-weight: 700;
        font-size: 1.5rem;
    }

    .about-panel__copy p[b-zg9jjb5j99] {
        line-height: 1.6;
        color: rgba(0, 0, 0, 0.8);
    }

.about-panel__footer[b-zg9jjb5j99] {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Pushes the footer further down from the main text */
    margin-top: 4rem;
    padding-top: 0;
    /* Pulls the footer to the far edges, ignoring the parent container's 2rem padding */
    margin-left: -2rem;
    margin-right: -2rem;
    /* Forces the width to span the entire screen */
    width: calc(100% + 4rem);
}

.about-panel__footer-logo[b-zg9jjb5j99] {
    width: 100%;
    height: 70px;
    object-fit: cover;
    object-position: center;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .about-panel__footer-logo:hover[b-zg9jjb5j99] {
        opacity: 1;
    }

.reveal-btn[b-zg9jjb5j99] {
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.reveal-btn--down[b-zg9jjb5j99] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce-down-b-zg9jjb5j99 2s infinite;
}

@keyframes bounce-down-b-zg9jjb5j99 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-15px);
    }

    60% {
        transform: translateX(-50%) translateY(-7px);
    }
}
/* /Pages/Performances.razor.rz.scp.css */
.performances-section[b-8d4fxmr2yp] {
    padding: 2rem 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.status-text[b-8d4fxmr2yp] {
    text-align: center;
    font-size: 1.1rem;
    color: #444;
    padding: 3rem 0;
}

/* --- CONTROLS BAR --- */
.controls-bar[b-8d4fxmr2yp] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.control-popout[b-8d4fxmr2yp] {
    position: relative;
}

/* Green pop-out toggle buttons */
.popout-toggle[b-8d4fxmr2yp] {
    background-color: #2f4b3c;
    color: white;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

    .popout-toggle:hover[b-8d4fxmr2yp] {
        background-color: #3d6350;
    }

    .popout-toggle:active[b-8d4fxmr2yp] {
        transform: scale(0.97);
    }

/* Pop-out panel */
.popout-panel[b-8d4fxmr2yp] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 20;
    background-color: #2f4b3c;
    color: white;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    min-width: 220px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: popout-fade-in-b-8d4fxmr2yp 0.15s ease-out;
}

@keyframes popout-fade-in-b-8d4fxmr2yp {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.popout-option[b-8d4fxmr2yp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
}

    .popout-option input[type="radio"][b-8d4fxmr2yp],
    .popout-option input[type="checkbox"][b-8d4fxmr2yp] {
        accent-color: white;
        width: 16px;
        height: 16px;
        cursor: pointer;
        flex-shrink: 0;
    }

.popout-option--block[b-8d4fxmr2yp] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.popout-select[b-8d4fxmr2yp] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    border: none;
    font-size: 0.9rem;
    color: black;
}

/* --- TABLE --- */
.table-wrapper[b-8d4fxmr2yp] {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.performances-table[b-8d4fxmr2yp] {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    font-size: 1rem;
}

    .performances-table thead[b-8d4fxmr2yp] {
        background-color: #2f4b3c;
        color: white;
    }

    .performances-table th[b-8d4fxmr2yp] {
        text-align: left;
        padding: 1.1rem 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .performances-table td[b-8d4fxmr2yp] {
        padding: 1.1rem 1.2rem;
        border-bottom: 1px solid #eee;
        color: black;
    }

    .performances-table tbody tr:last-child td[b-8d4fxmr2yp] {
        border-bottom: none;
    }

    .performances-table tbody tr:hover[b-8d4fxmr2yp] {
        background-color: #f5f8f6;
    }

    .performances-table td strong[b-8d4fxmr2yp] {
        font-weight: 700;
    }

/* --- RESPONSIVE: STACKED CARDS ON NARROW SCREENS --- */
@media (max-width: 800px) {
    .controls-bar[b-8d4fxmr2yp] {
        flex-wrap: wrap;
    }

    .table-wrapper[b-8d4fxmr2yp] {
        overflow-x: visible;
        box-shadow: none;
    }

    .performances-table thead[b-8d4fxmr2yp] {
        display: none;
    }

    .performances-table[b-8d4fxmr2yp],
    .performances-table tbody[b-8d4fxmr2yp],
    .performances-table tr[b-8d4fxmr2yp],
    .performances-table td[b-8d4fxmr2yp] {
        display: block;
        width: 100%;
    }

        .performances-table tr[b-8d4fxmr2yp] {
            margin-bottom: 1rem;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            overflow: hidden;
            background-color: white;
        }

        .performances-table td[b-8d4fxmr2yp] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: right;
            padding: 0.85rem 1rem;
            border-bottom: 1px solid #f0f0f0;
        }

            .performances-table td:last-child[b-8d4fxmr2yp] {
                border-bottom: none;
            }

            .performances-table td[b-8d4fxmr2yp]::before {
                content: attr(data-label);
                font-weight: 700;
                text-transform: uppercase;
                font-size: 0.8rem;
                color: #2f4b3c;
                text-align: left;
            }
}