/*
Theme Name: Neo-Swiss Cosmic Terminal
Theme URI: http://your-hi5-framework-link.com
Author: Your Name / Hi5 Core
Author URI: http://yourportfolio.com
Description: A high-impact, 5-section tech blog theme built with Bootstrap 5. Featuring Swiss-Brutalist typography and cosmic-retro aesthetics.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neo-swiss-cosmic
Tags: black, red, two-columns, custom-header, bootstrap-5, tech-blog
*/
:root {
    --swiss-red: #D90429;
    --terminal-bg: #080808;
    --text-main: #EDF2F4;
    --accent-cyan: #00F5FF;
    --font-mono: 'Space Mono', monospace;
    --font-swiss: 'Syncopate', sans-serif;
    --font-heavy: 'Inter', sans-serif;
}

body {
    background-color: var(--terminal-bg);
    color: var(--text-main);
    font-family: var(--font-mono);
    overflow-x: hidden;
}

/* CRT SCANLINE EFFECT */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 9999;
    pointer-events: none;
    background-size: 100% 3px, 3px 100%;
}

/* SECTION 1: GLOBAL NAV & OFFCANVAS */
.system-bar {
    border-bottom: 1px solid var(--text-main);
    padding: 10px 20px;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.offcanvas { background: var(--swiss-red); color: white; border-left: 10px solid white; width: 400px !important; }
.nav-link-custom { font-family: var(--font-swiss); font-size: 2rem; color: white; text-decoration: none; display: block; margin-bottom: 1rem; transition: 0.2s; }
.nav-link-custom:hover { transform: translateX(20px); color: var(--terminal-bg); }

/* SECTION 2: THE "FEATURED" SPLIT HERO */
.hero-split { border-bottom: 1px solid var(--text-main); }
.hero-main { padding: 80px 40px; border-right: 1px solid var(--text-main); }
.hero-sub { padding: 0; }
.hero-sub-item { padding: 40px; border-bottom: 1px solid var(--text-main); min-height: 50%; display: flex; flex-direction: column; justify-content: center; transition: 0.3s; }
.hero-sub-item:hover { background: var(--swiss-red); }

/* SECTION 3: HORIZONTAL SCROLL TICKER */
.ticker-wrap { background: var(--text-main); color: black; font-weight: bold; overflow: hidden; padding: 5px 0; }
.ticker-move { display: inline-block; white-space: nowrap; animation: ticker-kf 20s linear infinite; }
@keyframes ticker-kf { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* SECTION 4: MAGAZINE GRID */
.mag-grid { padding: 80px 0; }
.mag-card { border: 1px solid rgba(255,255,255,0.1); padding: 0; margin-bottom: 30px; transition: 0.3s; position: relative; }
.mag-card:hover { border-color: var(--accent-cyan); }
.mag-img { width: 100%; height: 250px; background: #1a1a1a; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #444; overflow: hidden; position: relative; }
.mag-img::after { content: "FILE_ID: 00"+attr(data-id); position: absolute; bottom: 10px; right: 10px; }
.mag-body { padding: 25px; }

/* SECTION 5: TECHNICAL SPECS TABLE */
.spec-table { background: #111; border: 1px solid var(--text-main); font-size: 0.8rem; }
.spec-table th { background: var(--text-main); color: black; border: none; text-transform: uppercase; }

/* SECTION 6: FOOTER BRUTALISM */
footer { background: var(--text-main); color: black; padding: 60px 40px; }
.footer-logo { font-family: var(--font-heavy); font-size: 15vw; line-height: 0.7; letter-spacing: -1vw; }

/* BUTTONS */
.btn-swiss { border: 2px solid var(--text-main); border-radius: 0; color: var(--text-main); font-weight: bold; text-transform: uppercase; padding: 10px 30px; }
.btn-swiss:hover { background: var(--text-main); color: black; }