.witt-template-wave .pledge-form-header h1,
.witt-template-wave .pledge-form-header h2,
.witt-template-wave .pledge-form-header h3,
.witt-template-wave .pledge-form-header h4,
.witt-template-wave .pledge-form-header h5,
.witt-template-wave .pledge-form-header h6 {
	color: #fff;
	text-align: center;
	font-family: Solway;
}

.witt-template-wave .pledge-form-header h1 {
	font-size: 42px;
	font-style: normal;
	font-weight: 700;
	line-height: 36px;
}

.witt-template-wave .pledge-form-header h3 {
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-top: -10px;
}

.witt-template-wave .pledge-form-header p {
	color: #FFF;
	text-align: center;
	font-family: Karla;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 35px;
	margin-top: -10px;
}


/* ===========================
PLEDGE HEADER WAVE FIX
Applies to all pledge steps (same page)
copied from _style.css
=========================== */

/* A) Make the blue header area taller so text never collides with wave */
.witt-template-wave .top-container {
	position: relative;
	background: #192E57; /* fills any “gap” with blue */
	padding-bottom: 140px !important; /* controls gap between text and wave */
}

/* B) Force header content to sit above the wave */
.witt-template-wave .pledge-form-header,
.witt-template-wave .submit-form-header,
.witt-template-wave .submitted-form-header {
	position: relative;
	z-index: 20;
}

/* C) Draw wave full-bleed and stick it to bottom of blue header */
.witt-template-wave.headerDark-teal .top-container:after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	transform: translateX(-50%) !important;

	width: 100vw !important; /* full screen width */
	height: 120px !important; /* wave thickness (tweak if needed) */

	bottom: -1px !important; /* sticks wave to blue, removes seam */
	z-index: 10 !important;

	background-image: url('/wp-content/uploads/2026/01/Wave-1.png') !important; /* <-- change */
	background-repeat: no-repeat !important;
	background-position: bottom center !important;
	background-size: 100% 100% !important;

	pointer-events: none !important;
}

/* D) Mobile: usually needs more bottom padding + slightly taller wave */
/* === Pledge: Mobile header height fix === */
@media (max-width: 250px) {

	/* Make the blue header area tall enough for all header text */
	.witt-template-wave.headerDark-teal .top-container {
		min-height: 920px !important; /* adjust if needed */
		padding-bottom: 70px !important; /* creates space for text + wave */
	}

	/* Keep the wave glued to the bottom of the blue area */
	.witt-template-wave.headerDark-teal .top-container:after {
		bottom: -1px !important;
		height: 110px !important;
	}

	/* Prevent the beige content from sliding up under the wave */
	.witt-template-wave main#site-content {
		padding-top: 20px !important;
	}
}

/* ===== HERO HEIGHT + WAVE FIX (MOBILE ONLY) ===== */
@media (max-width: 250px) {

	/* 1) Make the blue hero taller so heading + text fit */
	.witt-template-wave .pledge-form-header {
		min-height: 550px !important;
		padding-bottom: 40px !important;
	}

	/* 2) Stretch the wave image full width */
	.witt-template-wave .pledge-form-header img {
		width: 100vw !important;
		max-width: 100vw !important;
		height: auto !important;
		display: block !important;
	}

	/* 3) Glue the wave to the bottom of the blue hero */
	.witt-template-wave .pledge-form-header img {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
	}

	/* 4) Ensure text never goes under the wave */
	.witt-template-wave .form-row-header.postContent {
		position: relative !important;
		z-index: 2 !important;
		margin-bottom: 40px !important;
	}
}

@media (max-width: 768px) {

	/* Give the header block enough bottom padding so text doesn't overlap the wave */
	.witt-template-wave .pledge-form-header {
		padding-top: 26px !important;
		padding-bottom: 120px !important; /* increase if text still touches wave */
	}

	/* Main H1: shrink + tighter line-height */
	.witt-template-wave .pledge-form-header h1 {
		font-size: 36px !important;
		line-height: 36px !important;
		margin-bottom: 10px !important;
	}

	/* Subhead: shrink + tighten */
	.witt-template-wave .pledge-form-header h3 {
		font-size: 20px !important;
		line-height: 24px !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

@media (max-width: 768px) {

	/* Scope to pledge template (use whichever body class exists) */
	.witt-template-wave .pledge-form-header {

		/* This is the key: move the whole header text block up */
		transform: translateY(-10px) !important;

		/* Keeps text safely above the wave */
		padding-top: 18px !important;
		padding-bottom: 120px !important; /* increase if it still touches wave */
	}

	/* Override your inline styles (needs !important) */
	.witt-template-wave .pledge-form-header h1 {
		font-size: 34px !important; /* 32–36 */
		line-height: 36px !important;
		margin: 0 0 10px 0 !important;
	}

	.witt-template-wave .pledge-form-header h3 {
		font-size: 18px !important; /* 16–20 */
		line-height: 24px !important;
		margin: 0 !important;
	}
}

/* =========================================
PLEDGE FORM HEADER — DESKTOP: push wave down
MOBILE: remove wave + add red strip
copied from witt-template-wave.php
========================================= */

/* 1) Make header the positioning context */
.witt-template-wave .pledge-form-header {
	position: relative !important;
	overflow: hidden !important; /* keeps wave/strip clean */
	pointer-events: none;
}

/* 2) DESKTOP/TABLET: give blue header extra bottom space so the existing wave sits lower */
@media (min-width: 768px) {
	.witt-template-wave .pledge-form-header{
		padding-bottom: 120px !important; /* increase/decrease by 10–20px until perfect */
	}
}

/* 3) MOBILE: remove the “auto wave” (common cases) */
@media (max-width: 767px) {

	/* If your wave is applied via pseudo-elements */
	.witt-template-wave .pledge-form-header::before,
	.witt-template-wave .pledge-form-header::after{
		content: none !important;
		display: none !important;
		background: none !important;
	}

	/* If your wave is applied as a background image */
	.witt-template-wave .pledge-form-header{
		background-image: none !important;
	}

	/* If your wave is an <img> inside header (common class names) */
	.witt-template-wave .pledge-form-header img,
	.witt-template-wave .pledge-form-header .wave,
	.witt-template-wave .pledge-form-header .wave-img,
	.witt-template-wave .pledge-form-header .red-wave,
	.witt-template-wave .pledge-form-header .header-wave{
		display: none !important;
	}

	/* 4) MOBILE: add a thin red strip line (slight diagonal feel) */
	.witt-template-wave .pledge-form-header{
		padding-bottom: 28px !important; /* room for the strip */
	}

	.witt-template-wave .pledge-form-header::after{
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: -10% !important;
		width: 120% !important;
		bottom: 0 !important;
		height: 14px !important; /* thickness of the strip */
		background: #D61F2C !important; /* Costco red */
		transform: skewX(-10deg) !important;
		transform-origin: left bottom !important;
		z-index: 1 !important;
	}

	/* keep header text above the strip */
	.witt-template-wave .pledge-form-header > *{
		position: relative !important;
		z-index: 2 !important;
	}
}

/* 1) Force remove ANY existing wave on mobile */
@media (max-width: 767px) {
	.witt-template-wave .pledge-form-header::before,
	.witt-template-wave .pledge-form-header::after,
	.witt-template-wave .medical-plan-check.expanded .heart-icon,
	.witt-template-wave svg.wave,
	.witt-template-wave .wave-svg,
	.witt-template-wave .header-wave,
	.witt-template-wave .mobile-wave,
	.witt-template-wave .pb-0::before {
		display: none !important;
		content: none !important;
		background: none !important;
	}
}

/* 2) Add small red strip only on mobile */
@media (max-width: 767px) {
	.witt-template-wave #site-content::before {
		content: "";
		display: block;
		width: 100%;
		height: 6px; /* thin strip */
		background: #E4002B;
		margin-bottom: 20px;
	}
}

/* Default: hide the red strip */
.witt-template-wave .mobile-red-strip {
	display: none;
	height: 8px;
	background: #D71920;
	width: 100%;
	margin: 0px auto 0;
}
      
/* Pledge form bottom .witt-benefits-card image/footer spacing */
.witt-template-wave .witt-benefits-card {
  display: inline-block; 
  height: auto; 
  margin: 4rem auto 4rem;
  max-width: 90%; 
}

/* Mobile behavior */
@media (max-width: 768px) {

	/* Remove wave backgrounds */
	.witt-template-wave .pledge-form-header,
	.witt-template-wave .submit-form-header,
	.witt-template-wave .submitted-form-header {
		background-image: none !important;
	}

	.witt-template-wave .pledge-form-header::before,
	.witt-template-wave .pledge-form-header::after,
	.witt-template-wave .submit-form-header::before,
	.witt-template-wave .submit-form-header::after,
	.witt-template-wave .submitted-form-header::before,
	.witt-template-wave .submitted-form-header::after {
		content: none !important;
		display: none !important;
	}

	/* Remove extra spacer height */
	.witt-template-wave .pledge-header-spacer {
		height: 0 !important;
	}

	/* Show the red strip */
	.witt-template-wave .mobile-red-strip {
		display: block;
	}
}

/* =========================
PLEDGE FORM - MOBILE FIX
========================= */
@media (max-width: 991.98px) {

	/* 1) remove the auto wave on mobile */
	.wp-template-wave .headerDark-teal .top-container:after {
		content: none !important;
		background-image: none !important;
		height: 110px !important;
	}

	/* 2) add a simple red strip at the bottom like Figma */
	.wp-template-wave .headerDark-teal .top-container {
		position: relative;
		min-height: 920px !important; /* adjust if needed */
		padding-bottom: 70px !important; /* gives space for strip */
	}

	.wp-template-wave .headerDark-teal .top-container:before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 10px; /* strip thickness */
		background: #D61F2C; /* red */
	}

	/* 3) tighten the beige gap before the "Complete the form..." block */
	.wp-template-wave .postContent.py-5 {
		padding-top: 18px !important;
	}
}

.witt-template-wave .primary-menu a {
	display: inline-block;
	padding: 0px 8px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.wp-template-wave .col-lg-8.cold-md-8.align-self-end {
		align-self: flex-start !important;
	}
}

@media (max-width: 767px) {
	.wp-template-wave .pledge-form-header {
		padding-top: 18px !important;
		padding-bottom: 26px !important;
		margin-top: 0 !important;
	}

	.wp-template-wave .pledge-form-header h1 {
		display:block !important;
		margin: 0 0 8px 0 !important;
		font-size: 34px !important;
		line-height: 1.12 !important;
	}

	.wp-template-wave .pledge-form-header h3 {
		margin: 0 0 10px 0 !important;
		font-size: 20px !important;
		line-height: 1.25 !important;
	}
}

@media (min-width: 999px) {
	.wp-template-wave .headerDark-blue,
	.wp-template-wave .headerDark-blue .top-container {
		position: relative !important;
	}

	/* Make overlay/wave layers ignore clicks */
	.wp-template-wave .headerDark-blue .top-container::before,
	.wp-template-wave .headerDark-blue .top-container::after {
		pointer-events: none !important;
	}

	/* Put nav above everything */
	.wp-template-wave .headerDark-blue nav,
	.wp-template-wave .headerDark-blue .primary-menu,
	.wp-template-wave .headerDark-blue .menu-wrapper,
	.wp-template-wave .headerDark-blue .menu-modal,
	.wp-template-wave .headerDark-blue .menuModal {
		position: relative !important;
		z-index: 9999 !important;
	}
}