/* Minimal Material-like stylesheet */
:root {
	--surface: #ffffff;
	--muted: #f1f3f4;
	--primary: #6200ee;
	--on-primary: #ffffff;
	--text: #202124;
	--subtle: #5f6368;
	--shadow: 0 1px 3px rgba(60,64,67,0.15), 0 1px 2px rgba(60,64,67,0.12);
	--container-padding: 1rem;
	--radius: 8px;
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	background: var(--muted);
	color: var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.45;
}

.container{ max-width:1000px; margin:0 auto; padding:0 var(--container-padding); }

/* Skip link */
.skip-link{
	position:absolute; left:0; top:0; transform:translateY(-120%);
	background:var(--primary); color:var(--on-primary); padding:.5rem 1rem; z-index:100;
}
.skip-link:focus{ transform:translateY(0); }

header{ background: linear-gradient(180deg, var(--surface), var(--surface)); box-shadow: var(--shadow); }
header .container{ display:flex; align-items:center; justify-content:space-between; padding:1rem var(--container-padding); }
header h1{ font-size:1.125rem; margin:0; font-weight:600; color:var(--text); }
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
nav a{ text-decoration:none; color:var(--subtle); padding:.5rem .75rem; border-radius:6px; transition: all 0.2s; }
nav a:hover, nav a:focus{ color:var(--text); background:rgba(0,0,0,0.04); }
nav a.active{ color:var(--primary); background:rgba(98,0,238,0.08); font-weight:600; }

/* Hero */
#hero{ padding:3.25rem 0; }
#hero h2{ margin:.25rem 0 0.5rem; font-size:2rem; }
#hero p{ margin:0; color:var(--subtle); max-width:60ch; }

/* Sections */
main section{ margin-bottom:1.5rem; }

.card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; }

footer{ padding:1rem 0; color:var(--subtle); font-size:.9rem; }

/* Buttons */
.btn{
	display:inline-block; background:var(--primary); color:var(--on-primary); padding:.5rem .75rem; border-radius:6px;
	text-decoration:none; font-weight:600; box-shadow: 0 2px 6px rgba(98,0,238,0.12);
}
.btn:focus{ outline:2px solid rgba(98,0,238,0.18); outline-offset:2px; }

/* Responsive */
@media (max-width:640px){
	header .container{ flex-direction:column; align-items:flex-start; gap:.5rem; }
	#hero h2{ font-size:1.5rem; }
}

/* accessibility helpers */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }

/* Grid helper */
.grid{ display:grid; gap:1rem; }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* Tab system */
.tab-content{ display:none; }
.tab-content.active{ display:block; }

/* Challenge list styling */
.challenge-list{ display:flex; flex-direction:column; gap:1rem; }
.challenge-item{
	display:flex;
	align-items:center;
	gap:1.5rem;
	text-decoration:none;
	color:var(--text);
	transition:all 0.2s;
	cursor:pointer;
	padding:1.5rem;
}
.challenge-item:hover{
	box-shadow: 0 4px 12px rgba(60,64,67,0.2);
	transform:translateY(-2px);
}
.challenge-number{
	font-size:2rem;
	font-weight:700;
	color:var(--primary);
	min-width:60px;
	text-align:center;
}
.challenge-content{ flex:1; }
.challenge-content h3{ margin:0 0 0.5rem; font-size:1.25rem; }
.challenge-content p{ margin:0 0 0.5rem; color:var(--subtle); line-height:1.5; }
.challenge-date{ font-size:0.875rem; color:var(--subtle); font-style:italic; }
.challenge-arrow{
	font-size:1.5rem;
	color:var(--primary);
	transition:transform 0.2s;
}
.challenge-item:hover .challenge-arrow{ transform:translateX(4px); }

/* Challenge 1 styling */
.sources ol li{ margin-bottom:1rem; }
.sources a{ color:var(--primary); text-decoration:none; }
.sources a:hover{ text-decoration:underline; }