/* Mobile-first responsive starter styles */
:root{
	--bg: #ffffff;
	--text: #222;
	--accent: #0a74da;
	--max-width: 1100px;
}

/* Dark mode variables */
:root.dark{
	--bg: #0f1720;
	--text: #e6eef6;
	--accent: #4aa3ff;
}

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

/* Use Google font */
body{font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}

.container{
	width:100%;
	padding:0 1rem;
	margin:0 auto;
	max-width:var(--max-width);
}

header{background:var(--accent);color:#fff;padding:.75rem 0}
header .container{display:flex;align-items:center;justify-content:space-between}
header h1{font-size:1.125rem;margin:0}

/* Header row and nav */
.header-row{display:flex;align-items:center;gap:1rem}
.brand{flex:0 0 auto}
#nav-toggle{display:inline-block;background:transparent;border:0;color:#fff;font-size:1.5rem;padding:.25rem}
.site-nav{display:none;flex:1 1 auto;justify-content:flex-end}
.site-nav a{color:#fff;text-decoration:none;margin-left:1rem;padding:.25rem .5rem;border-radius:4px}
.site-nav a:hover{background:rgba(255,255,255,0.08)}

@media(min-width:768px){
	#nav-toggle{display:none}
	.site-nav{display:flex}
}

/* Top bar (light) and top nav (dark) similar to W3Schools */
.topbar{background:#fff;border-bottom:1px solid #eee}
.topbar-inner{display:flex;align-items:center;gap:1rem;padding:.5rem 0}
.brand-link{display:flex;align-items:center;gap:.5rem;color:var(--text);text-decoration:none}
.logo{background:var(--accent);color:#fff;padding:.25rem .5rem;border-radius:4px;font-weight:700}
.search-center{flex:1;display:flex;justify-content:center}
.search-form{display:flex;align-items:center;max-width:620px}
.search-form input{flex:1;padding:.5rem;border:1px solid #ddd;border-radius:4px 0 0 4px}
.search-form button{padding:.5rem;border:1px solid #ddd;border-left:0;border-radius:0 4px 4px 0;background:#f7f7f7}

/* Compact search: hide form until toggled */
.search-compact{position:relative}
.search-compact .search-form{display:none;position:absolute;right:0;top:calc(100% + .25rem);background:var(--bg);padding:.5rem;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.08);z-index:50}
.search-compact.open .search-form{display:flex}

/* Sticky topnav */
.topnav{position:sticky;top:0;z-index:40}

/* Sticky footer */
html{height:100%}
body{display:flex;flex-direction:column;min-height:100%}
main{flex:1}
footer{margin-top:auto}
.top-actions a{margin-left:1rem;color:var(--text);text-decoration:none}

.topnav{background:#111;color:#fff}
.topnav-inner{display:flex;align-items:center;padding:.5rem 0}
.category-nav{display:flex;flex-wrap:nowrap;gap:1rem;align-items:center}
.category-nav a{color:#fff;text-decoration:none;padding:.6rem .75rem}
.category-nav a:hover{background:rgba(255,255,255,0.03);border-radius:4px}

@media(max-width:767px){
	.category-nav{overflow:auto;padding:0 0.5rem}
}

/* Dropdowns */
.dropdown{position:relative}
.drop-btn{background:transparent;border:0;color:#fff;padding:.5rem;font-weight:600}
.dropdown-menu{position:absolute;left:0;top:calc(100% + .25rem);min-width:200px;background:var(--bg);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,0.12);padding:.5rem;border-radius:6px;display:none;z-index:60}
.dropdown-menu li{list-style:none}
.dropdown-menu a{display:block;padding:.4rem .6rem;color:var(--text);text-decoration:none;border-radius:4px}
.dropdown-menu a:hover{background:rgba(0,0,0,0.04)}
.dropdown.open .dropdown-menu{display:block}

/* Mega menu styling */
.mega .mega-menu{position:absolute;left:0;right:0;top:calc(100% + .25rem);background:#fff;color:var(--text);padding:1rem 0;border-top:4px solid var(--accent);box-shadow:0 12px 48px rgba(8,8,8,0.12);display:none}
.mega.open .mega-menu{display:block}
.mega-inner{display:flex;gap:2rem}
.mega-col{flex:1}
.mega-col h4{margin-top:0}
.mega-col ul{padding:0;margin:0}
.mega-col li{list-style:none}
.mega-col a{display:block;padding:.25rem 0;color:var(--text);text-decoration:none}
.mega-col a:hover{text-decoration:underline}

/* Desktop: show dropdown on hover for convenience */
.category-nav .dropdown:hover .dropdown-menu{display:block}

/* When dropdown is inside dark topnav, make its bg dark */
.topnav .dropdown-menu{background:#333;color:#fff}
.topnav .dropdown-menu a{color:#fff}

/* Footer stickiness fix */
/* Clear redundant height rules and use robust sticky footer */
html{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
footer{background:#f5f5f5;padding:1rem 0;margin-top:0}

nav{margin-left:1rem}
nav a{color:inherit;text-decoration:none;margin-left:1rem;font-weight:600}

main{padding:1.25rem 0}
.lead{color:#444;margin-top:.5rem;font-size:1rem}

/* Footer tweaks */
footer small{display:block;margin-top:.5rem;color:#666}

footer{background:#f5f5f5;padding:1rem 0;margin-top:2rem}

/* Utility */
.row{display:flex;flex-wrap:wrap;gap:1rem}
.col{flex:1 1 200px}

/* Responsive breakpoints */
@media(min-width:768px){
	header h1{font-size:1.25rem}
	main{padding:2rem 0}
}

@media(min-width:1024px){
	header h1{font-size:1.5rem}
}

/* Improve images */
img{max-width:100%;height:auto;display:block}

/* Home cards */
.cards{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
.card{background:#fff;border:1px solid #eee;padding:1rem;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.card h3{margin-top:0}

@media(min-width:640px){
	.cards{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
	.cards{grid-template-columns:repeat(3,1fr)}
}