styles.css

/* Base body styles */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* Link styles */
a,
a:visited { /* Normal and visited link color */
    color: #4a0096;
    text-decoration: none;
}

a:hover { /* Hover link color */
    color: #d4aaff;
}

/* Full viewport map container */
#map {
    top: 0;
    height: 100vh;
    width: 100vw;
    position: fixed;
}

/* Header styles */
#header {
    position: relative;
    width: 100%;
    z-index: 5;
    color: #fff;
    background-color: #000; /* Fallback color */
    background-image: linear-gradient(to right, #4a0096, #5b00b9);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0px; /* Add some padding for better spacing */
}

#header h1,
#header h2,
#header h3,
#header p {
    margin: 0;
    padding: 1vh 1vw;
    text-align: center;
}

#header h1 {
    font-size: 18px; /* Smaller font size for h1 */
}
#header h3 {
    font-size: 15px; /* Smaller font size for h1 */
}
/* Footer styles */
#footer {
    position: relative;
    width: 100%;
    min-height: 5vh; /* Keeps a minimum height */
    padding: 0.5vh 0; /* Reduced vertical padding */
    text-align: center;
    line-height: 20px; /* Reduced line height for tighter text spacing */
    font-size: 13px; /* Font size remains the same for readability */
    z-index: 5;
}

/* Story features padding */
#features {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.hidden {
    visibility: hidden;
}

.centered {
    width: 50vw;
    margin: 0 auto;
}

.lefty {
    width: 33vw;
    margin-left: 5vw;
}

.righty {
    width: 33vw;
    margin-left: 62vw;
}

.fully {
    width: 100%;
    margin: auto;
}
/* Theme-specific styles */
.light {
    color: #000;
    background-color: #fafafa;
}

.dark {
    color: #fafafa;
    background-color: #444;
}

.step {
    padding-bottom: 30vh;
    /* margin-bottom: 10vh; */
    opacity: 0.25;
}

.step.active {
    opacity: 0.9;
}

.step div {
    padding: 25px 25px;
    line-height: 20px;
    font-size: 13px;
}

.step img {
    width: 100%;
}

/* Responsive layouts for steps */
@media (max-width: 750px) {

    .centered,
    .lefty,
    .righty,
    .fully {
        width: 90vw;
        margin: 0 auto;
    }
}




/* Fix issue on mobile browser where scroll breaks  */
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
    touch-action: unset;
}

/* SCROLL, USER HINT EXPERIENCE to explore more on bottom of page for user tips*/
.scroll-prompt {
    position: fixed;
    right: 10px;
    bottom: 20px;
    transform: none; /* Remove the transform that centers it horizontally */
    text-align: center;
    animation: bounce 2s infinite;
    z-index: 1000;
    cursor: pointer;
    background-color: #fff; /* White background */
    color: #4a0096;
    padding: 8px; /* Add padding for better visibility */
    border-radius: 4px; /* Optional: rounded corners for better aesthetics */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for depth */
    font-size: 18px; /* Smaller font size */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}





/* CUSTOM MARKERS FOR CLIMATE-GENT-CASCADE CHAPTER  */
.custom-marker {
    cursor: pointer;
    border-radius: 50%;  
    border: 2px solid white; 
    box-shadow: 0 0 6px #000;
}

/* TOGGLE CHAPTERS ON AND OFF TO SEE MAPBOX  */

.toggle-chapters {
    position: fixed;
    bottom: 20px;  /* Distance from the bottom */
    left: 20px;   /* Distance from the right */
    z-index: 10;   /* Ensure it's on top of other elements */
    color: #fff;
    background-image: linear-gradient(to right, #4a0096, #5b00b9);  /* Gradient background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Shadow for better visibility */
    border: none;  /* No borders */
    border-radius: 4px;  /* Rounded corners */
    padding: 8px 16px;  /* Padding for better touch area and aesthetics */
    cursor: pointer;  /* Cursor indicates clickable area */
    font-size: 18px;  /* Legible font size */
    width: auto;  /* Auto width based on content */
}

/* Initially, the chapters are visible */
#story {
    transition: transform 0.3s ease-out;
}

/* This class hides the chapters softly */
.hidden-chapters {
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.3s ease-out;
}

@media (max-width: 600px) {
    .toggle-chapters {
        bottom: 10px;  /* Closer to the bottom edge on smaller screens */
        left: 10px;   /* Closer to the right edge on smaller screens */
        font-size: 16px;  /* Slightly smaller font size for smaller screens */
        padding: 6px 12px;  /* Adjusted padding for smaller touch areas */
    }
    #header h1 {
        font-size: 18px;  /* Adjust header font size for better readability on mobile */
    }
}


/* BOOTSTRAP MODAL TOOLTIP CUSTOM COLORS - BUT NOT WORKING */
.custom-tooltip {
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
  }