/*
 * Minimal, unopinionated defaults. Layout/patterns belong to the theme
 * per the architecture note — this just keeps the block usable
 * unstyled during build/QA.
 */
.fountain-learn-listing *{box-sizing:border-box;}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.fountain-learn-filters {
	/* One vertical gap used between every wrapped line of controls, so
	   spacing never changes across breakpoints. */
	--fl-field-gap: 1.5rem;
	--fl-field-font: 'Open Sans Condensed', sans-serif;
	--fl-field-size: 22px;

	/* One wrapping flex line for every control. Each item has a minimum
	   basis and can grow, so: all five fields plus Search/Reset share one
	   line when there is room, hiding a field (show_locations/show_zip)
	   lets the others grow into its space, and when things get tight items
	   wrap onto the next line on their own. */
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--fl-field-gap) 0;
	padding: 2em 0;
}

/* The two row wrappers stay in the markup but no longer lay anything out;
   their children are flex items of .fountain-learn-filters directly. */
.fountain-learn-filters__row {
	display: contents;
}

.fountain-learn-filters .col {
	flex: 1 1 13rem;
	min-width: 0;
	padding: 0 1em; /* the 1em gutter between fields */
}

/* ZIP + Radius share one box, so it gets twice the share of free space
   and a wider minimum than a single field. .fl-zipsearch is just the
   sizing/gutter wrapper; .fl-zipbox inside it is the bordered box. */
.fountain-learn-filters .fl-zipsearch {
	flex: 2 1 290px;
	max-width: 290px; /* includes the 1em gutters; other fields absorb the freed space */
}

.fountain-learn-filters .fl-zipbox {
	display: flex;
	align-items: stretch;
	gap: 0.5em;
	border: 1px solid #333;
}

/* ZIP takes the slack; Radius is sized to its content (it only ever holds
   "Radius" or up to "200mi"), so a wide box does not split 50/50 with a
   mostly-empty Radius half. */
.fountain-learn-filters .fl-zipbox input[type="text"] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

.fountain-learn-filters .fl-zipbox .nice-select,
.fountain-learn-filters .fl-zipbox select {
	flex: 0 1 8.5rem;
	width: auto;
	min-width: 0;
}

/* Search / Reset: always on a line of its own below the fields, right-
   aligned, so the fields above get the full width of the row. */
.fountain-learn-filters .col__1 {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
	padding: 0 1em;
}

/* Under 768px every field stacks full width. */
@media (max-width: 767px) {
	.fountain-learn-filters .col,
	.fountain-learn-filters .fl-zipsearch {
		flex: 0 0 100%;
	}

	.fountain-learn-filters .fl-zipsearch {
		max-width: none;
	}
}

/* Every field is a full four-sided 1px #333 box (text inputs here,
   niceSelects below). Bold to match the niceSelect's .current text. */
.fountain-learn-filters input[type="text"],
.fountain-learn-filters input[type="search"] {
	width: 100%;
	border: 1px solid #333;
	border-radius: 0;
	background: transparent;
	padding: 1.2em 0.75em;
	font-family: var(--fl-field-font);
	font-size: var(--fl-field-size);
	font-weight: 700;
	line-height: 1.4;
	color: #2B698B;
}

/* ZIP sits inside the shared .fl-zipbox border, so it drops its own. */
.fountain-learn-filters .fl-zipbox input[type="text"] {
	border: 0;
}

.fountain-learn-filters input::placeholder {
	color: #2B698B;
	font-weight: 700;
	opacity: 1; /* Firefox dims placeholders by default */
}

/*
 * niceSelect hides the real <select> and renders its own markup — this
 * overrides jquery-nice-select's default gray/white styling to match
 * the brand treatment (icims.css: #2B698B label, #333 underline, #9f4078
 * caret). If jQuery/niceSelect fails to load, the underlying <select>
 * remains visible and functional, unstyled by these rules.
 */
/* The native <select> is what shows wherever niceSelect doesn't run (the
   block editor preview, or if the library fails to load). Style it to look
   like the niceSelects: same underline, bold blue text, our triangle caret
   (drawn as a background so it matches), and the same height as the text
   inputs. niceSelect hides this element with an inline style when it does
   run, so none of this affects the live dropdowns. */
.fountain-learn-filters select {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-bottom: 1px solid #333;
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 0h16L8 12z' fill='%239f4078'/%3E%3C/svg%3E") no-repeat right 0.75em center / 16px 12px;
	padding: 1.2em 2.5em 1.2em 0.75em;
	font-family: var(--fl-field-font);
	font-size: var(--fl-field-size);
	font-weight: 700;
	line-height: 1.4;
	color: #2B698B;
}

/* Inside the shared ZIP box the select drops its own underline. */
.fountain-learn-filters .fl-zipbox select {
	border: 0;
}

/* Same padding + line-height as the text inputs above so a niceSelect and
   a text input in the same row are the same height. Right padding leaves
   room for the caret. */
.fountain-learn-filters .nice-select {
	width: 100%;
	float: none;
	border-radius: 0;
	background: transparent;
	padding: 0.5em 2em 0.5em 0.75em;
	font-family: var(--fl-field-font);
	font-size: var(--fl-field-size);
	line-height: 1.4;
	height: auto;
}

/* The same border as the text inputs, in every state. !important because
   the border was not rendering at all on the dev site even with higher
   specificity than the library's own rule — something in the theme's
   niceSelect styling is overriding it with !important itself. */
.fountain-learn-listing .fountain-learn-filters .nice-select,
.fountain-learn-listing .fountain-learn-filters .nice-select:hover,
.fountain-learn-listing .fountain-learn-filters .nice-select:focus,
.fountain-learn-listing .fountain-learn-filters .nice-select.open {
	border: 1px solid #333 !important;
	border-width:0 0 1px 0 !important;
}

/* Radius lives inside the shared .fl-zipbox border, so it drops its own. */
.fountain-learn-listing .fountain-learn-filters .fl-zipbox .nice-select,
.fountain-learn-listing .fountain-learn-filters .fl-zipbox .nice-select:hover,
.fountain-learn-listing .fountain-learn-filters .fl-zipbox .nice-select:focus,
.fountain-learn-listing .fountain-learn-filters .fl-zipbox .nice-select.open {
	border: 0 !important;
}

.fountain-learn-filters .nice-select .current {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #2B698B;
	font-weight: 700;
}
.nice-select.fl-radius .current {
	font-weight: 400;
}
.fountain-learn-filters .nice-select:after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 8px 0 8px;
	border-color: #9f4078 transparent transparent transparent;
	right: 0.75em;
	margin-top: -6px;
	transform-origin: center;
	transform: rotate(0deg);
}

.fountain-learn-filters .nice-select.open:after {
	transform: rotate(180deg);
}

.fountain-learn-filters .nice-select .list {
	border-radius: 0;
	width: 100%;
}

.fountain-learn-filters .nice-select.open .list {
	overflow-y: auto;
	max-height: 260px;
}

.fountain-learn-filters .nice-select .option.selected {
	font-weight: 700;
}

.fountain-learn-filters .nice-select .option:hover,
.fountain-learn-filters .nice-select .option.focus {
	background-color: #E7F2F4; /* exact — from icims.css, matches debug block bg */
}

.fl-search-btn {
	display: inline-block;
	background-color: #9f4078;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	padding: 0.65rem 1.5rem;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

.fl-search-btn:hover,
.fl-search-btn:focus {
	background-color: #84AFC1;
}

.fl-reset {
	color: #2B698B;
}

.fountain-learn-results-heading {
	margin: 0 0 0.5rem;
}

.fountain-learn-debug {
	font: 12px/1.4 monospace;
	background: #E7F2F4; /* exact — from icims.css */
	border: 1px solid #ccd0d4;
	padding: 8px 12px;
	margin-bottom: 16px;
}

/* Loading state: the results fade back and a spinner overlays them. The
   overlay always exists but is invisible/inert until .is-loading is set. */
.fountain-learn-results-wrap {
	position: relative;
}

.fountain-learn-results-wrap.is-loading {
	min-height: 8rem; /* keeps the spinner visible when the list is empty */
}

.fountain-learn-results {
	transition: opacity 0.2s ease;
}

.fountain-learn-results-wrap.is-loading .fountain-learn-results {
	opacity: 0.3;
}

.fountain-learn-throbber {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.fountain-learn-results-wrap.is-loading .fountain-learn-throbber {
	opacity: 1;
	visibility: visible;
	pointer-events: auto; /* swallow clicks on the faded list while loading */
	transition-delay: 0s;
}

/* Sticky so the spinner stays centered in the viewport over a long list. */
.fountain-learn-throbber__spinner {
	position: sticky;
	top: calc(50vh - 35px);
	margin-top: 2rem;
	width: 70px;
	height: 70px;
	background: url("../img/throbber.svg") center / contain no-repeat;
	animation: fountain-learn-spin 1s linear infinite;
}

@keyframes fountain-learn-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fountain-learn-throbber__spinner {
		animation-duration: 4s;
	}
}

.fountain-learn-error {
	/* Not in the reference/icims.css — new element for ZIP-search
	   failures (e.g. an unrecognized ZIP); standard error-red, not a
	   brand color. */
	color: #b3261e;
	padding: 0.5rem 0;
}

.fountain-learn-results-count {
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.fountain-learn-results-nudge {
	color: #9f4078;
	margin: 0 0 1rem;
}

.fountain-learn-results {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fountain-learn-card {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
	border: none;
	border-radius: 0;
}

.fountain-learn-card:nth-child(odd) {
	background-color: #f0f6dd; /* exact — from icims.css */
}

.fountain-learn-card:nth-child(even) {
	background-color: transparent;
}

.fountain-learn-card__body {
	flex: 1 1 auto;
}

.fountain-learn-card__action {
	flex: 0 0 auto;
	align-self: center;
}

/* At 768px and below the View Position button drops under the listing
   instead of sitting beside it. */
@media (max-width: 768px) {
	.fountain-learn-card {
		flex-direction: column;
		align-items: stretch;
	}

	.fountain-learn-card__action {
		align-self: flex-start;
	}
}

.fountain-learn-card h3 {
	margin: 0 0 0.5rem;
}

.fountain-learn-card__location {
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}

.fountain-learn-card__excerpt {
	color: #666;
	margin: 0 0 0.5rem;
}

.fountain-learn-card__brand {
	font-weight: 600;
	margin: 0;
}

.fountain-learn-apply {
	display: inline-block;
	margin-top: 0.75rem;
}

.fountain-learn-view {
	display: inline-block;
	background-color: #9f4078; /* exact — from icims.css */
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	padding: 0.65rem 1.25rem;
	border-radius: 2px;
	text-decoration: none;
}

.fountain-learn-view:hover,
.fountain-learn-view:focus {
	background-color: #84AFC1; /* exact — from icims.css */
}

.fountain-learn-load-more {
	margin: 1.5rem auto 0;
	background-color: #9f4078;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	padding: 0.65rem 1.5rem;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

.fountain-learn-load-more:hover,
.fountain-learn-load-more:focus {
	background-color: #84AFC1;
}

.fountain-learn-load-more:not([hidden]) {
	display: block;
}

.fountain-learn-position__meta p {
	margin: 0 0 0.5rem;
}

.fountain-learn-apply--large {
	display: inline-block;
	background-color: #9f4078; /* exact — from icims.css, matches .fountain-learn-view */
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	padding: 0.85rem 1.75rem;
	border-radius: 2px;
	text-decoration: none;
	margin-top: 1rem;
}

.fountain-learn-apply--large:hover,
.fountain-learn-apply--large:focus {
	background-color: #84AFC1; /* exact — from icims.css */
}

.fountain-learn-position__body h1,
.fountain-learn-position__body h2,
.fountain-learn-position__body h3 {
	color: #2b6386; /* approximate — no brand blue defined elsewhere in this file yet; sample the real value from brand assets */
	margin-top: 1.5rem;
}

.fountain-learn-position__body ul {
	padding-left: 1.5rem;
}

/* Button colour guard. Theme link/button rules (a, a:visited, a:hover,
   button, button:hover ...) can out-rank the single-class rules above, so
   restate the colours with higher specificity — scoped to the blocks,
   covering the :link/:visited/:active states, and !important because
   this theme has already been seen overriding border rules with
   !important. Text is always #ffffff; background #9f4078, #84AFC1 on
   hover/focus. */
.fountain-learn-listing .fountain-learn-view,
.fountain-learn-listing .fountain-learn-view:link,
.fountain-learn-listing .fountain-learn-view:visited,
.fountain-learn-listing .fountain-learn-view:active,
.fountain-learn-listing .fl-search-btn,
.fountain-learn-listing .fl-search-btn:active,
.fountain-learn-listing .fountain-learn-load-more,
.fountain-learn-listing .fountain-learn-load-more:active,
.fountain-learn-position .fountain-learn-apply--large,
.fountain-learn-position .fountain-learn-apply--large:link,
.fountain-learn-position .fountain-learn-apply--large:visited,
.fountain-learn-position .fountain-learn-apply--large:active {
	color: #ffffff !important;
	background-color: #9f4078 !important;
	text-decoration: none;
}

.fountain-learn-listing .fountain-learn-view:hover,
.fountain-learn-listing .fountain-learn-view:focus,
.fountain-learn-listing .fl-search-btn:hover,
.fountain-learn-listing .fl-search-btn:focus,
.fountain-learn-listing .fountain-learn-load-more:hover,
.fountain-learn-listing .fountain-learn-load-more:focus,
.fountain-learn-position .fountain-learn-apply--large:hover,
.fountain-learn-position .fountain-learn-apply--large:focus {
	color: #ffffff !important;
	background-color: #84AFC1 !important;
	text-decoration: none;
}