/*
 * Molen Success Stories — public stylesheet.
 * All selectors are scoped beneath .mss- prefixed classes so nothing here
 * leaks into the rest of the theme. Colors, spacing, and radii are driven
 * by CSS custom properties (see class-mss-assets.php for the generated
 * :root block) so they can be adjusted from Success Stories → Settings.
 */

.mss-archive-main,
.mss-single,
.mss-shortcode-grid,
.mss-widget {
	--mss-primary: var(--mss-color-primary, #3f9143);
	--mss-secondary-text: var(--mss-color-secondary-text, #4b5563);
	--mss-bg: var(--mss-color-background, #ffffff);
	--mss-card-bg: var(--mss-color-card-background, #ffffff);
	--mss-border: var(--mss-color-border, #e5e7eb);
	--mss-radius: var(--mss-border-radius, 10px);
	--mss-space-xs: 0.4rem;
	--mss-space-sm: 0.75rem;
	--mss-space-md: 1.25rem;
	--mss-space-lg: 2rem;
	--mss-space-xl: 3rem;
	--mss-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
	--mss-shadow-md: 0 4px 8px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
	--mss-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.08);
	--mss-container-width: 1180px;
	--mss-prose-width: 760px;
	color: inherit;
}

.mss-archive-main *,
.mss-single *,
.mss-shortcode-grid *,
.mss-widget * {
	box-sizing: border-box;
}

/* ---------- Layout shells ---------- */

/*
 * The plugin's top-level templates (single/archive/taxonomy) render their
 * own <main>, bypassing whatever container markup a theme's single.php or
 * page.php normally supplies. .mss-container restores a sensible max-width
 * and side margins so these views never run edge-to-edge full width.
 */
.mss-container {
	max-width: var(--mss-container-width);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* A narrower reading column for long-form text within a wider container —
   image and result banners can stay full container width for presence. */
.mss-prose {
	max-width: var(--mss-prose-width);
	margin-inline: auto;
}

.mss-archive-main {
	background: var(--mss-bg);
	padding: var(--mss-space-lg) 0;
}

.mss-archive__header {
	margin-bottom: var(--mss-space-lg);
}

.mss-archive__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--mss-primary);
	margin: 0 0 0.5rem;
}

.mss-archive__title {
	margin: 0 0 0.5rem;
	line-height: 1.2;
}

.mss-archive__intro {
	max-width: 68ch;
	color: var(--mss-secondary-text);
	font-size: 1.05rem;
	line-height: 1.6;
}

.mss-archive__service-link {
	margin-top: var(--mss-space-sm);
}

/* ---------- Grid ---------- */

.mss-grid {
	display: grid;
	gap: var(--mss-space-lg);
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin: var(--mss-space-lg) 0;
	align-items: stretch;
}

@media (min-width: 640px) {
	.mss-grid--cols-2,
	.mss-grid--cols-3,
	.mss-grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.mss-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mss-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mss-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Card ---------- */

.mss-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mss-card-bg);
	border: 1px solid var(--mss-border);
	border-radius: var(--mss-radius);
	box-shadow: var(--mss-shadow-sm);
	overflow: hidden;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.mss-card:hover {
		box-shadow: var(--mss-shadow-md);
		transform: translateY(-2px);
	}
}

.mss-card:focus-within {
	box-shadow: 0 0 0 3px rgba(63, 145, 67, 0.35);
}

.mss-card__image {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--mss-border);
}

.mss-card__image--landscape { aspect-ratio: 16 / 10; }
.mss-card__image--square { aspect-ratio: 1 / 1; }
.mss-card__image--portrait { aspect-ratio: 3 / 4; }

.mss-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mss-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mss-space-sm);
	padding: var(--mss-space-md);
	flex: 1;
}

.mss-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.mss-card__link {
	color: inherit;
	text-decoration: none;
}

.mss-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mss-card__link:hover,
.mss-card__link:focus {
	text-decoration: underline;
}

.mss-card__excerpt {
	margin: 0;
	color: var(--mss-secondary-text);
	font-size: 0.95rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mss-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	position: relative;
	z-index: 2;
}

.mss-card__cta {
	margin-top: auto;
	padding-top: var(--mss-space-xs);
	font-weight: 600;
	color: var(--mss-primary);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.92rem;
}

.mss-card__cta-icon {
	flex-shrink: 0;
}

/* ---------- Badges ---------- */

.mss-badge {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	border: 1px solid transparent;
}

.mss-badge--outcome {
	background: rgba(63, 145, 67, 0.1);
	color: var(--mss-primary);
}

.mss-badge--service {
	background: #f3f4f6;
	color: #374151;
}

.mss-filter-bar--pills .mss-badge,
body .mss-badge {
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mss-badge:hover,
.mss-badge:focus-visible {
	background: var(--mss-primary);
	color: #fff;
}

/* Design setting: badge style variants applied via body/wrapper modifier class if desired. */
.mss-badge-style-outline .mss-badge {
	background: transparent;
	border-color: currentColor;
}

.mss-badge-style-solid.mss-badge--outcome,
.mss-badge-style-solid .mss-badge--outcome {
	background: var(--mss-primary);
	color: #fff;
}

/* ---------- Featured result ---------- */

.mss-result {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	border-radius: calc(var(--mss-radius) * 0.6);
	background: rgba(63, 145, 67, 0.08);
	border: 1px solid rgba(63, 145, 67, 0.25);
	padding: 0.75rem 1rem;
}

.mss-result--full {
	margin: var(--mss-space-md) 0;
	padding: var(--mss-space-md);
}

.mss-result__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--mss-primary);
}

.mss-result__value {
	font-size: 1.6rem;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.15;
}

.mss-result--full .mss-result__value {
	font-size: 2.1rem;
}

.mss-result__affix {
	font-weight: 700;
}

.mss-result__supporting {
	color: var(--mss-secondary-text);
	font-size: 0.9rem;
}

/* ---------- Filter bar ---------- */

.mss-filter-bar {
	margin-bottom: var(--mss-space-md);
}

.mss-filter-bar__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.mss-filter-bar__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0.35rem;
}

@media (min-width: 768px) {
	.mss-filter-bar__list {
		flex-wrap: wrap;
	}
}

.mss-filter-bar__item {
	display: inline-block;
	white-space: nowrap;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--mss-border);
	color: var(--mss-secondary-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.mss-filter-bar--tabs .mss-filter-bar__list {
	gap: 0;
	border-bottom: 2px solid var(--mss-border);
}

.mss-filter-bar--tabs .mss-filter-bar__item {
	border: none;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 0.6rem 1rem;
}

.mss-filter-bar--tabs .mss-filter-bar__item.is-active {
	border-bottom-color: var(--mss-primary);
	color: var(--mss-primary);
}

.mss-filter-bar__item.is-active,
.mss-filter-bar__item:hover,
.mss-filter-bar__item:focus-visible {
	background: var(--mss-primary);
	border-color: var(--mss-primary);
	color: #fff;
}

.mss-filter-bar--tabs .mss-filter-bar__item.is-active {
	background: transparent;
	color: var(--mss-primary);
}

.mss-filter-bar__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.mss-filter-bar__select {
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--mss-radius) * 0.5);
	border: 1px solid var(--mss-border);
}

/* ---------- Loading / empty states ---------- */

.mss-loading {
	display: none;
	align-items: center;
	gap: 0.6rem;
	padding: var(--mss-space-lg) 0;
	color: var(--mss-secondary-text);
}

/* The [hidden] attribute is toggled by mss-filters.js while a request is in
   flight; :not([hidden]) has to out-rank the bare class rule above or the
   loading state would show constantly regardless of the attribute. */
.mss-loading:not([hidden]) {
	display: flex;
}

.mss-loading__spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--mss-border);
	border-top-color: var(--mss-primary);
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.mss-loading__spinner {
		animation: mss-spin 0.8s linear infinite;
	}
}

@keyframes mss-spin {
	to { transform: rotate(360deg); }
}

.mss-grid-wrap[aria-busy="true"] .mss-grid {
	opacity: 0.5;
}

.mss-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--mss-space-xl) var(--mss-space-md);
	color: var(--mss-secondary-text);
	border: 1px dashed var(--mss-border);
	border-radius: var(--mss-radius);
}

.mss-load-more {
	text-align: center;
	margin-top: var(--mss-space-md);
}

.mss-load-more__button,
.mss-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mss-primary);
	color: #fff;
	border: none;
	border-radius: calc(var(--mss-radius) * 0.6);
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.mss-load-more__button:hover,
.mss-cta__button:hover {
	filter: brightness(0.92);
}

.mss-pagination__list {
	display: flex;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	justify-content: center;
	flex-wrap: wrap;
}

.mss-pagination__list a,
.mss-pagination__list span {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--mss-border);
	border-radius: calc(var(--mss-radius) * 0.4);
	text-decoration: none;
}

.mss-pagination__list .current {
	background: var(--mss-primary);
	color: #fff;
	border-color: var(--mss-primary);
}

/* ---------- Single story ---------- */

.mss-single {
	background: var(--mss-bg);
	padding: var(--mss-space-lg) 0;
}

.mss-breadcrumbs {
	font-size: 0.85rem;
	color: var(--mss-secondary-text);
	margin-bottom: var(--mss-space-md);
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.mss-breadcrumbs a {
	color: inherit;
}

.mss-single__header {
	margin-bottom: var(--mss-space-md);
}

.mss-single__title {
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

.mss-single__client-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	color: var(--mss-secondary-text);
	font-size: 0.95rem;
	margin: 0 0 0.75rem;
}

.mss-single__client {
	font-weight: 700;
	color: #1f2937;
}

.mss-single__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mss-single__image {
	margin: var(--mss-space-md) 0;
	border-radius: var(--mss-radius);
	overflow: hidden;
	border: 1px solid var(--mss-border);
}

.mss-single__image img {
	width: 100%;
	height: auto;
	display: block;
}

.mss-single__sections {
	display: flex;
	flex-direction: column;
	gap: var(--mss-space-lg);
	margin-top: var(--mss-space-lg);
}

.mss-single__section-heading {
	margin: 0 0 0.6rem;
	font-size: 1.3rem;
}

.mss-single__section-body p,
.mss-single__content p {
	line-height: 1.7;
	color: #1f2937;
}

.mss-single__quote {
	margin: 0;
	padding: var(--mss-space-md) var(--mss-space-lg);
	border-left: 4px solid var(--mss-primary);
	background: rgba(63, 145, 67, 0.06);
	border-radius: 0 var(--mss-radius) var(--mss-radius) 0;
	font-size: 1.1rem;
	font-style: italic;
}

.mss-single__quote cite {
	display: block;
	margin-top: 0.6rem;
	font-style: normal;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--mss-secondary-text);
}

.mss-cta {
	margin-top: var(--mss-space-xl);
	padding: var(--mss-space-lg);
	border-radius: var(--mss-radius);
	background: rgba(63, 145, 67, 0.06);
	border: 1px solid rgba(63, 145, 67, 0.2);
	text-align: center;
}

.mss-cta__heading {
	margin: 0 0 0.5rem;
}

.mss-cta__text {
	margin: 0 0 var(--mss-space-md);
	color: var(--mss-secondary-text);
}

.mss-disclaimer {
	margin-top: var(--mss-space-md);
	font-size: 0.8rem;
	color: var(--mss-secondary-text);
	font-style: italic;
}

.mss-related {
	margin-top: var(--mss-space-xl);
	padding-top: var(--mss-space-lg);
	border-top: 1px solid var(--mss-border);
}

.mss-related__heading {
	margin: 0 0 var(--mss-space-md);
}

.mss-other-terms {
	margin-top: var(--mss-space-lg);
}

.mss-other-terms__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
}

.mss-other-terms__list a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--mss-border);
	text-decoration: none;
}

/* ---------- Floating / inline widget ---------- */

.mss-widget {
	--mss-widget-width: 280px;
	--mss-widget-image-height: 150px;
	font-size: 0.92rem;
}

.mss-widget--floating {
	position: fixed;
	bottom: 20px;
	z-index: 9000;
	width: var(--mss-widget-width);
	max-width: calc(100vw - 40px);
}

.mss-widget--bottom-left { left: 20px; }
.mss-widget--bottom-right { right: 20px; }

.mss-widget--inline {
	position: static;
	width: 100%;
	max-width: 360px;
}

.mss-widget__inner {
	position: relative;
	background: var(--mss-card-bg, #fff);
	border: 1px solid var(--mss-border, #e5e7eb);
	border-radius: var(--mss-radius, 10px);
	box-shadow: var(--mss-shadow-lg, 0 12px 24px rgba(16,24,40,0.14));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
	.mss-widget--floating {
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.mss-widget--floating[hidden] {
		display: flex;
		opacity: 0;
		transform: translateY(12px);
		pointer-events: none;
	}
}

.mss-widget__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(16, 24, 40, 0.08);
	cursor: pointer;
	color: #1f2937;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
}

.mss-widget__close:hover,
.mss-widget__close:focus-visible {
	background: #fff;
}

.mss-widget__link {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.mss-widget__image {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: var(--mss-widget-image-height);
	background: var(--mss-border, #e5e7eb);
	overflow: hidden;
}

.mss-widget__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}

/* mss-widget.js toggles [hidden] on this image when a story has no photo;
   same reasoning as .mss-loading above. */
.mss-widget__image img:not([hidden]) {
	display: block;
}

.mss-widget__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	padding: 0.7rem 2rem 0.75rem 0.85rem;
}

/* When there's no image, the close button overlays the body instead, so
   it needs the same right-hand breathing room reserved there too. */
.mss-widget__image + .mss-widget__body {
	padding-right: 0.85rem;
}

.mss-widget__eyebrow {
	display: none;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mss-primary, #3f9143);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mss-widget__eyebrow:not([hidden]) {
	display: block;
}

.mss-widget__title {
	font-weight: 700;
	font-size: 0.94rem;
	line-height: 1.32;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mss-widget__result {
	display: none;
	font-weight: 700;
	color: var(--mss-primary, #3f9143);
}

.mss-widget__result:not([hidden]) {
	display: inline-flex;
}

.mss-widget__result--overlay {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 2;
	background: rgba(20, 32, 26, 0.78);
	color: #fff;
	font-size: 0.78rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	line-height: 1.1;
}

.mss-widget__result--inline {
	align-self: flex-start;
	margin-top: 0.25rem;
	background: rgba(63, 145, 67, 0.12);
	font-size: 0.78rem;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
}

.mss-widget__controls {
	display: flex;
	justify-content: center;
	gap: 0.3rem;
	border-top: 1px solid var(--mss-border, #e5e7eb);
	padding: 0.4rem 0.6rem;
}

.mss-widget__control {
	background: transparent;
	border: 1px solid var(--mss-border, #e5e7eb);
	border-radius: calc(var(--mss-radius, 10px) * 0.4);
	padding: 0.2rem 0.55rem;
	font-size: 0.85rem;
	cursor: pointer;
	color: inherit;
}

.mss-widget__control:hover,
.mss-widget__control:focus-visible {
	border-color: var(--mss-primary, #3f9143);
	color: var(--mss-primary, #3f9143);
}

/* ---------- Focus visibility (WCAG) ---------- */

.mss-card a:focus-visible,
.mss-badge:focus-visible,
.mss-filter-bar__item:focus-visible,
.mss-cta__button:focus-visible,
.mss-load-more__button:focus-visible,
.mss-widget__link:focus-visible,
.mss-widget__control:focus-visible,
.mss-widget__close:focus-visible {
	outline: 3px solid #1a56db;
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
	.mss-widget--floating {
		display: none !important;
	}

	.mss-single__title {
		font-size: 1.6rem;
	}
}