/* --------------------------------------------------
   GLOBAL BASE STYLES
-------------------------------------------------- */
:root {
    --navy: #0b1f36;
    --navy-light: #112b45;
    --navy-soft: #183754;
    --blue-accent: #4db8ff;
    --white: #ffffff;
    --text-light: #d6e3f0;
    --text-muted: #a3b7ca;
    --radius: 8px;
    --transition: 0.25s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--navy-light);
    font-family: 'Montserrat', sans-serif;
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
}

/* A fallback background for when the globe has not yet loaded */
body.loading #globe-container {
    background-image: url('../assets/earth_day.jpg');
    background-size: cover;
    background-position: center right;
    opacity: 0.1;
}

/* --------------------------------------------------
   NAVIGATION BAR
-------------------------------------------------- */
.navbar {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    padding: 18px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 99;
}

.navbar .logo img {
    height: 42px;
}

.navbar nav a {
    color: var(--text-light);
    margin-left: 32px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: var(--transition);
}

.navbar nav a:hover {
    color: var(--blue-accent);
}

.navbar nav a.active {
    color: var(--blue-accent);
    border-bottom: 2px solid var(--blue-accent);
    padding-bottom: 3px;
}

/* --------------------------------------------------
   HERO (HOME ONLY)
-------------------------------------------------- */
.hero {
    padding-top: 200px;
    padding-left: 60px;
    max-width: 760px;
    position: relative;
    z-index: 5;
}

.hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 18px;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
}

.hero-buttons {
    margin-top: 35px;
}

.blue-btn,
.white-btn {
    padding: 14px 32px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
}

.blue-btn {
    background: var(--blue-accent);
    color: #002742;
    margin-right: 14px;
}

.white-btn {
    background: var(--white);
    color: #002742;
}

.blue-btn:hover,
.white-btn:hover {
    opacity: 0.85;
}

/* --------------------------------------------------
   CINEMATIC GLOBE (CANVAS LAYER)
-------------------------------------------------- */
#globe-container {
    position: fixed;
    top: 0;
    right: 0;

    width: 70vw;
    min-width: 550px;
    height: 100vh;

    display: block !important;
    pointer-events: none;
    opacity: 0.38;
    z-index: 1;
    background: transparent;
}

/* Canvas inside the globe container should ALWAYS appear */
#globe-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    opacity: 1;
}

/* --------------------------------------------------
   ELEMENTS ABOVE GLOBE
-------------------------------------------------- */
.hero,
.navbar,
footer {
    position: relative;
    z-index: 5;
}

/* --------------------------------------------------
   GENERAL PAGE WRAPPER
-------------------------------------------------- */
.page {
    padding-top: 160px;
    padding-left: 60px;
    padding-right: 60px;
    max-width: 960px;
    margin: auto;
}

.page h1 {
    font-size: 38px;
    margin-bottom: 20px;
}

.page h2 {
    margin-top: 35px;
    margin-bottom: 12px;
    font-size: 24px;
}

.page ul {
    margin-left: 20px;
}

.page ul li {
    margin-bottom: 10px;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
footer {
    width: 100%;
    background: rgba(0,0,0,0.25);
    padding: 22px 0;
    text-align: center;
    color: var(--text-muted);
    margin-top: 80px;
    font-size: 14px;
    position: relative;
    z-index: 5;
}