/**
 * Ever Social Resources — front-end styles
 *
 * Enqueued only when [ever_social_resources] is on the page or a
 * resource/case-study single is rendered. All classes are prefixed
 * esr-. No font-family is set globally — the theme's typography is
 * inherited. Brand palette:
 *   black #1a1a1a · gray #5d5d5d · border #e0e0e0
 *   sage #3a4f43 · light sage #4a6a58 · muted sage #7b8677
 *   dark sage #2a3d33 · cream #eae6e1 · white #ffffff
 */

/* ===== Base ===== */

.esr-wrap,
.esr-single,
.esr-band {
	box-sizing: border-box;
}

.esr-wrap *,
.esr-single * {
	box-sizing: border-box;
}

/* ===== Bands & containers ===== */

.esr-band {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
}

.esr-band-cream {
	background: #eae6e1;
}

.esr-band-white {
	background: #ffffff;
}

.esr-band-sage {
	background: #3a4f43;
}

.esr-band-sage .esr-heading {
	color: #ffffff;
}

.esr-band-sage .esr-eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

.esr-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;
}

/* ===== Eyebrow & headings ===== */

.esr-eyebrow {
	margin: 0 0 8px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7b8677;
}

.esr-heading {
	margin: 0 0 32px;
	font-size: 2rem;
	line-height: 1.2;
	color: #1a1a1a;
}

/* ===== Anchor pills ===== */

.esr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px 48px;
}

.esr-pill {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid #3a4f43;
	border-radius: 999px;
	background: #3a4f43;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.esr-pill:hover,
.esr-pill:focus {
	background: #ffffff;
	border-color: #3a4f43;
	color: #3a4f43;
}

/* Anchored sections need breathing room under the site's sticky header. */
.esr-band[id],
.esr-category-group[id] {
	scroll-margin-top: 90px;
}

/* ===== Grid — 1 col mobile, 2 cols tablet, 3 cols desktop ===== */

.esr-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 768px) {
	.esr-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.esr-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== Cards ===== */

.esr-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 24px;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.esr-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(26, 26, 26, 0.08);
}

.esr-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
}

.esr-card-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.35;
	color: #1a1a1a;
}

.esr-card-title a {
	color: #1a1a1a;
	text-decoration: none;
}

.esr-card-title a:hover,
.esr-card-title a:focus {
	color: #3a4f43;
}

.esr-card-excerpt,
.esr-card-outcome {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #5d5d5d;
}

.esr-badge {
	display: inline-block;
	width: fit-content;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(58, 79, 67, 0.08);
	color: #2a3d33;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.esr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.esr-tag {
	padding: 3px 10px;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font-size: 0.75rem;
	color: #5d5d5d;
}

.esr-link {
	margin-top: auto;
	font-weight: 600;
	color: #3a4f43;
	text-decoration: none;
}

.esr-link:hover,
.esr-link:focus {
	text-decoration: underline;
}

/* ===== Featured spotlight card (sage) ===== */

.esr-card-featured {
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 8px;
	padding: 40px 32px;
	background: #3a4f43;
	border-color: #3a4f43;
	color: #ffffff;
}

@media (min-width: 768px) {
	.esr-card-featured {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.esr-card-featured-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	max-width: 640px;
}

.esr-card-featured .esr-card-title {
	font-size: 1.5rem;
	color: #ffffff;
}

.esr-card-featured .esr-card-title a {
	color: #ffffff;
}

.esr-card-featured .esr-card-title a:hover,
.esr-card-featured .esr-card-title a:focus {
	color: rgba(255, 255, 255, 0.8);
}

.esr-card-featured .esr-card-excerpt {
	color: rgba(255, 255, 255, 0.85);
}

.esr-badge-featured {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.esr-card-featured-action {
	flex-shrink: 0;
}

/* ===== Category groups ===== */

.esr-category-group {
	margin-top: 40px;
}

.esr-category-title {
	margin: 0 0 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid #e0e0e0;
	font-size: 1.15rem;
	color: #1a1a1a;
}

.esr-category-empty {
	margin: 0 0 8px;
	font-size: 0.9rem;
	font-style: italic;
	color: #5d5d5d;
}

/* ===== Buttons ===== */

.esr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.esr-btn-primary {
	background: #3a4f43;
	color: #ffffff;
}

.esr-btn-primary:hover,
.esr-btn-primary:focus {
	background: #2a3d33;
	color: #ffffff;
}

.esr-btn-light {
	background: #ffffff;
	color: #2a3d33;
}

.esr-btn-light:hover,
.esr-btn-light:focus {
	background: #eae6e1;
	color: #2a3d33;
}

/* ===== Empty states ===== */

.esr-empty {
	padding: 40px 24px;
	border: 1px dashed #e0e0e0;
	border-radius: 12px;
	text-align: center;
	color: #5d5d5d;
}

.esr-empty p {
	margin: 0;
}

/* ===== Single pages ===== */

.esr-single {
	padding: 24px 0 40px;
}

.esr-back-link {
	margin: 0 0 24px;
}

.esr-back-link a {
	font-weight: 600;
	color: #3a4f43;
	text-decoration: none;
}

.esr-back-link a:hover,
.esr-back-link a:focus {
	text-decoration: underline;
}

.esr-back-link-bottom {
	margin-top: 40px;
}

.esr-single-title {
	margin: 12px 0 16px;
	font-size: 2.2rem;
	line-height: 1.2;
	color: #1a1a1a;
}

.esr-single-desc {
	max-width: 720px;
	margin: 0 0 24px;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #5d5d5d;
}

.esr-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 8px;
}

.esr-single-services {
	font-size: 0.9rem;
	color: #5d5d5d;
}

.esr-single-outcome {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 3px solid #3a4f43;
	border-radius: 0 8px 8px 0;
	background: #eae6e1;
	color: #2a3d33;
	line-height: 1.6;
}

.esr-single-content {
	max-width: 720px;
	line-height: 1.8;
	color: #1a1a1a;
}

.esr-single-content p:first-child {
	margin-top: 0;
}

.esr-single-cover {
	margin: 24px 0;
	max-width: 480px;
}

.esr-cover-img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.esr-single-pdf {
	margin: 32px 0;
}

.esr-single-pdf-title {
	margin: 0 0 16px;
	font-size: 1.4rem;
}

.esr-pdf-frame {
	display: block;
	width: 100%;
	height: 640px;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background: #ffffff;
}

.esr-pdf-note {
	margin: 8px 0 16px;
	font-size: 0.9rem;
	color: #5d5d5d;
}

.esr-pdf-note a {
	color: #3a4f43;
}

/* ===== Accessibility — visible focus ===== */

.esr-wrap a:focus-visible,
.esr-single a:focus-visible,
.esr-card a:focus-visible,
.esr-pill:focus-visible,
.esr-btn:focus-visible,
.esr-link:focus-visible {
	outline: 3px solid #4a6a58;
	outline-offset: 2px;
}

/* ===== Theme-proofing: re-assert spacing against theme element rules ===== */

.esr-wrap p,
.esr-single p {
	margin: 0;
}

.esr-wrap .esr-eyebrow { margin: 0 0 8px; }
.esr-wrap .esr-heading { margin: 0 0 32px; }
.esr-wrap .esr-card-title { margin: 0; }
.esr-wrap .esr-card-excerpt,
.esr-wrap .esr-card-outcome { margin: 0; }
.esr-wrap .esr-category-title { margin: 0 0 20px; }
.esr-wrap .esr-category-empty { margin: 0 0 8px; }
.esr-wrap .esr-empty p { margin: 0; }
.esr-wrap .esr-pills { padding: 16px 24px 48px; }

.esr-single .esr-back-link { margin: 0 0 24px; }
.esr-single .esr-single-title { margin: 12px 0 16px; }
.esr-single .esr-single-desc { margin: 0 0 24px; }
.esr-single .esr-single-meta { margin: 0 0 8px; }
.esr-single .esr-single-outcome { margin: 0 0 24px; }
.esr-single .esr-single-pdf-title { margin: 0 0 16px; }
.esr-single .esr-pdf-note { margin: 8px 0 16px; }

/* ===== Theme defence: link colours & decoration =====
   The page's content area (e.g. .entry-content) styles links with its
   own colour and underline (specificity .entry-content a > .esr-pill).
   Re-assert every plugin link style scoped under .esr-wrap so the
   plugin's look wins on any theme. */

.esr-wrap a,
.esr-single a {
	color: inherit;
	text-decoration: none;
}

.esr-wrap .esr-pill {
	background: #3a4f43;
	border-color: #3a4f43;
	color: #ffffff;
}

.esr-wrap .esr-pill:hover,
.esr-wrap .esr-pill:focus {
	background: #ffffff;
	border-color: #3a4f43;
	color: #3a4f43;
}

.esr-wrap .esr-btn-primary {
	background: #3a4f43;
	color: #ffffff;
}

.esr-wrap .esr-btn-primary:hover,
.esr-wrap .esr-btn-primary:focus {
	background: #2a3d33;
	color: #ffffff;
}

.esr-wrap .esr-btn-light {
	background: #ffffff;
	color: #2a3d33;
}

.esr-wrap .esr-btn-light:hover,
.esr-wrap .esr-btn-light:focus {
	background: #eae6e1;
	color: #2a3d33;
}

.esr-wrap .esr-link {
	color: #3a4f43;
}

.esr-wrap .esr-link:hover,
.esr-wrap .esr-link:focus {
	text-decoration: underline;
}

.esr-wrap .esr-card-title a {
	color: #1a1a1a;
}

.esr-wrap .esr-card-title a:hover,
.esr-wrap .esr-card-title a:focus {
	color: #3a4f43;
}

.esr-wrap .esr-card-featured .esr-card-title a {
	color: #ffffff;
}

.esr-wrap .esr-card-featured .esr-card-title a:hover,
.esr-wrap .esr-card-featured .esr-card-title a:focus {
	color: rgba(255, 255, 255, 0.8);
}

.esr-single .esr-back-link a {
	color: #3a4f43;
}

.esr-single .esr-back-link a:hover,
.esr-single .esr-back-link a:focus {
	text-decoration: underline;
}
.esr-single .esr-single-content p { margin: 0 0 1.2em; }

/* ===== Page framing: trim the theme's large page padding =====
   The active theme adds generous top/bottom padding to the page content
   area (e.g. .site-main). On pages built with the plugin (the shortcode
   page and the auto-generated detail pages) that reads as a big empty
   gap above and below the content. This trims it - scoped with :has()
   so ONLY pages containing the plugin output are affected. */

.site-main:has(.esr-wrap),
.site-main:has(.esr-single) {
	padding-top: calc(var(--header-height, 0px) + 24px);
	padding-bottom: 32px;
}