:root {
    --header-height: 100px; /* Sticky header offset */
    --dark-bg: #1A2E44; /* Function button bg */
    --en-font: "Arial", sans-serif;
    --tc-font: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --sc-font: "Noto Sans SC", "SimHei", sans-serif;
    --text-color: #1F2A3C;
    --light-bg: #F5F8FA;
    --gradient-bg: #d4dbe3;
}

/* pre-loading cover */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.assets-ready #loading-screen {
    display: none !important;
}

/* disable Mobile Pull-to-Refresh gesture */
html, body, .scrollable-container {
    overscroll-behavior-y: contain;
}

/* background pattern */
#mapContainer {
    /*
    background-image: url('../img/bg.jpg');
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    */
    background: linear-gradient(to bottom, var(--gradient-bg), #ffffff);
}

/* English text */
html[lang="en"] body, span[lang="en"] {
    font-family: var(--en-font);
}

/* Traditional Chinese text */
html[lang="zh-Hant"] body {
    font-family: var(--tc-font);
}

/* Simplified Chinese text */
html[lang="zh-Hans"] body {
    font-family: var(--sc-font);
}

html {
    scroll-padding-top: var(--header-height);
    /* Optional: adds a smooth slide effect when clicking anchors */
    scroll-behavior: smooth;
    overflow-y: scroll; /* always reserve scrollbar space */
}

body {
    color: var(--text-color);
}

.icac-logo {
    max-width: 45px;
}

.footer {
    background-color: var(--dark-bg);
}

.wcag {
    max-width: 120px;
}

nav.sticky-top {
    z-index: 1021; /* sitcky header always on top of the mapHint layer */
}

.offcanvas {
    width: auto !important;
    max-width: 100%; /* prevent overflow on small screens */
    transition: transform 0.5s;
}

/* Striped item background */
/*
.striped-grid .row .container-fluid .row {
    background-color: inherit !important;
}
*/

.striped-grid .row {
    padding-block: 3rem;
    margin-block: 0;
    border-bottom: 2px solid #ddd;
}

/* Modal close icon */
.modal-header .btn {
    background: none;
    border: none;
    padding: 0;
}

.modal-header .fa-times {
    cursor: pointer;
}

/* Menu item gap */
.nav-link {
    padding-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Map zoom icon */
#zoom-toggle {
    opacity: 0.7;
}

/* Initial hide audio pause buttons */
.pauseBtn {
    display: none;
}

/* Back to Top icon */
#backToTop {
    position: fixed;
    padding: 6px 8px 6px 8px;
    bottom: 20px;
    right: 20px;
    display: none; /* hidden by default */
    z-index: 9999;
    opacity: 0.7; /* 70% transparent */
    transition: opacity 0.3s ease;
}

    #backToTop:hover {
        opacity: 1; /* fully visible on hover */
    }

/* Tooltip fading */
.tooltip.fade {
    transition: opacity 0.3s ease-in-out; /* slower fade */
}

/* Default: let select auto-size */
.jumpSelect {
    max-width: 95%;
}

/* CSS from the Exhibition Hall */
.brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    color: #333;
}

.brand-name-chinese {
    font-family: var(--tc-font);
    font-weight: 700;
    font-size: clamp(1rem, 5vw, 1.5rem);
    letter-spacing: clamp(0.01em, 0.5vw, 0.05em);
}

html[lang="zh-Hans"] .brand-name-chinese {
    font-family: var(--sc-font) !important;
}

.brand-name-english {
    font-family: var(--en-font);
    font-weight: 600;
    font-size: clamp(0.6rem, 5vw, 1rem);
    letter-spacing: clamp(0.01em, 0.5vw, 0.02em);
}

.zoom-img {
    transition: transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
    cursor: pointer;
}

    .zoom-img:hover {
        transform: scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
        filter: brightness(1.1);
    }

.function-controls {
    gap: 0.5rem;
}

    .function-controls div {
        display: flex;
        align-items: center;
    }

        .function-controls div button {
            background: none;
            border: 1px solid var(--dark-bg);
            color: var(--dark-bg);
            padding: 0.2rem 0.5rem;
            margin: 0.15rem;
            font-size: 0.8rem;
            cursor: pointer;
            border-radius: 3px;
            transition: all 0.2s;
        }

            .function-controls div button:hover,
            .function-controls div button.active,
            .nav-link:hover,
            .nav-link.active {
                background-color: var(--dark-bg);
                color: white !important;
            }