/*
 * Browse Categories page (/browse-categories/) - WorkScout Elementor's
 * "Taxonomy List" widget (workscout-elementor/widgets/class-tax-list.php)
 * renders the ~90 job categories as one flat list of plain text links by
 * default. This turns them into a card grid and adds a skeleton-loading
 * placeholder shown until the page's self-hosted webfont is ready (see
 * browse-categories.js) - a vendor plugin file, so styled from here rather
 * than edited directly, same convention as home.css/postcode-hub-jobs.css.
 */

/* The theme's own #titlebar banner (template-jobcategories.php) just repeats
   the page title ("Browse Categories") above this widget's own "Job
   Categories" heading below - redundant on this page, so hidden here. */
body.page-id-379 #titlebar {
	display: none;
}

body.page-id-379 .categories-group-all {
	padding: 8px 0 40px;
}

body.page-id-379 .parent-jobs-category {
	margin: 0 0 40px;
	font-family: var(--jfpub-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--jfpub-ink);
}

body.page-id-379 .workscout-taxonomy-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

/* Double-classed to out-specificity the Elementor widget's own inline
   style block (see class-tax-list.php render(), which prints a <style>
   tag ahead of this one) - same recurring specificity-tie pattern as the
   homepage search box fixes in home.css. */
body.page-id-379 .workscout-taxonomy-item.workscout-taxonomy-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--jfpub-surface);
	border: 1px solid var(--jfpub-border);
	border-radius: var(--jfpub-radius-md);
	box-shadow: var(--jfpub-shadow-card);
	text-decoration: none;
	transition: transform .18s var(--jfpub-ease), box-shadow .18s var(--jfpub-ease), border-color .18s var(--jfpub-ease);
}

body.page-id-379 .workscout-taxonomy-item.workscout-taxonomy-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--jfpub-shadow-lift);
	border-color: var(--jfpub-blue);
}

/* No per-category icon is configured on any of these terms (the widget's
   own icon feature falls back to a generic globe per-term, which would
   mean an SVG lookup for ~90 terms) - one consistent briefcase badge
   instead, same circular-icon treatment as .jfh-why__icon on the homepage. */
body.page-id-379 .workscout-taxonomy-item::before {
	content: "\f0b1";
	font: 900 15px/1 "Font Awesome 6 Free";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--jfpub-surface-blue);
	color: var(--jfpub-blue-active);
}

body.page-id-379 .child-category-title {
	font-family: var(--jfpub-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--jfpub-ink);
}

body.page-id-379 .workscout-taxonomy-item.workscout-taxonomy-item:hover .child-category-title {
	color: var(--jfpub-blue-active);
	text-decoration: none;
}

/* ---------- Skeleton loading ---------- */

/* Progressive enhancement: only hidden once browse-categories.js confirms
   it's actually running (see the early inline script in functions.php that
   sets this class before the body paints) - a no-JS visitor's real grid is
   never hidden from them in the first place. */
html.jfcat-js body.page-id-379 .workscout-taxonomy-grid {
	display: none !important;
}

/* Revealed state: needs to out-specificity the hide rule above (same
   !important tier, so specificity - not source order - decides), not just
   rely on clearing an inline style, which an !important stylesheet rule
   always beats regardless of source. */
html.jfcat-js body.page-id-379 .workscout-taxonomy-grid.jfcat-fade-in {
	display: grid !important;
}

.jfcat-skeleton {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.jfcat-skeleton__card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--jfpub-radius-md);
	background: var(--jfpub-surface);
	border: 1px solid var(--jfpub-border);
}

.jfcat-skeleton__icon,
.jfcat-skeleton__line {
	border-radius: var(--jfpub-radius-sm);
	background: linear-gradient(90deg, #eef1f6 25%, #e2e7ef 37%, #eef1f6 63%);
	background-size: 400% 100%;
	animation: jfcat-shimmer 1.4s ease infinite;
}

.jfcat-skeleton__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.jfcat-skeleton__line {
	flex: 1 1 auto;
	height: 14px;
	max-width: 130px;
}

@keyframes jfcat-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

.workscout-taxonomy-grid.jfcat-fade-in {
	animation: jfcat-fade-in .25s ease both;
}

@keyframes jfcat-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.jfcat-skeleton__icon,
	.jfcat-skeleton__line {
		animation: none;
	}
	.workscout-taxonomy-grid.jfcat-fade-in {
		animation: none;
	}
}

@media (max-width: 480px) {
	body.page-id-379 .workscout-taxonomy-grid,
	.jfcat-skeleton {
		grid-template-columns: 1fr;
	}
}