/**
 * Tellent Jobs
 *
 * Deliberately restrained: inherits the theme's font and colors so the list
 * looks native. Override any of the custom properties below in your theme.
 */

.tellent-jobs {
	--tellent-line: rgba( 128, 128, 128, .28 );
	--tellent-muted: rgba( 128, 128, 128, 1 );
	--tellent-radius: 12px;
	--tellent-accent: currentColor;
	--tellent-button-bg: #111111;
	--tellent-button-fg: #ffffff;
	--tellent-card-min: 20rem;
}

.tellent-jobs * {
	box-sizing: border-box;
}

/* ------------------------------ card grid ------------------------------ */

.tellent-jobs__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --tellent-card-min ), 1fr ) );
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tellent-jobs__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .9rem;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var( --tellent-line );
	border-radius: 4px;
	list-style: none;
}

.tellent-jobs__card-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.35;
}

.tellent-jobs__card-title a {
	color: inherit;
	text-decoration: none;
}

.tellent-jobs__card-title a:hover,
.tellent-jobs__card-title a:focus-visible {
	text-decoration: underline;
}

.tellent-jobs__card-meta {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.tellent-jobs__fact {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .95rem;
	line-height: 1.4;
}

.tellent-jobs__icon {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	opacity: .85;
}

/* Card button sits at the bottom however tall the titles run. */
.tellent-jobs__card > .tellent-jobs__button {
	margin-top: auto;
}

/* ------------------------------- listing ------------------------------- */

.tellent-jobs__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tellent-jobs__item {
	margin: 0 0 .6rem;
	padding: 0;
	list-style: none;
}

.tellent-jobs__link {
	display: block;
	padding: 1.1rem 1.25rem;
	border: 1px solid var( --tellent-line );
	border-radius: var( --tellent-radius );
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.tellent-jobs__link:hover,
.tellent-jobs__link:focus-visible {
	border-color: var( --tellent-accent );
	transform: translateY( -1px );
}

.tellent-jobs__title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.tellent-jobs__meta {
	display: block;
	margin-top: .2rem;
	color: var( --tellent-muted );
	font-size: .9em;
}

/* ------------------------------- controls ------------------------------- */

.tellent-jobs__search {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	max-width: 32rem;
	margin: 0 0 1rem;
}

.tellent-jobs__search input[type="search"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .65rem .9rem;
	border: 1px solid var( --tellent-line );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.2;
}

.tellent-jobs__search input[type="search"]:focus-visible {
	border-color: var( --tellent-button-bg );
	outline: 2px solid var( --tellent-button-bg );
	outline-offset: -2px;
}

/* Match the card call to action, so the two read as one system. */
.tellent-jobs__search button {
	flex: none;
	padding: .65rem 1.5rem;
	border: 1px solid var( --tellent-button-bg );
	border-radius: 4px;
	background: var( --tellent-button-bg );
	color: var( --tellent-button-fg );
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.tellent-jobs__search button:hover,
.tellent-jobs__search button:focus-visible {
	opacity: .85;
}

.tellent-jobs__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1.5rem;
}

.tellent-jobs__chip {
	padding: .3rem .75rem;
	border: 1px solid var( --tellent-line );
	border-radius: 999px;
	color: var( --tellent-muted );
	font-size: .85em;
	text-decoration: none;
}

.tellent-jobs__chip[aria-current="true"] {
	border-color: currentColor;
	color: inherit;
	font-weight: 600;
}

/* -------------------------------- detail -------------------------------- */

.tellent-jobs__back {
	margin: 0 0 1rem;
	font-size: .9em;
}

.tellent-jobs__back a {
	color: var( --tellent-muted );
	text-decoration: none;
}

.tellent-jobs__heading {
	margin: 0 0 .75rem;
}

.tellent-jobs__subheading {
	margin: 2rem 0 .5rem;
}

.tellent-jobs__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.tellent-jobs__facts li {
	margin: 0;
	padding: .3rem .75rem;
	border: 1px solid var( --tellent-line );
	border-radius: 999px;
	color: var( --tellent-muted );
	font-size: .85em;
	list-style: none;
}

.tellent-jobs__apply {
	margin: 1.5rem 0;
}

.tellent-jobs__button {
	display: inline-block;
	padding: .7rem 1.4rem;
	border: 1px solid var( --tellent-button-bg );
	border-radius: 4px;
	background: var( --tellent-button-bg );
	color: var( --tellent-button-fg );
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.tellent-jobs__button:hover,
.tellent-jobs__button:focus-visible {
	opacity: .85;
	color: var( --tellent-button-fg );
}

/* --------------------------------- images -------------------------------- */

.tellent-jobs__hero {
	display: block;
	width: 100%;
	height: auto;
	max-height: 22rem;
	margin: 0 0 1.75rem;
	border-radius: var( --tellent-radius );
	object-fit: cover;
}

.tellent-jobs__prose {
	overflow-wrap: break-word;
}

/*
 * Recruitee's editor sets pixel widths on photos, and the uploads are often
 * straight off a camera. Cap both dimensions so a photo illustrates the text
 * instead of dominating it; aspect ratio is preserved by the auto values.
 */
.tellent-jobs__prose img {
	max-width: min( 100%, var( --tellent-prose-image-width, 30rem ) );
	max-height: var( --tellent-prose-image-height, 18rem );
	width: auto;
	height: auto;
	margin: 1.25rem 0;
	border-radius: var( --tellent-radius );
}

.tellent-jobs__prose figure {
	margin: 1.5rem 0;
}

.tellent-jobs__prose figcaption {
	margin-top: .5rem;
	color: var( --tellent-muted );
	font-size: .9em;
}

.tellent-jobs__prose > :first-child {
	margin-top: 0;
}

.tellent-jobs__prose table {
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
	max-width: 100%;
}

.tellent-jobs__prose th,
.tellent-jobs__prose td {
	padding: .4rem .6rem;
	border: 1px solid var( --tellent-line );
}

/* ------------------------------- messages ------------------------------- */

.tellent-jobs__empty {
	padding: 2rem 0;
	color: var( --tellent-muted );
}

.tellent-jobs__notice {
	margin: 0 0 1.5rem;
	padding: .75rem 1rem;
	border: 1px solid var( --tellent-line );
	border-left-width: 3px;
	border-radius: 8px;
	color: var( --tellent-muted );
	font-size: .9em;
}

/* Themes do not all ship this WordPress helper. */
.tellent-jobs .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
	border: 0;
}