/* S Livernois - Tour font */
:root {
    --font-primary: Verdana, Geneva, Tahoma, sans-serif;
}

/* ========================================
   SPLASH SCREEN
   C Gratiot - Lighter overlay so more of the blurred scene shows through
   ======================================== */

#splash_screen {
    background-color: rgba(0,0,0,0.5);
}

/* ========================================
   TOUR COLORS (Bobby J)
   ======================================== */

:root {
    /* Primary Brand Color - SUTD */
    --primary-color: #0066CC;
    --primary-color-rgb: 0, 102, 204;

    /* Secondary Brand Color */
    --secondary-color: #003366;
    --secondary-color-rgb: 0, 51, 102;
}

/* ========================================
   BRANDING CUSTOMIZATIONS
   ======================================== */

:root {
    /* Logo Height Override
       Source: index.css (line 104) */
    --logo-height: auto;
}

/* ========================================
   UI ELEMENT CUSTOMIZATIONS
   ======================================== */

/* J. Louis - SUTD has guided audio, so keep the single v6 audio toggle visible. */
section[btns][nav] my-btn.audio {
    display: block !important;
}

/* ========================================
   NAVIGATION COLOR GROUPS
   Charles Gratiot Jr. - Removed: colors now driven from groups database
   via CSS variables --group-color and --group-color-rgb
   Set in: menu_dots.js, menu_accordian.js, main.js
   Used in: menu_dots.css, menu_acc.css, hs_navigation.css
   ======================================== */


/* section[description] {
   position: absolute;
   right: 2rem;
   bottom: 8rem;
   width: 60rem;
   height: auto;
   z-index: 4;
   transition: opacity var(--transition-duration);
} */

/* C Gratiot - Tighter indent for MAIN children (items directly under a group) */
aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-item > acc-menu-item-title {
    padding: 1rem 1rem 1rem 3rem !important;
}

/* C Gratiot - Subgroup titles same indent as main children */
aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-group > acc-menu-item-title {
    padding-left: 3rem !important;
}

/* C Gratiot - Tighter indent for SUBGROUP children (items inside a subgroup) */
aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-group > acc-menu-item-children > acc-menu-item > acc-menu-item-title {
    padding: 1rem 1rem 1rem 4rem !important;
}

/* C Gratiot - Description max-height now handled in core description.css */

@media screen and (min-width: 501px) {
    /* J. Louis - SUTD desktop description panel uses the wider legacy width. */
    section[description] {
        width: 60rem;
    }

    /* J. Louis - Long SUTD desktop scene descriptions cap here and use the existing scroll area. */
    body.descr section[description] my-description div.sa {
        max-height: 24rem;
    }
}

/* J. Louis - Keep SUTD's stronger 80% title treatment on top-level accordion groups only. */
aside acc-menu > acc-menu-item-children > acc-menu-group > acc-menu-item-title {
    background-color: rgba(var(--group-color-rgb, var(--primary-color-rgb)), 0.8);
    padding-right: 4rem !important;
}

/* C Gratiot - Inner menu background at 10% */
aside acc-menu {
    background-color: rgba(0,0,0,0.1);
}
/* ========================================
   EXTLINK HOTSPOT CUSTOMIZATIONS
   Charles Gratiot Jr. - Custom sizing, colors
   ======================================== */

/* C Gratiot - Transparent spot, icon only */
/* S Livernois - Reduced from 65px to 55px per client */
hs-extlink .spot {
    width: 55px; height: 55px;
    border-radius: 8px;
    background-color: transparent;
    border: none; /* J. Louis - SUTD uses icon-only extlink spots; keep the core dot border hidden. */
}

/* C Gratiot - SVG pulse replaces border ring */
hs-extlink .ring-big {
    width: 55px; height: 55px;
    border: none;
}

hs-extlink .ring-big .pulse-svg {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    overflow: visible;
}

hs-extlink .ring-big .pulse-svg path {
    fill: none;
    stroke: rgba(255,255,255,1);
    stroke-width: 4;
}

hs-extlink .ring-small {
    width: 55px; height: 55px;
    border-radius: 8px;
    overflow: visible;
}


/* Charles Gratiot Jr. - Transparent background, icon only */
hs-extlink .ring-small .hs-bg {
    fill: #ffffff;
}

hs-extlink .ring-small .hs-icon {
    fill: var(--group-color, #000000);
}

/* ========================================
   YOUTUBE HOTSPOT CUSTOMIZATIONS
   Charles Gratiot Jr. - Custom sizing, colors, hidden rings
   ======================================== */

/* S Livernois - Reduced from 65px to 55px per client */
hs-youtube .spot {
    width: 55px; height: 55px;
}

hs-youtube .ring-big {
    width: 55px; height: 55px;
    border-color: rgba(255,255,255,1);
}

hs-youtube .ring-small {
    width: 55px; height: 55px;
}

@keyframes hs_youtube_ring_pulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

hs-youtube .ring-small .hs-bg {
    fill: var(--group-color, #000000);
}

hs-youtube .ring-small .hs-icon {
    fill: #ffffff;
}

/* ========================================
   POPUP DISTANCE CUSTOMIZATIONS
   ======================================== */

/* J. Louis - Allow the info popup caret to render outside the card; text remains constrained inside hs-info-descr. */
hs-info .popup {
    overflow: visible;
}

@media screen and (min-width: 501px) {
    /* J. Louis - SUTD's larger desktop hotspots need a tighter 10px popup/caret offset. */
    hs-extlink .popup,
    hs-youtube .popup,
    hs-info .popup {
        bottom: calc(100% + 10px);
    }

    /* J. Louis - Give long SUTD desktop popup copy more line length while keeping mobile unchanged. */
    hs-info .popup {
        max-width: min(40rem, calc(100vw - 4rem));
    }

    hs-youtube .popup,
    hs-extlink .popup {
        width: min(38rem, calc(100vw - 4rem));
    }

    /* J. Louis - Let SUTD desktop YouTube descriptions show more copy before scrolling. */
    hs-youtube .popup hs-youtube-descr {
        max-height: 14rem;
    }
}

/* ========================================
   NAVIGATION HOTSPOT CUSTOMIZATIONS
   C Gratiot - Icon only style matching link/youtube hotspots
   Shows scene thumbnail on hover
   ======================================== */

/* C Gratiot - Fixed size to match other hotspots */
/* S Livernois - Reduced from 65px to 55px per client */
hs-navigation {
    width: 55px !important;
    height: 55px !important;
}

/* C Gratiot - Thumb hidden by default, shows on hover */
hs-navigation .thumb {
    width: 55px; height: 55px;
    opacity: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    transition: opacity var(--transition-duration), border var(--transition-duration), box-shadow var(--transition-duration), background-color var(--transition-duration);
}

hs-navigation:hover .thumb,
hs-navigation.open .thumb {
    opacity: 1;
    border: 2px solid rgba(255,255,255,1);
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    background-color: rgba(var(--group-color-rgb, 0,0,0), 0.3);
}

/* C Gratiot - Square thumb instead of circle, no inner shadow */
hs-navigation .thumb,
hs-navigation .thumb::after,
hs-navigation .thumb img {
    border-radius: 8px !important;
}

hs-navigation .thumb::after {
    box-shadow: none !important;
}

/* C Gratiot - White pulse ring matching other hotspots, square */
hs-navigation .ring-big {
    width: 55px; height: 55px;
    border-color: rgba(255,255,255,1);
    border-radius: 8px;
}

/* C Gratiot - Icon container sizing */
hs-navigation .icon {
    width: 55px; height: 55px;
}

/* C Gratiot - SVG fills: background white, icon group color */
hs-navigation .icon .hs-bg {
    fill: #ffffff;
}

hs-navigation .icon .hs-icon {
    fill: var(--group-color, #000000);
}

/* ========================================
   INFO HOTSPOT CUSTOMIZATIONS
   C Gratiot - White outer ring and "i" text (core has black)
   ======================================== */

hs-info .spot {
    border-color: rgba(255,255,255,0.6);
}

hs-info .ring-small {
    color: #ffffff;
}

/* ========================================
   SPLASH SCREEN CUSTOMIZATIONS
   ======================================== */

/* Wider buttons (Audio Guided Tour button needs more space)
   Source: splash_screen.css (line 41)
   Core CSS uses 200px, overridden to 270px */
#splash_screen div button {
    width: 270px;
}

/* ========================================
   MOBILE HOTSPOT SIZE REDUCTION
   S Livernois - Reduced from 52px to 45px per client
   ======================================== */

@media screen and (max-width: 500px) {
    /* Navigation hotspot mobile sizes */
    hs-navigation {
        width: 45px !important;
        height: 45px !important;
    }
    hs-navigation .thumb,
    hs-navigation .ring-big,
    hs-navigation .icon {
        width: 45px;
        height: 45px;
    }

    /* J. Louis - Active extlink hotspot mobile sizes. */
    hs-extlink .spot,
    hs-extlink .ring-big,
    hs-extlink .ring-small {
        width: 45px;
        height: 45px;
    }

    /* YouTube hotspot mobile sizes */
    hs-youtube .spot,
    hs-youtube .ring-big,
    hs-youtube .ring-small {
        width: 45px;
        height: 45px;
    }

}