/* ============================================================
   nav.css — shared header & navigation styles
   Included by every page. Do not duplicate these rules inline.
   ============================================================ */

:root {
	--primary-color: #0f3a5f;
	--secondary-color: #2b7a78;
	--accent-color: #f5dadd;
	--dark-text: #2e1a10;
	--light-bg: #faf0f3;
	--border-color: #dbaebd;
}

/* ── Header ── */
header {
	background-color: white;
	padding: 0 2rem;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-container {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 110px;
}

.logo-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: var(--primary-color);
	font-weight: bold;
	font-size: 1.3rem;
	flex-shrink: 0;
}

.logo-icon {
	width: 100px;
	height: 100px;
}

/* ── Desktop nav ── */
nav ul {
	list-style: none;
	display: flex;
	gap: 0.5rem;
}

nav > ul > li {
	position: relative;
}

nav > ul > li > a {
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 0.3s ease;
	white-space: nowrap;
}

nav > ul > li > a:hover {
	color: var(--secondary-color);
}

nav > ul > li.has-submenu > a::after {
	content: '▼';
	font-size: 0.6rem;
	transition: transform 0.3s ease;
}

nav > ul > li.has-submenu:hover > a::after {
	transform: rotate(180deg);
}

/* ── Desktop dropdown ── */
.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	min-width: 220px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	z-index: 1001;
}

nav > ul > li:hover > .submenu {
	display: block;
}

.submenu li {
	list-style: none;
	position: relative;
}

.submenu a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--dark-text);
	text-decoration: none;
	font-size: 0.9rem;
	transition: background-color 0.3s ease;
}

.submenu a:hover {
	background-color: var(--accent-color);
	color: var(--primary-color);
}

/* Nested (flyout) submenu */
.submenu .submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.submenu li.has-submenu:hover > .submenu {
	display: block;
}

.submenu li.has-submenu > a::after {
	content: '▶';
	font-size: 0.6rem;
	margin-left: 0.3rem;
	float: right;
}

/* ── Hamburger button (hidden on desktop) ── */
.hamburger-menu {
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	gap: 0.35rem;
	flex-shrink: 0;
}

.hamburger-menu span {
	width: 25px;
	height: 3px;
	background-color: var(--primary-color);
	border-radius: 2px;
	display: block;
	transition: all 0.3s ease;
}

.hamburger-menu.active span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
	opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* ── Mobile ── */
@media (max-width: 768px) {
	header {
		padding: 0 1rem;
	}

	.header-container {
		height: 60px;
	}

	.logo-icon {
		width: 40px;
		height: 40px;
	}

	.logo-section {
		font-size: 1rem;
	}

	/* Show hamburger, hide nav by default */
	.hamburger-menu {
		display: flex;
	}

	nav {
		display: none;
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		overflow-y: auto;
		z-index: 999;
		width: 100%;
	}

	nav.active {
		display: block;
	}

	/* Vertical nav list */
	nav ul {
		flex-direction: column;
		gap: 0;
	}

	nav > ul > li {
		border-bottom: 1px solid var(--border-color);
	}

	nav > ul > li > a {
		padding: 1rem 1.25rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.95rem;
		letter-spacing: 1px;
	}

	/* Down-arrow for all has-submenu items on mobile */
	nav > ul > li.has-submenu > a::after,
	.submenu li.has-submenu > a::after {
		content: '▼' !important;
		font-size: 0.6rem;
		float: none;
		margin-left: auto;
		transition: transform 0.3s ease;
		transform: none;
	}

	/* Rotate arrow when open */
	li.has-submenu.open > a::after {
		transform: rotate(180deg) !important;
	}

	/* On mobile, ALL submenus are static (no absolute/flyout) */
	.submenu,
	.submenu .submenu {
		position: static !important;
		display: none !important;
		background-color: #f4f4f4;
		border: none !important;
		box-shadow: none !important;
		min-width: auto !important;
		border-radius: 0 !important;
	}

	/* Disable desktop hover trigger on mobile (top-level only) */
	nav > ul > li:hover > .submenu {
		display: none !important;
	}

	/* Show submenu ONLY when parent has .open class (set by JS).
	   Uses high-specificity selectors to beat any hover rules. */
	li.has-submenu.open > .submenu,
	.submenu li.has-submenu.open > .submenu {
		display: block !important;
	}

	/* Nested submenu indentation */
	.submenu > li {
		border-bottom: 1px solid #e0e0e0;
	}

	.submenu a {
		padding: 0.75rem 1.25rem 0.75rem 2rem;
		font-size: 0.9rem;
	}

	.submenu .submenu a {
		padding-left: 3rem;
		background-color: #eaeaea;
	}
}
                     