/* ===============================
   NAIJAWORLDCUP.COM — MAIN CSS
   Optimized Final Version
================================= */

:root{
--primary:#0ea5e9;
--accent:#38bdf8;
--dark:#06141f;
--dark-2:#020617;
--light:#FFFFFF;
--gray:#cbd5e1;
--glass:rgba(56,189,248,0.06);
}

/* ================= RESET ================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Outfit',sans-serif;
background:linear-gradient(135deg,var(--dark),var(--dark-2));
color:var(--light);
line-height:1.8;
overflow-x:hidden;
}

/* ================= GLOBAL ================= */

a,
button,
.card,
.match-card,
.explore-card,
.quick-links a,
.nav-live{
transition:all .2s ease;
}

a{
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

main{
max-width:1200px;
margin:110px auto 0;
padding:30px;
}

.section{
margin-bottom:70px;
}

.section h2{
font-size:2rem;
margin-bottom:22px;
line-height:1.3;
color:var(--accent);
font-weight:800;
letter-spacing:-0.3px;
}

.section h3{
font-size:1.35rem;
margin-top:35px;
margin-bottom:14px;
line-height:1.4;
font-weight:700;
color:var(--light);
}

.section p{
margin-bottom:18px;
line-height:1.9;
color:var(--gray);
max-width:900px;
}

.section ul{
margin:18px 0 24px 22px;
}

.section li{
margin-bottom:10px;
line-height:1.8;
}

/* ================= HEADER ================= */

.header{
position:fixed;
top:0;
width:100%;
background:rgba(6,20,31,0.95);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(56,189,248,0.15);
z-index:1000;
padding:5px 0;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
}

.logo{
font-size:1.7rem;
font-weight:800;
letter-spacing:1px;
}

.logo-naija{
color:var(--light);
}

.logo-cup{
color:var(--accent);
margin-left:4px;
}

/* ================= NAVIGATION ================= */

.nav-desktop{
display:flex;
gap:22px;
}

.nav-desktop a{
color:var(--light);
font-weight:600;
font-size:0.92rem;
position:relative;
}

.nav-desktop a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--accent);
transition:.2s ease;
}

a{
color:var(--light);
text-decoration:none;
}

a:hover{
color:#7dd3fc;
}

.nav-desktop a:hover::after{
width:100%;
}

.nav-live{
background:var(--accent);
color:black !important;
padding:6px 12px;
border-radius:8px;
font-weight:700;
}

.nav-live:hover{
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(56,189,248,0.3);
}

/* ================= MOBILE MENU ================= */

.menu-btn{
display:none;
background:none;
border:none;
color:white;
font-size:1.8rem;
cursor:pointer;
}

.mobile-menu{
display:none;
flex-direction:column;
background:var(--dark-2);
padding:20px;
gap:12px;
}

.mobile-menu a{
color:white;
padding:8px 0;
}

.mobile-menu.active{
display:flex;
}

/* ================= HERO ================= */

.hero{
text-align:center;
padding:80px 30px;
background:linear-gradient(
145deg,
rgba(56,189,248,0.08),
rgba(14,165,233,0.12)
);
border-radius:25px;
margin-bottom:60px;
box-shadow:0 0 50px rgba(56,189,248,0.08);
}

.hero h1{
font-size:2.8rem;
margin-bottom:20px;
line-height:1.2;
}

.hero span{
color:var(--accent);
}

.hero p{
max-width:760px;
margin:0 auto 20px;
color:var(--gray);
}

/* ================= QUICK LINKS ================= */

.quick-links{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:40px;
}

.quick-links a{
display:block;
padding:18px;
text-align:center;
background:var(--glass);
border-radius:14px;
color:var(--light);
font-weight:600;
border:1px solid rgba(56,189,248,0.12);
}

.quick-links a:hover{
background:rgba(56,189,248,0.12);
border-color:var(--accent);
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(56,189,248,0.12);
color:var(--accent);
}

/* ================= GRID ================= */

.grid,
.explore-grid,
.teams-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

/* ================= CARDS ================= */

.card,
.explore-card,
.team-card,
.match-card{
background:var(--glass);
border-radius:18px;
border:1px solid rgba(56,189,248,0.1);
backdrop-filter:blur(10px);
will-change:transform;
}

.card,
.explore-card,
.team-card{
padding:28px;
}

.card:hover,
.explore-card:hover,
.team-card:hover,
.match-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(56,189,248,0.12);
border-color:var(--accent);
}

/* ================= EXPLORE ================= */

.explore-sub{
color:var(--gray);
max-width:650px;
margin-bottom:30px;
}

.explore-card{
position:relative;
color:var(--light);
}

.explore-card h3{
margin-bottom:10px;
color:var(--accent);
}

.explore-card.highlight{
border:2px solid var(--accent);
background:linear-gradient(
145deg,
rgba(56,189,248,0.15),
rgba(14,165,233,0.18)
);
}

.tag{
position:absolute;
top:12px;
right:12px;
background:#ff2e63;
color:white;
font-size:0.65rem;
padding:4px 8px;
border-radius:6px;
font-weight:bold;
}

/* ================= MATCH CARD ================= */

.match-card{
display:block;
padding:18px;
color:var(--light);
}

.card-left{
display:flex;
align-items:center;
gap:15px;
}

.card-left img{
width:60px;
height:60px;
border-radius:12px;
}

.card-content{
display:flex;
flex-direction:column;
justify-content:center;
}

.card-title{
font-weight:700;
font-size:1.05rem;
margin-bottom:4px;
}

.card-subtitle{
font-size:0.88rem;
color:var(--gray);
}

/* ================= COUNTDOWN ================= */

.countdown{
font-size:0.85rem;
color:var(--accent);
margin-top:5px;
font-weight:600;
}

/* ================= BADGES ================= */

.event-badge{
font-size:0.7rem;
padding:5px 10px;
border-radius:8px;
font-weight:700;
margin-bottom:6px;
display:inline-block;
letter-spacing:0.5px;
}

.badge-live{
background:#ff2e63;
color:white;
}

.badge-upcoming{
background:var(--primary);
color:white;
}

.badge-finished{
background:#444;
color:white;
}

/* ================= BUTTON ================= */

.btn-primary{
display:inline-block;
background:var(--accent);
color:white;
padding:12px 22px;
border-radius:10px;
font-weight:700;
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(56,189,248,0.3);
}

/* ================= FOOTER ================= */

footer{
padding:70px 20px;
border-top:1px solid rgba(56,189,248,0.15);
margin-top:80px;
}

.footer-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:35px;
}

.footer-grid h3{
margin-bottom:15px;
color:var(--accent);
}

.footer-grid p,
.footer-grid a{
color:var(--gray);
font-size:0.95rem;
display:block;
margin-bottom:10px;
}

.footer-grid a:hover{
color:var(--accent);
}

/* ================= ACCESSIBILITY ================= */

a:focus,
button:focus{
outline:2px solid var(--accent);
outline-offset:3px;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

main{
padding:20px;
}

.hero{
padding:60px 20px;
}

.hero h1{
font-size:2rem;
}

.section h2{
font-size:1.7rem;
}

.section h3{
font-size:1.2rem;
margin-top:28px;
}

.nav-desktop{
display:none;
}

.menu-btn{
display:block;
}

.card-left img{
width:50px;
height:50px;
}

.card,
.explore-card,
.team-card,
.match-card{
backdrop-filter:none;
}

.quick-links{
grid-template-columns:1fr;
}

}