html { height:100%; }

/* Dev 2 WCAG 2.1 START - Screen reader only text class for hidden content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Dev 2 WCAG 2.1 END - Screen reader only text class */

/* Dev 2 Accessibility START - Skip navigation link styling */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 10000;
}

.skip-link:focus {
    top: 6px;
}
/* Dev 2 Accessibility END */

/* Jeff WCAG 2.1 - Visible focus indicators for keyboard navigation */
*:focus-visible,
.hotspot:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 191, 0.5) !important;
    z-index: 9999 !important;
}

/* Jeff WCAG 2.1 - Enhanced focus for buttons */
my-btn:focus-visible,
button:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 191, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 9999 !important;
}

/* Jeff WCAG 2.1 - Focus styles for hotspots */
hs-navigation:focus-visible,
hs-info:focus-visible,
hs-dot:focus-visible,
hs-link:focus-visible,
hs-youtube:focus-visible,
hs-extlink:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 191, 0.5) !important;
    z-index: 9999 !important;
}

/* Focus styles for links */
a:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* Focus styles for menu items - white outline + subtle background */
acc-menu-item:focus-visible,
top-menu-item:focus-visible,
dots-menu-item:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: -2px !important; /* Inside to not break layout */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white background */
}
/* Dev 2 WCAG 2.1 END - Focus indicators */

body { 
    height:100%; 
    overflow:hidden; 
    margin:0; padding:0; 
    background-color:#000000; 
    --transition-duration: 0.5s;
    --menu-width: 29rem;
    --border-radius: 1rem;
    --btn-border-radius: 1.5rem;
    --tolltip-border-radius: 0.7rem;
    --popup-border-radius: 0.7rem;

    /* Bobby J - Generic Color Variables (Override in custom.css for tour-specific colors) */
    --primary-color: #000000;
    --primary-color-rgb: 0, 0, 0;
    --secondary-color: #666666;
    --secondary-color-rgb: 102, 102, 102;

    /* Charles Gratiot Jr. - Button icon colors (for new SVG buttons with ring style) */
    --btn-icon-color: #000000;
    --btn-icon-bg: #ffffff;
    --btn-icon-ring: rgba(255, 255, 255, 0.5);
    --btn-icon-color-hover: #ffffff;
    --btn-icon-bg-hover: #000000;

    /* Charles Gratiot Jr. - Glassmorphism variables (dark mode defaults, override in light_mode.css) */
    --glass-bg: rgba(0, 0, 0, 0.35); /* Charles Gratiot Jr. - More transparent */
    --glass-blur: blur(16px) saturate(180%);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    /* Charles Gratiot Jr. - 3 matching layers so hover glow animates outward smoothly */
    --glass-shadow: 0 0 0rem 0rem rgba(255, 255, 255, 0),
                    0 4px 16px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --glass-shadow-hover: 0 0 1.5rem 0.5rem rgba(255, 255, 255, 0.7),
                          0 0.4rem 1.6rem rgba(0, 0, 0, 0.3),
                          inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

* {
    user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.no-scrollbars {
    -ms-overflow-style: none;  /* Hide native scrollbars IE and Edge */
    scrollbar-width: none;  /* Hide native scrollbars Firefox */
}

.no-scrollbars::-webkit-scrollbar {
    display: none; height: 0; width: 0; /* Hide native scrollbars Webkit */
}

html, body { font-size: clamp(7px, 0.536vw - 0.72px, 10px); } /* Bobby J - Fluid scaling: 70% at 1440px viewport, 100% at 2000px+ */
@media screen and (max-width: 500px) { html, body { font-size: 10px; } } /* John R - Mobile gets full size, no scaling */


main {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 10;
}

#pano {
    position: absolute;
    left: 0; top: 0; width:100%; height:100%;
    z-index: 0;
}

/* Charles Gratiot Jr. - Bottom-right cluster container for height-responsive positioning
   Container uses single clamp, children positioned absolutely inside */
#bottom-right-cluster {
    position: absolute;
    right: 2rem; /* Charles Gratiot Jr. - Match left buttons margin */
    bottom: clamp(1.5rem, 2.5dvh, 3rem); /* ONE clamp controls entire cluster */
    width: 55rem; /* Wide enough to hold all elements */
    height: 12rem; /* Tall enough for description + nav */
    z-index: 5;
    pointer-events: none;
}

section[nav_dots] {
    position: absolute;
    right: 19rem; bottom: 0; /* Dots at bottom, left of nav buttons */
    width: auto; height: auto;
    transition: opacity var(--transition-duration);
    pointer-events: all;
}

#group-title {
    position: absolute;
    right: 19rem; bottom: 3rem; /* Above dots */
    width: auto; height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
}

section[description] {
    position: absolute;
    right: 0; bottom: 5.5rem; /* Above nav buttons */
    width: 50rem; height: auto;
    transition: opacity var(--transition-duration);
    pointer-events: all;
}

section[btns][common] {
    position: absolute;
    left: 2rem; bottom: clamp(1.5rem, 2.5dvh, 3rem); /* Charles Gratiot Jr. - Height-responsive with clamp+dvh */
    width: auto;
    background-color: rgba(0,0,0,0.0);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    pointer-events: all;
    transition: opacity var(--transition-duration);
}

section[btns][mice] {
    position: absolute;
    right: 2rem; top: 50%; transform: translateY(-50%);
    width: auto; 
    background-color: rgba(0,0,0,0.0);
    box-sizing: border-box;
    display: block; /* Peter H - Container is block, inner group is flex */
    pointer-events: all;
    transition: opacity var(--transition-duration); /* Peter H - Removed transform transition to prevent vertical jump */
}

section[btns][mice] .mice-group-inner {
    display: flex;
    flex-direction: column;
    transform: translateX(100%) translateX(2rem);
    transition: transform var(--transition-duration);
}

body.mice_scene section[btns][mice] .mice-group-inner {
    transform: translateX(0%) translateX(0rem);
}

section[btns][nav] {
    position: absolute;
    right: 0; bottom: 0; /* Bottom-right of container */
    width: auto; height: auto;
    display: flex;
    flex-direction: row;
    pointer-events: all;
    transition: opacity var(--transition-duration);
}


section[ui] {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    z-index: 100; /* John R - Increased to ensure UI appears above krpano */
    pointer-events: none;
    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 0; /* C Gratiot - Default hidden to prevent flash */
    transform: scale(1.5); /* C Gratiot - Default scaled to prevent flash */
}

/* C Gratiot - Only visible when ui-hidden is removed */
body:not(.ui-hidden) section[ui] {
    opacity: 1;
    transform: scale(1);
    pointer-events: none;
}

#vn_logo {
    position: absolute;
    display: block;
    right: 1rem; top: 1rem; width: 7rem; height: 5rem;
    cursor: pointer;
    pointer-events: all;
    overflow: hidden; /* C Gratiot - Prevent SVG flash before CSS loads */
}

#vn_logo svg {
    position: absolute;
    left: 50%; top: 50%; height: 3rem;
    transform: translate(-50%,-50%);
}

#vn_logo my-tooltip {
    top: calc(100% + 0.2rem + 5px);
    bottom: auto;
    right: 0;
    left: auto;
    transform: none;
}

#vn_logo my-tooltip::before {
    left: calc(100% - 3.5rem);
    top: -10px;
    transform: translate(-50%, 0) rotate(180deg);
}


section[menu_top] {
    /* TEMPORARILY HIDDEN - Remove 'display: none;' to show top menu again, also 4rem logo height, top rem 2*/
    display: none;
    position: absolute;
    right: 9rem; top: 2rem;
    width: auto; height: auto;
}

#scene_title {
    position: absolute;
    left: 50%; bottom: 2rem; transform: translateX(-50%);
    width: auto; height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.6rem;
    color: #fff;
    pointer-events: none;    
    display: none;
}

section[ui] > section[logo] {
    /* TEMPORARILY HIDDEN - Top menu logo, remove 'display: none;' to show again */
    display: none;
    position: absolute;
    left: 2rem; top: 2rem;
    width: auto; height: auto;
    opacity: 1;
    transition: opacity var(--transition-duration);
}

section[ui] > section[logo] img {
    width: 20rem; height: auto;
    object-fit: contain;
}

/* John R - Commented out broken 900px breakpoint - using 500px mobile breakpoint instead
@media screen and (max-width: 900px) {

    section[nav_dots] {
        right: 2rem;
        bottom: 11rem;
        transform: translate(0,50%);
    }

    #group-title {
        left: 50%; top: 2rem;
        transform: translateX(-50%);
        right: auto; bottom: auto;
    }

}
*/


    
@media screen and (max-width: 1500px) {
    section[menu_top] {
        display: none; /* This can be removed since top menu is hidden globally above */
    }

    section[ui] > section[logo] {   
        opacity: 0;
        pointer-events: none;
    }

}

/* TEMPORARILY COMMENTED OUT - Uncomment to hide aside menu on large screens and show top menu instead */
/* @media screen and (min-width: 1500px) {
    aside {
        display: none!important;
    }
} */

@media screen and (max-width: 500px) {

    #vn_logo {
        display: none;
    }

    /* Charles Gratiot Jr. - Mobile: flexbox cluster for dynamic title/dots spacing */
    #bottom-right-cluster {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        left: auto;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Right-align children */
        gap: 0.5rem;
        z-index: 5;
    }

    /* Charles Gratiot Jr. - Reset children to flow in flex, spacing via gap only */
    section[description] {
        position: relative;
        right: auto; bottom: auto;
        width: calc(100vw - 2rem);
        order: 2; /* Middle */
    }

    section[nav_dots] {
        position: relative;
        right: auto; bottom: auto;
        order: 1; /* Top */
        margin-bottom: 0.5rem; /* Francis Livernois - Push dots up 0.5rem */
    }

    section[btns][nav] {
        position: relative;
        right: auto; bottom: auto;
        order: 3; /* Bottom */
    }

    section[btns][common] {
        left: 1rem; bottom: clamp(0.8rem, 1.5dvh, 1.5rem);
        z-index: 2;
    }

    body.aside section[btns][common] {
        left: 50%;
        transform: translateX(-50%);
    }

    /* C Gratiot - Raise z-index when lang selector open so it appears above menu */
    body.lang_selector_open section[btns][common] {
        z-index: 101;
    }

    section[btns][mice] {
        left: 1rem; right: auto;
        transform: translateX(-100%) translateX(-2rem) translateY(-50%); /* Charles Gratiot Jr. - Extra 1rem clearance to prevent sub-pixel bleed */
    }

    /* Charles Gratiot Jr. - Mobile: disable inner group transform (section transform handles hiding) */
    section[btns][mice] .mice-group-inner {
        transform: none;
    }

    /* Charles Gratiot Jr. - Bring MICE buttons into view on mobile when in MICE scene */
    body.mice_scene section[btns][mice] {
        transform: translateY(-50%);
    }

    body:not(.aside) section[btns][common] {
        opacity: 0;
        pointer-events: none;
    }

    body.aside section[btns][nav] {
        opacity: 0;
        pointer-events: none;
    }

    body.aside section[nav_dots] {
        opacity: 0;
        pointer-events: none;
    }

    /* Charles Gratiot Jr. - Hide dots instantly when description opens (prevents layout shift) */
    body.descr section[nav_dots] {
        visibility: hidden;
        pointer-events: none;
    }

    body.aside section[description] {
        opacity: 0;
        pointer-events: none;
    }

    body.aside section[description] my-description {
        pointer-events: none;
    }

    /* Charles Gratiot Jr. - Group title moves to top-left on mobile (breaks out of flex cluster) */
    #group-title {
        position: fixed;
        left: 1rem; top: 1rem;
        right: auto; bottom: auto;
        font-size: 1.8rem;
        white-space: normal;
        padding-right: 6rem;
        width: calc(100% - 2rem);
        box-sizing: border-box;
    }

}