/*
 * Button-style navigation menus (theme colour from the --backgroundColor variable).
 * Applies ONLY to lists marked class="nav-button-menu":
 *   - Recruitment sidebar menus (white "RECRUITMENTS" card and orange .left-link box)
 *   - Home page "Important Links" lists
 * Parent items (links and the Online Services <button>) look like buttons;
 * Online Services children (ul.applyonlinesubdiv) look like an indented sub-list, not buttons.
 * !important overrides older sidebar rules (.whatnews1 li:hover, .left-link span, .gov a span).
 */

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

ul.nav-button-menu li,
ul.nav-button-menu li:hover,
ul.nav-button-menu li.active {
	background: none !important;
	border: 0;
	padding: 0;
	line-height: 1.4;
}

ul.nav-button-menu > li {
	margin: 0 0 6px;
}

/* ---------- Parent buttons ---------- */
ul.nav-button-menu > li > a,
ul.nav-button-menu > li > button.applyonlinediv {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--backgroundColor);
	border-radius: 4px;
	color: #154979 !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

/* inner text/icons follow the button colour */
ul.nav-button-menu > li > a *,
ul.nav-button-menu > li > button.applyonlinediv * {
	color: inherit !important;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none !important;
}
ul.nav-button-menu > li > a i,
ul.nav-button-menu > li > button.applyonlinediv i {
	float: none;
	top: 0;
	margin: 0;
	padding: 0;
}
ul.nav-button-menu > li > a span,
ul.nav-button-menu > li > button.applyonlinediv span {
	display: inline;
}

ul.nav-button-menu > li > a:hover,
ul.nav-button-menu > li > a:focus,
ul.nav-button-menu > li > button.applyonlinediv:hover,
ul.nav-button-menu > li > button.applyonlinediv:focus {
	background: var(--backgroundColor);
	color: #fff !important;
}

ul.nav-button-menu > li > a:focus-visible,
ul.nav-button-menu > li > button.applyonlinediv:focus-visible {
	outline: 2px solid #0645AD;
	outline-offset: 2px;
}

/* current page (already marked li.gov / li.active in the markup) */
ul.nav-button-menu > li.gov > a,
ul.nav-button-menu > li.active > a {
	background: var(--backgroundColor);
	color: #fff !important;
}

/* ---------- Online Services toggle ---------- */
/* in the orange-box markup the chevron sits inside a <span>: let the span fill the row */
ul.nav-button-menu > li > button.applyonlinediv > span {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 6px;
}
ul.nav-button-menu > li > button.applyonlinediv .fa-angle-down {
	margin-left: auto;
	transition: transform .2s ease;
}
ul.nav-button-menu > li > button.applyonlinediv[aria-expanded="true"] {
	background: #e7eef6;
	border-bottom-left-radius: 0;
}
ul.nav-button-menu > li > button.applyonlinediv[aria-expanded="true"]:hover,
ul.nav-button-menu > li > button.applyonlinediv[aria-expanded="true"]:focus {
	background: var(--backgroundColor);
}
ul.nav-button-menu > li > button.applyonlinediv[aria-expanded="true"] .fa-angle-down {
	transform: rotate(180deg);
}

/* ---------- Submenu children: indented list, visibly different from parent buttons ---------- */
ul.nav-button-menu ul.applyonlinesubdiv {
	list-style: none;
	margin: 0 0 0 14px;
	padding: 2px 0;
	background: #eef4fa;
	border: 0;
	border-left: 3px solid var(--borderleftColor);
	border-radius: 0 0 4px 0;
}
ul.nav-button-menu ul.applyonlinesubdiv > li {
	margin: 0;
}
ul.nav-button-menu ul.applyonlinesubdiv > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: none;
	border: 0;
	color: #154979 !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none !important;
}
ul.nav-button-menu ul.applyonlinesubdiv > li > a * {
	color: inherit !important;
	font-size: inherit;
	font-weight: inherit;
}
ul.nav-button-menu ul.applyonlinesubdiv > li > a i {
	float: none;
	top: 0;
	margin: 0;
	padding: 0;
}
ul.nav-button-menu ul.applyonlinesubdiv > li > a span {
	display: inline;
}
ul.nav-button-menu ul.applyonlinesubdiv > li > a[href]:hover,
ul.nav-button-menu ul.applyonlinesubdiv > li > a[href]:focus {
	background: #d5e3f1;
	color: #0d3557 !important;
	text-decoration: underline !important;
}
ul.nav-button-menu ul.applyonlinesubdiv > li > a[href]:focus-visible {
	outline: 2px solid #0645AD;
	outline-offset: -2px;
}
/* child without a confirmed URL: shown but not clickable */
ul.nav-button-menu ul.applyonlinesubdiv > li > a[aria-disabled="true"] {
	color: #6b6b6b !important;
	cursor: default;
	opacity: 1;
}