/* File: assets/css/style-services.css
 *
 * Services (front-end + admin)
 * - Front-end: service header, pill list, impact block
 * - Admin: taxonomy list/term preview pill styles + per-Service ordering metabox
 */

/* =========================================================
 * Front-end (from services.css)
 * ======================================================= */
/* Shared pill style (front-end) */
.nf-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
	align-items: flex-start;
	display: flex;
	padding: 1.5rem;
	flex-direction: column;
	align-items: center;
}
.nf-pill {
  display: flex !important;
  align-items: center;
  border: 3px solid var(--pill-border, currentColor);
  background: var(--pill-bg, transparent);
  color: var(--pill-text, currentColor);
  border-radius: .5rem;
  padding: 1rem 2rem 1rem 1.5rem;
  gap: .5rem;
	align-self: stretch;
}
.nf-pill-carousel .slick-track{
  display:flex;
  align-items:center;
  will-change: transform;
}
.nf-pill-carousel .slick-slide{
  height:auto;
  padding: 0 10px; /* Adjust the 10px to your desired gap size */
}
.nf-pill-carousel .nf-pill__item {
	width: 100%;
}
.nf-pill__label {
	color: var(--pill-text, currentColor);
	text-align: center;
	font-feature-settings: 'liga' off;
	/* Moboile/H5 */
	font: var(--Mobile-H5);
	letter-spacing: 0.0125rem;
	display: flex;
	justify-content: center;
	width: 100%;
}
/* Makes the inner content clickable if you enable with_link */
.nf-pill__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  color: inherit;
  text-decoration: none;
}
.nf-pill__icon {
  display: inline-flex;
  width: var(--pill-icon, 2rem);
  height: var(--pill-icon, 2rem);
  min-width: var(--pill-icon, 2rem);
}
.nf-pill__icon svg {
  width: var(--pill-icon, 2rem);
  height: var(--pill-icon, 2rem);
  display: block;
}
/* Impact block */
.nf-impact {
	position: relative;
  overflow: hidden;
	padding: 1rem 0;
}
.nf-impact.nf-impact--has-fabric {
  padding: 3rem 0;
}
.nf-impact__fabric{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.nf-impact__inner{
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
	align-items: stretch;
	padding: 3rem 1.5rem;
	max-width: 67.5rem;
  position: relative;
  z-index: 1;
	margin: auto;
}
.nf-impact__item {
	height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nf-impact__title {
  color: var(--Primary-Director-Black, #252525);
	text-align: center;
	font-feature-settings: 'liga' off;

	/* Mobile/Topline */
	font: var(--Mobile-Topline);
	letter-spacing: 0.05625rem;
	text-transform: uppercase;
}
.nf-impact__body {
	color: var(--Primary-Director-Black, #252525);
	text-align: center;
	font-feature-settings: 'liga' off;

	/* Mobile/P1 */
	font: var(--Mobile-P1);
}
/* Responsive: stack */
@media (min-width: 900px) {
	.nf-impact {
		padding: 3rem 0;	
	}
	.nf-impact.nf-impact--has-fabric {
		margin-bottom: 7.5rem;
  	padding: 6rem 0;
	}
  .nf-impact__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0;
  }
	
}

/* =========================================================
 * Admin taxonomy pill previews (from admin-tax-columns.css)
 * ======================================================= */
/* Pill display in taxonomy list table */
.wp-list-table .nf-pill{
  display: flex;
  align-items: center;
  border: 3px solid var(--pill-border, currentColor);
  background: var(--pill-bg, transparent);
  color: var(--pill-text, currentColor);
  border-radius: .5rem;
  padding: .5rem 1rem .5rem .75rem;
	gap: .25rem;
	max-width: fit-content;
}
.nf-pill--admin-preview {
  display: flex;
  align-items: center;
  border: 3px solid var(--pill-border, currentColor);
  background: var(--pill-bg, transparent);
  color: var(--pill-text, currentColor);
  border-radius: .5rem;
  padding: 1rem 2rem 1rem 1.5rem;
	gap: .5rem;
	max-width: fit-content;
}
.wp-list-table .nf-pill__label {
	font-feature-settings: 'liga' off;

	/* Mobile/H5 */
	font: var(--Mobile-H5);
	letter-spacing: 0.0125rem;
}
.nf-pill--admin-preview .nf-pill__label {
	font-feature-settings: 'liga' off;

	/* Mobile/H5 */
	font: var(--Mobile-H5);
	letter-spacing: 0.0125rem;
}
.wp-list-table .nf-pill__icon{
  width: var(--pill-icon, 2rem);
  height: var(--pill-icon, 2rem);
  display: inline-flex;
}

.wp-list-table .nf-pill__icon svg{
  width: var(--pill-icon, 2rem);
  height: var(--pill-icon, 2rem);
  display: block;
}
/* ====== 768px+ ====== */
@media (min-width: 768px) {
	.nf-pill-list {
		margin-bottom: 3rem;
		padding: 0;
	}
	.nf-pill-carousel .nf-pill__item {
		width: auto;
	}
	.wp-list-table .nf-pill__label {
		/* Desktop/H5 */
		font: var(--Desktop-H5);
	}
	.nf-impact__body {
		/* Desktop/P1 */
		font: var(--Desktop-P1);
	}
}

/* =========================================================
 * Admin: per-Service Service Type ordering metabox
 * ======================================================= */
/* Drag/drop list (scoped to wp-admin) */
.wp-admin .nf-stppo-order { margin: 8px 0 0; padding: 0; }
.wp-admin .nf-stppo-order li {
  list-style: none;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 1px solid #dcdcde;
  background: #fff;
  display: flex;
  gap: 8px;
  align-items: center;
}
.wp-admin .nf-stppo-handle { cursor: move; user-select: none; font-size: 16px; line-height: 1; }
.wp-admin .nf-stppo-name { flex: 1; }
.wp-admin .nf-stppo-subtitle { margin: 10px 0 6px; font-weight: 600; }
.wp-admin .nf-stppo-help { font-size: 12px; color: #646970; margin: 6px 0 0; }