/*
 * Helpers for the Kadence sections: only what Kadence has no setting for.
 * Section padding lives on the Kadence Row Layout blocks, never here.
 */

/* Body text: the site font at 400 with normal letter spacing. Twenty
   Twenty-Five's global styles set body to 300 / -0.1px and load later,
   hence `html body`. */
html body.sp-op-site.sp-op-site {
	font-family: var(--sp-op-font);
	font-weight: 400;
	letter-spacing: normal;
}

/* Live site: the footer is the Shaped Recover part and inherits its body font
   (Geist). Its stylesheet stays loaded, but this page's own body font wins. */
body.sp-op-site :is(.sp-recover-footer-main, .sp-recover-footer-bar) {
	font-family: var(--sp-recover-font, var(--sp-op-font));
}

/* Offer pricing page: no theme block gap between header, main, sections and
   footer (Twenty Twenty-Five adds margin-block-start). Only on the page that
   has the offer CTA; Kadence row margins (e.g. the -200px card overlap) win. */
body.sp-op-site :where(.wp-site-blocks:has(.sp-op-sec-cta), .wp-site-blocks:has(.sp-op-sec-cta) > main) > * + * {
	margin-block-start: 0;
}

/* Scroll reveal (see motion.js). */
html.sp-op-motion body.sp-op-site .sp-op-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--sp-op-ease-up), transform 700ms var(--sp-op-ease-up);
}

html.sp-op-motion body.sp-op-site .sp-op-reveal.sp-op-in {
	opacity: 1;
	transform: none;
}

/* Hero (design 02): aurora, perspective grid and dot grid behind the
   content; the header overlays the top of the row, so its top padding
   includes the header height. */
body.sp-op-site .sp-op-sec-hero {
	position: relative;
	overflow: hidden;
	color: var(--sp-op-white);
}

body.sp-op-site .sp-op-sec-hero::before,
body.sp-op-site .sp-op-sec-hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

body.sp-op-site .sp-op-sec-hero::before {
	display: block;
	left: -20%;
	top: -20%;
	width: 140%;
	height: 140%;
	background:
		radial-gradient(38% 42% at 18% 30%, rgba(124, 58, 237, 0.4), transparent 70%),
		radial-gradient(34% 40% at 82% 26%, rgba(91, 33, 182, 0.5), transparent 70%);
	background-size: 160% 160%, 160% 160%;
	filter: blur(30px);
	animation: sp-op-aurora 26s ease-in-out infinite;
}

/* Projected floor: the design's 60% box with a 520px perspective, fading in
   from the top (mask stops in the element's own pre-projection pixels). */
body.sp-op-site .sp-op-sec-hero::after {
	left: -50%;
	right: -50%;
	top: 40%;
	height: 900px;
	background-image:
		linear-gradient(rgba(196, 181, 253, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.12) 1px, transparent 1px);
	background-size: 64px 64px;
	transform: perspective(520px) rotateX(68deg);
	transform-origin: 50% 0;
	mask-image: linear-gradient(180deg, transparent 0, #000 900px);
	animation: sp-op-grid 6s linear infinite;
}

body.sp-op-site .sp-op-sec-hero > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

/* Dot grid, faded out downwards (own pseudo for the mask). */
body.sp-op-site .sp-op-sec-hero > .kt-row-column-wrap::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	width: 100vw;
	top: 0;
	height: 62%;
	transform: translateX(-50%);
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
	background-size: 22px 22px;
	mask-image: radial-gradient(70% 90% at 50% 0%, #000 30%, transparent 80%);
}

body.sp-op-site .sp-op-sec-hero .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body.sp-op-site .sp-op-sec-hero .kt-inside-inner-col > * {
	animation: sp-op-up 700ms var(--sp-op-ease-up) both;
}

body.sp-op-site .sp-op-sec-hero .kt-inside-inner-col > :nth-child(2) {
	animation-duration: 900ms;
	animation-delay: 80ms;
}

body.sp-op-site .sp-op-sec-hero .kt-inside-inner-col > :nth-child(3) {
	animation-delay: 140ms;
}

body.sp-op-site .sp-op-sec-hero .wp-block-kadence-column:nth-child(2) .kt-inside-inner-col > * {
	animation-delay: 200ms;
}

body.sp-op-site .sp-op-hero-badge {
	width: fit-content;
	box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.4);
}

/* Fluid H1 and balanced wraps (Kadence has no clamp or text-wrap setting). */
body.sp-op-site.sp-op-site h1.sp-op-hero-title {
	font-size: clamp(40px, 6.4vw, 80px);
	letter-spacing: -0.04em;
	text-wrap: balance;
}

body.sp-op-site .sp-op-hero-sub {
	max-width: 600px;
	text-wrap: balance;
}

@keyframes sp-op-aurora {

	0%,
	100% {
		background-position: 0% 50%, 100% 50%;
	}

	50% {
		background-position: 100% 30%, 0% 70%;
	}
}

@keyframes sp-op-grid {

	from {
		background-position: 0 0, 0 0;
	}

	to {
		background-position: 0 64px, 0 0;
	}
}

@keyframes sp-op-up {

	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	body.sp-op-site .sp-op-sec-hero::before,
	body.sp-op-site .sp-op-sec-hero::after,
	body.sp-op-site .sp-op-sec-hero .kt-inside-inner-col > * {
		animation: none;
	}
}

/* Header (design 01): transparent, laid over the top of the hero aurora. */
body.sp-op-site header.wp-block-template-part {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 5;
}

body.sp-op-site header.wp-block-template-part .kt-row-column-wrap {
	box-shadow: inset 0 -1px rgba(255, 255, 255, 0.08);
}

@media (min-width: 1025px) {

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap {
		grid-template-columns: 1fr auto auto;
		column-gap: 24px;
	}
}

body.sp-op-site .sp-op-logo {
	margin: 0;
}

body.sp-op-site .sp-op-logo a {
	display: inline-flex;
	align-items: center;
	height: 32px;
	text-decoration: none;
}

body.sp-op-site .sp-op-logo img {
	display: inline-block;
	margin-right: 10px;
	border-radius: 8px;
}

body.admin-bar.sp-op-site header.wp-block-template-part {
	top: 32px;
}

/* Reno Product Gallery + Smart Tabs only: their own header stays in the
   flow (the hero is pulled under it), so the offer banner in it pushes the
   hero down too. */
body.sp-op-site.sp-op-site header.wp-block-template-part:has(> .woog-main-menu),
body.sp-op-site.sp-op-site header.wp-block-template-part:has(> .wp-block-kadence-header2893-cpt-id) {
	position: relative;
	top: auto;
}

body.sp-op-site header.wp-block-template-part .kb-button {
	transition: background 0.16s, box-shadow 0.16s;
}

body.sp-op-site header.wp-block-template-part a:focus-visible {
	border-radius: 4px;
	outline: 2px solid #3858e9;
	outline-offset: 2px;
}

/* 06 FAQ: separate rounded cards, ring + violet open state, "+" icon. */
body.sp-op-site .sp-op-faq-acc .kt-accordion-pane {
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 0 1px #e5e7eb;
	transition: box-shadow 0.2s ease;
}

body.sp-op-site .sp-op-faq-acc .kt-accordion-pane:has(.kt-blocks-accordion-header:focus-visible) {
	overflow: visible;
}

body.sp-op-site .sp-op-faq-acc .kt-accordion-pane + .kt-accordion-pane {
	margin-top: 8px;
}

body.sp-op-site .sp-op-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) {
	box-shadow: 0 0 0 1px #c4b5fd;
}

body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-header {
	cursor: pointer;
}

/* Final CTA (design 07): glow + projected grid behind the centred content. */
body.sp-op-site .sp-op-sec-cta {
	position: relative;
	overflow: hidden;
}

body.sp-op-site .sp-op-sec-cta::before,
body.sp-op-site .sp-op-sec-cta::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

body.sp-op-site .sp-op-sec-cta::before {
	left: 10%;
	top: 10%;
	width: 80%;
	height: 60%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(124, 58, 237, 0.4), transparent);
	filter: blur(30px);
}

body.sp-op-site .sp-op-sec-cta::after {
	left: -50%;
	right: -50%;
	top: 40%;
	height: 120%;
	background-image:
		linear-gradient(rgba(196, 181, 253, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196, 181, 253, 0.12) 1px, transparent 1px);
	background-size: 64px 64px;
	transform: perspective(520px) rotateX(68deg);
	transform-origin: 50% 0;

	/* Design fades a flat wrapper (transparent, black at 30%, transparent). This mask is that
	   fade pre-projected onto the rotated plane (stops from the perspective maths). */
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.167) 6.25%, rgba(0, 0, 0, 0.333) 11.77%, rgba(0, 0, 0, 0.5) 16.67%, rgba(0, 0, 0, 0.667) 21.05%, rgba(0, 0, 0, 0.833) 24.98%, #000 28.55%, rgba(0, 0, 0, 0.857) 34.74%, rgba(0, 0, 0, 0.714) 39.94%, rgba(0, 0, 0, 0.571) 44.36%, rgba(0, 0, 0, 0.429) 48.17%, rgba(0, 0, 0, 0.286) 51.49%, rgba(0, 0, 0, 0.143) 54.4%, rgba(0, 0, 0, 0) 56.98%, transparent 100%);
	animation: sp-op-grid 6s linear infinite;
}

body.sp-op-site .sp-op-sec-cta > .kt-row-column-wrap {
	position: relative;
	z-index: 1;
}

body.sp-op-site .sp-op-sec-cta .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body.sp-op-site .sp-op-sec-cta h2.wp-block-kadence-advancedheading {
	font-size: clamp(30px, 4.6vw, 56px);
	letter-spacing: -0.04em;
	text-wrap: balance;
}

body.sp-op-site .sp-op-sec-cta .kt-adv-headingoffer-pricing_spop07-note {
	line-height: normal;
}

/* Offer page rows: max-width = content width on every theme
   (some themes set border-box). */
body:has(.sp-op-plan-card) main .kb-row-layout-wrap:not(.sp-op-guarantee-card) > .kt-row-column-wrap,
body:has(.sp-op-plan-card) header.wp-block-template-part > .kb-row-layout-wrap > .kt-row-column-wrap {
	box-sizing: content-box;
}

/* Header with an empty last column (no button): no gap after the countdown.
   Tablet + desktop: logo left, countdown right on one line.
   Mobile: logo and countdown centred, one under the other. */
body.sp-op-site header.wp-block-template-part .kt-row-column-wrap > .wp-block-kadence-column:last-child:has(> .kt-inside-inner-col:empty) {
	display: none;
}

@media (min-width: 768px) {

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap:has(> .wp-block-kadence-column:last-child > .kt-inside-inner-col:empty) {
		grid-template-columns: 1fr auto;
	}
}

@media (max-width: 767px) {

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap:has(> .wp-block-kadence-column:last-child > .kt-inside-inner-col:empty) > .wp-block-kadence-column:nth-child(1) {
		flex: 0 0 100%;
	}

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap:has(> .wp-block-kadence-column:last-child > .kt-inside-inner-col:empty) .sp-op-logo {
		justify-content: center;
	}

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap:has(> .wp-block-kadence-column:last-child > .kt-inside-inner-col:empty) .sp-op-countdown {
		margin-right: auto;
		margin-left: auto;
	}
}

body.sp-op-site .sp-op-sec-cta a.kb-button {
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s;
}

body.sp-op-site .sp-op-sec-cta a.kb-button:focus-visible {
	outline: 2px solid #3858e9;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	body.sp-op-site .sp-op-sec-cta::after {
		animation: none;
	}
}

/* Header button: design is 38px high with 0 / 16px padding (Kadence has no height option). */
body.sp-op-site header.wp-block-template-part .kb-button {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 38px;
	padding: 0 16px;
}

@media (max-width: 767px) {

	/* Mobile header is 164px in the design (logo row 40px, was 42px). */
	body.sp-op-site .sp-op-logo {
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	/* A name too long even for its own line wraps: the logo grows. */
	body.sp-op-site .sp-op-logo a {
		height: auto;
		min-height: 32px;
		line-height: 20px;
	}

	body.sp-op-site .sp-op-logo img {
		flex-shrink: 0;
	}

	/* Mobile header (Kadence can't reorder columns): logo and button
	   on one line, countdown below. When they don't fit, the button
	   drops below the logo, centred. */
	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1) {
		flex: 1 1 auto;
		min-width: 0;
	}

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2) {
		flex: 0 0 100%;
		order: 3;
	}

	body.sp-op-site header.wp-block-template-part .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) {
		flex: 0 0 auto;
		order: 2;
	}
}

/* Plans: design grid is auto-fit(300px); 3 columns down to 948px, then 2 (3rd card stays one column wide). */
@media (min-width: 768px) and (max-width: 947px) {

	body.sp-op-site .sp-op-sec-plans > .kt-row-column-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Guarantee: Kadence columns are stacking contexts (z-index 1), so the badge colour blend needs z-index auto to blend with the lilac card. */
body.sp-op-site .sp-op-guarantee-card > .kt-row-column-wrap,
body.sp-op-site .sp-op-guarantee-col {
	z-index: auto;
}

body.sp-op-site .wp-block-kadence-advancedheading.sp-op-guarantee-title {
	font-size: clamp(26px, 3vw, 34px);
	letter-spacing: -0.025em;
}

/* Design grid at 753-1024: badge sits in the first of two tracks. */
@media (min-width: 753px) and (max-width: 1079px) {

	body.sp-op-site .sp-op-guarantee-col {
		max-width: calc((100% - 48px) / 2);
	}
}

/* Design grid at desktop: three equal tracks with 48px gaps; the text spans two (667px at 1920), so the badge track is 1/3 of (width - 96px). */
@media (min-width: 1025px) and (max-width: 1079px) {

	body.sp-op-site .sp-op-guarantee-card > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1080px) {

	body.sp-op-site .sp-op-guarantee-card > .kt-row-column-wrap {
		grid-template-columns: calc((100% - 96px) / 3) minmax(0, 1fr);
	}
}

/* 06 FAQ: same grid as the design (auto-fit 300px tracks, 64px gap): text 1 track, accordion 2 tracks from 1076px; stacked below (text max 360px / half width). */
body.sp-op-site .sp-op-sec-faq > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
	max-width: min(360px, calc((100% - 64px) / 2));
}

@media (max-width: 767px) {

	body.sp-op-site .sp-op-sec-faq > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
		max-width: min(300px, 100%);
	}
}

@media (min-width: 1076px) {

	body.sp-op-site .sp-op-sec-faq > .kt-row-column-wrap {
		grid-template-columns: calc((100% - 128px) / 3) minmax(0, 1fr);
	}

	body.sp-op-site .sp-op-sec-faq > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
		max-width: 360px;
	}
}

@media (min-width: 1025px) and (max-width: 1075px) {

	body.sp-op-site .sp-op-sec-faq > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
	}
}

body.sp-op-site .sp-op-sec-faq h2.wp-block-kadence-advancedheading {
	font-size: clamp(32px, 4vw, 48px);
	letter-spacing: -0.035em;
	text-wrap: balance;
}

body.sp-op-site .sp-op-sec-faq .kb-buttons-wrap {
	justify-content: flex-start;
}

body.sp-op-site .sp-op-sec-faq .kb-button {
	transition: background 0.2s, color 0.2s;
}

body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-header {
	font-family: inherit;
}

body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-header:focus {
	outline: none;
}

body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-header:focus-visible {
	border-radius: 4px;
	outline: 2px solid #3858e9;
	outline-offset: 2px;
}

/* "+" glyph like the design (22px, #6a7282); open state = same "+" rotated 45deg. */
body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-icon-trigger {
	display: block;
	width: max-content;
	min-width: 0;
	height: 22px;
	margin: 0 0 0 auto;
	transition: transform 0.2s ease;
	font-size: 22px;
	font-weight: 400;
	line-height: 22px;
	color: #6a7282;
}

body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-icon-trigger::before {
	content: "+";
	position: static;
	display: block;
	width: auto;
	height: auto;
	background: none;
	color: #6a7282;
	transform: none;
}

body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-icon-trigger::after {
	content: none;
}

body.sp-op-site .sp-op-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger {
	transform: rotate(45deg);
}

body.sp-op-site .sp-op-faq-acc .kt-accordion-pane:has(.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger::before {
	background: none;
	color: #6a7282;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	body.sp-op-site .sp-op-faq-acc .kt-blocks-accordion-icon-trigger {
		transition: none;
	}
}

/* 05: shield svg at its full 18px (shield 12x16, as in the design). */
body.sp-op-site .sp-op-guarantee-proof__secure svg {
	flex: none;
	width: 18px;
	height: 18px;
}

body.sp-op-site .sp-op-faq-acc .kt-accordion-panel-inner > p {
	margin: 0;
}

/* Full product logo (icon + wordmark) in the offer header. */
body.sp-op-site .sp-op-logo img.sp-op-logo__full {
	width: auto;
	height: 32px;
	margin-right: 0;
	border-radius: 0;
}