.roa-lc {
	--roa-lc-border: #dcdcdc;
	--roa-lc-muted: #6b6b6b;
	position: relative;
	/* The shortcode usually sits directly above the next Divi section, which
	   brings its own background right up to the last row. */
	padding-bottom: 3rem;
}

/* Divi Theme Options sets the site link colour to #db0033. A class selector
   outranks its bare `a` rule, so this needs no !important. */
.roa-lc a,
.roa-lc a:visited,
.roa-lc a:hover,
.roa-lc a:focus {
	color: #01225e;
	font-size: 18px;
}

.roa-lc.is-loading {
	opacity: 0.55;
}

.roa-lc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17rem;
	gap: 2.5rem;
	align-items: start;
}

/* The rail follows the results in the markup, so it is placed rather than
   ordered — a screen reader still meets the list first. */
.roa-lc__rail {
	position: sticky;
	top: 2rem;
}

.roa-lc__facets {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.25rem;
	border: 1px solid #01225e; /*var(--roa-lc-border);*/
	background: #fff;
}

.roa-lc__label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: #01225e;
}

.roa-lc__facets select {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--roa-lc-border);
	background: #fff;
}

.roa-lc__facets input[type="search"] {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--roa-lc-border);
	background: #fff;
}

.roa-lc__facets input[type="search"]::placeholder {
	font-size: 11px;
	color: #6b6b6b;
}

/* Divi sets "#left-area ul, .entry-content ul, .et-l--body ul { list-style-type:
   disc; padding: 0 0 23px 1em }". That selector list carries an ID, so no
   class-based rule here can outrank it on specificity alone — !important is the
   only override short of matching the ID, which would tie this stylesheet to
   Divi's markup. */
.roa-lc ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.roa-lc ul > li {
	margin: 0;
	padding-left: 0;
	list-style: none !important;
}

.roa-lc ul > li::marker {
	content: none;
}

/* Only the first few years are shown; the rest are behind the toggle. Scoped to
   .is-live so that without JavaScript — where the toggle cannot work — the full
   list stays visible rather than being unreachable, and to the years facet so
   the topic list, which is seven entries and has no toggle, is not cut off at
   five with no way to reach the rest. */
.roa-lc.is-live .roa-lc__facet--years .roa-lc__checklist:not(.is-expanded) > li:nth-child(n+6) {
	display: none;
}

.roa-lc__more {
	margin-top: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	color: #01225e;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.roa-lc:not(.is-live) .roa-lc__more {
	display: none;
}

.roa-lc__checklist {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Only the year list is capped. Expanded it runs to twenty-odd entries and would
   push the rest of the rail off the screen, so it scrolls; the topic list is
   seven headings shown whole, and the same cap clipped the last of them mid-word
   with no toggle to reveal it. */
.roa-lc__facet--years .roa-lc__checklist {
	max-height: 24rem;
	overflow-y: auto;
}

.roa-lc__checklist label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	cursor: pointer;
}

/* The topic terms are long, slash-joined headings — "USERRA/Employment/
   Reemployment" is one unbroken word wider than the rail. min-width lets the
   flex item shrink below its content at all (auto, the default, refuses to),
   and overflow-wrap gives it somewhere to break; without both, the label ran
   past the edge of the rail and shoved its count out of sight. */
.roa-lc__checklist label span {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
}

/* The count is the one part that must not be squeezed: it is three characters
   and the whole point of the row. */
.roa-lc__count {
	flex: none;
}

.roa-lc__count {
	color: var(--roa-lc-muted);
	font-style: normal;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.roa-lc__actions {
	display: flex;
	gap: 0.5rem;
}

/* The apply button is the no-JS path; with JS the facets submit themselves. */
.roa-lc.is-live .roa-lc__apply {
	display: none;
}

.roa-lc__apply,
.roa-lc__reset {
	padding: 0.5rem 1rem;
	border: 1px solid var(--roa-lc-border);
	background: #fff;
	cursor: pointer;
}

.roa-lc__summary {
	margin: 0 0 0.75rem;
	color: var(--roa-lc-muted);
	font-size: 0.9rem;
}

.roa-lc__list {
	border-top: 1px solid var(--roa-lc-border);
}

.roa-lc__item {
	display: grid;
	/* Divi gives content list items a bottom margin; the row border is the
	   separator here. */
	margin: 0;
	grid-template-columns: 5.5rem 1fr;
	/* Not a plain `gap`: the description is a second row, and a row gap would
	   float it away from the title it belongs to. */
	column-gap: 1rem;
	row-gap: 0;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--roa-lc-border);
}

/* An article followed by its appendix, or an appendix followed by another:
   the rule between them is dropped so the group reads as one entry. Set on the
   row ABOVE the appendix, since the separator is a bottom border. */
.roa-lc__item--grouped {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Closes the gap the removed border left, so the pair sits together rather
   than looking like a row with a hole under it. */
.roa-lc__item--appendix {
	padding-top: 0.25rem;
}

.roa-lc__number {
	color: var(--roa-lc-muted);
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

/* Second row of the item grid, held in the title's column rather than the
   number's, so it reads as a continuation of the title. */
.roa-lc__description {
	grid-column: 2;
	color: var(--roa-lc-muted);
	font-size: 0.9rem;
	/* Sits directly under the title: the pair reads as one entry, and the row
	   border below is what separates it from the next. */
	margin-top: 0;
	line-height: 1.35;
}

.roa-lc__description p {
	margin: 0;
}

.roa-lc__description p + p {
	margin-top: 0.4rem;
}


.roa-lc__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 1.5rem;
	margin-bottom: 0;
}

.roa-lc__pagination .page-numbers {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--roa-lc-border);
}

.roa-lc__pagination .page-numbers.current {
	background: #f0f0f0;
	font-weight: 600;
}

@media (max-width: 900px) {
	.roa-lc__layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Stacked, the filters belong above what they filter. */
	.roa-lc__rail {
		position: static;
		order: -1;
	}

	.roa-lc__checklist {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4rem 1.25rem;
		max-height: none;
	}

	.roa-lc__checklist label span {
		flex: 0 1 auto;
	}
}

@media (max-width: 640px) {
	.roa-lc__item {
		grid-template-columns: 4.5rem 1fr;
	}
}