/**
 * Alprion public base styles. Deliberately neutral: no font-family, colors
 * only where semantic, so the active theme dominates. Brand accent #0088F6,
 * ink #182840, radius 8px.
 */

:root {
	--ap-accent: #0088f6;
	--ap-accent-dark: #006fd0;
	--ap-accent-soft: #e6f3fe;
	--ap-ink: #182840;
	--ap-muted: #64707f;
	--ap-border: #d9dee5;
	--ap-radius: 8px;
	--ap-error: #d63638;
	--ap-error-soft: #fcf0f1;
	--ap-success: #00a32a;
	--ap-success-soft: #edfaef;
}

/* ------------------------------------------------------------------ button */

.ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: var(--ap-radius);
	background: var(--ap-accent);
	color: #fff;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ap-btn:hover,
.ap-btn:active {
	background: var(--ap-accent-dark);
	color: #fff;
	text-decoration: none;
}

.ap-btn:focus-visible {
	outline: 2px solid var(--ap-accent);
	outline-offset: 2px;
}

.ap-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.ap-btn .ap-btn-icon {
	display: inline-flex;
	line-height: 1;
}

/* --------------------------------------------------------------- jobs grid */

.ap-jobs {
	--ap-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--ap-cols), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-jobs--cols-1 {
	--ap-cols: 1;
}

.ap-jobs--cols-2 {
	--ap-cols: 2;
}

.ap-jobs--cols-3 {
	--ap-cols: 3;
}

.ap-jobs--cols-4 {
	--ap-cols: 4;
}

@media (max-width: 900px) {
	.ap-jobs {
		--ap-cols: 2;
	}

	.ap-jobs--cols-1 {
		--ap-cols: 1;
	}
}

@media (max-width: 640px) {
	.ap-jobs {
		--ap-cols: 1;
	}
}

/* --------------------------------------------------------- candidates grid */

.ap-candidates {
	--ap-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--ap-cols), minmax(0, 1fr));
	gap: 20px;
}

.ap-candidates--cols-1 {
	--ap-cols: 1;
}

.ap-candidates--cols-2 {
	--ap-cols: 2;
}

.ap-candidates--cols-3 {
	--ap-cols: 3;
}

.ap-candidates--cols-4 {
	--ap-cols: 4;
}

.ap-candidates--cols-5 {
	--ap-cols: 5;
}

.ap-candidates--cols-6 {
	--ap-cols: 6;
}

@media (max-width: 900px) {
	.ap-candidates {
		--ap-cols: 2;
	}

	.ap-candidates--cols-1 {
		--ap-cols: 1;
	}
}

@media (max-width: 640px) {
	.ap-candidates {
		--ap-cols: 1;
	}
}

/* ---------------------------------------------------------------- job card */

.ap-job-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ap-job-card:hover {
	border-color: var(--ap-accent);
	box-shadow: 0 4px 14px rgba(24, 40, 64, 0.08);
}

.ap-job-card-title {
	margin: 0;
	font-weight: 700;
}

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

.ap-job-card-meta {
	color: var(--ap-muted);
	font-size: 0.9em;
}

.ap-job-card .ap-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* -------------------------------------------------------------- chips/list */

.ap-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--ap-accent-soft);
	color: var(--ap-accent);
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
}

.ap-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-list li {
	margin: 0;
}

/* --------------------------------------------------------- consultant card */

.ap-consultant-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
}

.ap-consultant-photo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.ap-consultant-name {
	margin: 0 0 4px;
	font-weight: 700;
}

.ap-consultant-contact {
	margin: 0;
	color: var(--ap-muted);
	font-size: 0.95em;
	line-height: 1.6;
}

.ap-consultant-contact a {
	color: inherit;
}

@media (max-width: 480px) {
	.ap-consultant-card {
		flex-direction: column;
		text-align: center;
	}
}

/* -------------------------------------------------------------- single job */

.ap-job-single .ap-job-header,
.ap-job-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.ap-job-header .ap-job-card-meta {
	flex-basis: 100%;
}

/* ---------------------------------------------------------- field wrappers */

/*
 * Shortcode output: <div class="ap-<entity>-<field>"><hN class="ap-heading">
 * Label: </hN><span class="ap-content">value</span></div>. Kept minimal so
 * theme typography wins.
 */
.ap-heading {
	margin: 0 0 0.25em;
	color: inherit;
}

strong.ap-heading,
span.ap-heading {
	margin: 0 0.25em 0 0;
}

.ap-content {
	color: inherit;
}