﻿/* =========================================================
   HEADER
========================================================= */

.wpf-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 140px;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.wpf-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	height: 140px;
	background: #f8f8f8 url(/images/base/header.png) no-repeat;
	background-size: cover;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

/* Logo */
.wpf-header-logo {
	height: 75px;
}

	.wpf-header-logo img {
		height: 100%;
	}

/* Desktop Menu */
.wpf-header-menu {
	margin-left: auto;
	margin-top: 70px; /* Desktop gap */
}

/* Desktop Search */
.wpf-header-search {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* Spacer below fixed header */
.wpf-header-height {
	height: 140px;
	width: 100%;
}


/* =========================================================
   HAMBURGER (Hidden on Desktop)
========================================================= */

.wpf-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3000;
}

	.wpf-hamburger span {
		height: 3px;
		width: 100%;
		background: #155CAC;
		border-radius: 2px;
		transition: all 0.3s ease;
	}


/* =========================================================
   MOBILE DRAWER MENU
========================================================= */

.wpf-menu-overlay,
.wpf-menu-drawer {
	display: none;
}

/* =========================================================
   MOBILE STYLES
========================================================= */

@media (max-width: 768px) {

	/* Header sizing */
	.wpf-header {
		height: 90px;
	}

	.wpf-header-inner {
		height: 90px;
		padding: 0 20px;
		background-position: center;
	}

	.wpf-header-logo {
		height: 55px;
	}

	/* Hide desktop items */
	.wpf-header-menu {
		display: none;
	}

	.wpf-header-search {
		display: none;
	}

	/* Fix spacer */
	.wpf-header-height {
		height: 90px;
	}

	/* Show hamburger */
	.wpf-hamburger {
		display: flex;
		top: 27px;
		right: 20px;
	}

		.wpf-hamburger.active span:nth-child(1) {
			transform: translateY(9px) rotate(45deg);
		}

		.wpf-hamburger.active span:nth-child(2) {
			opacity: 0;
		}

		.wpf-hamburger.active span:nth-child(3) {
			transform: translateY(-9px) rotate(-45deg);
		}

	/* Overlay */
	.wpf-menu-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease;
		z-index: 1500;
	}

		.wpf-menu-overlay.open {
			opacity: 1;
			visibility: visible;
		}

	/* Drawer */
	.wpf-menu-drawer {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: 90px;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		background: #145CAB; /* BRAND BLUE */
		color: #fff;
		box-shadow: 0 10px 25px rgba(0,0,0,0.25);
		transition: max-height 0.35s ease;
		z-index: 2000;
	}

		.wpf-menu-drawer.open {
			max-height: calc(100vh - 90px);
			overflow-y: auto;
		}


	/* Stack menu vertically */
	.wpf-menu-list {
		flex-direction: column;
	}

	.wpf-menu-item > a {
		padding: 1rem 1.5rem;
		font-size: 1.1rem;
	}

	.wpf-menu-drawer .wpf-menu-list {
		display: flex !important;
	}

	.wpf-menu-overlay {
		pointer-events: none;
	}

		.wpf-menu-overlay.open {
			pointer-events: auto;
		}
}
