/* ==========================================================================
   Giffy navbar — Bootstrap-free
   Load AFTER your existing stylesheet.
   Colours come from CSS variables set inline on <nav id="header">:
     --nav-fg  (menuFontColor)
     --dd-bg   (dropdownBackgroundColor)
     --dd-fg   (dropdownFontColor)
   Breakpoint: 768px (same as Bootstrap 3's navbar collapse point)
   ========================================================================== */

/* ---- utilities that used to come from Bootstrap ---- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.cms-list-unstyled {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- base layout ---- */
.cms-navbar,
.cms-navbar *,
.cms-navbar *::before,
.cms-navbar *::after {
	box-sizing: border-box;
}
.cms-navbar {
	width: 100%;
}
#header #inner_menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
}

/* brand / logo (neutralise any old float/absolute positioning) */
#header #inner_titletext,
#header .brand_logo,
#header .cms-navbar-brand {
	position: static;
	float: none;
	margin: 0;
	display: flex;
	align-items: center;
}
#header #inner_titletext,
#header .brand_logo {
	padding: 8px 0;
}
#header #logoImage {
	display: block;
	max-height: 44px;
	width: auto;
	max-width: 100%;
}

/* ---- hamburger button ---- */
.cms-navbar-toggle {
	display: none;                 /* shown in the mobile media query */
	margin-left: auto;
	padding: 10px;
	background: transparent;
	border: 0;
	border-radius: 4px;
	color: var(--nav-fg, #fff);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cms-navbar-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.cms-navbar-toggle .icon-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform .2s ease, opacity .2s ease;
}
.cms-navbar-toggle .icon-bar + .icon-bar {
	margin-top: 4px;
}
/* animate to an "X" when open (bars are children 2-4; child 1 is .sr-only) */
.cms-navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
	transform: translateY(6px) rotate(45deg);
}
.cms-navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
	opacity: 0;
}
.cms-navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(4) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---- menu list (desktop default) ---- */
.cms-navbar-collapse {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 auto;
}
.cms-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cms-nav > li {
	position: relative;
	list-style: none;
}
.cms-nav > li > a,
.cms-nav > li > i {
	display: block;
	padding: 14px 12px;
	text-decoration: none;
	cursor: pointer;
}
.cms-nav .fa-caret-down {
	margin-left: 6px;
}
.cms-form-inline {
	display: flex;
	align-items: center;
}
.cms-form-inline .subscribe {
	cursor: pointer;
	max-height: 28px;
	margin-left: 8px;
}

/* ---- dropdowns ---- */
.cms-dropdown-menu,
.cms-dropdown-container {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	z-index: 1000;
	background: var(--dd-bg, #fff);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.cms-nav > li:last-child .cms-dropdown-menu,
.cms-nav > li:last-child .cms-dropdown-container {
	left: auto;
	right: 0;
}
.cms-nav .cms-dropdown-menu a,
.cms-nav .cms-dropdown-container a {
	display: block;
	padding: 10px 16px;
	color: var(--dd-fg, #222);
	text-decoration: none;
	white-space: nowrap;
}
.cms-nav .cms-dropdown-menu a:hover,
.cms-nav .cms-dropdown-container a:hover {
	background: rgba(0, 0, 0, .08);
}

/* open via click/tap (all screen sizes) */
.dropdownMenu.open > .cms-dropdown-menu,
.nav-item.open > .cms-dropdown-menu,
.nav-submenu.open > .cms-dropdown-container {
	display: block;
}

/* open via hover — desktop with a real pointer only */
@media (min-width: 768px) and (hover: hover) {
	.dropdownMenu:hover > .cms-dropdown-menu,
	.nav-submenu:hover > .cms-dropdown-container {
		display: block;
	}
}

/* ==========================================================================
   MOBILE  (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

	.cms-navbar-toggle {
		display: block;
	}

	/* collapsed by default; JS adds .open */
	.cms-navbar-collapse {
		display: none;
		flex: 0 0 100%;
		width: 100%;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cms-navbar-collapse.open {
		display: block;
	}

	.cms-nav {
		display: block;
		padding-bottom: 8px;
	}
	.cms-nav > li {
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.cms-nav > li > a,
	.cms-nav > li > i {
		padding: 14px 4px;
	}

	/* dropdowns become inline accordions */
	.cms-dropdown-menu,
	.cms-dropdown-container {
		position: static;
		min-width: 0;
		background: transparent;
		box-shadow: none;
		padding-left: 16px;
	}
	.cms-nav .cms-dropdown-menu a,
	.cms-nav .cms-dropdown-container a {
		color: var(--nav-fg, #fff);
		white-space: normal;
		padding: 12px 4px;
	}

	.cms-form-inline {
		padding: 6px 4px;
	}

	/* header contact block has inline floats */
	#contactDiv {
		float: none !important;
		padding: 8px 4px !important;
	}
	#contactDiv ul {
		float: none !important;
		padding-top: 0 !important;
	}
}