/* 
    TABLE OF CONTENTS
    -----------------
    1. FOUNDATION & ANIMATIONS
    2. LAYOUT: Container
    3. COMPONENT: Hero Section
    4. COMPONENT: Scroll Down Indicator
    5. COMPONENT: Sticky Wrapper & Split Screen Section
    6. COMPONENT: Gallery Section (Grid View)
    7. COMPONENT: Footer
    8. TYPOGRAPHY: Text & Title Styles
    9. RESPONSIVE DESIGN
    10. COMPONENT: Modal Pop-up Gallery
    11. COMPONENT: Interactive Map
*/

/* --- 1. FOUNDATION & ANIMATIONS --- */
:root {
    --background-color: #1a1a1a;
    --text-color: #CCCCCC;
    --text-color-headings: #F5F5F5;
    --visited-country-color: #FFD700;
    --map-default-color: #676767;
    --scrollbar-track-color: #1a1a1a;
    --scrollbar-thumb-color: #444444;
    --font-heading: 'Lora', serif;
    --font-body: 'Lato', sans-serif;
    --font-handwriting: 'Caveat', cursive;
}
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background-color: var(--background-color); color: var(--text-color); line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track-color); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #666; }
.fade-in-section { transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.hidden { opacity: 0; transform: translateY(40px); }

/* --- 2. LAYOUT --- */
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* --- 3-5. Hero, Scroll, Sticky Sections --- */
.hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-background img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 40%), linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 40%); z-index: 2; }
.hero-content { position: relative; z-index: 3; text-align: center; padding: 0 20px; box-sizing: border-box; }
.scroll-down-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5; width: 24px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 12px; }
.scroll-down-indicator span { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 2px; height: 8px; background: rgba(255, 255, 255, 0.7); border-radius: 1px; animation: scroll-pulse 2s infinite; }
@keyframes scroll-pulse { 0% { top: 8px; opacity: 1; } 100% { top: 20px; opacity: 0; } }
.sticky-wrapper { position: relative; height: 100vh; }
.split-section { display: flex; height: 100vh; position: sticky; top: 0; }
.split-section__image { flex: 1 1 50%; background-color: var(--background-color); }
.split-section__image img { width: 100%; height: 100%; object-fit: cover; }
.split-section__text { flex: 1 1 50%; display: flex; justify-content: center; align-items: center; padding: 4rem; box-sizing: border-box; background-color: var(--background-color); }
.split-section__text .text-content { width: 75%; max-width: 600px; }
.split-section__text p { font-size: clamp(0.9rem, 1.2vw, 1.1rem); line-height: 1.8; margin-bottom: 1.5em; }
.split-section__text p:last-child { margin-bottom: 0; }

/* --- 6. COMPONENT: Gallery Section (Grid View) --- */
.gallery-section { padding: 0; text-align: center; background-color: var(--background-color); position: relative; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 50px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 8px; background-color: #222; aspect-ratio: 1 / 1; cursor: pointer; }
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 70%); display: flex; align-items: flex-end; padding: 20px; opacity: 0; transition: opacity 0.4s ease; }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay h3 { margin: 0; color: #fff; font-family: var(--font-heading); font-size: 1.5rem; width: 100%; text-align: left; }
.multi-icon { position: absolute; top: 15px; right: 15px; pointer-events: none; filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.5)); }
.gallery-continuation {
    margin-top: 50px;
    margin-bottom: 50px;
    font-family: var(--font-handwriting);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    color: var(--text-color-headings);
}

/* --- 7. COMPONENT: Footer --- */
.page-footer { padding: 80px 0; background-color: #111; position: relative; border-top: 1px solid #222; }
.footer-content { 
    display: flex; 
    flex-direction: column;
    gap: 0;
}
.footer-top-row, .footer-bottom-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.footer-bottom-row {
    align-items: flex-end;
}
.legacy-text {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-color);
    margin: 0;
}
.handwritten { 
    font-family: var(--font-handwriting); 
    font-size: 2.2rem; 
    font-weight: 700; 
    line-height: 1; 
    color: var(--text-color-headings);
    margin: 0;
}
.copyright { font-size: 0.9rem; margin: 0; }
.footer-actions { display: flex; align-items: center; gap: 15px; } /* MODIFIED: Gap changed to 15px */
.social-icon {
    display: flex;
    align-items: center;
}
.social-icon svg { 
    width: 22px; 
    height: 22px; 
    stroke: var(--text-color); 
    transition: stroke 0.3s ease; 
}
.social-icon:hover svg { stroke: var(--text-color-headings); }
.back-to-top { font-family: var(--font-body); font-weight: normal; font-size: 0.9rem; color: var(--text-color); text-decoration: none; transition: color 0.3s ease; }
.back-to-top:hover { color: var(--text-color-headings); }

/* --- 8. TYPOGRAPHY --- */
h1 { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 700; line-height: 1.1; margin: 0 0 20px 0; color: var(--text-color-headings); text-shadow: 0 2px 20px rgba(0,0,0,0.5); white-space: nowrap; }
h2 { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3rem); color: var(--text-color-headings); margin-bottom: 0; }
.hero-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.9); text-shadow: 0 1px 8px rgba(0,0,0,0.8); margin: 0 auto; }
.map-section h2 { margin-top: 50px; }

/* --- 9. RESPONSIVE DESIGN --- */
@media (max-width: 900px) { .sticky-wrapper { height: auto; } .split-section { position: static; height: auto; flex-direction: column; } .split-section__image { height: 60vh; } .split-section__text { padding: 3rem 2rem; } .split-section__text .text-content { width: 100%; } }
@media (max-width: 768px) { body { font-size: 16px; } .gallery-section, .page-footer { padding: 60px 0; } h1 { white-space: normal; } .subtitle-break { display: none; } .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 40px; } .footer-top-row, .footer-bottom-row { flex-direction: column; align-items: center; gap: 20px; } .footer-actions { justify-content: center; } .map-stats { width: 90%; } }

/* --- 10. COMPONENT: Modal Pop-up Gallery --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { position: relative; max-width: 90vw; max-height: 90vh; aspect-ratio: 4 / 3; display: flex; background-color: #000; border-radius: 4px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 1020; }
.modal-image-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.modal-image-container img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.modal-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 30px 30px; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); color: #fff; text-align: left; pointer-events: none; }
.modal-caption h3 { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }
.modal-close { position: fixed; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; background: none; border: none; z-index: 1030; transition: color 0.3s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.modal-close:hover { color: #ccc; }
.modal-nav-btn { position: fixed; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.7); font-size: 40px; cursor: pointer; background: none; border: none; padding: 20px; z-index: 1010; transition: color 0.3s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.modal-nav-btn:hover { color: white; }
.gallery-prev { left: 20px; }
.gallery-next { right: 20px; }
.internal-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(25, 25, 25, 0.5); backdrop-filter: blur(2px); color: white; border: 1px solid rgba(255,255,255,0.1); font-size: 18px; padding: 0; cursor: pointer; z-index: 1025; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, border-color 0.3s ease; }
.internal-nav-btn:hover { background-color: rgba(45, 45, 45, 0.7); border-color: rgba(255,255,255,0.2); }
.internal-prev { left: 15px; }
.internal-next { right: 15px; }
.modal-dots-container { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1025; }
.modal-dot { width: 7px; height: 7px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transition: background-color 0.3s ease; cursor: pointer; backdrop-filter: blur(2px); }
.modal-dot.active { background-color: rgba(255, 255, 255, 1); }

/* --- 11. COMPONENT: Interactive Map --- */
.map-section { padding: 0 0 60px; text-align: center; background-color: var(--background-color); position: relative; }
#chartdiv { width: 100%; height: 500px; margin: 40px 0; }
.map-stats { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
    margin: 0 auto 20px;
    width: 75%;
}
.stat-card { 
    border: 1px solid #333; 
    padding: 20px 40px; 
    border-radius: 50px; 
    transition: background-color 0.3s, border-color 0.3s;
    flex: 1 1 0;
    min-width: 200px;
}
.stat-card:hover { background-color: #222; border-color: #555; }
.stat-number { display: block; font-size: 2.5rem; font-weight: 700; color: var(--text-color-headings); }
.stat-label { font-size: 0.9rem; color: var(--text-color); }
.continent-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.continent-card { text-align: center; width: 100px; }
.progress-ring { position: relative; width: 70px; height: 70px; margin: 0 auto 10px; }
.progress-ring__center { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-color-headings); font-weight: 700; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring__circle { stroke: var(--visited-country-color); transition: stroke-dashoffset 0.8s ease-in-out; stroke-linecap: round; }
.progress-ring__bg { stroke: #333; }
.continent-label { color: var(--text-color); transition: color 0.3s ease; }
.continent-card[data-visited="false"] .progress-ring__center { color: #555; }
.continent-card[data-visited="false"] .continent-label { color: #555; }