/*
 * SustainMap — "Modern Depth" (Package B) layer.
 * Loads AFTER prototype.css / tokens.css / style.css so it overrides on equal specificity.
 * One place to control the site-wide depth pass: gradient primary buttons, elevated cards,
 * mesh hero backgrounds, glowing green sections, elevated forms. Light theme only (site is
 * light-only). Remove this enqueue to revert the whole look — no structural changes.
 */

:root {
	--grad-primary: linear-gradient(135deg, #2AA96C 0%, var(--green) 55%, #0F6B34 100%);
	--glow-green: 0 10px 26px rgba(21, 128, 61, .30);
	--mesh-mint:
		radial-gradient(58% 82% at 12% 4%, rgba(34, 160, 107, .18), transparent 60%),
		radial-gradient(46% 70% at 92% 12%, rgba(21, 128, 61, .12), transparent 60%),
		radial-gradient(72% 94% at 62% 118%, rgba(123, 224, 173, .22), transparent 62%),
		var(--mint);
	--grad-green-section:
		radial-gradient(66% 120% at 8% -6%, rgba(67, 204, 133, .30), transparent 56%),
		linear-gradient(135deg, var(--green-deep) 0%, #12663F 58%, var(--green) 100%);
	--lift: translateY(-3px);
}

/* ============================================================
   1) PRIMARY BUTTONS — gradient + depth + hover lift
   ============================================================ */
.btn.btn-primary {
	background: var(--grad-primary);
	box-shadow: var(--shadow-md);
	transition: transform .25s var(--e-out), box-shadow .25s var(--e-out), filter .25s var(--e-out);
}
.btn.btn-primary:hover {
	background: var(--grad-primary);
	filter: brightness(1.06);
	box-shadow: var(--glow-green);
	transform: var(--lift);
}
/* Header CTA keeps the gradient on hover (prototype reverts it to solid green-deep). */
#siteHeader .btn.btn-primary,
#siteHeader .btn.btn-primary:hover {
	background: var(--grad-primary);
}

/* Elementor filled-green buttons only (id-scoped so white / transparent / text buttons
   are never touched). background-image paints over their green background-color; !important
   clears Elementor's higher-specificity per-widget rules. */
.elementor-element-64a9168 .elementor-button,
.elementor-element-f866674 .elementor-button,
.elementor-element-5bd279b .elementor-button,
.elementor-element-d92525f .elementor-button,
.elementor-element-abtrbtn .elementor-button,
.elementor-element-exibtn .elementor-button,
.elementor-element-mksbtn .elementor-button {
	background-image: var(--grad-primary) !important;
	border: 0 !important;
	box-shadow: var(--shadow-md) !important;
	transition: transform .25s var(--e-out), box-shadow .25s var(--e-out), filter .25s var(--e-out) !important;
}
.elementor-element-64a9168 .elementor-button:hover,
.elementor-element-f866674 .elementor-button:hover,
.elementor-element-5bd279b .elementor-button:hover,
.elementor-element-d92525f .elementor-button:hover,
.elementor-element-abtrbtn .elementor-button:hover,
.elementor-element-exibtn .elementor-button:hover,
.elementor-element-mksbtn .elementor-button:hover {
	filter: brightness(1.07);
	box-shadow: var(--glow-green) !important;
	transform: var(--lift) !important;
}

/* ============================================================
   2) CARDS — elevation + stronger hover; accent bar on text cards
   ============================================================ */
.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-lg); }

/* Elementor loop items inherit a stray Astra `.ast-article-post` separator (1px grey
   border-bottom, #D1D5DB) that the Elementor loop grid doesn't clear. Remove it so each
   card reads as one clean bordered object. */
.e-loop-item.ast-article-post { border-bottom: 0 !important; }

.co-card, .course-card {
	position: relative;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.co-card::before, .course-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--grad-primary);
	opacity: 0;
	transition: opacity .3s var(--e-out);
}
.co-card:hover, .course-card:hover { box-shadow: var(--shadow-md); }
.co-card:hover::before, .course-card:hover::before { opacity: 1; }
.course-card:hover { transform: translateY(-4px); border-color: var(--leaf); }

/* ============================================================
   3) HERO / BANNER — mint flat → mesh with depth
   ============================================================ */
.page-hero,
.pillar-hero,
.cp-hero { background: var(--mesh-mint); }
.tools-band { background: var(--mesh-mint); box-shadow: var(--shadow-sm); }
/* Editorial/CPT singles keep their dark gradient hero — do not override. */

/* ============================================================
   4) GREEN SECTIONS — flat green → gradient + soft glow
   ============================================================ */
.newsletter {
	background:
		radial-gradient(70% 120% at 8% 0%, rgba(67, 204, 133, .26), transparent 55%),
		linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
	box-shadow: var(--shadow-lg);
}
.motiv,
.db-band,
.disclose,
.mk-hero {
	background: var(--grad-green-section);
	box-shadow: var(--shadow-lg);
}

/* ============================================================
   5) FORMS — elevated cards + stronger green focus ring
   ============================================================ */
.cform, .gate-body, .asm-form {
	position: relative;
}
.cform input:focus, .cform textarea:focus,
.gate-body input:focus,
.cc-field input:focus, .cc-ref select:focus, .cc-ref input:focus,
.asm-form input[type=email]:focus, .asm-form input[type=text]:focus,
.fluentform .ff-el-form-control:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(34, 160, 107, .20);
}
/* FluentForm submit button (contact form) — match the gradient primary look. */
.fluentform .ff-btn-submit,
.fluentform button[type=submit] {
	background: var(--grad-primary);
	box-shadow: var(--shadow-md);
	border: 0;
	transition: transform .25s var(--e-out), box-shadow .25s var(--e-out), filter .25s var(--e-out);
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type=submit]:hover {
	filter: brightness(1.06);
	box-shadow: var(--glow-green);
	transform: var(--lift);
}

/* ============================================================
   Reduced motion — no lifts.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.btn.btn-primary,
	.elementor-element-64a9168 .elementor-button,
	.elementor-element-f866674 .elementor-button,
	.elementor-element-5bd279b .elementor-button,
	.elementor-element-d92525f .elementor-button,
	.elementor-element-abtrbtn .elementor-button,
	.elementor-element-exibtn .elementor-button,
	.elementor-element-mksbtn .elementor-button,
	.co-card, .course-card, .card,
	.fluentform .ff-btn-submit {
		transition: none !important;
	}
	.btn.btn-primary:hover,
	.co-card:hover, .course-card:hover, .card:hover,
	.fluentform .ff-btn-submit:hover {
		transform: none !important;
	}
}