/* --- 1. THE ARCHITECTURE (Global Variables) --- */
:root {
    --header-obsidian: #0A0C0D;
    --hero-slate: #161A1D;
    --page-black: #0F1214;
    --terracotta: #A45A4D;
    --sand-text: #D6D2C4;
    --muted-grey: #8A9194;
    --card-surface: #181D20;
    --snow-cyan: #7CB3D2; /* blue - darker than sweet-blue */
    --sweet-blue: #2DC4ED;
    --bright-light: #F5DD27; /* Glowing yellowish */
    --bright-light: #FFC040; /* Bright Brown */
}

/* --- 2. GLOBAL RESET --- */

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    border: none !important;
    outline: none; 
    /*  border: 1px solid red !important; */
}

/* html must NOT scroll */
/* RESTORE NORMAL BROWSER BEHAVIOR */
html {
    margin: 0;
    padding: 0;
    overflow: visible; /* restores header/nav/scroll */
    background-color: var(--page-black);
    /*    font-size: 100%; */
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto; /* restores your original scroll */
    background-color: var(--page-black);

    /* keep your original text styles */
    color: var(--sand-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h2 {
    font-size: 2.5rem;          /* 40px */
    line-height: 1.1;           /* Keeps it tight */
    letter-spacing: -0.02em;    /* Makes it look slightly more modern/compact */
    text-transform: uppercase;  /* Optional: Great for section titles */
    font-weight: 700;           /* Bold */
    color: #000000;
}

/* Force the lightbox to the very front */

.glightbox-container {
    z-index: 999999 !important;
}

/* Ensure the image can actually be clicked */

.gslide-image img {
    pointer-events: auto !important;
    cursor: zoom-in !important;
}

/* --- 3. GLOBAL NAVIGATION (Portal, Articles, Telemetry) --- */

header.site-nav {
    background-color: var(--header-obsidian);

    /* FIXES THE OFF-SCREEN ISSUE */
    height: auto; 
    padding-top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
    padding-bottom: 1.5rem;

    /* KEEP THESE — THEY ARE CORRECT */
    padding-left: 8%;
    padding-right: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
}

.logo { 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    color: var(--sweet-blue); 
    text-decoration: none; 
    font-size: 0.75rem; 
}

a.logo:hover { 
    opacity: 1 !important; 
    color: var(--bright-light) !important; 
    text-shadow: 0 0 10px rgba(164, 90, 77, 0.3);
}

.nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-links a { 
    color: var(--bright-light); 
    text-decoration: none; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin-left: 25px; 
    opacity: 1.00; 
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    align-items: center;
    display: flex;
    line-height: 1;
}

.nav-links a:hover { 
    opacity: 1 !important; 
    color: var(--sweet-blue) !important; 
    text-shadow: 0 0 10px rgba(164, 90, 77, 0.3);
}

.simple-nav a {
    color: var(--sand-text);
    text-decoration: none;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 1.00;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.simple-nav a:hover {
    opacity: 1 !important;
    color: var(--terracotta) !important;
    transform: translateX(-5px); /* Slides left toward the arrow */
    text-shadow: 0 0 12px rgba(164, 90, 77, 0.5);
}

/* --- 2. DESKTOP HERO --- */

.hero {
    height: 50vh;
    background-color: var(--hero-slate);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr; /* Hero: Text narrow, Art wide */
    gap: 2rem;
    align-items: center;
    padding: 0 8%;
    overflow: hidden;
}

.hero-content { 
    position: relative;
    z-index: 10;
    text-align: left;
}

.hero-content h1 {
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 200;
    letter-spacing: -1px;
    text-transform: lowercase;
    margin: 0 0 1rem 0;
}

.scroll-prompt {
    text-align: left;
}

/* This is the right-side element */
.hero-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 66%;
    height: 90%;
    background-image: url('images/heros/mountain-outline2.png');
    background-repeat: no-repeat;

    /* 2. Scale it to the size you want (try 50%, 70%, or 'contain') */
    background-size: 55% auto; 
    /* 3. Position it (e.g., right-aligned, centered vertically) */
    background-position: calc(100% - 60px) center;
    background-color: #2A3333;
    z-index: 1; /* Sits behind the text */
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-top: 0px;
    margin-right: 10px;
}

.hero-image h2 {
    font-size: clamp(2rem, 4vw, 4.5rem);
    font-weight: 200;
    letter-spacing: -1px;
    text-transform: lowercase;
    margin: 0 0 1rem 0;
    color: var(--sand-text);
    padding-top: 100px;
}

.hero-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: 100%; height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
    opacity: 1.00;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /*    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1.4) 100%); */
    background: #163569;
    z-index: 2;
}

/* --- 4. THE GLOBAL TRIP-LAB (Telemetry Bar) --- */
/* This ensures consistency on Index, Articles, and Telemetry pages */

.trip-lab {
    background: var(--card-surface);
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    border-left: 3px solid var(--terracotta);
}

.lab-item span { 
    display: block; 
    font-size: 0.55rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: var(--sweet-blue); 
    margin-bottom: 8px; 
    font-weight: 700; 
}

.lab-item strong { 
    font-size: 0.9rem; 
    font-weight: 400; 
    color: var(--sweet-blue); 
}

p a {
    color: var(--sweet-blue);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

p a:hover {
    text-decoration-thickness: 2px;
    color: var(--snow-cyan);
}


a {
    color: var(--bright-light);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a:hover {
    text-decoration-thickness: 2px;
    color: var(--sweet-blue);
}

/* --- 5. GLOBAL FOOTER (The "Bright Pop") --- */
.site-footer {
    padding: 100px 20px 80px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-nav {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-copyright {
    font-size: 0.7rem;
    opacity: 0.2;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.foot-link {
    margin: 0 15px;
    text-decoration: none;
    color: var(--sand-text);
    opacity: 1.00;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.foot-link:hover {
    opacity: 1 !important;
    color: var(--snow-cyan) !important;
    transform: scale(1.1) translateY(-3px);
    text-shadow: 0 0 15px rgba(164, 90, 77, 0.6);
}

/* --- 6. MOBILE RESPONSIVENESS --- */
/* GLOBAL MOBILE LAYOUT FIXES */

@media (max-width: 600px) {

    /* Fix for Samsung + iPhone safe areas */
    /* MOBILE HEADER LAYOUT */
    header.site-nav {
        flex-direction: column;      /* stack logo + nav vertically */
        align-items: center;         /* center everything */
        height: auto;                /* allow natural height */
        padding: calc(1rem + env(safe-area-inset-top)) 0 1rem;
        gap: 14px;                   /* space between logo + nav */
    }

    .logo {
        display: block;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;              /* removes Samsung tap padding */
        line-height: 1.0;          /* removes vertical/horizontal expansion */
        font-size: 1.0rem;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: center;   /* centers 1, 2, or 10 links */
        width: 100%;               /* forces full-width row */
        gap: 1.25rem;
        margin-top: 0.5rem;
    }

    .nav-links a {
        line-height: 1;
        padding: 0;
        margin: 0;
        display: flex;
        text-align: center;
        align-items: center;
    }

    /* Page padding */
    body {
        padding: 0 1.0rem;
    }

    main {
        margin-top: 1.5rem;
    }

    /* Hero sections */
    .hero {
        overflow-x: hidden;      /* stops text/video from leaking */
        position: relative;      /* ensures overlay + video behave */
        height: 40vh;
    }

    .hero-content {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
        position: relative;
        z-index: 5; /* ensures it sits above video/overlay */
    }
    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .hero p {
        font-size: 1rem;
        margin-top: 0.75rem;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto; !important /* Overrides any fixed desktop height */
        aspect-ratio: 16 / 9; /* Forces a clean landscape box on mobile */

    }

    .article-hero {
        width: 100% !important;
        height: auto !important; /* Overrides any fixed desktop height */
        aspect-ratio: 16 / 9; /* Forces a clean landscape box on mobile */
    }

    .hero-img {
        width: 100% !important;
        height: auto !important; /* Overrides any fixed desktop height */
        aspect-ratio: 16 / 9; /* Forces a clean landscape box on mobile */
    }   

    .hero-image h2 {
        padding-top: 120px;
    }
    /* Article layout */
    .article-container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .article-container h1 {
        font-size: 1.75rem;
        line-height: 1.25;
        margin-bottom: 1rem;
    }

    .article-container p {
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: 1.25rem;
    }

    /* Homepage grids */
    .main-grid,
    .telemetry-grid,
    .dispatch-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        width: 100%;
    }

    /* Footer */
    footer {
        margin-top: 3rem;
        padding: 2rem 0;
        text-align: center;
    }

}