/* ######################################################
   EL MINA PROJECT STYLE SHEET
   Version: index67 / style.css

   PURPOSE:
   This file now holds the custom visual styling that was previously
   inside index.html. index67 also uses css/elmina-utilities.css for local utility classes. Keep visual CSS here as we slowly structure the
   website for publishing.

   BEGINNER NOTE:
   Do not edit this file yet unless we specifically work on CSS together.
   Main easy edits should still happen inside js/master-edit.js.
###################################################### */

/* INDEX42 FONT AND NAMING STANDARDIZATION
   Primary font: Aptos
   Fallbacks: Segoe UI, Arial, sans-serif
   Purpose: keep one consistent, system-safe font across the full website. */
:root { --elmina-font-primary: Aptos, 'Segoe UI', Arial, sans-serif; }
html, body, button, input, textarea, select {
    font-family: var(--elmina-font-primary) !important;
}
body, .font-sans, .elmina-title-font, .elmina-accent-font, .elmina-body-font {
    font-family: var(--elmina-font-primary) !important;
}
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: 0.5rem; }
.video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.loader { border: 3px solid rgba(255,255,255,0.1); border-radius: 50%; border-top: 3px solid #2dd4bf; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
.elmina-title-font { font-family: var(--elmina-font-primary) !important; letter-spacing: 0.01em; font-variant: normal; text-transform: none; }
.elmina-accent-font { font-family: var(--elmina-font-primary) !important; letter-spacing: 0.01em; font-variant: normal; text-transform: none; }
.elmina-body-font { font-family: var(--elmina-font-primary) !important; }

/* Responsive typography tune-up for better proportion across desktop and mobile */
header #header-logo-fallback { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1; }
header #header-slogan-fallback { font-size: clamp(0.8rem, 1vw, 0.95rem); }
#btn-islands-cam, #btn-city-cam { font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 700; }
#channel-title { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.08; }
#channel-desc { font-size: clamp(1rem, 1.28vw, 1.14rem); line-height: 1.7; }
main .space-y-6 h2, main .space-y-6 h3 { font-size: clamp(1.35rem, 1.7vw, 1.75rem); line-height: 1.2; }
#regions-content, #regions-content li, main .space-y-6 p, main .space-y-6 a, main .space-y-6 span { font-size: clamp(1rem, 1.08vw, 1.1rem); }
footer h4 { font-size: clamp(1.12rem, 1.35vw, 1.3rem); }
footer p, footer a, footer span { font-size: clamp(0.95rem, 1vw, 1.05rem); }

@media (max-width: 640px) {
    #btn-islands-cam, #btn-city-cam { font-size: 0.98rem; }
    main .space-y-6 h2, main .space-y-6 h3 { font-size: 1.28rem; }
    #regions-content, #regions-content li, main .space-y-6 p, main .space-y-6 a, main .space-y-6 span { font-size: 0.98rem; }
}


/* INDEX67 SAFE HEADER RESTORE + PAGE SCROLLBAR
   Purpose: restore the visible desktop header download area/tagline without changing the whole utility system.
   Browser note: custom scrollbar styling is supported in Chrome/Edge/Safari through webkit rules and in Firefox through scrollbar-color. Unsupported browsers will simply keep the default scrollbar. */
#header-download-area {
    display: none;
}

@media (min-width: 768px) {
    #header-download-area {
        display: flex;
    }
}

html, body {
    scrollbar-width: thin;
    scrollbar-color: #ffe84d #003f9e;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #003f9e;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fff27a, #ffe84d 56%, #d8b500);
    border-radius: 999px;
    border: 2px solid #003f9e;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fff69a, #ffe84d 56%, #c9a900);
}