/* Additions to the approved prototype stylesheet (style.css stays untouched). */
.note {
	margin: 0.9rem 0 0;
	color: var(--text-faint);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* "More" button and panel, as on the MyAAC pages (deploy/myaac/templates/drapots/style.css). */
.mainnav { z-index: 20; }

.nav-more {
	padding: 15px 12px 13px;
	color: var(--text-soft);
	font: 600 15px/1 var(--body);
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 120ms;
}
.nav-more:hover { color: var(--text); }
.nav-more::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 140ms;
}
.nav-more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Without script the panel stays open under the bar. */
.more-panel {
	border-top: 1px solid var(--line);
	background: #16100d;
}
.js .more-panel { display: none; }
.js .more-panel.is-open {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 56px);
	overflow-y: auto;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 24px 40px rgb(0 0 0 / 0.5);
}

.more-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 28px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 20px 26px;
}

.more-heading {
	margin: 0 0 8px;
	font: 600 13px/1.2 var(--body);
	color: var(--text-faint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.more-group ul { margin: 0; padding: 0; list-style: none; }

.more-group a {
	display: block;
	padding: 5px 0;
	color: var(--text-soft);
	font-size: 15px;
	text-decoration: none;
}
.more-group a:hover { color: #fff; }