/**
 * Recruit 360 Careers — front-end styles.
 *
 * `--rc360-accent` is set inline per-site by Render::accent_css() (wp_head),
 * driven by the Recruit 360 → Settings accent colour option; the fallback
 * value here only covers the (should-never-happen) case of this stylesheet
 * loading before that inline style. Kept deliberately theme-agnostic: no
 * assumptions about the active theme's fonts, colours or container widths
 * beyond what's set here, so it inherits cleanly (per the Tier A design
 * decision "theme-inheriting").
 */

:root {
	--rc360-accent: #5a6b3f;
}

.rc360-job {
	max-width: 48em;
}

.rc360-job-meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.25em;
	row-gap: 0.5em;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	font-size: 0.95em;
}

.rc360-job-meta li {
	margin: 0;
	padding: 0;
}

.rc360-job-requirements,
.rc360-job-benefits {
	margin: 1.5em 0;
}

.rc360-job-requirements h2,
.rc360-job-benefits h2 {
	font-size: 1.1em;
	margin: 0 0 0.5em;
}

.rc360-apply-wrap {
	margin: 2em 0 0;
}

:where(.rc360-register-cv) {
	margin: 2em 0 0;
}

.rc360-apply {
	display: inline-block;
	padding: 0.75em 1.75em;
	background: var(--rc360-accent);
	color: #fff;
	text-decoration: none;
	border-radius: 0.25em;
	font-weight: 600;
}

/* .rc360-register-cv-link (Render::register_cv(), the dedicated "Register
   your CV" block) renders inside standard core-button markup so a block
   theme styles it as its own button. These rules are the FALLBACK for
   themes with no button styling — wrapped in :where() so their specificity
   is zero and any theme .wp-block-button__link rule wins outright. It
   keeps its own class rather than also carrying .rc360-apply, since that
   class is frontend.js's click-tracking selector (initTrack()) and a
   spontaneous registration has no advert id to track against. */
:where(.rc360-register-cv-link) {
	display: inline-block;
	padding: 0.75em 1.75em;
	background: var(--rc360-accent);
	color: #fff;
	text-decoration: none;
	border-radius: 0.25em;
	font-weight: 600;
}

.rc360-apply:hover,
.rc360-apply:focus {
	filter: brightness(0.92);
}

:where(.rc360-register-cv-link:hover, .rc360-register-cv-link:focus) {
	filter: brightness(0.92);
}

/* Tier A.5: apply embed modal (assets/frontend.js initApplyEmbed()). The
   apply flow opens in a centered dialog over the page — Louis's directive,
   2026-07-21 fix wave, replacing the original insert-below-the-job-content
   iframe. `.rc360-apply-modal` is the fixed full-viewport wrapper (backdrop
   + dialog); `[hidden]` closes it — the !important guards against themes
   that reset the `hidden` attribute's display (a known issue with a few
   older frameworks). */
.rc360-apply-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
}

.rc360-apply-modal[hidden] {
	display: none !important;
}

.rc360-apply-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 20, 20, 0.6);
}

/* max-width:1000px (Louis, 2026-08-19 — was 720px per the original brief; the two-column profile review form needs the room) / max-height:90vh; the dialog otherwise
   shrink-wraps its content (header + iframe + footer) up to that cap. */
.rc360-apply-modal-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1000px;
	max-height: 90vh;
	background: #fff;
	border-radius: 0.5em;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.rc360-apply-modal-header {
	flex: none;
	display: flex;
	justify-content: flex-end;
	padding: 0.5em 0.5em 0;
}

.rc360-apply-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}

.rc360-apply-modal-close:hover,
.rc360-apply-modal-close:focus {
	background: rgba(0, 0, 0, 0.08);
}

/* overflow:hidden — the iframe (not this wrapper) is the one scroll
   container once its content exceeds the available height, so the dialog
   never shows two nested scrollbars. */
.rc360-apply-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

/* width:100%/height:100% fills .rc360-apply-modal-body; the initial
   min-height covers the moment before the first rc360:height message
   arrives, after which frontend.js drives an explicit inline height
   (capped to the dialog's remaining room — beyond that the iframe scrolls
   internally on its own, default `scrolling` behaviour). border:0 since
   the dialog already provides the surrounding chrome. */
.rc360-apply-frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

.rc360-apply-modal-footer {
	flex: none;
	padding: 0.75em 1em 1em;
	border-top: 1px solid #eee;
}

.rc360-apply-fallback {
	margin: 0;
	font-size: 0.9em;
	text-align: center;
}

.rc360-apply-fallback a {
	color: inherit;
}

/* Full-screen below 640px (matches APPLY_MODAL_FULLSCREEN_BREAKPOINT in
   frontend.js) — no backdrop margin, no rounded corners, dialog fills the
   viewport exactly via dvh (falls back to vh-sized max-height above in
   browsers without dvh support). */
@media (max-width: 640px) {

	.rc360-apply-modal {
		padding: 0;
	}

	.rc360-apply-modal-dialog {
		max-width: none;
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

/* ── Listing, search, alerts (Task 7) ────────────────────────────── */

.rc360-listing-filters,
.rc360-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 1em;
}

.rc360-search-input {
	flex: 1 1 16em;
}

/* The Listing's own search label+input are wrapped in this row
   (Render::listing_filters()) purely so frontend.js has a single element
   to hide when a standalone Search block is also on the page — `contents`
   keeps it layout-invisible normally, so the label/input still lay out as
   direct flex items of .rc360-listing-filters exactly as if unwrapped. */
.rc360-listing-search-row {
	display: contents;
}

/* Fix wave (Louis, 2026-07-21): applied by frontend.js, never inline —
   hides the Listing's built-in search row when a standalone Search block
   on the same page is already driving it, so the two don't stack. */
.rc360-listing-search-row.rc360-hidden {
	display: none;
}

.rc360-search-input,
.rc360-select,
.rc360-alerts-email {
	padding: 0.6em 0.85em;
	border: 1px solid #d6d6d6;
	border-radius: 0.25em;
	font: inherit;
}

.rc360-search-btn,
.rc360-alerts-btn {
	padding: 0.6em 1.25em;
	background: var(--rc360-accent);
	color: #fff;
	border: 0;
	border-radius: 0.25em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.rc360-search-btn:hover,
.rc360-search-btn:focus,
.rc360-alerts-btn:hover,
.rc360-alerts-btn:focus {
	filter: brightness(0.92);
}

.rc360-count {
	margin: 0 0 1em;
	font-size: 0.9em;
	opacity: 0.75;
}

.rc360-cards {
	display: grid;
	gap: 1em;
}

.rc360-card[hidden] {
	display: none;
}

.rc360-card {
	position: relative;
	padding: 1.25em;
	border: 1px solid #e2e2e2;
	border-radius: 0.4em;
}

.rc360-card-title {
	margin: 0 0 0.4em;
	font-size: 1.1em;
}

.rc360-card-title a {
	color: inherit;
	text-decoration: none;
}

.rc360-card-title a:hover,
.rc360-card-title a:focus {
	text-decoration: underline;
}

.rc360-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.75em;
	row-gap: 0.35em;
	margin: 0 0 0.4em;
	font-size: 0.92em;
}

.rc360-card-chip {
	padding: 0.15em 0.6em;
	border: 1px solid #d6d6d6;
	border-radius: 1em;
	font-size: 0.85em;
}

.rc360-card-badge {
	position: absolute;
	top: 1em;
	right: 1em;
	padding: 0.15em 0.6em;
	background: var(--rc360-accent);
	color: #fff;
	border-radius: 1em;
	font-size: 0.8em;
	font-weight: 600;
}

.rc360-card-closing {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.rc360-empty {
	opacity: 0.75;
}

/* Listing pagination (GAP-1075) — paginate_links() markup: a run of
   <a class="page-numbers"> with the current page as <span class="current">.
   Deliberately plain so a theme that already styles .page-numbers keeps
   its own look; only the row's own spacing is set here. */
.rc360-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	justify-content: center;
	margin: 1.25em 0 0;
	font-size: 0.9em;
}

.rc360-pagination .page-numbers {
	padding: 0.25em 0.6em;
	border-radius: 0.3em;
}

.rc360-pagination .page-numbers.current {
	background: var(--rc360-accent);
	color: #fff;
	font-weight: 600;
}

.rc360-alerts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
}

.rc360-alerts-msg {
	flex-basis: 100%;
	font-size: 0.9em;
}

.rc360-alerts-msg[data-state="error"] {
	color: #b3261e;
}

/* Task 8: on a successful save, frontend.js replaces the whole <form> with
   one of these — no form left in the DOM to keep styling for. */
.rc360-alerts-success {
	margin: 0;
	font-size: 0.95em;
}

/* ── Placement blocks (demo theme + blocks phase, Task 1) ───────────
   Closing soon / Latest jobs / Browse by industry — compact cards and
   industry pills. `.rc360-cards-compact` narrows the grid's min column
   width relative to the full listing's `.rc360-cards` (which has no
   `grid-template-columns` of its own, so both share the same base rule
   above); the compact variant just tightens the card's own padding and
   font sizes since these blocks are meant to sit several-up in a smaller
   footprint than the full listing. */
.rc360-cards-compact {
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

.rc360-card-compact {
	padding: 1em;
	font-size: 0.95em;
}

.rc360-card-compact .rc360-card-title {
	font-size: 1em;
}

.rc360-card-urgency {
	margin: 0;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--rc360-accent);
}

.rc360-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

.rc360-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.9em;
	border: 1px solid #d6d6d6;
	border-radius: 2em;
	color: inherit;
	text-decoration: none;
	font-size: 0.9em;
}

.rc360-pill:hover,
.rc360-pill:focus {
	border-color: var(--rc360-accent);
	color: var(--rc360-accent);
}

.rc360-pill-count {
	opacity: 0.65;
}

/* "Already applied?" status link (2026-08-01) — quiet, under the listing. */
.rc360-status-wrap {
	margin: 18px 0 0;
	text-align: center;
}
.rc360-status-link {
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.75;
}
.rc360-status-link:hover {
	opacity: 1;
}

/* WPJM bridge: the apply CTA planted in the company box's top-right (the
   slot hand-posted listings burn on a circular "Website" link). The box is
   position:relative in WPJM's own stylesheet. */
.company .rc360-company-apply {
	position: absolute;
	right: 1.25em;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* When the apply trigger wears WPJM's own .application_button class (the
   bridge swap), shape and weight follow the board's native buttons —
   bold, square, tight — instead of our generic pill. Measured against
   WPJM's stock button styling; the accent setting still paints it. */
.rc360-apply.application_button {
	font-weight: 700;
	border-radius: 0;
	padding: 10px 18px;
	border: 1px solid var(--rc360-accent);
}

/* WPJM bridge: section labels ("Description:", "Requirements:") hug their
   content. A label followed by a <ul> already sits tight (themes zero a
   list's top margin), but one followed by a <p> inherited a full paragraph
   gap — the same label spaced two different ways on one page. Both margin
   and padding models covered (Divi spaces paragraphs with padding). */
.rc360-board-label {
	margin-bottom: 0;
	padding-bottom: 0;
}
.rc360-board-label + p {
	margin-top: 0;
	padding-top: 0;
}

/* …and the mirror image: a label FOLLOWING a list needs the gap themes give
   paragraphs but not lists (Requirements' <ul> ran straight into
   "Benefits:"). Only the after-a-list case — after a paragraph the theme's
   own paragraph spacing already provides it. */
ul + .rc360-board-label,
ol + .rc360-board-label {
	margin-top: 1.4em;
}