/* Base reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background:#fff; color:#111; }

/* Header container */
.site-header { padding: 16px; }
.header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #F5B65C; /* orange */
	border-radius: 28px;
	padding: 16px 24px;
	max-width: 1220px;
	margin: 0 auto;
}

.brand img { height: 54px; display: block; }

/* Desktop nav */
.nav > ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a {
	text-decoration: none;
}
.nav-link,
.nav > ul > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border-radius: 999px; /* pill */
	font-weight: 500;
	text-decoration: none;
	color: #000;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
	background: transparent;
}

/* White background on hover and active */
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active,
.nav > ul > li.current-menu-item > a,
.nav > ul > li.current_page_item > a { background: #000; color: #f5b65c; }

.has-submenu, .menu-item-has-children { position: relative; }
.nav .submenu, .nav .sub-menu { display:none; position:absolute; top: 100%; left:0; background:#000; border-radius:14px; padding:8px; list-style:none; margin:0; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 1000; }
@media (min-width: 901px) {
	/* Desktop: show submenu only on hover */
	.has-submenu:hover > .submenu, .menu-item-has-children:hover > .sub-menu { display:block !important; }
}
.nav-sublink, .sub-menu a { display:block; padding:10px 14px; border-radius:10px; color:#F5B65C; text-decoration:none; font-weight:500; white-space: nowrap; }
.nav-sublink:hover, .nav-sublink:focus-visible, .sub-menu a:hover, .sub-menu a:focus-visible { background:#33333380; }
.submenu-toggle { display:none; }

.drawer-close{ display: none; }

/* Hamburger (mobile only) */
.hamburger { appearance: none; background: #fff; border: 0; border-radius: 10px; padding: 10px; display: none; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.hamburger span { width: 22px; height: 2px; background:#000; display: block; }

/* Mobile drawer styles */
@media (max-width: 900px) {
	.header-shell { padding: 12px 14px; }
	.brand img { height: 44px; }
	.hamburger { display: inline-flex; flex-direction: column; }
	.nav { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 320px; background: #F5B65C; padding: 18px; border-top-right-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: translateX(-100%); transition: transform .28s ease; z-index: 1001; }
	/* Close button inside drawer */
	.drawer-close { appearance:none; border:0; background:#000; color:#fff; border-radius:10px; padding:10px 12px; font-weight:700; margin-bottom:12px; position: absolute; right: 10px; display: block; }
	.nav.open { transform: translateX(0); }
	.nav ul { flex-direction: column; align-items: stretch; gap: 10px; }
	.nav-link, .nav > ul > li > a { padding: 14px 18px; font-weight: 500; }

	/* Mobile submenu as accordion */
	.submenu, .sub-menu { position: static; display: none; background: transparent; box-shadow: none; padding: 6px 0 0 14px; margin: 6px 0 0 0; min-width: unset; }
	.submenu.open, .sub-menu.open { display: block; }
	/* Disable hover-open on touch viewports to prevent sticky hover */
	.has-submenu:hover > .submenu, .menu-item-has-children:hover > .sub-menu { display: none; }
	.submenu-toggle { display: inline-block; border:0; background: transparent; width: 32px; height: 32px; position: absolute; right: 8px; top: 6px; cursor: pointer; }
	.submenu-toggle::before { content: "\25BC"; }
	.submenu-toggle[aria-expanded="true"]::before { content: "\25B2"; }
}

/* Backdrop for drawer */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; }
.backdrop[hidden] { display: none; }

/* Optional main content spacing when testing standalone */
.content { max-width: 920px; margin: 40px auto; padding: 0 16px; color:#fff; }