/* --- GLOBAL VARIABLES --- */
:root {
    /* MARCHING.WORLD / AMAZON PALETTE */
    --amz-dark: #232f3e;       /* Navy Backgrounds */
    --amz-light-blue: #007185; /* Links */
    --amz-orange: #ff9900;     /* Accents/Buttons */
    --amz-yellow: #ffd814;     /* Primary Buttons */
    --amz-black: #0F1111;      /* Text */
    --amz-gray: #f3f3f3;       /* Section Backgrounds */
    --mw-border: #e7e7e7;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--amz-black);
    background-color: #ffffff;
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, .athletic-font {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amz-black);
}

.code-font { font-family: 'Fira Code', monospace; font-size: 0.9rem; }

.music-font {
    font-family: 'Black Ops One', cursive; 
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* --- NAVIGATION --- */
.gj-network-bar {
    background-color: var(--amz-dark);
    color: #fff;
    font-size: 12px;
    padding: 8px 0;
    font-family: 'Fira Code', monospace;
    border-bottom: 3px solid var(--amz-orange);
    overflow: hidden;
}

.top-social-link { color: #ccc; margin-left: 15px; font-size: 14px; transition: color 0.2s; }
.top-social-link:hover { color: var(--amz-orange); }

.main-header {
    background-color: #fff;
    border-bottom: 1px solid var(--mw-border);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.navbar-brand { font-size: 2rem; color: var(--amz-black); text-decoration: none; line-height: 1; }

.nav-link {
    color: var(--amz-dark) !important;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 15px !important;
    transition: all 0.3s ease;
}
.nav-link:hover, .nav-link.active {
    color: var(--amz-light-blue) !important;
    background-color: rgba(255, 153, 0, 0.1);
    border-radius: 4px;
}

/* --- HERO SECTION --- */
.doc-hero {
    padding: 60px 0;
    background-color: var(--amz-gray); /* This needs the var() to work */
    border-bottom: 1px solid var(--mw-border);
    position: relative;
}

.doc-tag {
    background: var(--amz-dark);
    color: white;
    padding: 4px 10px;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    border-left: 4px solid var(--amz-orange);
}

/* --- COMPONENTS --- */
.signal-box {
    background: var(--amz-dark);
    padding: 20px;
    border-radius: 4px;
    color: #fff;
    font-family: 'Fira Code', monospace;
    margin-bottom: 30px;
    border: 1px solid #000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.signal-bar {
    height: 4px;
    background: var(--amz-orange);
    margin-bottom: 6px;
    width: 100%;
    animation: scan 2s infinite ease-in-out;
}

@keyframes scan {
    0% { width: 5%; opacity: 0.5; }
    50% { width: 100%; opacity: 1; }
    100% { width: 5%; opacity: 0.5; }
}

.ad-slot {
    background: #fff;
    border: 1px dashed #aaa;
    text-align: center;
    padding: 20px;
    background-image: linear-gradient(45deg, #f9f9f9 25%, transparent 25%, transparent 75%, #f9f9f9 75%, #f9f9f9), linear-gradient(45deg, #f9f9f9 25%, transparent 25%, transparent 75%, #f9f9f9 75%, #f9f9f9);
    background-size: 20px 20px;
}

/* --- FOOTER --- */
.site-footer {
    background-color: var(--amz-dark);
    color: #DDD;
    font-size: 14px;
    border-top: 4px solid var(--amz-orange);
    padding-top: 4rem;
    padding-bottom: 2rem;
    margin-top: auto;
}
.footer-heading { color: white; margin-bottom: 15px; font-family: 'Oswald', sans-serif; }
.footer-link { color: #ccc; text-decoration: none; transition: 0.2s; }
.footer-link:hover { color: var(--amz-orange); text-decoration: underline; }

.social-btn {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-flex; align-items: center; justify-content: center;
    color: white; text-decoration: none; transition: 0.3s;
    margin-right: 8px;
}
.social-btn:hover { background: var(--amz-orange); border-color: var(--amz-orange); color: #000; }

.btn-amazon {
    background-color: var(--amz-yellow);
    border: 1px solid #fcd200;
    color: #0F1111;
    border-radius: 20px;
    font-weight: 500;
    transition: background 0.2s;
}
.btn-amazon:hover { background-color: #f7ca00; }

/* --- TICKER ANIMATION --- */
.ticker-wrap { width: 100%; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.ticker-move { display: inline-block; white-space: nowrap; animation: ticker 30s linear infinite; }
.ticker-item { display: inline-block; padding-right: 50px; color: rgba(255,255,255,0.8); }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* --- MOBILE --- */
@media (max-width: 991px) { .navbar-collapse { background: #fff; padding: 20px; border-top: 1px solid #eee; } }
@media (max-width: 768px) { 
    .ticker-item { font-size: 10px; } 
    .top-social-container { display: none; }
    .doc-hero .ad-slot div { height: 150px !important; }
}