/*--------------------------------------------------------------
Well Stewarded Consulting — Homepage / Custom Page Styles (v2.1)
Most visual styling is handled by Tailwind CDN classes in PHP templates.
This file covers: Astra layout resets, animation primitives,
and structural utilities.
--------------------------------------------------------------*/

/* === Mission section gradient ============================== */
.mission-gradient {
	background: linear-gradient(to left, #7bbfd4, #fdf9f3);
}

/* === Mission service cards — force white text on hover for every card,
       fixing the Audit card where hover background is dark teal but
       Tailwind utility specificity left text invisible. ==================== */
.mission-gradient .group:hover h3,
.mission-gradient .group:hover p,
.mission-gradient .group:focus-within h3,
.mission-gradient .group:focus-within p {
	color: #ffffff !important;
}

/* === Astra layout overrides ================================ */
html, body { overflow-x: hidden; }

.wsc-page-wrap { display: block; width: 100%; }

.ast-page-builder-template #content,
.ast-page-builder-template #primary,
.ast-page-builder-template .site-content,
.ast-page-builder-template .ast-container,
.ast-article-single,
.entry-content {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* === Force every wrapper between Astra and our sections to full viewport width
       so colored section backgrounds extend edge-to-edge with no boxed look ==== */
.home #page,
.home .site,
.home #content,
.home #primary,
.home .site-content,
.home .ast-container,
.home .entry-content,
.home .ast-page-builder-template,
.wsc-custom-page #page,
.wsc-custom-page .site,
.wsc-custom-page #content,
.wsc-custom-page #primary,
.wsc-custom-page .site-content,
.wsc-custom-page .ast-container,
.wsc-custom-page .entry-content,
.wsc-custom-page .ast-page-builder-template {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.home .wsc-page-wrap,
.wsc-custom-page .wsc-page-wrap {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.wsc-page-wrap > main > section,
.wsc-page-wrap > footer {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* === Hide Astra header + footer on all custom pages ======== */
.home header#masthead,
.home .ast-hfb-header,
.home .site-header,
.wsc-custom-page header#masthead,
.wsc-custom-page .ast-hfb-header,
.wsc-custom-page .site-header {
	display: none !important;
}

.home .site-footer,
.home #colophon,
.home footer.site-footer,
.wsc-custom-page .site-footer,
.wsc-custom-page #colophon,
.wsc-custom-page footer.site-footer {
	display: none !important;
}

/* Hide Astra scroll-to-top on custom pages */
.home #ast-scroll-top,
.home .ast-scroll-top,
.home .ast-scroll-top-wrap,
.home [id*="scroll-top"],
.home [class*="scroll-top"],
.wsc-custom-page #ast-scroll-top,
.wsc-custom-page .ast-scroll-top,
.wsc-custom-page .ast-scroll-top-wrap,
.wsc-custom-page [id*="scroll-top"],
.wsc-custom-page [class*="scroll-top"] {
	display: none !important;
}

/* === Material Symbols icon rendering ======================= */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* === Scroll animations (driven by homepage.js) ============= */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.animate-on-scroll[style*="--delay"] {
	transition-delay: var(--delay, 0s);
}

.animate-hero-text {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

.animate-hero-text.animate-in {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll,
	.animate-hero-text {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* === WPForms styling — matches site design system ========== */
.wsc-wpforms-wrap .wpforms-field input[type="text"],
.wsc-wpforms-wrap .wpforms-field input[type="email"],
.wsc-wpforms-wrap .wpforms-field input[type="tel"],
.wsc-wpforms-wrap .wpforms-field select,
.wsc-wpforms-wrap .wpforms-field textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: 0.75rem;
	border: 1px solid #e6dfd2;
	background: #fff;
	font-family: 'Public Sans', sans-serif;
	font-size: 15px;
	color: #2C3E50;
	transition: border-color 0.2s ease;
	box-shadow: none;
	outline: none;
}

.wsc-wpforms-wrap .wpforms-field input:focus,
.wsc-wpforms-wrap .wpforms-field select:focus,
.wsc-wpforms-wrap .wpforms-field textarea:focus {
	border-color: #165d7b;
	box-shadow: 0 0 0 3px rgba(22, 93, 123, 0.1);
}

.wsc-wpforms-wrap .wpforms-field label {
	font-family: 'Public Sans', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: #2C3E50;
	margin-bottom: 8px;
	display: block;
}

.wsc-wpforms-wrap .wpforms-submit-container .wpforms-submit,
.wsc-wpforms-wrap button[type="submit"] {
	background: #165d7b !important;
	color: #fff !important;
	border: none;
	border-radius: 0.75rem;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 32px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wsc-wpforms-wrap .wpforms-submit-container .wpforms-submit:hover,
.wsc-wpforms-wrap button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(13, 61, 82, 0.22);
}

.wsc-wpforms-wrap .wpforms-confirmation-container {
	background: #fff;
	border-radius: 1.5rem;
	padding: 3rem;
	text-align: center;
	font-family: 'Public Sans', sans-serif;
	color: #2C3E50;
}

.wsc-wpforms-wrap .wpforms-error-container {
	border-radius: 0.75rem;
	font-family: 'Public Sans', sans-serif;
}