/* ---------------------------------------------------------------------------
   quiettime_nav.css
   Responsive replacement for exmplmenu_var.js + menu_com.js.

   No browser or device detection anywhere in here -- it reacts to viewport
   width via media queries, so it works the same on any current or future
   phone/tablet/desktop without needing to know what it is.

   Colors below match what was already configured in exmplmenu_var.js, so
   the look stays the same as before.
--------------------------------------------------------------------------- */

:root {
	--qt-nav-bg: #000000;          /* was LowBgColor */
	--qt-nav-bg-hover: #1F509F;    /* was HighBgColor */
	--qt-nav-text: #d3d3d3;        /* was FontLowColor */
	--qt-nav-text-hover: #CC9966;  /* was FontHighColor */
	--qt-nav-border: #3B1B08;      /* was BorderColor */
}

.qt-nav {
	background: var(--qt-nav-bg);
	font-family: arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid var(--qt-nav-border);
}

.qt-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.qt-nav a,
.qt-nav .qt-parent {
	display: block;
	padding: 12px 16px;
	color: var(--qt-nav-text);
	text-decoration: none;
	cursor: pointer;
}

.qt-nav a:hover,
.qt-nav a:focus,
.qt-nav .qt-parent:hover,
.qt-nav .qt-parent:focus {
	background: var(--qt-nav-bg-hover);
	color: var(--qt-nav-text-hover);
	outline: none;
}

.qt-nav-toggle {
	display: none;
	width: 100%;
	background: var(--qt-nav-bg);
	color: var(--qt-nav-text);
	border: 0;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	cursor: pointer;
}

/* ---------- 768px and wider: horizontal bar, hover/focus dropdowns ---------- */
@media (min-width: 768px) {
	.qt-nav > ul {
		display: flex;
		justify-content: center;
	}
	.qt-nav > ul > li {
		position: relative;
	}
	.qt-nav .qt-submenu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--qt-nav-bg);
		border: 1px solid var(--qt-nav-border);
		z-index: 50;
	}
	.qt-nav > ul > li:hover > .qt-submenu,
	.qt-nav > ul > li:focus-within > .qt-submenu {
		display: block;
	}
}

/* ---------- Under 768px: hamburger button, stacked full-width list ---------- */
@media (max-width: 767.98px) {
	.qt-nav-toggle {
		display: block;
	}
	.qt-nav > ul {
		display: none;
	}
	.qt-nav.qt-open > ul {
		display: block;
	}
	.qt-nav .qt-submenu {
		padding-left: 16px;
	}
}