/*
 * The event submission page: the help block above the form and the FAQ below
 * it (markup: includes/ppc-submit-core.php). Loaded on that page only.
 * Everything is scoped under .ppc-submit; the theme's heading styles (serif,
 * uppercase in places) are overridden here, inside the block only.
 * The theme styles content lists at .blog .post .post-content ul / ul li
 * (padding, margin-bottom: specificity 0,3,1 and 0,3,2, above anything scoped
 * here), so the list spacing below carries !important. There are no <p>s in
 * the block for the same reason (.post-content p is 18px / 30px / 20px).
 * Mobile first: one column, three from 760 px.
 */

.ppc-submit {
	--ppc-s-purple: #22083a;
	--ppc-s-plum: #3b0f5e;
	--ppc-s-gold: #ffd166;
	--ppc-s-pink: #ee3e96;
	--ppc-s-violet: #7b2ff7;
	--ppc-s-ink: #22083a;
	--ppc-s-text: #4a3a57;
	--ppc-s-line: #e9e0f1;
	--ppc-s-rainbow: linear-gradient(90deg,
		#e40303 0 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%,
		#008026 50% 66.66%, #24408e 66.66% 83.33%, #732982 83.33% 100%);

	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ppc-s-text);
	margin: 28px 0;
	text-align: left;
}

.ppc-submit *,
.ppc-submit *::before,
.ppc-submit *::after {
	box-sizing: border-box;
}

/* Headings: the block's own, whatever the theme does to h2/h3 elsewhere. */
.ppc-submit h2.ppc-submit__h2,
.ppc-submit h3.ppc-submit__h3,
.ppc-submit h3.ppc-submit__q {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.ppc-submit h2.ppc-submit__h2 {
	font-size: 26px;
	line-height: 1.18;
	font-weight: 700;
	margin: 6px 0 20px;
	color: #fff;
}

.ppc-submit h2.ppc-submit__h2--dark {
	color: var(--ppc-s-ink);
	font-size: 22px;
	margin: 34px 0 16px;
}

.ppc-submit--faq h2.ppc-submit__h2--dark {
	margin-top: 0;
}

/* The purple panel: why + what you get. */
.ppc-submit__panel {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 24px 18px 0;
	color: #fff;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(238, 62, 150, .28) 0%, rgba(238, 62, 150, 0) 55%),
		linear-gradient(140deg, var(--ppc-s-purple) 0%, var(--ppc-s-plum) 100%);
}

.ppc-submit .ppc-submit__kicker {
	display: block;
	margin: 0;
	color: var(--ppc-s-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
}

.ppc-submit h3.ppc-submit__h3--light {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, .78);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ppc-submit ul.ppc-submit__gets {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important; /* base.css: .post-content ul { display: block } */
	grid-template-columns: 1fr;
	gap: 12px;
}

.ppc-submit li.ppc-submit__get {
	margin: 0;
	padding: 16px !important;
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 14px;
	row-gap: 2px;
	align-items: start;
	align-content: start; /* a shorter card in the row keeps its rows tight */
}

.ppc-submit li.ppc-submit__get::before {
	content: none; /* the theme's list bullets */
}

.ppc-submit__icon {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ppc-s-gold);
	background: rgba(255, 209, 102, .14);
}

.ppc-submit__icon-svg {
	width: 24px;
	height: 24px;
	display: block;
}

.ppc-submit__get-title {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.ppc-submit__get-text {
	display: block;
	color: rgba(255, 255, 255, .84);
	font-size: 14px;
	line-height: 1.55;
}

.ppc-submit__rainbow {
	display: block;
	height: 6px;
	margin: 24px -18px 0;
	background: var(--ppc-s-rainbow);
}

/* How it works. */
.ppc-submit ol.ppc-submit__steps {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	counter-reset: none;
}

.ppc-submit li.ppc-submit__step {
	margin: 0;
	padding: 0 !important;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ppc-submit li.ppc-submit__step::before {
	content: none;
}

.ppc-submit__num {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--ppc-s-pink) 0%, var(--ppc-s-violet) 100%);
}

.ppc-submit__step-body {
	display: block;
	padding-top: 2px;
}

.ppc-submit__step-title {
	display: block;
	color: var(--ppc-s-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.ppc-submit__step-text {
	display: block;
	font-size: 14px;
	line-height: 1.55;
}

/* FAQ, below the form. */
.ppc-submit--faq {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--ppc-s-line);
}

.ppc-submit__faq {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 18px;
}

.ppc-submit__qa {
	position: relative;
	padding-left: 16px;
}

.ppc-submit__qa::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--ppc-s-pink) 0%, var(--ppc-s-violet) 100%);
}

.ppc-submit h3.ppc-submit__q {
	margin: 0 0 4px;
	color: var(--ppc-s-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.ppc-submit .ppc-submit__a {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ppc-s-text);
}

@media (min-width: 760px) {
	.ppc-submit__panel {
		padding: 32px 32px 0;
	}

	.ppc-submit h2.ppc-submit__h2 {
		font-size: 32px;
		max-width: 22em;
	}

	.ppc-submit h2.ppc-submit__h2--dark {
		font-size: 24px;
	}

	.ppc-submit ul.ppc-submit__gets,
	.ppc-submit ol.ppc-submit__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.ppc-submit li.ppc-submit__get {
		grid-template-columns: 1fr;
		row-gap: 6px;
		padding: 18px !important;
	}

	.ppc-submit__icon {
		grid-row: auto;
		margin-bottom: 6px;
	}

	.ppc-submit__rainbow {
		margin: 28px -32px 0;
	}

	.ppc-submit__faq {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 32px;
	}
}