/* ==========================================
   AZ Deaf NFL Pick'Em
   Design System v2
   ========================================== */

/* ---------- Reset ---------- */

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

/* ---------- Colors ---------- */

:root {

	--bg: #F5F5F7;

	--card: #FFFFFF;

	--primary: #007AFF;

	--primary-hover: #0063CC;

	--text: #1D1D1F;

	--text-light: #6E6E73;

	--border: #D2D2D7;

	--success: #34C759;

	--danger: #FF3B30;

	--warning: #FF9F0A;

	--shadow:
		0 8px 30px rgba(0,0,0,.08);

}

/* ---------- Body ---------- */

body {

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	background: var(--bg);

	color: var(--text);

	line-height: 1.6;

}

/* ---------- Header ---------- */

header{

	background:white;

	padding:24px 40px;

	border-bottom:1px solid var(--border);

}

header h1{

	font-size:2rem;

	font-weight:700;

}

/* ---------- Navigation ---------- */

nav{

	background:rgba(255,255,255,.92);

	backdrop-filter:blur(12px);

	border-bottom:1px solid var(--border);

}

nav ul{

	display:flex;

	list-style:none;

	justify-content:center;

	gap:30px;

	padding:18px;

}

nav a{

	text-decoration:none;

	color:var(--text);

	font-weight:600;

	transition:.25s;

}

nav a:hover{

	color:var(--primary);

}

/* ---------- Layout ---------- */

.container{

	width:min(1200px,92%);

	margin:auto;

	padding:60px 20px;

}

/* ---------- Hero ---------- */

.hero{

	text-align:center;

	padding:80px 30px;

	background:var(--card);

	border-radius:24px;

	box-shadow:var(--shadow);

}

.hero h2{

	font-size:3rem;

	margin-bottom:20px;

}

.hero p{

	font-size:1.25rem;

	color:var(--text-light);

	margin-bottom:40px;

}

/* ---------- Buttons ---------- */

.btn{

	display:inline-block;

	background:var(--primary);

	color:white;

	text-decoration:none;

	border:none;

	border-radius:14px;

	padding:16px 34px;

	font-size:17px;

	font-weight:600;

	cursor:pointer;

	transition:.25s;

}

.btn:hover{

	background:var(--primary-hover);

	transform:translateY(-2px);

}

/* ---------- Cards ---------- */

.card{

	background:white;

	border-radius:20px;

	padding:30px;

	box-shadow:var(--shadow);

}

/* ---------- Forms ---------- */

.form-card{

	max-width:720px;

	margin:auto;

	background:white;

	border-radius:24px;

	padding:40px;

	box-shadow:var(--shadow);

}

.form-card h2{

	text-align:center;

	margin-bottom:12px;

}

.form-card p{

	text-align:center;

	color:var(--text-light);

	margin-bottom:35px;

}

.row{

	display:flex;

	gap:20px;

}

.field{

	display:flex;

	flex-direction:column;

	flex:1;

	margin-bottom:22px;

}

.field label{

	margin-bottom:8px;

	font-weight:600;

}

.field input{

	padding:15px;

	border:1px solid var(--border);

	border-radius:12px;

	font-size:16px;

	transition:.2s;

}

.field input:focus{

	outline:none;

	border-color:var(--primary);

	box-shadow:0 0 0 4px rgba(0,122,255,.15);

}

/* ---------- Footer ---------- */

footer{

	text-align:center;

	padding:30px;

	color:var(--text-light);

	border-top:1px solid var(--border);

	margin-top:70px;

}

/* ---------- Responsive ---------- */

@media (max-width:768px){

	nav ul{

		flex-direction:column;

		gap:15px;

	}

	.row{

		flex-direction:column;

	}

	.hero h2{

		font-size:2.2rem;

	}

}

/* ===========================
   Navigation v2
=========================== */

.navbar {

	position: sticky;
	top: 0;
	z-index: 1000;

	background: rgba(255,255,255,.92);

	backdrop-filter: blur(16px);

	border-bottom: 1px solid var(--border);

}

.nav-container {

	width: min(1200px,92%);
	margin: auto;

}

.nav-links {

	display: flex;

	justify-content: center;

	align-items: center;

	gap: 35px;

	list-style: none;

	padding: 18px 0;

}

.nav-links a {

	color: var(--text);

	text-decoration: none;

	font-weight: 600;

	font-size: 17px;

	transition: .25s;

}

.nav-links a:hover {

	color: var(--primary);

}