/* SAXE Medarbejdere – frontend styling (minimalistisk). */

.saxe-front, .saxe-front * { box-sizing: border-box; }

.saxe-front {
	font-family: var(--saxe-font);
	color: var(--saxe-ink);
	max-width: 1500px;
	margin: 0 auto;
	padding: 8px 16px 56px;
	--soft: #f3f5f8;
}

/* ---------------------------------------------------------------- *
 * Theme-guard reset – stop the active theme's button/input/link
 * styling from bleeding into the plugin's controls.
 * ---------------------------------------------------------------- */
.saxe-front button,
.saxe-front input {
	font-family: var(--saxe-font);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	min-width: 0;
	width: auto;
	max-width: none;
	margin: 0;
	outline: none;
}
.saxe-front button:hover,
.saxe-front button:focus {
	box-shadow: none;
	text-shadow: none;
}
.saxe-front a {
	box-shadow: none;
	text-decoration: none;
}
.saxe-front h2,
.saxe-front h3,
.saxe-front p {
	margin: 0;
	padding: 0;
	font-family: var(--saxe-font);
	text-transform: none;
	letter-spacing: normal;
	border: 0;
}
.saxe-front svg { vertical-align: middle; }

/* ---------------------------------------------------------------- *
 * Department contact cards (top) – double as department filters.
 * ---------------------------------------------------------------- */
.saxe-front__depts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 30px;
}
.saxe-front .saxe-deptcard {
	background: var(--saxe-card);
	border: 1px solid var(--saxe-line);
	border-radius: var(--saxe-radius);
	padding: 20px;
	margin: 0;
	flex: 1 1 260px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.saxe-front .saxe-deptcard:hover { box-shadow: var(--saxe-shadow); transform: translateY(-2px); }
.saxe-deptcard.is-active {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.saxe-deptcard__head { display: flex; align-items: center; gap: 10px; }
.saxe-deptcard__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.saxe-deptcard__titles { display: flex; flex-direction: column; min-width: 0; }
.saxe-front .saxe-deptcard__eyebrow {
	font-family: 'Sniglet', var(--saxe-font);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.2;
	color: var(--accent);
	margin-bottom: 2px;
	letter-spacing: .01em;
}
.saxe-front .saxe-deptcard__name { font-size: 16px; font-weight: 700; margin: 0; color: var(--saxe-ink); }
.saxe-deptcard__info { display: flex; flex-direction: column; gap: 7px; }
.saxe-front .saxe-deptcard__row {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: var(--saxe-muted) !important;
	text-decoration: none !important;
	line-height: 1.4;
}
.saxe-front a.saxe-deptcard__row:hover { color: var(--accent) !important; }
.saxe-deptcard__row svg { width: 16px; height: 16px; stroke: var(--saxe-gray); flex: 0 0 auto; margin-top: 1px; }
a.saxe-deptcard__row:hover svg { stroke: var(--accent); }
.saxe-front .saxe-deptcard__btn {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--saxe-font);
	border: 1px solid var(--saxe-line) !important;
	background: transparent !important;
	color: var(--saxe-muted) !important;
	border-radius: 999px !important;
	padding: 5px 13px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	line-height: 1.3 !important;
	height: auto !important;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.saxe-front .saxe-deptcard__btn:hover { border-color: var(--saxe-ink) !important; color: var(--saxe-ink) !important; background: transparent !important; }
.saxe-front .saxe-deptcard.is-active .saxe-deptcard__btn { border-color: var(--saxe-ink) !important; color: var(--saxe-ink) !important; }

/* ---------------------------------------------------------------- *
 * Toolbar: reset pill + search.
 * ---------------------------------------------------------------- */
.saxe-front__toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.saxe-front__search { position: relative; flex: 1 1 260px; max-width: 440px; }
.saxe-front__search input {
	font-family: var(--saxe-font);
	width: 100% !important;
	padding: 11px 16px 11px 42px !important;
	border: 1px solid var(--saxe-line) !important;
	border-radius: 999px !important;
	font-size: 14.5px !important;
	line-height: 1.4 !important;
	height: auto !important;
	outline: none;
	background: #fff !important;
	color: var(--saxe-ink) !important;
	transition: border-color .15s, box-shadow .15s;
}
.saxe-front__search input:focus { border-color: var(--saxe-ink) !important; box-shadow: 0 0 0 3px rgba(30,36,48,.08) !important; }
.saxe-front__search::before {
	content: '';
	position: absolute; left: 16px; top: 50%;
	width: 16px; height: 16px; transform: translateY(-50%);
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- *
 * Minimal pills (department reset + area subfilter).
 * ---------------------------------------------------------------- */
.saxe-front .saxe-pill {
	font-family: var(--saxe-font);
	border: 1px solid var(--saxe-line) !important;
	background: #fff !important;
	color: var(--saxe-ink) !important;
	border-radius: 999px !important;
	padding: 8px 16px !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	cursor: pointer;
	line-height: 1 !important;
	height: auto !important;
	transition: border-color .15s, color .15s, background .15s;
}
.saxe-front .saxe-pill:hover { border-color: var(--saxe-ink) !important; background: #fff !important; color: var(--saxe-ink) !important; }
.saxe-front .saxe-pill.is-active { background: var(--saxe-ink) !important; border-color: var(--saxe-ink) !important; color: #fff !important; }
.saxe-front .saxe-pill--area { padding: 6px 14px !important; font-size: 13px !important; }

/* Per-department area filter bar. */
.saxe-sec-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }

/* ---------------------------------------------------------------- *
 * Department section + grid.
 * ---------------------------------------------------------------- */
.saxe-dept-sec { margin-bottom: 40px; }
.saxe-front .saxe-dept-sec__title {
	display: flex; align-items: center; gap: 12px;
	font-size: 20px; font-weight: 700; margin: 0 0 18px; color: var(--saxe-ink);
}
.saxe-dept-sec__bar { width: 26px; height: 4px; border-radius: 3px; background: var(--saxe-ink); display: inline-block; }

.saxe-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* ---------------------------------------------------------------- *
 * Employee card.
 * ---------------------------------------------------------------- */
.saxe-front .saxe-person {
	background: var(--saxe-card);
	border: 1px solid var(--saxe-line);
	border-radius: var(--saxe-radius);
	padding: 22px 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	transition: box-shadow .15s, transform .15s, border-color .15s;
}
.saxe-front .saxe-person:hover { box-shadow: var(--saxe-shadow-hover); transform: translateY(-3px); }
.saxe-person__media { margin-bottom: 2px; }
.saxe-person .saxe-emp-photo, .saxe-person .saxe-emp-initials {
	width: 64px; height: 64px; border-radius: 16px; object-fit: cover;
}
.saxe-person .saxe-emp-initials {
	background: var(--accent); color: #fff; font-weight: 600; font-size: 22px;
	display: inline-flex; align-items: center; justify-content: center;
}
.saxe-front .saxe-person__name { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.25; color: var(--saxe-ink); }
.saxe-front .saxe-person__pos { font-size: 14px; color: var(--saxe-muted); margin: -6px 0 0; }

.saxe-front .saxe-person__dept {
	display: inline-block;
	align-self: flex-start;
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	color: var(--accent);
	background: #eef3f7;
	text-transform: none;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.saxe-front .saxe-person__dept { background: color-mix(in srgb, var(--accent) 12%, #fff); }
}

.saxe-person__areas {
	background: var(--soft);
	border-radius: 12px;
	padding: 12px 14px;
}
.saxe-front .saxe-person__areas-label { display: block; font-size: 12px; font-weight: 700; color: var(--saxe-ink); margin-bottom: 3px; }
.saxe-front .saxe-person__areas-list { font-size: 12.5px; color: #3a4150; line-height: 1.45; }

.saxe-person__contact { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 4px; }
.saxe-front .saxe-person__contact-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--saxe-ink) !important;
	text-decoration: none !important;
	word-break: break-word;
}
.saxe-front .saxe-person__contact-row:hover { color: var(--accent) !important; }
.saxe-person__contact-row svg { width: 16px; height: 16px; stroke: var(--saxe-ink); flex: 0 0 auto; }
.saxe-person__contact-row:hover svg { stroke: var(--accent); }

/* ---------------------------------------------------------------- *
 * States + empty.
 * ---------------------------------------------------------------- */
.saxe-front__empty {
	text-align: center; padding: 60px 20px; color: var(--saxe-muted);
	background: var(--saxe-card); border: 1px solid var(--saxe-line); border-radius: var(--saxe-radius);
}
.saxe-front__noresult { text-align: center; padding: 40px; color: var(--saxe-muted); display: none; }
.saxe-hidden { display: none !important; }

/* ---------------------------------------------------------------- *
 * Responsive: 4 → 3 → 2 → 1.
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) { .saxe-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .saxe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .saxe-grid { grid-template-columns: 1fr; } }

/* Accessibility: visible focus. */
.saxe-front a:focus-visible,
.saxe-pill:focus-visible,
.saxe-deptcard__btn:focus-visible,
.saxe-front__search input:focus-visible {
	outline: 3px solid rgba(30,36,48,.25);
	outline-offset: 2px;
}