:root{
  --pitch:#0a5c36; --pitch-deep:#063d24; --chalk:#f4f7f2; --ink:#10231a;
  --gold:#e9b949; --gold-deep:#c9971f; --line:#1d6b45; --flag-red:#d6273a;
  --card:#ffffff; --muted:#5a6b62; --hover:#eef6f0;
  --teal: #4e98a9; --deep-teal: #1A5C6B; --saffron: #E87722; --saffron-light: #ff9e55;
  --cream: #FFF8EE;
  --parchment: #F5EDD8;
  --parchment-mid: #938869;
  --parchment-deep:#665e47;
  --parchment-light: #fffdf6;
  --shadow: rgba(30,20,5,0.10);
  --shadow-hover: rgba(30,20,5,0.20);
  --radius-card: 18px;
  --radius-pill: 40px;  
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--chalk);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
img {max-width:100%; height:auto}
.image-wrap {
	background:var(--parchment);
	border:1px solid var(--parchment-mid);
	padding:10px;
	}
.center-block {
	float:none;
	display:block;
	margin-left:auto;
	margin-right:auto;
	}

/* ═══════════════════════════════════════════════
       TOP NAV
    ═══════════════════════════════════════════════ */
.site-nav {
	background: var(--deep-teal);
	padding: 0 clamp(16px, 4vw, 60px);
	top: 0;
	z-index: 100;
	box-shadow: 0 3px 18px rgba(0,0,0,0.18);
}
.nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
}
.site-nav ul{
	list-style: none;
	padding-left:0;
	margin:0;
}
/* Logo */
.logo{
    display: inline-block;
    padding-top: 10px;
}
.logo img {
	max-width:220px;
	height:auto
}
/* Nav menu */
.nav{
    position: fixed;
	left: 10px;
    right: 10px;
    background-color: var(--parchment-deep);
    overflow: hidden;
    z-index: 4;
}
.menu a{
    display: block;
    padding: 12px 25px;
    border-bottom: 1px solid var(--parchment-mid);
    color: #fff;
	text-decoration:none
}
.menu li:last-child a {border:none}
.menu a:hover{
    background-color: var(--teal);
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}
/* Menu Icon */
.hamb{
    cursor: pointer;
    float: right;
    padding: 28px 20px;
}/* Style label tag */

.hamb-line {
    background: var(--cream);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background:var(--cream);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height:fit-content;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

body:has(.side-menu:checked) {
  overflow: hidden;
}
@media (max-width: 767px) {
	.nav{
		box-shadow: var(--shadow);
	}
}
@media (max-width: 992px) {
	.logo img {
			max-width:200px;
		}
}
/* Responsiveness */
@media (min-width: 768px) {	
    .nav{
        max-height: none;
		margin-top: 12px;
        margin-right: 15px;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
    }
    .menu li{
        float: left;
    }
	.menu a{
        background-color: transparent;
		border:none;
		padding: 5px 25px;
		margin:0 2px;
		transition: all 0.5s ease 0s;
    }
    .menu a:hover, .menu a.active {
        background: var(--pitch-deep);
		transition: all 0.5s ease 0s;
		border-radius:var(--radius-pill)
    }

    .hamb{
        display: none;
    }
}
@media (min-width:768px) and (max-width: 992px) {
	.menu a{
		font-size:0.8rem;
		padding: 10px 15px;
    }
}

/* Hero */
.hero{
  background:
    repeating-linear-gradient(90deg, var(--pitch) 0 56px, var(--line) 56px 58px),
    linear-gradient(160deg,var(--pitch-deep),var(--pitch));
  color:#fff; padding:48px 0 40px; position:relative;
  border-bottom:5px solid var(--gold);
}
.hero::after{
  content: ""; 
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;  
  height: 300px; 
  background-image: url('../images/football-2026.png');
  background-size: cover;
  background-repeat: no-repeat;
  opacity:0.3
}
@media (max-width:767px) {
	.hero::after{
	  width: 200px;  
	  height: 200px; 
	  top:0;
	  opacity:0.2
	}
}
.hero .wrap{position:relative;z-index:2}
.eyebrow{
  font-family:"Oswald","Arial Narrow",sans-serif; letter-spacing:.22em; text-transform:uppercase;
  font-size:.8rem; color:var(--gold); margin:0 0 10px; font-weight:600;
}
h1{
  font-family:"Oswald","Arial Narrow",sans-serif; font-weight:700; line-height:1.02;
  font-size:clamp(2rem,6vw,3.6rem); margin:0 0 14px; text-transform:uppercase; letter-spacing:.01em;
}
h1 b{color:var(--gold)}
h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.5rem;
    color: var(--pitch-deep);
    border-left: 5px solid var(--gold);
    padding-left: 12px;
}
.lede{max-width:680px;font-size:1.06rem;color:#e6f1ea;margin:0}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  padding:7px 13px;border-radius:999px;font-size:.82rem;font-weight:500;
}
.chip b{color:var(--gold)}

/* Filter card */
.filter{
  background:var(--card); border:1px solid #dfe7e1; border-radius:16px;
  box-shadow:0 18px 40px -28px rgba(6,61,36,.55);
  padding:26px 24px; margin:-34px auto 36px; position:relative; z-index:3;
}
.filter h2{
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.25rem;margin:0 0 4px;color:var(--pitch-deep);
}
.filter p.sub{margin:0 0 16px;color:var(--muted);font-size:.95rem}
.selrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
label.lbl{font-weight:600;font-size:.9rem}
select#country{
  font:inherit;font-size:1rem;padding:11px 14px;border-radius:10px;
  border:2px solid var(--pitch);background:#fff;color:var(--ink);min-width:240px;cursor:pointer;
}
select#country:focus{outline:3px solid var(--gold);outline-offset:1px}
button.clear{
  font:inherit;font-weight:600;padding:11px 18px;border-radius:10px;border:none;
  background:var(--flag-red);color:#fff;cursor:pointer;
}
button.clear:hover{background:#b51e2f}
button.clear:focus{outline:3px solid var(--gold);outline-offset:2px}

#result{margin-top:20px}
#result .head{
  display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--pitch);
  padding-bottom:10px;margin-bottom:6px;
}
#result .head .fl{font-size:1.9rem;line-height:1}
#result .head h3{font-family:"Oswald",sans-serif;margin:0;font-size:1.4rem;text-transform:uppercase}
.fxt{
  display:grid;grid-template-columns:64px 1fr;gap:0 16px;
  padding:14px 4px;border-bottom:1px solid #e9efec;align-items:start;
}
.fxt .mno{
  font-family:"Oswald",sans-serif;font-size:1.5rem;color:var(--gold-deep);font-weight:700;text-align:center;
}
.fxt .mno small{display:block;font-size:.62rem;color:var(--muted);letter-spacing:.1em;font-weight:400}
.fxt .opp{font-weight:700;font-size:1.08rem}
.fxt .opp .ha{
  font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  background:var(--hover);color:var(--pitch);padding:2px 7px;border-radius:5px;margin-left:8px;vertical-align:middle;
}
.fxt .det{color:var(--muted);font-size:.9rem;margin-top:3px}
.fxt .det b{color:var(--ink)}
.empty{color:var(--muted);font-style:italic;padding:10px 0}

/* Prose */
section.prose{margin:40px 0}
section.prose h2{
  font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.5rem;color:var(--pitch-deep);border-left:5px solid var(--gold);padding-left:12px;margin:0 0 14px;
}
section.prose p{margin:0 0 14px;}

/* Schedule table */
.tablewrap{overflow-x:auto;border:1px solid #dfe7e1;border-radius:14px;background:#fff}
table.sched{border-collapse:collapse;width:100%;min-width:720px;font-size:.92rem}
table.sched th{
  background:var(--pitch-deep);color:#fff;font-family:"Oswald",sans-serif;
  text-transform:uppercase;letter-spacing:.05em;font-weight:500;font-size:.82rem;
  padding:12px 10px;text-align:left;position:sticky;top:0;
}
table.sched td{padding:10px;border-bottom:1px solid #eef2ef;vertical-align:middle}
table.sched tr:hover td{background:var(--hover)}
td.num{font-family:"Oswald",sans-serif;color:var(--gold-deep);font-weight:700;width:42px}
td.dt{white-space:nowrap;color:var(--muted)}
td.time{white-space:nowrap;font-variant-numeric:tabular-nums}
td.match .tm{font-weight:600}
td.match .tm.plc{font-weight:400;color:var(--muted);font-style:italic}
.vs{color:var(--flag-red);font-weight:700;margin:0 8px;font-size:.85rem}
.gbadge{
  display:inline-block;background:var(--pitch);color:#fff;font-weight:700;
  width:24px;height:24px;line-height:24px;text-align:center;border-radius:6px;font-size:.8rem;
}
td.ven{color:var(--muted);font-size:.86rem}
tr.rndhdr td{
  background:var(--gold);color:var(--pitch-deep);font-family:"Oswald",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.85rem;padding:9px 10px;
}

/* Groups */
.groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.gcard{background:#fff;border:1px solid #dfe7e1;border-radius:12px;padding:14px 16px}
.gcard h3{font-family:"Oswald",sans-serif;margin:0 0 8px;color:var(--pitch-deep);text-transform:uppercase;font-size:1.05rem;border-bottom:2px solid var(--gold);padding-bottom:6px}
.gcard ol{margin:0;padding-left:18px}
.gcard li{padding:3px 0;font-size:.94rem}
.gcard li.plc{color:var(--muted);font-style:italic}

/* FEATURED (QUIZ) **/
.featured-section{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:30px;border-radius:18px;margin:26px 0;text-align:center}
.featured-section h2{margin-top:0;border: none;padding: 0;}
.featured-section p {max-width:780px; text-align:center;margin-left: auto; margin-right: auto;}
.cta-button{display:inline-block;padding:14px 36px;background:linear-gradient(135deg,var(--pitch) 0%,#26d0ce 100%);color:#fff;text-decoration:none;border-radius:50px;font-weight:700;margin-top:14px;transition:transform .25s,box-shadow .25s}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(10,92,54,.3)}
.cta-button:focus{outline:3px solid var(--gold);outline-offset:3px}

/* QUIZ */
.quiz-container{background:linear-gradient(135deg,#0a5c36 0%,#26d0ce 100%);border-radius:20px;padding:28px;margin:30px 0;box-shadow:0 10px 30px rgba(0,0,0,.3);color:#fff;position:relative;overflow:hidden}
#quizTitle{margin:0 0 22px;text-align:center;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);background:linear-gradient(45deg,var(--gold),var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:10px;border-bottom:3px solid rgba(255,215,0,.3)}
.question-counter{text-align:center;margin:0 auto 20px;opacity:.95;background:rgba(0,0,0,.2);padding:8px 16px;border-radius:50px;display:block;width:fit-content;font-weight:600}
#question-text{font-weight:600;margin-bottom:26px;line-height:1.4;text-align:center;padding:16px;background:rgba(0,0,0,.15);border-radius:15px;border-left:5px solid var(--gold);color:#fff;font-size:1.2rem}
.answer-options{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:26px}
@media(min-width:768px){.answer-options{grid-template-columns:repeat(2,1fr)}}
.answer-option{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:14px}
.answer-option:hover{background:rgba(255,255,255,.2);border-color:var(--gold);transform:translateY(-3px)}
.answer-option.selected{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);border-color:var(--gold-deep);color:#000}
.option-letter{background:rgba(0,0,0,.3);color:var(--gold);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;flex-shrink:0;transition:all .25s}
.answer-option.selected .option-letter{background:#000;color:var(--gold)}
.option-text{flex:1;font-weight:500}
.quiz-controls{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.quiz-btn{padding:14px 26px;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .25s;flex:1;min-width:150px;text-transform:uppercase;letter-spacing:.06em}
#submitBtn,#nextBtn{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:#000}
#submitBtn:hover,#nextBtn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,165,0,.4)}
#submitBtn:disabled{opacity:.55;cursor:not-allowed;transform:none}
#restartBtn,#reviewBtn,#restartResultsBtn{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.3)}
.quiz-btn:focus{outline:3px solid #fff;outline-offset:2px}
.score-display{text-align:center;font-size:3.6rem;font-weight:bold;color:var(--gold);margin:26px 0;text-shadow:3px 3px 0 rgba(0,0,0,.3)}
.score-message{text-align:center;font-size:1.3rem;margin-bottom:26px;padding:20px;background:rgba(0,0,0,.2);border-radius:15px;border-left:5px solid}
.score-message.excellent{border-color:#4CAF50} .score-message.good{border-color:#2196F3}
.score-message.average{border-color:#FF9800} .score-message.poor{border-color:#F44336}
.results-summary{background:rgba(0,0,0,.15);padding:22px;border-radius:15px;margin:26px 0}
.result-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);gap:12px}
.result-item:last-child{border-bottom:none}
.result-question{flex:1}
.result-status{padding:5px 14px;border-radius:20px;font-weight:600;white-space:nowrap}
.result-status.correct{background:rgba(76,175,80,.3);color:#4CAF50}
.result-status.incorrect{background:rgba(244,67,54,.3);color:#F44336}
.football-icon{position:absolute;opacity:.1;pointer-events:none}

.questions-wrap, .box-wrap {
    background: #fff;
    border: 1px solid #dfe7e1;
    border-radius: 14px;
    padding: 20px 24px;
    margin: 26px 0;
}
.questions-wrap h3, .questions-wrap h2 {
	margin-top:0
	}
.related{background:var(--pitch-deep);color:#cfe0d6;border-radius:16px;padding:24px;margin:30px 0}
.related h2{color:var(--gold);margin-top:0}
.related a{color:#fff;font-weight:600}

/* FAQ */
#faq{margin:44px 0}
details.fa{border:1px solid #dfe7e1;border-radius:10px;background:#fff;margin-bottom:10px;padding:0 16px}
details.fa summary{
  cursor:pointer;font-weight:600;padding:14px 0;list-style:none;font-size:1.02rem;color:var(--pitch-deep);
}
details.fa summary::-webkit-details-marker{display:none}
details.fa summary::after{content:"+";float:right;color:var(--gold-deep);font-weight:700;font-size:1.3rem}
details.fa[open] summary::after{content:"–"}
details.fa p{margin:0 0 16px;color:var(--muted)}

.note-card { background:var(--parchment); padding:20px; border-left:4px solid var(--line);margin:20px 0;color:var(--parchment-deep)}
.note-card p:last-child {margin-bottom:0;margin-top:0}

/***** HOME ***/
.panel-box {
	background:var(--parchment);
	padding:20px;
	box-shadow: 0px 0px 7px 5px rgba(0, 0, 0, .1);
	margin:30px 10px;
	border-radius:var(--radius-card);
	transition: all 0.5s ease 0s;
}
.panel-box:hover {
	background:#fff;
	box-shadow:var(--shadow-hover);
	border:none;
	box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, .1);
	transition: all 0.5s ease 0s;
}
.panel-nav {
    display: flex;
    align-items: center;
    gap: 20px;
	text-decoration:none;
    transition: all 0.5s ease 0s;
	}
.panel-nav img {
	max-width:200px;
	}

.panel-box h3 {
	font-size:1.6rem;
	font-weight:bold;
	color:var(--pitch-deep);
	display:block;
	margin-top:0;
	margin-bottom:10px;
	}
.panel-box p {font-size:1.1rem; color:var(--ink); margin-bottom:0}
@media (max-width:767px) {
	.panel-nav {
		display: unset;
		}
	.panel-nav img {
		max-width:100%;
		}
}
footer{background:var(--pitch-deep);color:#cfe0d6;padding:28px 0;margin-top:40px;font-size:.85rem;text-align:center}
footer a{color:var(--gold)}
footer .bann-wrap {margin:15px 0; background: rgba(255, 255, 255, .95);border-radius:var(--radius-card); padding:10px;}
footer .bann-wrap p {font-size:1.5rem; color:var(--pitch-deep);margin-bottom:0}
.footNav, .inpageNav {
	clear:both;
	overflow:hidden;
	padding:10px;
	display:table;
	margin:0 auto;
	text-align:center
}
.footNav ul, .inpageNav ul {
	padding-left:0
}
.footNav li, .footNav ul, .inpageNav li, .inpageNav ul {
	display:inline-block;
	list-style:none
}
.inpageNav li {
	background:#206050;
	border:2px solid #206050;
	margin:4px;
	color:#fff;
	transition:all .5s ease 0s
}
.inpageNav li:hover {
	background:#fff;
	color:#206050
}
.inpageNav li a, .inpageNav li a:link {
	color:#fff;
	display:block;
	padding:4px 15px;
	text-decoration:none
}
.inpageNav li a:hover, .inpageNav li:hover a {
	color:var(--gold);
	text-decoration:none
}

.footNav li {
	margin:4px;
}
.footNav li a, .footNav li a:link {text-decoration:none;display:block;background:var(--parchment);border:1px solid var(--parchment-mid); color:var(--pitch-deep);padding:4px 12px;transition: all 0.5s ease 0s;}
.footNav li a:hover {
	background-color:var(--gold);
	border:1px solid var(--gold-deep);
	transition: all 0.5s ease 0s;
}

@media (max-width:560px){
  .fxt{grid-template-columns:50px 1fr}
  .filter{padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}