/* Reset & base styles */


header
{
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-bottom-color:#D1D5DB;

	display:flex;
	justify-content:center;
	background-image:linear-gradient(180deg, rgba(208, 208, 208, 255) 0px, rgba(208, 208, 208, 0) 100px);
}

header div.header-container
{
	width:100%;
	max-width:1240px;
	padding:0 1rem;

	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}

div.logo
{
	height:100px;
	display:flex;
	justify-content:center;
	align-items:center;
}

div.logo a
{
	display:flex;
	height:70%;
}

div.logo img
{
	max-width:100%;
	max-height:100%;
	object-fit:contain; /* keep proportions */
	display:block;
}

.logo img
{
	max-height:50px;
	display:block;
}

/* ----- Menu button (mobile only) ----- */
#menu-button
{
	display:none; /* hidden on desktop */
	cursor:pointer;
	font-size:0; /* hide the word "MENU" */
	line-height:1;
	padding:0.5rem;
	user-select:none;
}

#menu-button::before
{
	content:"☰"; /* hamburger icon */
	font-size:2rem;
	color:#333;
	transition:content 0.2s;
}

/* ----- Navigation & menu lists ----- */
nav
{
	flex:1;
	display:flex;
	justify-content:flex-end;
}

.top-menu
{
	display:flex;
	list-style:none;
	gap:1.5rem;
}

.top-menu li
{
	position:relative; /* needed for desktop submenu positioning */
}

.top-menu a, .top-menu a:visited
{
	display:block;
	padding:0.5rem 0;
	text-decoration:none;
	color:#334155;
	font-weight:500;
	transition:color 0.2s;
}

.top-menu a:hover
{
	color:#007bff;
	text-decoration:none;
}

/* ----- Submenus (hidden by default) ----- */
.submenu
{
	position:absolute;
	top:100%;
	left:0;
	min-width:200px;
	background:#fff;
	box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);
	border-radius:4px;
	list-style:none;
	padding:0.5rem 0;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.2s, visibility 0.2s;
	z-index:200;
}

/* Show submenu on parent hover */
.top-menu li:hover > .submenu
{
	opacity:1;
	visibility:visible;
}

/* Submenu items */
.submenu li
{
	width:100%;
}

.submenu a
{
	padding:0.5rem 1rem;
	white-space:nowrap;
}

/* Nested submenus (flyout to the right) */
.submenu .submenu
{
	top:0;
	left:100%;
	margin-top:-0.5rem;
}

/* ----- Desktop styles (≥769px) ----- */
@media (min-width:769px)
{
	#menu-button
	{
		display:none !important; /* always hidden on desktop */
	}

	nav
	{
		display:flex !important;
	}

	/* Optional arrows for submenu indicators */
	.top-menu > li > a:not(:only-child)::after
	{
		content:" ▾";
		font-size:1em;
		opacity:0.6;
	}

	.submenu > li > a:not(:only-child)::after
	{
		content:" ▸";
		float:right;
		opacity:0.6;
	}
}

/* ----- Mobile styles (≤768px) ----- */
@media (max-width:768px)
{
	#menu-button
	{
		display:block;
		margin-left:auto; /* pushes button to the right */
	}

	header
	{
		height:unset;
	}

	nav
	{
		flex:0 0 100%;
		display:none; /* hidden by default */
		margin-top:1rem;
		border-top:1px solid #eee;
		padding-top:1rem;
	}

	/* When menu is open */
	header.open #menu-button::before
	{
		content:"✕"; /* close icon */
	}

	header.open nav
	{
		display:block; /* show menu – now in normal flow */
	}

	.top-menu
	{
		flex-direction:column;
		gap:0;
	}

	.top-menu li
	{
		width:100%;
		position:static; /* prevent any submenu absolute positioning */
	}

	.top-menu a
	{
		padding:0.75rem 0;
		border-bottom:1px solid #f0f0f0;
	}

	/* Force submenus to become static, in‑flow blocks */
	.top-menu .submenu,
	.submenu .submenu
	{
		position:static !important; /* kill absolute positioning */
		box-shadow:none;
		opacity:1;
		visibility:visible;
		padding-left:1rem;
		background:#f9f9f9;
		margin:0;
		border-left:2px solid #ddd;
		width:100%; /* take full width */
	}

	/* Remove hover effects on mobile */
	.top-menu li:hover > .submenu
	{
		opacity:1;
		visibility:visible;
	}
}

/* Safety: ensure main content clears any floats (if any) */
main
{
	clear:both;
}