/*
Theme Name: JDGames News Theme - Exact2
Theme URI: https://jdgames.nl/news
Author: JDGames
Description: Precise news theme matching the JDGames homepage header/footer and card styles.
Version: 1.0.1
License: GNU General Public License v2 or later
Text Domain: jdgames-news
*/


* {margin:0; padding:0; box-sizing:border-box;}
body {background:#0b0d10; color:#fff; font-family:'Poppins', sans-serif; overflow-x:hidden;}
header { position: fixed; top:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 80px; z-index:1000; transition: background 0.3s, box-shadow 0.3s, padding 0.3s; }
header.transparent {background:transparent; box-shadow:none;}
header.scrolled {background: rgba(10,12,15,0.95); box-shadow:0 3px 15px rgba(0,0,0,0.5);}
header .logo {display:flex; align-items:center; font-weight:900; font-size:2em; color:#fff; font-family:'Orbitron', sans-serif;}
header .logo img {height:50px; margin-right:10px;}
header nav {display:flex; align-items:center;}
header nav a {color:#fff; margin:0 20px; text-decoration:none; font-weight:600; font-size:1.05em; padding-bottom:3px; transition: all 0.3s;}
header nav a:hover {color:#00b4ff; border-bottom:2px solid #00b4ff;}
.menu-toggle { display:none; background:none; border:none; font-size:1.8rem; color:#fff; cursor:pointer; }
@media (max-width:900px){ header { padding:12px 18px; } header .logo img { height:38px; } header .logo { font-size:1.5em; } .menu-toggle { display:block; } header nav { position:fixed; top:70px; right:0; width:70%; max-width:320px; background:rgba(10,12,15,0.98); flex-direction:column; align-items:flex-start; padding:15px 20px 20px 20px; gap:8px; transform:translateX(100%); transition:transform 0.3s ease; box-shadow:-4px 0 18px rgba(0,0,0,0.55); } header nav a { margin:4px 0; font-size:1rem; } header nav.open { transform:translateX(0); } }
.hero {display:flex; align-items:center; min-height:100vh; padding:0 100px; position:relative; overflow:hidden;}
.hero::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('/images/home/banner-bg.jpg'); background-size:cover; background-position:center; opacity:0.25; z-index:1;}
.hero::after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(10,10,15,0.6); z-index:2;}
.hero-left {max-width:70%; margin-top:15%; position:relative; z-index:3;}
.typing-text {font-family:'Orbitron', sans-serif; font-size:6em; font-weight:900; color:#fff; white-space: nowrap; overflow:hidden; border-right:3px solid #00b4ff; width:0; animation: typing 1.2s steps(10,end) forwards, blink 0.7s step-end infinite; margin-bottom:20px;}
@keyframes typing {from {width:0;} to {width:8ch;}} @keyframes blink {0%,100% {border-color:transparent;} 50% {border-color:#00b4ff;}}
.hero-left h2 {font-size:2.5em; font-weight:600; color:#fff;}
.section-title {text-align:center; font-size:2.5em; color:#00b4ff; margin-bottom:50px; font-weight:700;}
.discord {padding:90px 100px; background-color:#11141a; text-align:center; border-radius:15px;}
.discord p {font-size:1.2em; color:#ccc; margin-bottom:35px; max-width:800px; margin-left:auto; margin-right:auto; line-height:1.6;}
.discord .discord-wrapper {display:flex; justify-content:center; flex-wrap:wrap; gap:50px; margin-top:40px;}
.discord a.join-btn {display:inline-block; padding:15px 35px; background:#7289da; color:#fff; font-weight:600; border-radius:10px; font-size:1.15em; text-decoration:none; transition: transform 0.3s, background 0.3s;}
.discord a.join-btn:hover {background:#5b6eae; transform:scale(1.05);}
.socials {padding:90px 100px; background-color:#0f1116;}
.socials .section-inner {max-width:1200px; margin:0 auto;}
.latest-news .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin-top: 30px; align-items: stretch; }
.latest-news .news-card { background: linear-gradient(180deg, rgba(17,20,26,0.9), rgba(13,15,18,0.95)); border: 1px solid rgba(255,255,255,0.03); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 180ms ease; }
.latest-news .news-card:hover { transform: translateY(-4px); }
.news-thumb { width: 100%; height: 240px; background-size: cover; background-position: center; flex-shrink: 0; }
.news-body { padding: 18px 18px 22px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-meta { display:flex; gap:10px; align-items:center; font-size:0.9em; color: #9fb8cf; font-weight:600; letter-spacing:0.2px; }
.news-meta .date { color: #9fb8cf; }
.news-body h3 { margin: 6px 0 0 0; font-size: 1.25em; color: #00b4ff; line-height:1.15; font-weight:700; }
.news-body p.excerpt { margin: 6px 0 0 0; color: #d0d6dd; font-size: 0.98em; line-height:1.6; flex: 1; }
.news-cta { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:10px; background: linear-gradient(180deg, #00b4ff, #008fcc); color:#fff; text-decoration:none; font-weight:700; font-size:0.95em; border: 0; margin-top: 8px; width: fit-content; transition: transform 140ms ease, opacity 140ms ease; }
.news-cta:hover { transform: translateY(-3px); opacity: 0.98; }
@media (max-width:900px){ .news-thumb { height:180px; } .news-body { padding:14px; } } @media (max-width:520px){ .news-thumb { height:150px; } .news-body h3 { font-size:1.05em; } }