/**
 * NHR JobAdder Feed — listing styles.
 *
 * Lightweight, theme-agnostic. Designed to look reasonable on OceanWP /
 * Elementor out of the box, with all selectors overridable via the
 * `custom_css_class` admin setting.
 *
 * No CSS framework dependency. Uses CSS Grid for the card layout (supported
 * everywhere we care about).
 */

/* ----- Wrapper ----- */
.nhr-jobs-container {
	margin: 2em 0;
	font-family: inherit;
	/* NO `font-size` declaration here. Themes like OceanWP commonly use the
	   `html { font-size: 62.5% }` trick so that `1rem` equals 10px (lets
	   designers think in pixels via .x rem). That broke our previous attempt
	   to anchor at `1rem`. Inheriting from the page's body lets the host
	   theme control text size, which is the right behaviour for a plugin
	   that sits inside someone else's design system.
	   All proportional sizing inside this container uses `em` (relative to
	   inherited body size) — NOT `rem` (relative to the 10px root). */
	line-height: 1.55;
}

/* ----- Stale-data notice ----- */
.nhr-jobs-notice {
	padding: 0.75em 1em;
	margin-bottom: 1.5em;
	background: #fff8e1;
	border-left: 4px solid #f9a825;
	font-size: 0.9em;
	border-radius: 0.25em;
}

/* ----- Filter bar ----- */
.nhr-jobs-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center; /* center because labels are screen-reader-only — no visible labels to align to */
	margin-bottom: 1.5em;
	padding: 1em;
	background: #f7f9fc;
	border-radius: 0.5em;
}

.nhr-jobs-filter {
	flex: 1 1 180px;
	min-width: 0;
}

.nhr-jobs-filter--search {
	flex: 2 1 260px;
}

/*
 * Shared shape for both the search input and the filter selects.
 * `line-height: 1.5` + identical padding gets them to the same visible
 * height — without an explicit line-height the browser uses its own
 * default for each control type and the search input ends up taller
 * than the selects.
 */
.nhr-jobs-search,
.nhr-jobs-select {
	width: 100%;
	padding: 0.6em 0.9em;
	border: 1px solid #cfd6e0;
	border-radius: 6px;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.5;
	background: #fff;
	color: #1f2937;
	box-sizing: border-box;
	height: auto; /* override any theme-imposed fixed height on form controls */
	margin: 0;
}

/*
 * `<select>` chrome is browser-native by default — the dropdown arrow is
 * drawn outside our padding box and the control is given a minimum height
 * the OS thinks is right. That makes our selects look squatter than the
 * search input even with identical CSS. `appearance: none` removes the
 * native styling entirely so the select can be sized exactly like an
 * input; we then paint our own chevron as a background SVG.
 */
.nhr-jobs-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.4em; /* space for the chevron */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 0.75em auto;
	/* Remove the default IE/Edge dropdown arrow. */
	-ms-expand: none;
}

.nhr-jobs-select::-ms-expand {
	display: none;
}

/* Disabled selects (used when the filter dimension has no options yet)
   should look softer but still match the search input's height. */
.nhr-jobs-select:disabled {
	background-color: #f8fafc;
	color: #94a3b8;
	cursor: not-allowed;
	opacity: 1; /* override Chrome's default 0.7 opacity for a cleaner look */
}

.nhr-jobs-search:focus,
.nhr-jobs-select:focus {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
	border-color: #2271b1;
}

.nhr-jobs-reset {
	background: transparent;
	border: 1px solid transparent;
	color: #475569;
	cursor: pointer;
	padding: 0.6em 0.85em;
	text-decoration: underline;
	font-size: inherit;
	font-family: inherit;
}

.nhr-jobs-reset:hover {
	color: #0f172a;
}

.nhr-jobs-result-count {
	flex: 1 1 100%;
	font-size: 0.95em;
	color: #555;
	padding-top: 0.5em;
}

/* ----- Listing grid ----- */
.nhr-jobs-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25em;
}

.nhr-job-card {
	padding: 1.25em;
	border: 1px solid #e2e8f0;
	border-radius: 0.5em;
	background: #fff;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
	display: flex;
	flex-direction: column;
}

.nhr-job-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	border-color: #cbd5e1;
}

/* Cards hidden by pagination or filtering. */
.nhr-job-card[data-hidden-paged="1"],
.nhr-job-card[data-hidden-filter="1"] {
	display: none;
}

.nhr-job-title {
	margin: 0 0 0.5em 0;
	font-size: 1.25em;
	line-height: 1.3;
	font-weight: 600;
}

.nhr-job-title a {
	color: #1d4ed8;
	text-decoration: none;
}

.nhr-job-title a:hover {
	text-decoration: underline;
}

.nhr-job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 0.75em;
	font-size: 0.875em;
}

.nhr-job-meta__item {
	background: #f1f5f9;
	color: #475569;
	padding: 0.15em 0.6em;
	border-radius: 9999px;
	white-space: nowrap;
}

.nhr-job-summary {
	margin: 0 0 1em 0;
	color: #475569;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nhr-job-cta {
	margin-top: auto;
	align-self: flex-start;
	background: #2271b1;
	color: #fff;
	padding: 0.6em 1.1em;
	border: none;
	border-radius: 6px;
	text-decoration: none;
	font-size: inherit;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.nhr-job-cta:hover,
.nhr-job-cta:focus {
	background: #1e5a8a;
	color: #fff;
	text-decoration: none;
}

/* ----- Load more ----- */
.nhr-jobs-load-more {
	display: block;
	margin: 1.5em auto 0 auto;
	background: transparent;
	border: 1px solid #cfd6e0;
	padding: 0.7em 1.75em;
	border-radius: 9999px;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
	color: #1f2937;
}

.nhr-jobs-load-more:hover {
	background: #f7f9fc;
	border-color: #94a3b8;
}

/* ----- Empty states ----- */
.nhr-jobs-empty,
.nhr-jobs-empty-filtered {
	padding: 2em 1.25em;
	text-align: center;
	background: #f9fafb;
	border-radius: 8px;
	color: #475569;
	line-height: 1.55;
}

.nhr-jobs-reset-link {
	background: none;
	border: none;
	color: #2271b1;
	text-decoration: underline;
	cursor: pointer;
	font-size: inherit;
	padding: 0;
}

/* ----- Last-updated indicator ----- */
.nhr-jobs-last-updated {
	margin-top: 1em;
	font-size: 0.875em;
	color: #94a3b8;
	text-align: right;
}

/* ----- Mobile ----- */
@media (max-width: 600px) {
	.nhr-jobs-filters {
		flex-direction: column;
		align-items: stretch;
	}
	.nhr-jobs-filter {
		flex-basis: auto;
	}
	.nhr-jobs-list {
		grid-template-columns: 1fr;
	}
}

/* ----- Job-details modal ----- */
/* Lock background scroll while the dialog is open. */
body.nhr-jobs-modal-open {
	overflow: hidden;
}

.nhr-job-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}

.nhr-job-modal[hidden] {
	display: none;
}

.nhr-job-modal__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(15, 23, 42, 0.55);
}

.nhr-job-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 3em);
	padding: 1.75em;
	background: #fff;
	border-radius: 0.5em;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.nhr-job-modal__close {
	position: absolute;
	top: 0.4em;
	right: 0.4em;
	width: 1.8em;
	height: 1.8em;
	padding: 0;
	line-height: 1;
	font-size: 1.5em;
	border: none;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	border-radius: 6px;
}

.nhr-job-modal__close:hover,
.nhr-job-modal__close:focus {
	background: #f1f5f9;
	color: #0f172a;
}

.nhr-job-modal__title {
	margin: 0 1.6em 0.5em 0;
	font-size: 1.4em;
	line-height: 1.3;
	font-weight: 600;
	color: #0f172a;
}

.nhr-job-modal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1em;
	font-size: 0.875em;
}

.nhr-job-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	color: #334155;
	line-height: 1.6;
	-webkit-overflow-scrolling: touch;
}

.nhr-job-modal__body img {
	max-width: 100%;
	height: auto;
}

.nhr-job-modal__body h1,
.nhr-job-modal__body h2,
.nhr-job-modal__body h3,
.nhr-job-modal__body h4 {
	line-height: 1.3;
}

.nhr-job-modal__body ul,
.nhr-job-modal__body ol {
	padding-left: 1.4em;
}

.nhr-job-modal__apply {
	flex: 0 0 auto;
	margin-top: 1.25em;
	align-self: flex-start;
}

.nhr-job-modal__apply[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.nhr-job-modal {
		padding: 0;
	}
	.nhr-job-modal__dialog {
		max-width: none;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}
}

/* ----- Screen-reader-only utility (WP standard, included in case theme strips it) ----- */
.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;
}