/**
 * Smart Jobs - front-end styles.
 *
 * Design tokens are declared as fallbacks here so the job board looks right
 * on any theme. The Smart Employment theme redeclares the same custom
 * properties, so installing both keeps a single palette.
 */

:root {
	--sj-teal-900: #0b3d4c;
	--sj-teal-800: #0f5163;
	--sj-teal-700: #12657d;
	--sj-teal-600: #17809c;
	--sj-teal-500: #1d93a8;
	--sj-teal-100: #e6f2f5;
	--sj-teal-50: #f3f9fa;

	--sj-green-700: #5f9224;
	--sj-green-600: #74ac2e;
	--sj-green-500: #8cc63f;
	--sj-green-100: #eef7e0;

	--sj-ink: #16272d;
	--sj-body: #4a5c63;
	--sj-muted: #7b8b91;
	--sj-line: #e2eaec;
	--sj-surface: #ffffff;
	--sj-surface-alt: #f6f9fa;

	--sj-radius: 14px;
	--sj-radius-sm: 8px;
	--sj-shadow: 0 1px 2px rgba(11, 61, 76, .06), 0 8px 24px rgba(11, 61, 76, .06);
	--sj-shadow-lg: 0 2px 4px rgba(11, 61, 76, .06), 0 18px 48px rgba(11, 61, 76, .12);
	--sj-transition: 180ms cubic-bezier(.4, 0, .2, 1);

	/* Semantic roles. The brand scale above is fixed in both themes; these
	   are the values a dark palette actually has to move. The Smart
	   Employment theme redeclares every one of them. */
	--sj-accent: var(--sj-teal-700);           /* interactive text on a surface */
	--sj-accent-hover: var(--sj-teal-500);
	--sj-accent-deep: var(--sj-teal-800);      /* text on a tinted chip         */
	--sj-accent-solid: var(--sj-teal-700);     /* filled control background     */
	--sj-accent-solid-hover: var(--sj-teal-800);
	--sj-accent-ink: #ffffff;

	--sj-danger-bg: #fdecec;
	--sj-danger-line: #d63638;
	--sj-danger-ink: #8a1f21;
	--sj-danger-text: #b32d2e;
	--sj-success-ink: #2f4a10;
}

/* Standalone dark support.
 *
 * With the Smart Employment theme active this block is inert - the theme
 * redeclares every --sj-* name from its own palette, including its
 * three-state light/dark/system control. On any other theme the job board
 * still follows the visitor's system preference rather than staying white. */
@media (prefers-color-scheme: dark) {
	:root:not([data-se-theme="light"]) {
		--sj-teal-100: #14313c;
		--sj-teal-50: #0f242c;
		--sj-green-100: #1b2c11;

		--sj-ink: #e8f1f3;
		--sj-body: #a5bac1;
		--sj-muted: #7d949c;
		--sj-line: #1d3540;
		--sj-surface: #0c191f;
		--sj-surface-alt: #112229;

		--sj-accent: #61c8dc;
		--sj-accent-hover: #8fdcec;
		--sj-accent-deep: #9fdfec;
		--sj-accent-solid: var(--sj-teal-600);
		--sj-accent-solid-hover: var(--sj-teal-500);

		--sj-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .42);
		--sj-shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 48px rgba(0, 0, 0, .55);

		--sj-danger-bg: #35191a;
		--sj-danger-line: #e0696b;
		--sj-danger-ink: #ffc9c9;
		--sj-danger-text: #ff9b9b;
		--sj-success-ink: #d3eaa9;

		color-scheme: dark;
	}
}

/* -------------------------------------------------------------------------
 * Primitives
 * ---------------------------------------------------------------------- */

.sj-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sj-transition), color var(--sj-transition),
		border-color var(--sj-transition), transform var(--sj-transition),
		box-shadow var(--sj-transition);
}

.sj-btn:hover { transform: translateY(-1px); }
.sj-btn:active { transform: translateY(0); }

.sj-btn:focus-visible {
	outline: 3px solid var(--sj-green-500);
	outline-offset: 2px;
}

.sj-btn--primary {
	background: var(--sj-accent-solid);
	color: var(--sj-accent-ink);
	box-shadow: 0 6px 16px rgba(18, 101, 125, .22);
}

.sj-btn--primary:hover {
	background: var(--sj-accent-solid-hover);
	color: var(--sj-accent-ink);
	box-shadow: 0 10px 24px rgba(18, 101, 125, .28);
}

.sj-btn--accent {
	background: var(--sj-green-500);
	color: var(--sj-teal-900);
}

.sj-btn--accent:hover {
	background: var(--sj-green-600);
	color: #fff;
}

.sj-btn--ghost {
	background: transparent;
	border-color: var(--sj-line);
	color: var(--sj-accent);
}

.sj-btn--ghost:hover {
	border-color: var(--sj-accent-hover);
	background: var(--sj-teal-50);
	color: var(--sj-accent-deep);
}

.sj-btn--sm { padding: .55rem 1.1rem; font-size: .875rem; }
.sj-btn--lg { padding: 1rem 2rem; font-size: 1rem; }

/* -------------------------------------------------------------------------
 * Filters
 * ---------------------------------------------------------------------- */

.sj-board { --sj-gap: 1.25rem; }

.sj-filters {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	padding: 1.25rem;
	box-shadow: var(--sj-shadow);
	margin-bottom: 1.5rem;
}

.sj-filters__row {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr) auto;
	gap: 1rem;
	align-items: end;
}

.sj-filters__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.sj-filters__field label,
.sj-field label {
	font-size: .8rem;
	font-weight: 600;
	color: var(--sj-body);
	letter-spacing: .01em;
}

.sj-filters input[type="search"],
.sj-filters select {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	background: var(--sj-surface);
	color: var(--sj-ink);
	font-size: .95rem;
	font-family: inherit;
	transition: border-color var(--sj-transition), box-shadow var(--sj-transition);
	-webkit-appearance: none;
	appearance: none;
}

.sj-filters select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8b91' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 1.05rem;
	padding-right: 2.4rem;
}

.sj-filters input[type="search"]:focus,
.sj-filters select:focus,
.sj-field input:focus,
.sj-field textarea:focus {
	outline: none;
	border-color: var(--sj-accent-hover);
	box-shadow: 0 0 0 3px rgba(29, 147, 168, .22);
}

.sj-filters__actions .sj-btn { width: 100%; }

.sj-filters__reset {
	display: inline-block;
	margin-top: .85rem;
	font-size: .85rem;
	color: var(--sj-muted);
	text-decoration: underline;
}

.sj-filters__reset:hover { color: var(--sj-accent); }

.sj-board__count {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--sj-muted);
}

/* -------------------------------------------------------------------------
 * Job cards
 * ---------------------------------------------------------------------- */

.sj-job-list {
	display: flex;
	flex-direction: column;
	gap: var(--sj-gap);
}

.sj-job-list--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
}

.sj-card {
	position: relative;
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	padding: 1.4rem;
	box-shadow: var(--sj-shadow);
	transition: transform var(--sj-transition), box-shadow var(--sj-transition),
		border-color var(--sj-transition);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sj-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sj-shadow-lg);
	border-color: var(--sj-teal-200, #cfe0e4);
}

.sj-card--featured {
	border-color: var(--sj-green-500);
	background: linear-gradient(180deg, var(--sj-green-100) 0%, var(--sj-surface) 90px);
}

.sj-card--closed { opacity: .72; }

.sj-card__head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: start;
}

.sj-card__logo {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--sj-teal-600), var(--sj-teal-800));
	color: #fff;
	font-weight: 700;
	font-size: 1.2rem;
	flex: none;
}

.sj-card__heading { min-width: 0; }

.sj-card__title {
	margin: 0 0 .2rem;
	font-size: 1.15rem;
	line-height: 1.35;
	font-weight: 700;
}

.sj-card__title a {
	color: var(--sj-ink);
	text-decoration: none;
}

.sj-card__title a:hover { color: var(--sj-accent); }

/* Make the whole card clickable without nesting interactive elements. */
.sj-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sj-card__company {
	margin: 0;
	font-size: .9rem;
	color: var(--sj-muted);
}

.sj-card__badges {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	align-items: flex-end;
}

.sj-badge {
	display: inline-block;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
}

.sj-badge--featured { background: var(--sj-green-500); color: var(--sj-teal-900); }
.sj-badge--urgent { background: var(--sj-danger-bg); color: var(--sj-danger-text); }

.sj-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sj-meta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	background: var(--sj-teal-50);
	border: 1px solid var(--sj-teal-100);
	border-radius: 999px;
	font-size: .8rem;
	color: var(--sj-accent-deep);
}

.sj-meta::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	opacity: .75;
	flex: none;
	-webkit-mask: var(--sj-meta-glyph) center / contain no-repeat;
	mask: var(--sj-meta-glyph) center / contain no-repeat;
}

.sj-meta--location::before {
	--sj-meta-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312657d' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.sj-meta--type::before {
	--sj-meta-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312657d' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.sj-meta--category::before {
	--sj-meta-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312657d' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.sj-meta--salary::before {
	--sj-meta-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312657d' stroke-width='2'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.sj-card__excerpt {
	margin: 0;
	color: var(--sj-body);
	font-size: .93rem;
	line-height: 1.65;
}

.sj-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	border-top: 1px solid var(--sj-line);
	margin-top: auto;
}

.sj-card__date { font-size: .82rem; color: var(--sj-muted); }
.sj-card__closed { font-size: .82rem; font-weight: 600; color: var(--sj-danger-text); }

/* Keep the button above the card-wide overlay link. */
.sj-card__foot .sj-btn { position: relative; z-index: 2; }

/* -------------------------------------------------------------------------
 * Empty state and pagination
 * ---------------------------------------------------------------------- */

.sj-empty {
	text-align: center;
	padding: 3.5rem 1.5rem;
	background: var(--sj-surface-alt);
	border: 1px dashed var(--sj-line);
	border-radius: var(--sj-radius);
	color: var(--sj-body);
}

.sj-empty p { margin: 0 0 1.25rem; }

.sj-pagination { margin-top: 2rem; }

.sj-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sj-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .7rem;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	color: var(--sj-body);
	text-decoration: none;
	font-size: .9rem;
	transition: all var(--sj-transition);
}

.sj-pagination .page-numbers:hover {
	border-color: var(--sj-accent-hover);
	color: var(--sj-accent);
}

.sj-pagination .page-numbers.current {
	background: var(--sj-accent-solid);
	border-color: var(--sj-accent-solid);
	color: var(--sj-accent-ink);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.sj-form-wrap {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	padding: 2rem;
	box-shadow: var(--sj-shadow);
}

.sj-form__title { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--sj-ink); }
.sj-form__intro { margin: 0 0 1.75rem; color: var(--sj-body); }

.sj-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
	margin-bottom: 1.5rem;
}

.sj-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.sj-field--full { grid-column: 1 / -1; }

.sj-field input[type="text"],
.sj-field input[type="email"],
.sj-field input[type="tel"],
.sj-field textarea {
	width: 100%;
	padding: .75rem .9rem;
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	background: var(--sj-surface);
	color: var(--sj-ink);
	font-size: .95rem;
	font-family: inherit;
	transition: border-color var(--sj-transition), box-shadow var(--sj-transition);
}

.sj-field textarea { resize: vertical; min-height: 120px; }

.sj-field input[aria-invalid="true"],
.sj-field textarea[aria-invalid="true"] {
	border-color: var(--sj-danger-line);
	box-shadow: 0 0 0 3px rgba(214, 54, 56, .18);
}

.sj-req { color: var(--sj-danger-line); }

.sj-hint { margin: 0; font-size: .8rem; color: var(--sj-muted); }

.sj-field--check label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-weight: 400;
	font-size: .9rem;
	color: var(--sj-body);
	line-height: 1.55;
	cursor: pointer;
}

.sj-field--check input { margin-top: .2rem; flex: none; width: 18px; height: 18px; accent-color: var(--sj-accent-solid); }

/* Custom file input: the native control is transparent and stretched over
   the styled row so keyboard and click behaviour stay native. */
.sj-file {
	position: relative;
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .6rem .6rem .6rem 1rem;
	border: 1.5px dashed var(--sj-line);
	border-radius: var(--sj-radius-sm);
	background: var(--sj-surface-alt);
	transition: border-color var(--sj-transition), background var(--sj-transition);
}

.sj-file:hover,
.sj-file.is-dragover { border-color: var(--sj-accent-hover); background: var(--sj-teal-50); }

.sj-file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.sj-file input[type="file"]:focus-visible + .sj-file__button {
	outline: 3px solid var(--sj-green-500);
	outline-offset: 2px;
}

.sj-file__button {
	order: 2;
	margin-left: auto;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--sj-accent-solid);
	color: var(--sj-accent-ink);
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
}

.sj-file__name {
	order: 1;
	font-size: .9rem;
	color: var(--sj-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sj-file.has-file .sj-file__name { color: var(--sj-ink); font-weight: 600; }
.sj-file.has-file { border-style: solid; border-color: var(--sj-green-500); background: var(--sj-green-100); }

/* Honeypot: kept in the accessibility tree for bots, invisible to people. */
.sj-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

.sj-notice {
	padding: 1.15rem 1.35rem;
	border-radius: var(--sj-radius-sm);
	border-left: 4px solid;
	margin-bottom: 1.5rem;
	font-size: .95rem;
	line-height: 1.6;
}

.sj-notice p { margin: .35rem 0 0; }
.sj-notice strong { font-size: 1.05rem; display: block; }

.sj-notice--success {
	background: var(--sj-green-100);
	border-color: var(--sj-green-600);
	color: var(--sj-success-ink);
}

.sj-notice--error {
	background: var(--sj-danger-bg);
	border-color: var(--sj-danger-line);
	color: var(--sj-danger-ink);
}

.sj-notice--closed {
	background: var(--sj-surface-alt);
	border-color: var(--sj-muted);
	color: var(--sj-body);
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Services
 * ---------------------------------------------------------------------- */

.sj-services {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sj-services--cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.sj-service {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	padding: 1.9rem 1.6rem;
	transition: transform var(--sj-transition), box-shadow var(--sj-transition),
		border-color var(--sj-transition);
}

.sj-service:hover {
	transform: translateY(-4px);
	box-shadow: var(--sj-shadow-lg);
	border-color: var(--sj-teal-200, var(--sj-teal-100));
}

.sj-service__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	margin-bottom: 1.2rem;
	background: linear-gradient(135deg, var(--sj-teal-100), var(--sj-green-100));
	color: var(--sj-accent);
}

.sj-service__icon .sj-icon { width: 26px; height: 26px; }

.sj-service:hover .sj-service__icon {
	background: linear-gradient(135deg, var(--sj-accent-solid), var(--sj-teal-500));
	color: var(--sj-accent-ink);
}

.sj-service__title { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--sj-ink); }
.sj-service__text { margin: 0; color: var(--sj-body); font-size: .93rem; line-height: 1.7; }

/* -------------------------------------------------------------------------
 * Language switcher
 * ---------------------------------------------------------------------- */

.sj-lang-switch {
	display: inline-flex;
	border: 1px solid var(--sj-line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--sj-surface);
}

.sj-lang-switch__item {
	padding: .35rem .8rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sj-muted);
	text-decoration: none;
	transition: background var(--sj-transition), color var(--sj-transition);
}

.sj-lang-switch__item:hover { background: var(--sj-teal-50); color: var(--sj-accent); }
.sj-lang-switch__item.is-active { background: var(--sj-accent-solid); color: var(--sj-accent-ink); }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.sj-filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sj-filters__field--grow { grid-column: 1 / -1; }
	.sj-filters__actions { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.sj-filters { padding: 1rem; }
	.sj-filters__row { grid-template-columns: 1fr; }
	.sj-form-wrap { padding: 1.35rem; }
	.sj-form__grid { grid-template-columns: 1fr; }
	.sj-card { padding: 1.15rem; }
	.sj-card__head { grid-template-columns: auto 1fr; }
	.sj-card__badges { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	.sj-card__foot { flex-direction: column; align-items: stretch; }
	.sj-card__foot .sj-btn { width: 100%; }
	.sj-job-list--grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * Motion and print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sj-btn, .sj-card, .sj-service, .sj-file, .sj-pagination .page-numbers {
		transition: none;
	}
	.sj-btn:hover, .sj-card:hover, .sj-service:hover { transform: none; }
}

@media print {
	.sj-filters, .sj-pagination, .sj-form-wrap, .sj-lang-switch { display: none; }
	.sj-card { box-shadow: none; break-inside: avoid; }
}

/* -------------------------------------------------------------------------
 * Contact details panel
 * ---------------------------------------------------------------------- */

.sj-contact-info__title { margin: 0 0 .6rem; font-size: 1.5rem; color: var(--sj-ink); }
.sj-contact-info__intro { margin: 0 0 1.75rem; color: var(--sj-body); }

.sj-contact-info__list {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.sj-contact-info__list li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.1rem;
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	transition: border-color var(--sj-transition), box-shadow var(--sj-transition);
}

.sj-contact-info__list li:hover {
	border-color: var(--sj-teal-100);
	box-shadow: var(--sj-shadow);
}

.sj-contact-info__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--sj-teal-100), var(--sj-green-100));
	color: var(--sj-accent);
}

.sj-contact-info__icon .sj-icon { width: 19px; height: 19px; }

.sj-contact-info__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.sj-contact-info__label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sj-muted);
}

.sj-contact-info__body a,
.sj-contact-info__body > span:last-child {
	color: var(--sj-ink);
	font-weight: 600;
	font-size: .96rem;
	line-height: 1.6;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sj-contact-info__body a:hover { color: var(--sj-accent); }

.sj-contact-info__map {
	border-radius: var(--sj-radius);
	overflow: hidden;
	border: 1px solid var(--sj-line);
	line-height: 0;
}

/* The contact page ships as a two-column block layout; stack it on mobile. */
@media (max-width: 780px) {
	.sj-contact-columns { flex-wrap: wrap !important; }
	.sj-contact-columns .wp-block-column { flex-basis: 100% !important; }
}