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

:root {
	--orange: #E87722;
	--blue: #1A4B8C;
	--red: #C0392B;
	--gray: #6B6B6B;
	--light: #F5F5F5;
	--white: #FFFFFF;
	--dark: #1A1A2E;
	--border: #E0E0E0;
	--shadow: 0 4px 24px rgba(0,0,0,0.08);
}

body {
	font-family: 'Barlow', sans-serif;
	background: #F8F8F8;
	color: var(--dark);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ─── HEADER ─────────────────────────────────────────── */
.site-header {
	background: var(--white);
	border-bottom: 3px solid var(--orange);
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100px;
}
.site-logo img {
    height: 100px;
    width: auto;
}

/* ─── NAV ─────────────────────────────────────────────── */
.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--dark);
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 4px;
	transition: all 0.2s;
	display: block;
	white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
	color: var(--orange);
	background: rgba(232,119,34,0.08);
}
.nav-link.klas-link { color: var(--blue); }
.nav-link.klas-link:hover { color: var(--white); background: var(--blue); }

.dropdown { position: relative; }
.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--white);
	border-top: 3px solid var(--orange);
	box-shadow: 0 8px 32px rgba(0,0,0,0.12);
	min-width: 200px;
	border-radius: 0 0 8px 8px;
	overflow: hidden;
	z-index: 999;
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a {
	display: block;
	padding: 11px 20px;
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--dark);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: all 0.15s;
}
.dropdown-menu a:last-child { border-bottom: none; }
.dropdown-menu a:hover { background: var(--light); color: var(--orange); padding-left: 26px; }
.dropdown-arrow { font-size: 10px; margin-left: 3px; }

/* ─── HERO STRIP ──────────────────────────────────────── */
.page-hero {
	background: linear-gradient(135deg, var(--blue) 0%, #0d2d5e 100%);
	color: var(--white);
	padding: 48px 24px;
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: '';
	position: absolute;
	right: -60px; top: -60px;
	width: 300px; height: 300px;
	background: rgba(232,119,34,0.15);
	border-radius: 50%;
}
.page-hero::after {
	content: '';
	position: absolute;
	right: 60px; bottom: -80px;
	width: 200px; height: 200px;
	background: rgba(255,255,255,0.04);
	border-radius: 50%;
}
.page-hero-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero h1 {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 42px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
}
.page-hero p { margin-top: 8px; opacity: 0.8; font-size: 16px; }

/* ─── MAIN CONTENT ────────────────────────────────────── */
.site-main {
	max-width: 1280px; 
	margin: 0 auto; 
	padding: 40px 0px 40px;
	width: 100%;
}

/* ─── FOOTER ──────────────────────────────────────────── */
.site-footer {
	background: var(--dark);
	color: rgba(255,255,255,0.7);
	padding: 5px 24px 24px;
	margin-top: auto;
}
.footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	padding: 25px 0px 25px 0px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo img { height: 60px; }
.footer-col h4 {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--orange);
	margin-bottom: 12px;
}
.footer-col a { display: block; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; margin-bottom: 6px; transition: color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 20px; font-size: 13px; display: flex; justify-content: space-between; }

/* ─── CARD ────────────────────────────────────────────── */
.card {
	background: var(--white);
	border-radius: 10px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.card-header {
	background: var(--blue);
	color: var(--white);
	padding: 16px 24px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.card-header.orange { background: var(--orange); }
.card-body { padding: 24px; }

/* ─── STANDINGS TABLE ─────────────────────────────────── */
.standings-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.standings-table th {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--gray);
	padding: 10px 12px;
	text-align: center;
	border-bottom: 2px solid var(--border);
}
.standings-table th:first-child, .standings-table th:nth-child(2) { text-align: left; }
.standings-table td {
	padding: 12px 12px;
	text-align: center;
	border-bottom: 1px solid var(--border);
	transition: background 0.15s;
}
.standings-table td:first-child, .standings-table td:nth-child(2) { text-align: left; }
.standings-table tr:hover td { background: rgba(26,75,140,0.04); }
.standings-table tr:last-child td { border-bottom: none; }
.rank-badge {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
}
.rank-1 { background: #FFD700; color: #000; }
.rank-2 { background: #C0C0C0; color: #000; }
.rank-3 { background: #CD7F32; color: #fff; }
.rank-other { background: var(--light); color: var(--gray); }
.team-name { font-weight: 600; }
.pts { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; color: var(--blue); }
.gd-pos { color: #27ae60; font-weight: 600; }
.gd-neg { color: var(--red); font-weight: 600; }

/* ─── FIXTURE LIST ────────────────────────────────────── */
.fixture-day { margin-bottom: 32px; }
.fixture-day-header {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--blue);
	padding: 8px 0;
	border-bottom: 2px solid var(--blue);
	margin-bottom: 12px;
}
.fixture-item {
	display: grid;
	grid-template-columns: 70px 1fr auto 1fr 80px;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--white);
	border-radius: 8px;
	margin-bottom: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	border-left: 3px solid transparent;
	transition: all 0.2s;
}
.fixture-item:hover { border-left-color: var(--orange); transform: translateX(2px); }
.fixture-time { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; color: var(--gray); }
.fixture-home { text-align: right; font-weight: 600; font-size: 15px; }
.fixture-score {
	text-align: center;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: var(--dark);
	background: var(--light);
	padding: 4px 12px;
	border-radius: 6px;
	min-width: 60px;
}
.fixture-score.no-score { color: var(--gray); font-size: 16px; font-weight: 400; }
.fixture-away { font-weight: 600; font-size: 15px; }
.fixture-venue { font-size: 12px; color: var(--gray); text-align: right; }

/* ─── CALENDAR TABS ───────────────────────────────────── */
.view-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.view-tab {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 9px 20px;
	border-radius: 6px;
	border: 2px solid var(--border);
	background: var(--white);
	color: var(--gray);
	cursor: pointer;
	transition: all 0.2s;
}
.view-tab.active, .view-tab:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ─── STAT CARDS ──────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.stat-card {
	background: var(--white);
	border-radius: 12px;
	padding: 28px 24px;
	box-shadow: var(--shadow);
	border-top: 4px solid var(--orange);
	text-align: center;
	transition: transform 0.2s;
}
.stat-card:nth-child(2) { border-top-color: var(--blue); }
.stat-card:nth-child(3) { border-top-color: var(--red); }
.stat-card:hover { transform: translateY(-3px); }
.stat-number {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 900;
	font-size: 54px;
	line-height: 1;
	color: var(--dark);
}
.stat-label { font-size: 14px; color: var(--gray); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.stat-icon { font-size: 28px; margin-bottom: 8px; }

/* ─── HOF TABLE ───────────────────────────────────────── */
.hof-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hof-table th {
	background: var(--blue);
	color: var(--white);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 14px;
}
.hof-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.hof-table tr:hover td { background: rgba(26,75,140,0.04); }
.hof-table tr:last-child td { border-bottom: none; }
.champion-cell { font-weight: 600; color: var(--blue); }
.season-cell { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; }

/* ─── SPONSOR GRID ────────────────────────────────────── */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.sponsor-card {
	background: var(--white);
	border-radius: 10px;
	padding: 28px 20px;
	text-align: center;
	box-shadow: var(--shadow);
	transition: all 0.2s;
	border: 2px solid transparent;
}
.sponsor-card:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(232,119,34,0.15); }
.sponsor-logo-placeholder {
	width: 120px; height: 60px;
	background: var(--light);
	border-radius: 6px;
	margin: 0 auto 12px;
	display: flex; align-items: center; justify-content: center;
	color: var(--gray);
	font-size: 13px;
}
.sponsor-name { font-weight: 600; font-size: 14px; }
.sponsor-tier {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 4px;
}
.tier-goud { color: #B8860B; }
.tier-zilver { color: var(--gray); }
.tier-brons { color: #8B4513; }

/* ─── DOCUMENT LIST ───────────────────────────────────── */
.doc-list { list-style: none; }
.doc-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--white);
	border-radius: 8px;
	margin-bottom: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: all 0.2s;
	border-left: 3px solid var(--blue);
}
.doc-item:hover { transform: translateX(3px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.doc-icon { font-size: 22px; }
.doc-name { font-weight: 600; flex: 1; }
.doc-download {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--orange);
	text-decoration: none;
}
.doc-download:hover { text-decoration: underline; }

/* ─── INFO PAGE ───────────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.info-text { line-height: 1.7; color: #444; }
.info-text h2 {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 28px;
	color: var(--dark);
	margin-bottom: 12px;
}
.info-text p { margin-bottom: 14px; }
.info-image { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.info-image img { width: 100%; display: block; }
.info-image-placeholder {
	background: linear-gradient(135deg, var(--light), #e0e0e0);
	height: 280px;
	display: flex; align-items: center; justify-content: center;
	color: var(--gray);
	font-size: 14px;
}

/* ─── PERSON CARDS ────────────────────────────────────── */
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.person-card {
	background: var(--white);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s;
}
.person-card:hover { transform: translateY(-4px); }
.person-photo-placeholder {
	height: 160px;
	background: linear-gradient(135deg, var(--blue), #0d2d5e);
	display: flex; align-items: center; justify-content: center;
	font-size: 48px;
	color: rgba(255,255,255,0.3);
}
.person-info { padding: 14px 12px; }
.person-name { font-weight: 700; font-size: 15px; }
.person-role { font-size: 12px; color: var(--gray); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ─── SECTION HEADING ─────────────────────────────────── */
.section-heading {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 900;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--dark);
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--orange);
	display: inline-block;
}

/* ─── MOBILE ──────────────────────────────────────────── */
.hamburger { display: none; font-size: 24px; cursor: pointer; }
@media (max-width: 1024px) {
	.main-nav { display: none; }
	.hamburger { display: block; }
	.stat-grid { grid-template-columns: 1fr 1fr; }
	.footer-inner { grid-template-columns: 1fr; gap: 24px; }
	.info-grid { grid-template-columns: 1fr; }
	.fixture-item { grid-template-columns: 60px 1fr auto 1fr; }
	.fixture-venue { display: none; }
}
@media (max-width: 640px) {
	.stat-grid { grid-template-columns: 1fr; }
	.page-hero h1 { font-size: 28px; }
}

/* ─── BADGE ───────────────────────────────────────────── */
.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.badge-green { background: #e8f5e9; color: #2e7d32; }
.badge-orange { background: #fff3e0; color: #e65100; }
.badge-red { background: #ffebee; color: #c62828; }
.badge-blue { background: #e3f2fd; color: #1565c0; }

/* ─── CUP BRACKET FEEL ────────────────────────────────── */
.beker-phase {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 16px;
	margin-top: 32px;
}
.beker-phase:first-child { margin-top: 0; }

/* ─── HALL ITEM ───────────────────────────────────────── */
.season-badge {
	display: inline-block;
	background: var(--orange);
	color: var(--white);
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 3px 10px;
	border-radius: 4px;
}

/* ─── SELECT ─────────────────────────────────────────── */
.filter-select {
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	padding: 8px 14px;
	border-radius: 6px;
	border: 2px solid var(--border);
	background: var(--white);
	color: var(--dark);
	cursor: pointer;
	outline: none;
}

.filter-select:focus {
	border-color: var(--blue); 
}
/* ─── FOOTER HELP ITEMS ───────────────────────────────── */
.footer-help-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-help-item:last-child { border-bottom: none; }
.footer-help-question {
	font-size: 13px;
	color: rgba(255,255,255,0.65);
}
.footer-help-btn {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(255,255,255,0.75) !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color 0.2s;
	display: inline-block !important;
	margin-bottom: 0 !important;
}
.footer-help-btn:hover { color: var(--orange) !important; }