/* CSS Variables */
:root{
	--header-bg: #ffffff;
	--header-border: #e6e6e6;
	--brand-color: #ff7a18;
	--text-color: #222;
	--sidebar-width: 280px;
	--header-height: 60px;
}

/* CSS Reset */
*{
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

/* General Styles */
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color:var(--text-color);
	background:#fafafa;
	line-height:1.6;
}



/* Site Header */
.site-header{
	display:flex;
	align-items:center;
	padding:0 20px;
	height:var(--header-height);
	background:var(--header-bg);
	border-bottom:1px solid var(--header-border);
	position:sticky;
	top:0;
	z-index:50;
	box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

/* Brand */
.brand{
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
	color:inherit;
	flex:1;
}
/* Logo */
.logo{
	width:44px;
	height:44px;
	display:block;
	flex-shrink:0;
}
/* Site Name */
.site-name{
	font-weight:700;
	font-size:clamp(16px, 4vw, 20px);
	color:var(--brand-color);
}

/* Main content area */
.main{
	padding:clamp(20px, 5vw, 40px);
	max-width:1200px;
	margin:0 auto;
	transition:margin-left 0.3s ease;
  margin-left: 0;
}

.main h2{
	margin-top:0;
	font-size:clamp(24px, 6vw, 32px);
}

.main p{
	font-size:clamp(14px, 2vw, 16px);
}



/* Sidebar toggle button */
.sidebar-toggle{
	display:flex;
	background:none;
	border:none;
	cursor:pointer;
	padding:12px;
	margin-right:08px;
	flex-direction:column;
	justify-content:space-around;
	width:44px;
	height:44px;
	flex-shrink:0;
}

.sidebar-toggle:focus{
	outline:2px solid var(--brand-color);
	outline-offset:2px;
}

.sidebar-toggle span{
	display:block;
	width:100%;
	height:3px;
	background:var(--text-color);
	border-radius:2px;
	transition:all 0.3s ease;
}

.sidebar-toggle.open span:nth-child(1){
	transform:rotate(45deg) translate(8px, 8px);
}

.sidebar-toggle.open span:nth-child(2){
	opacity:0;
}

.sidebar-toggle.open span:nth-child(3){
	transform:rotate(-45deg) translate(8px, -8px);
}

/* Sidebar */
.sidebar{
	position:fixed;
	top:1;
	left:-280px;
	width:var(--sidebar-width);
	height:100vh;
	background:#fff;
	border-right:1px solid var(--header-border);
	transition:left 0.3s ease;
	z-index:99;
	padding-top:var(--header-height);
	overflow-y:auto;
	box-shadow:-2px 0 5px rgba(0,0,0,0.1);
}

.sidebar.open{
	left:0;
}

.sidebar-nav{
	display:flex;
	flex-direction:column;
	padding:0;
	margin:0;
}

.nav-item{
	border-bottom:1px solid var(--header-border);
}

.nav-button{
	width:100%;
	padding:16px 20px;
	border:none;
	background:none;
	text-align:left;
	cursor:pointer;
	font-size:14px;
	font-weight:600;
	color:var(--text-color);
	display:flex;
	justify-content:space-between;
	align-items:center;
	transition:background 0.2s;
	min-height:48px;
}

.nav-button:hover{
	background:#f5f5f5;
}

.nav-button:focus{
	outline:2px solid var(--brand-color);
	outline-offset:-2px;
}

.chevron{
	display:inline-block;
	font-size:20px;
	transition:transform 0.3s;
	margin-left:auto;
	flex-shrink:0;
}

.dropdown-menu{
	list-style:none;
	padding:0;
	margin:0;
	display:none;
	background:#fafafa;
	border-top:1px solid var(--header-border);
}

.dropdown-menu.open{
	display:block;
}

.dropdown-menu li{
	margin:0;
}

.dropdown-menu a{
	display:block;
	padding:12px 20px 12px 40px;
	text-decoration:none;
	color:var(--text-color);
	font-size:13px;
	transition:background 0.2s;
	border-left:3px solid transparent;
	min-height:44px;
	display:flex;
	align-items:center;
}

.dropdown-menu a:hover{
	background:#f0f0f0;
	border-left-color:var(--brand-color);
}

.dropdown-menu a:focus{
	outline:2px solid var(--brand-color);
	outline-offset:-2px;
}

/* Desktop: shift main content when sidebar is open */
@media (min-width:769px){
	body.sidebar-open .main{
 		margin-left:var(--sidebar-width);
 		max-width:calc(100% - var(--sidebar-width));
 		transition:margin-left 0.3s ease, max-width 0.3s ease;
 	}
}






/* Mobile Responsive */
@media (max-width:768px){
	:root{
		--sidebar-width:260px;
		--header-height:56px;
	}
	
	.sidebar-toggle{
		display:flex;
	}
	
	body{
		padding:0;
	}
	
	.site-header{
		flex-wrap:wrap;
	}
	
	.logo{
		width:40px;
		height:40px;
	}
	
	.site-name{
		font-size:clamp(14px, 3.5vw, 18px);
	}
	
	.main{
		padding:clamp(16px, 4vw, 28px);
	}
	
	.nav-button{
		padding:14px 16px;
		font-size:13px;
	}
	
	.dropdown-menu a{
		padding:10px 16px 10px 36px;
		font-size:12px;
	}

	/* When sidebar open on mobile/tablet, slide main and lock background scroll */
	body.sidebar-open .main{
		transform:translateX(var(--sidebar-width));
		transition:transform 0.3s ease;
	}

	body.sidebar-open{
		overflow:hidden;
	}
}

@media (max-width:480px){
	:root{
		--sidebar-width:240px;
		--header-height:52px;
	}
	
	.logo{
		width:36px;
		height:36px;
	}
	
	.site-name{
		font-size:14px;
	}
	
	.sidebar{
		width:var(--sidebar-width);
	}
	
	.main{
		padding:clamp(12px, 3vw, 20px);
	}
	
	.main h2{
		font-size:clamp(20px, 5vw, 24px);
		margin-bottom:12px;
	}
	
	.main p{
		font-size:clamp(13px, 1.5vw, 14px);
	}
	
	.nav-button{
		padding:12px 14px;
		font-size:12px;
	}
	
	.chevron{
		font-size:18px;
	}
	
	.dropdown-menu a{
		padding:8px 14px 8px 32px;
		font-size:11px;
	}
}

/* Accessibility & Printing */
@media print{
	.site-header,
	.sidebar,
	.sidebar-toggle{
		display:none;
	}
	
	.main{
		padding:0;
	}
}

/* Dark mode support (optional) */
@media (prefers-color-scheme:dark){
	:root{
		--header-bg:#1e1e1e;
		--header-border:#333;
		--text-color:#e0e0e0;
	}
	
	.sidebar{
		background:#1e1e1e;
	}
	
	.nav-button:hover{
		background:#2a2a2a;
	}
	
	.dropdown-menu{
		background:#252525;
	}
	
	.dropdown-menu a:hover{
		background:#2a2a2a;
	}
}

/* Touch-friendly targets */
@media (hover:none) and (pointer:coarse){
	.nav-button,
	.dropdown-menu a{
		min-height:48px;
		padding-top:16px;
		padding-bottom:16px;
	}
}

/* Hide sidebar variant: used to hide the side menu on the index landing view */
body.hide-sidebar .sidebar{
  display: none !important;
}

body.hide-sidebar .main{
  margin-left: 0 !important;
  max-width: 100% !important;
}