/*
Theme Name: Remote Jobs Demo
Theme URI: https://example.com/
Author: Remote Jobs
Description: A modern block theme built to demo the Remote Jobs plugin: job listings, job detail sidebar, employer registration and job submission.
Requires at least: 6.6
Tested up to: 7.2
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: remote-jobs-demo
Tags: block-patterns, full-site-editing, custom-colors, custom-logo, custom-menu
*/

/* ----------------------------------------------------------------------
 * Fonts (self-hosted)
 * -------------------------------------------------------------------- */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('assets/fonts/figtree-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url('assets/fonts/figtree-variable-italic.woff2') format('woff2');
}

/* ----------------------------------------------------------------------
 * Extended color ramp (implementation detail, not exposed in the editor
 * palette — theme.json carries the slots the plugin's own CSS reads via
 * var(--wp--preset--color--*); these carry the finer tonal steps used by
 * this stylesheet's own overrides below).
 * -------------------------------------------------------------------- */

:root {
	--rjd-neutral-100: #f6f8f7;
	--rjd-neutral-200: #eef2f0;
	--rjd-neutral-300: #e4e9e7;
	--rjd-neutral-400: #c9d2ce;
	--rjd-neutral-500: #9aa6a1;
	--rjd-neutral-600: #76837e;
	--rjd-neutral-700: #5b6763;
	--rjd-neutral-800: #3c4743;
	--rjd-neutral-900: #1d2724;

	--rjd-accent-50: #f2fbf8;
	--rjd-accent-100: #e4f6ef;
	--rjd-accent-200: #c6ecdf;
	--rjd-accent-300: #98dcc5;
	--rjd-accent-400: #56c3a2;
	--rjd-accent-500: #1aa17f;
	--rjd-accent-600: #138568;
	--rjd-accent-700: #0e6a53;
	--rjd-accent-800: #0a4f3e;
	--rjd-accent-900: #06342a;

	--rjd-shadow-sm: 0 1px 3px rgba(15, 26, 23, 0.08);
	--rjd-shadow-md: 0 6px 20px rgba(15, 26, 23, 0.06), 0 1px 3px rgba(15, 26, 23, 0.05);
	--rjd-shadow-lg: 0 20px 50px rgba(15, 26, 23, 0.12), 0 4px 10px rgba(15, 26, 23, 0.06);
}

/* ----------------------------------------------------------------------
 * Base
 * -------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

header.wp-block-template-part,
footer.wp-block-template-part {
	margin-block-start: 0;
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* Text inputs and selects round generously everywhere — buttons are pill
 * shaped via theme.json instead, so they're deliberately excluded here. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="file"],
select,
textarea {
	border-radius: 12px !important;
}

/* ----------------------------------------------------------------------
 * Site header
 * -------------------------------------------------------------------- */

.rjd-header {
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
}

.rjd-header .wp-block-navigation a {
	text-decoration: none;
	font-weight: 500;
}

.rjd-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

.rjd-header .wp-block-navigation__responsive-container-open svg,
.rjd-header .wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
}

.rjd-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.rjd-logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
}

.rjd-logo-text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}

/* ----------------------------------------------------------------------
 * Site footer
 * -------------------------------------------------------------------- */

.rjd-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--rjd-neutral-400);
}

.rjd-footer a {
	color: var(--rjd-neutral-300);
}

.rjd-footer a:hover {
	color: #fff;
}

.rjd-footer .wp-block-navigation a {
	text-decoration: none;
	font-weight: 500;
}

.rjd-footer .rjd-logo-text {
	color: #fff;
}

/* ----------------------------------------------------------------------
 * Homepage sections
 * -------------------------------------------------------------------- */

.rjd-hero {
	padding: 4rem 0 2.5rem;
}

.rjd-hero-heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0.5rem 0 1rem;
	max-width: 18ch;
}

.rjd-hero-subtext {
	font-size: var(--wp--preset--font-size--large);
	color: var(--rjd-neutral-700);
	max-width: 46ch;
	margin: 0 0 2rem;
}

.rjd-hero-search {
	display: flex;
	gap: 10px;
	max-width: 600px;
	margin: 0 0 1.5rem;
}

.rjd-hero-search-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.rjd-hero-search-field svg {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--rjd-neutral-600);
	pointer-events: none;
}

.rjd-hero-search-field input {
	width: 100%;
	height: 54px;
	padding: 0 20px 0 50px;
	border-radius: 999px !important;
	border: 1px solid var(--wp--preset--color--contrast-2);
	background: var(--rjd-neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	box-sizing: border-box;
}

.rjd-hero-search-field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px var(--rjd-accent-200);
}

.rjd-hero-search button {
	flex: none;
	height: 54px;
}

.rjd-hero-skills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.rjd-hero-skills-label {
	font-size: 13px;
	color: var(--rjd-neutral-600);
	margin-right: 4px;
}

.rjd-hero-skill-chip {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	padding: 7px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rjd-hero-skill-chip:hover {
	border-color: var(--rjd-accent-300);
	background: var(--rjd-accent-50);
	color: var(--rjd-accent-800);
}

@media (max-width: 600px) {
	.rjd-hero-search {
		flex-direction: column;
		max-width: 100%;
	}

	.rjd-hero-search button {
		width: 100%;
	}
}

.rjd-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rjd-accent-700);
}

.rjd-stats {
	border-top: 1px solid var(--wp--preset--color--contrast-2);
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
}

.rjd-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	line-height: 1.1;
}

.rjd-stat-label {
	color: var(--rjd-neutral-700);
	font-size: var(--wp--preset--font-size--small);
}

/* Category chip row on the homepage. */
.rjd-category-chips .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 14px;
	padding: 8px 16px;
}

.rjd-category-chips .wp-block-button__link:hover {
	border-color: var(--rjd-accent-300);
	background: var(--rjd-accent-50);
	color: var(--rjd-accent-800);
}

.rjd-cta {
	background-color: var(--wp--preset--color--contrast);
	color: #fff;
	border-radius: 28px;
}

.rjd-cta-text {
	flex: 1 1 320px;
}

.rjd-cta h2 {
	color: #fff;
	margin: 0.25rem 0 0.75rem;
}

.rjd-cta-kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rjd-accent-400);
}

.rjd-cta p {
	color: var(--rjd-neutral-300);
}

.rjd-cta .wp-block-button__link {
	background-color: #fff;
	color: var(--wp--preset--color--contrast);
}

.rjd-cta .wp-block-button__link:hover {
	background-color: var(--rjd-neutral-200);
}

.rjd-cta-proof {
	flex: 0 1 280px;
	padding-top: 1rem;
	border-top: 1px solid var(--rjd-neutral-800);
}

.rjd-cta-avatars {
	display: flex;
	margin-bottom: 0.75rem;
}

.rjd-cta-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 15px;
	background: var(--rjd-neutral-700);
	color: #fff;
	border: 2px solid var(--wp--preset--color--contrast);
	margin-left: -10px;
}

.rjd-cta-avatar:first-child {
	margin-left: 0;
}

.rjd-cta-avatar.is-accent {
	background: var(--wp--preset--color--accent);
}

.rjd-cta-proof-text {
	margin: 0;
	font-size: 13px;
	color: var(--rjd-neutral-400) !important;
}

@media (max-width: 600px) {
	.rjd-cta-proof {
		border-top: none;
		padding-top: 1.5rem;
	}
}

/* ----------------------------------------------------------------------
 * Single job template
 * -------------------------------------------------------------------- */

.rjd-job-header {
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
}

.rjd-job-meta-pill {
	display: inline-flex;
}

.rjd-job-meta-pill a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background-color: var(--rjd-neutral-200);
	color: var(--rjd-neutral-800);
	border-radius: 999px;
	padding: 0.35em 0.9em;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.rjd-job-meta-pill a:hover {
	background-color: var(--rjd-accent-100);
	color: var(--rjd-accent-800);
}

.rjd-job-content {
	max-width: 65ch;
}

/* ----------------------------------------------------------------------
 * For Employers page
 * -------------------------------------------------------------------- */

.rjd-steps .wp-block-group {
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 20px;
}

.rjd-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	flex-shrink: 0;
}

.rjd-notice {
	border: 1px solid var(--rjd-accent-200);
	background-color: var(--rjd-accent-50);
	border-radius: 16px;
}

.rjd-why-us .wp-block-group {
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 20px;
}

.rjd-why-us-icon {
	font-size: 1.5rem;
	line-height: 1;
}

/* ----------------------------------------------------------------------
 * Submit a Job page: account gate (login form + register link)
 * -------------------------------------------------------------------- */

.rjd-account-gate {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 24px;
	padding: 2rem;
}

.rjd-account-gate-login {
	flex: 1 1 280px;
}

.rjd-account-gate-login h2 {
	margin-top: 0;
}

.rjd-account-gate-login form p {
	margin: 0 0 1rem;
}

.rjd-account-gate-login label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 14px;
	color: var(--rjd-neutral-700);
}

.rjd-account-gate-login .input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
}

.rjd-account-gate-login .login-submit .button {
	display: inline-flex;
	align-items: center;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	padding: 0.7rem 1.4rem;
	cursor: pointer;
}

.rjd-account-gate-login .login-submit .button:hover {
	background: var(--rjd-accent-600);
}

.rjd-account-gate-login .login-remember {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--rjd-neutral-700);
}

.rjd-account-gate-login .login-remember input {
	margin-right: 0.5em;
}

.rjd-account-gate-register {
	flex: 0 0 220px;
	align-self: center;
	padding-left: 2rem;
	border-left: 1px solid var(--wp--preset--color--contrast-2);
}

.rjd-account-gate-register p {
	margin: 0 0 0.75rem;
	color: var(--rjd-neutral-700);
}

.rjd-account-gate-register .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.rjd-account-gate-in {
	border: 1px solid var(--rjd-accent-200);
	background-color: var(--rjd-accent-50);
	border-radius: 16px;
	padding: 1.25rem 1.5rem;
}

.rjd-account-gate-in p {
	margin: 0;
}

@media (max-width: 640px) {
	.rjd-account-gate-register {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--contrast-2);
		padding-left: 0;
		padding-top: 1.5rem;
	}
}

/* Hide the Submit Job block's own "please log in" fallback text for
 * logged-out visitors — the account gate above already covers that.
 * (This early-return path skips the block wrapper div entirely, so it
 * has to be targeted by its own notice class rather than the usual
 * .wp-block-remjobs-submit-job wrapper.) */
body:not(.logged-in) .remjobs-notice.remjobs-error {
	display: none;
}

/* ============================================================
 * Remote Jobs plugin block overrides — restyled to pick up this
 * theme's font/color tokens instead of the plugin's own defaults.
 * ============================================================ */

/* — Job List block: container & header — */

.job-listings-container {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	/* Align the job list to the same content width as the rest of the
	 * page (heading, intro) instead of spanning the full viewport. */
	max-width: var(--wp--style--global--content-size) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}

.job-count-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.job-count-stats {
	color: var(--rjd-neutral-700) !important;
}

.view-all-link {
	color: var(--rjd-accent-700) !important;
	font-weight: 600 !important;
}

/* Layout toggle: pill track, circular active state */
.layout-toggle {
	display: flex;
	gap: 2px;
	padding: 4px;
	background: var(--rjd-neutral-200);
	border-radius: 999px;
}

.layout-toggle .layout-button {
	border: none !important;
	border-radius: 50% !important;
	width: 32px;
	height: 32px;
	background: transparent !important;
	color: var(--rjd-neutral-600);
}

.layout-toggle .layout-button svg {
	stroke: currentColor !important;
}

.layout-toggle .layout-button.active {
	background: #fff !important;
	color: var(--rjd-accent-700);
	box-shadow: var(--rjd-shadow-sm);
}

/* Filters row: search spans the full row, the rest sit in a grid below it
 * (previously a loose flex row that wrapped unevenly). */
.job-filters .filter-row {
	display: grid !important;
	flex-wrap: unset !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 12px !important;
	align-items: center !important;
}

.job-filters .filter-row .search-input {
	grid-column: 1 / -1 !important;
}

.job-filters .filter-row .clear-filters-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	.job-filters .filter-row {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 480px) {
	.job-filters .filter-row {
		grid-template-columns: 1fr !important;
	}
}

/* Native <select>/<input> intrinsic sizing can exceed a flex item's
 * constrained width (most visible on narrow viewports) — force them to
 * respect the flex container instead. */
.search-input,
.category-select,
.location-select,
.skills-select {
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.search-input {
	background: var(--rjd-neutral-100) !important;
	border: 1px solid var(--wp--preset--color--contrast-2) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	padding: 10px 18px 10px 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376837e' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round' width='16' height='16'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 14px center !important;
}

.search-input:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 2px var(--rjd-accent-200) !important;
}

.category-select,
.location-select,
.skills-select {
	background-color: var(--rjd-neutral-100) !important;
	border: 1px solid var(--wp--preset--color--contrast-2) !important;
	border-radius: 999px !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	padding: 10px 32px 10px 18px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376837e' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round' width='14' height='14'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
}

.clear-filters-link {
	color: var(--rjd-accent-700) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.clear-filters-link:hover {
	text-decoration: underline !important;
}

/* — Job cards (grid + list) — */

.job-listings-grid,
.job-listings-list {
	padding: 0 !important;
}

.job-card,
.job-row {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--contrast-2) !important;
	border-radius: 24px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.job-card:hover,
.job-row:hover {
	border-color: var(--rjd-accent-300) !important;
	box-shadow: var(--rjd-shadow-md) !important;
	transform: none !important;
}

.job-card.premium,
.job-row.premium {
	background: var(--rjd-accent-50) !important;
	border-color: var(--rjd-accent-200) !important;
}

/* Hide the plugin's own text-only ::before ribbon — replaced by the real
 * .premium-badge element rendered inline next to the job title. */
.job-card.premium::before,
.job-row.premium::before {
	content: none !important;
	display: none !important;
}

.company-logo-placeholder {
	background-color: var(--rjd-accent-100) !important;
	color: var(--rjd-accent-800) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	border-radius: 50% !important;
}

.company-logo-placeholder.hue-1 {
	background-color: var(--rjd-neutral-200) !important;
	color: var(--rjd-neutral-900) !important;
}

.company-logo-placeholder.hue-2 {
	background-color: var(--rjd-neutral-900) !important;
	color: #fff !important;
}

.company-logo {
	border-radius: 50% !important;
	overflow: hidden;
}

.job-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.job-title,
.job-title a {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}

.job-title a {
	color: var(--wp--preset--color--contrast) !important;
}

.job-title a:hover {
	color: var(--rjd-accent-700) !important;
	opacity: 1 !important;
}

.premium-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	white-space: nowrap;
}

.job-company,
.job-company .company-name,
.job-company .job-category {
	color: var(--rjd-neutral-700) !important;
}

.job-company .company-name {
	font-weight: 600 !important;
	color: var(--rjd-neutral-900) !important;
}

.job-location {
	color: var(--rjd-neutral-700) !important;
}

.job-location svg {
	stroke: var(--rjd-neutral-600) !important;
	stroke-width: 2.75 !important;
}

.skills-list {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
}

.skill-tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--rjd-neutral-200);
	color: var(--rjd-neutral-800);
}

.job-date {
	color: var(--rjd-neutral-600) !important;
	font-size: 13px !important;
}

.save-job-button {
	border: 1px solid var(--wp--preset--color--contrast-2) !important;
	border-radius: 50% !important;
	width: 40px;
	height: 40px;
	color: var(--rjd-neutral-700) !important;
}

.save-job-button svg {
	stroke-width: 2.75 !important;
}

.save-job-button:hover {
	color: var(--rjd-accent-700) !important;
	border-color: var(--rjd-accent-300) !important;
	background: var(--rjd-accent-50) !important;
}

.job-card-footer {
	border-top: none !important;
}

/* Pagination */
.job-listings-pagination .page-numbers {
	border: 1px solid var(--wp--preset--color--contrast-2) !important;
	border-radius: 999px !important;
	color: var(--rjd-neutral-700) !important;
}

.job-listings-pagination .page-numbers:hover {
	background-color: var(--rjd-neutral-100) !important;
}

.job-listings-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: #fff !important;
}

.no-jobs-found {
	background-color: var(--rjd-neutral-100) !important;
	border-radius: 20px !important;
}

/* — Job Sidebar block — */

.job-sidebar {
	font-family: var(--wp--preset--font-family--body) !important;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 24px !important;
}

.job-sidebar h4 {
	font-family: var(--wp--preset--font-family--heading) !important;
	color: var(--rjd-neutral-700) !important;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.job-sidebar .job-company p,
.job-sidebar .job-salary p {
	font-family: var(--wp--preset--font-family--heading) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.job-sidebar-field {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
}

.job-sidebar-field p {
	margin: 0;
}

.job-sidebar-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.job-sidebar-benefits {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 14px;
	color: var(--wp--preset--color--contrast);
}

.job-sidebar-benefits li {
	margin-bottom: 6px;
}

.job-sidebar-benefits li:last-child {
	margin-bottom: 0;
}

.job-sidebar .apply-button {
	background: var(--wp--preset--color--accent) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 600 !important;
}

.job-sidebar .apply-button:hover {
	background: var(--rjd-accent-600) !important;
}

.job-sidebar .company-website {
	background: var(--rjd-neutral-100) !important;
	border-radius: 999px !important;
	text-align: center;
	padding: 10px;
	margin-top: 0.75rem;
}

.job-sidebar .company-website a {
	color: var(--rjd-neutral-800) !important;
	font-weight: 500;
	text-decoration: none;
}

/* — Submit Job block — */
/* Button colors already flow from theme.json (--accent-2/--contrast/--base);
 * this just rounds the shape and tidies the typography to match. */

.wp-block-submit-job #job-submission-form h2 {
	font-family: var(--wp--preset--font-family--heading) !important;
}

.wp-block-submit-job .submit-button,
.wp-block-submit-job input[type="submit"] {
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--heading) !important;
}

/* — Registration block — */

.registration-container {
	border: 1px solid var(--wp--preset--color--contrast-2) !important;
	box-shadow: none !important;
	border-radius: 24px !important;
}

.registration-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	color: var(--wp--preset--color--contrast) !important;
}

.registration-form .form-group label {
	color: var(--rjd-neutral-700) !important;
}

.registration-form input:focus,
.registration-form textarea:focus {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 0 0 3px var(--rjd-accent-200) !important;
}

.registration-form .submit-button {
	background-color: var(--wp--preset--color--accent) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--heading) !important;
}

.registration-form .submit-button:hover {
	background-color: var(--rjd-accent-600) !important;
}

/* ----------------------------------------------------------------------
 * Blog index and footer
 * -------------------------------------------------------------------- */

.rjd-blog-intro {
	margin-top: 0.5rem;
}

.rjd-blog-grid {
	margin-top: 2rem;
}

.rjd-post-card {
	height: 100%;
	box-sizing: border-box;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 20px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rjd-post-card:hover {
	border-color: var(--rjd-accent-300);
	box-shadow: var(--rjd-shadow-md);
}

.rjd-post-card-category {
	display: inline-flex;
}

.rjd-post-card-category a {
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--rjd-accent-700);
	text-decoration: none;
	margin-bottom: 0.5rem;
}

.rjd-post-card h2 {
	margin-top: 0.25rem;
}

.rjd-post-card-date {
	color: var(--rjd-neutral-600);
	font-size: 13px;
}

.rjd-footer-columns {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
	width: 100%;
}

.rjd-footer-columns h3 {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	opacity: 0.7;
}

.rjd-footer-columns .wp-block-navigation {
	font-size: 14px;
}

.rjd-footer-columns .wp-block-navigation-item {
	margin-bottom: 0.5rem;
}

@media (max-width: 782px) {
	.rjd-footer-columns {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.rjd-footer-columns {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * Mobile: compact, aligned job cards.
 * By default a card stacks the avatar in its own row above the
 * title with a 16px dead gap under the avatar, plus loose padding
 * everywhere, making cards very tall. On phones we keep the title
 * at full card width (fewer wrapped lines) but remove the dead gap,
 * shrink the avatar, align the premium badge to the avatar, and
 * tighten the vertical rhythm so cards are shorter and tidy.
 * ============================================================ */
@media (max-width: 600px) {
	.job-listings-grid {
		gap: 16px !important;
	}

	/* Padding lives on the section rows, not the card itself — keep the card
	   at 0 so we never double-pad. */
	.job-card {
		padding: 0 !important;
		border-radius: 18px !important;
	}

	/* Header: tighter padding, no dead gap under the avatar, badge centred. */
	.job-card-header {
		padding: 16px 16px 0 !important;
		margin-bottom: 0 !important;
	}

	.job-card-header > div:first-child {
		align-items: center !important;
		margin-bottom: 10px !important;
	}

	.job-card .company-logo-container {
		width: 44px !important;
		height: 44px !important;
		margin-bottom: 0 !important;
	}

	.job-card .company-logo,
	.job-card .company-logo-placeholder {
		width: 44px !important;
		height: 44px !important;
		font-size: 16px !important;
	}

	/* Title + company: tight, no stray heading margins, full card width. */
	.job-card .job-title {
		margin: 0 0 4px !important;
		font-size: 1.05rem !important;
		line-height: 1.25 !important;
	}

	.job-card .job-company {
		margin: 0 !important;
		font-size: 0.9rem !important;
	}

	/* Meta: no vertical padding, tight gaps. */
	.job-card-meta {
		padding: 12px 16px 0 !important;
		margin-bottom: 0 !important;
	}

	.job-card .job-meta-info {
		margin-bottom: 8px !important;
		gap: 8px !important;
	}

	/* Footer: tight. */
	.job-card-footer {
		padding: 12px 16px 16px !important;
	}
}