/**
 * Helper styles for the Kadence sections — only what Kadence has no setting for.
 */

/* Site motion — start states only apply when assets/js/motion.js adds html.sr-motion (front end). */
@keyframes srWave {
	0% { opacity: 0; transform: translateY(0.55em); }
	60% { opacity: 1; transform: translateY(-0.06em); }
	100% { opacity: 1; transform: none; }
}

.sr-motion [data-wave] .sr-w {
	display: inline-block;
	opacity: 0;
}

.sr-motion [data-wave].sr-in .sr-w {
	animation: srWave 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Card and mockup reveals are desktop only, as in the design. The mockup panels inside
   the Placements, Builder and Analytics blocks reveal the same way as `.sr-reveal-pv`. */
@media (min-width: 960px) {
	.sr-motion .sr-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--sr-delay, 0ms),
			transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--sr-delay, 0ms);
	}

	.sr-motion .sr-reveal-pv,
	.sr-motion :is(.sr-pe__frame, .sr-bs__card, .sr-ad__scaler) {
		opacity: 0;
		translate: 0 40px;
		scale: 0.97;
		transition:
			opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
			translate 1s cubic-bezier(0.22, 1, 0.36, 1),
			scale 1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.sr-motion .sr-reveal.sr-in {
		opacity: 1;
		transform: none;
	}

	.sr-motion .sr-reveal-pv.sr-in,
	.sr-motion :is(.sr-pe__frame, .sr-bs__card, .sr-ad__scaler).sr-in {
		opacity: 1;
		translate: none;
		scale: none;
	}
}

/* No focus outline on links, buttons and other action elements (theme, Kadence and block
   focus styles). Scoped to the site, so the admin bar and skip link keep theirs. */
.wp-site-blocks :is(a, button, [role="button"], [role="tab"], summary):is(:focus, :focus-visible) {
	outline: none !important;
}

/* Hero: the text block sticks where it starts while motion.js shrinks and fades it on
   scroll (design: scale 1 → .92, opacity 1 → 0 over clamp(320px, 60vh, 560px)); the
   visual scrolls over it. `top` matches the row's top padding. */
.sr-hero-text {
	position: sticky;
	top: 96px;
	z-index: 1;
	transform-origin: 50% 30%;
}

.sr-motion .sr-hero-text {
	will-change: transform, opacity;
}

.sr-hero-visual {
	position: relative;
	z-index: 2;
}

body.home .sr-hero-text {
	top: 168px;
}

@media (max-width: 1024px) {
	.sr-hero-text {
		top: 72px;
	}

	body.home .sr-hero-text {
		top: 144px;
	}
}

@media (max-width: 767px) {
	.sr-hero-text {
		top: 56px;
	}

	body.home .sr-hero-text {
		top: 128px;
	}
}

/* Hero play button (Kadence Video Popup): the design's purple pulse ring, plus the
   hover border and 1.05 scale (the block has no hover border or scale setting). */
@keyframes srPlayGlow {
	0% { box-shadow: 0 0 0 0 rgba(104, 2, 236, 0.35); }
	70%, 100% { box-shadow: 0 0 0 14px rgba(104, 2, 236, 0); }
}

.sr-hero-play .kadence-video-popup-wrap {
	animation: srPlayGlow 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
	transition: border-color 0.2s, transform 0.2s;
}

.sr-hero-play .kadence-video-popup-wrap:hover {
	border-color: #99A1AF;
	transform: scale(1.05);
}

/* The play triangle is centred by its box but looks left-heavy;
   nudge it right. */
.sr-hero-play .kt-video-svg-icon svg {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	.sr-hero-play .kadence-video-popup-wrap {
		animation: none;
	}
}

/* Final CTA: Kadence sets the 4 background layers; the 48px grid lines need per-layer sizes. */
.sr-grid-bg {
	background-size: auto, auto, 48px 48px, 48px 48px, auto !important;
	background-position: 0 0, 0 0, center center, center center, 0 0 !important;
}

/* "Contact support →": the arrow slides 4px on hover (design: gap 8px → 12px).
   Kadence clips buttons (overflow: hidden) and these have no padding, so the
   moved arrow was cut off. */
.wp-block-kadence-advancedbtn .kb-button.sr-link-arrow {
	overflow: visible;
}

.sr-link-arrow .kb-svg-icon-wrap {
	transition: transform 0.15s;
}

.sr-link-arrow:hover .kb-svg-icon-wrap {
	transform: translateX(4px);
}

/* Section H2s wrap balanced, as in the design (no Kadence setting). */
.sr-wave {
	text-wrap: balance;
}

/* Design body text: Geist 400, normal letter spacing. Twenty Twenty-Five's global
   styles set body to 300 / -0.1px and load later, hence `html body`. */
html body {
	font-family: var(--sr-font);
	font-weight: 400;
	letter-spacing: normal;
}

/* FAQ accordion: the design's thin 14px plus/minus (Kadence has no icon size setting). */
.sr-faq .kt-blocks-accordion-header {
	cursor: pointer;
}

.sr-faq .kt-blocks-accordion-icon-trigger {
	width: 14px;
	height: 14px;
}

.sr-faq .kt-blocks-accordion-icon-trigger::before,
.sr-faq .kt-blocks-accordion-icon-trigger::after {
	top: 6px;
	left: 0;
	width: 14px;
	height: 2px;
	border-radius: 1px;
}

/* Feature Depth grid: each row as tall as its own cards (Kadence makes all rows equal). */
.kb-row-layout-wrap.sr-card-grid > .kt-row-column-wrap {
	grid-auto-rows: auto;
}

/* FAQ answers: fixed 15.5px / 1.7 (Kadence has no content typography, and a block
   font size would be made fluid by the theme). */
.sr-faq .kt-accordion-panel-inner p {
	margin: 0;
	font-family: var(--sr-font);
	font-size: 15.5px;
	line-height: 1.7;
}

/* Pricing FAQ answers are a touch tighter (Pricing design). */
.sr-faq.sr-faq-tight .kt-accordion-panel-inner p {
	line-height: 1.65;
}

/* No theme block gap between the page content and the footer (the design's sections touch it). */
.wp-site-blocks > main + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Front page: the 72px header sits over the hero, transparent until it sticks (as in the
   design). The hero row gets the header height added to its top padding. */
body.home .wp-site-blocks > header.wp-block-template-part + main {
	margin-top: -72px !important; /* beats the main group's inline margin-top: 0 */
}

/* Other pages opt in with the class sr-header-overlay on their first row
   (e.g. Pricing); that row's top padding already includes the header. */
body:has(main .sr-header-overlay)
.wp-site-blocks > header.wp-block-template-part + main {
	margin-top: -72px !important;
}

body.home main > .kb-row-layout-wrap:first-child > .kt-row-column-wrap {
	padding-top: 168px;
}

@media (max-width: 1024px) {
	body.home main > .kb-row-layout-wrap:first-child > .kt-row-column-wrap {
		padding-top: 144px;
	}
}

@media (max-width: 767px) {
	body.home main > .kb-row-layout-wrap:first-child > .kt-row-column-wrap {
		padding-top: 128px;
	}
}

/* Header nav (Kadence has no per-device setting for these):
   desktop — the "What's New" pill sits at the right end of its row;
   mobile menu — plain text links, so no icon tiles and the pill reads "(What's New)". */
.wp-block-kadence-header-desktop .kb-nav-link-content.has-highlight-label .kb-nav-item-title-wrap {
	flex: 1;
}

/* Design gap 14px + margin 16px; Kadence adds a 5px flex gap. */
.wp-block-kadence-header-desktop .kb-nav-link-content.has-highlight-label .link-highlight-label {
	margin-left: 25px;
	align-self: center;
}

/* Desktop nav and dropdowns, as in the design. The off-canvas menu uses the same
   Kadence navigation, and Kadence writes desktop link padding and dropdown margin
   without a media query, so these live here, scoped to the desktop header.
   The dropdown panel and link padding (6px, 10px 12px) are Kadence settings. */
.wp-block-kadence-header-desktop .sr-nav {
	--kb-nav-column-gap: 32px;
	--kb-nav-top-link-padding-top: 19px; /* 39px items (8px padding) + the 10px gap above the panel, kept hoverable */
	--kb-nav-top-link-padding-right: 0px;
	--kb-nav-top-link-padding-bottom: 19px;
	--kb-nav-top-link-padding-left: 0px;
	--kb-nav-drop-icon-width: 18px; /* 6px gap + 12px chevron */
	--kb-nav-dropdown-margin-left: -18px;
	--kb-nav-dropdown-border-top: 0;
	--kb-nav-dropdown-border-right: 0;
	--kb-nav-dropdown-border-bottom: 0;
	--kb-nav-dropdown-border-left: 0;
	--kb-nav-dropdown-box-shadow: 0 0 0 1px rgba(30, 41, 57, 0.08), 0 16px 32px -12px rgba(30, 41, 57, 0.2);
}

.wp-block-kadence-header-desktop .sr-nav .menu-container > .menu > .menu-item > .kb-link-wrap .kb-nav-dropdown-toggle-btn {
	justify-content: flex-end;
}

.wp-block-kadence-header-desktop .sr-nav .menu-container > .menu > .menu-item > .kb-link-wrap .kb-nav-dropdown-toggle-btn svg {
	width: 12px;
	height: 12px;
	transition: transform 0.15s;
}

/* Open item: purple, chevron points up. */
.wp-block-kadence-header-desktop .sr-nav .menu-container > .menu > .menu-item:is(:hover, .menu-item--toggled-on) > .kb-link-wrap > .kb-nav-link-content {
	color: var(--kb-nav-top-link-color-hover);
}

.wp-block-kadence-header-desktop .sr-nav .menu-container > .menu > .menu-item:is(:hover, .menu-item--toggled-on) > .kb-link-wrap .kb-nav-dropdown-toggle-btn svg {
	transform: rotate(180deg);
}

/* Panels are as wide as their longest item. Kadence paints the hover background on
   .kb-link-wrap, so the rounded corners go there. */
.wp-block-kadence-header-desktop .sr-nav .sub-menu {
	width: max-content;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu > .menu-item > .kb-link-wrap {
	border-radius: 6px;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu > .menu-item > .kb-link-wrap > .kb-nav-link-content {
	width: 100%;
	line-height: normal;
	white-space: nowrap;
}

/* Resources panel (icon rows): 10px padding, 4px between rows, 8px corners, #F8F4FF hover. */
.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) {
	--kb-nav-dropdown-padding-top: 10px;
	--kb-nav-dropdown-padding-right: 10px;
	--kb-nav-dropdown-padding-bottom: 10px;
	--kb-nav-dropdown-padding-left: 10px;
	--kb-nav-dropdown-link-padding-top: 8px;
	--kb-nav-dropdown-link-padding-right: 10px;
	--kb-nav-dropdown-link-padding-bottom: 8px;
	--kb-nav-dropdown-link-padding-left: 10px;
	--kb-nav-dropdown-link-background-hover: #f8f4ff;
	border-radius: 12px;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) > .menu-item + .menu-item {
	margin-top: 4px;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) > .menu-item > .kb-link-wrap {
	border-radius: 8px;
}

/* "Download Lite": a 1px divider inset 4px with 8px above and below (12px with the row gap), weight 600. */
.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) > .menu-item:last-child {
	display: block;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) > .menu-item:last-child::before {
	content: "";
	display: block;
	height: 1px;
	margin: 12px 4px;
	background: #e5e7eb;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) > .menu-item:last-child > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap {
	--kb-nav-link-border-top: 0;
}

.wp-block-kadence-header-desktop .sr-nav .sub-menu:has(.kb-menu-has-media) > .menu-item:last-child .kb-nav-link-content {
	font-weight: 600;
}

.wp-block-kadence-off-canvas .link-media-container {
	display: none;
}

/* .menu-item > .kb-link-wrap > … outranks Kadence's per-link pill styles. */
.wp-block-kadence-off-canvas .menu-item > .kb-link-wrap > .kb-nav-link-content .link-highlight-label,
.wp-block-kadence-off-canvas .menu-item > .kb-link-wrap > .kb-nav-link-content .link-highlight-label-text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.wp-block-kadence-off-canvas .link-highlight-label-text::before {
	content: "(";
}

.wp-block-kadence-off-canvas .link-highlight-label-text::after {
	content: ")";
}

/*
 * Contact page: the Fluent Forms form in the form card (Kadence column
 * .sr-contact-form) and the "Support team available" dot in the info card.
 * Fluent Forms has no settings for this look. Design: Contact Us.dc.html.
 */
.sr-status-dot {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sr-status-dot::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
}

.sr-contact-form .fluentform {
	--fluentform-input-select-height: 48px;
	font-family: var(--sr-font);
}

/* Rows 24px apart; the two-field rows have a 20px column gap. */
.sr-contact-form .fluentform .ff-el-group {
	margin: 0 0 24px;
}

.sr-contact-form .fluentform .ff-t-container {
	display: flex;
	gap: 0 20px;
}

.sr-contact-form .fluentform .ff-t-cell {
	flex: 1 1 0 !important;
	min-width: 0;
	padding: 0;
}

/* Phones (Kadence's mobile breakpoint): one field per row. */
@media (max-width: 767px) {

	.sr-contact-form .fluentform .ff-t-container {
		flex-direction: column;
	}
}

.sr-contact-form .fluentform .ff-el-input--label {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	line-height: normal;
}

.sr-contact-form .fluentform .ff-el-input--label label {
	display: block;
	margin: 0;
	color: #1e2939;
	font-family: var(--sr-font);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
}

.sr-contact-form .fluentform .ff-el-is-required.asterisk-right label::after {
	content: "*";
	margin-left: 4px;
	color: #d63638;
}

.sr-contact-form .fluentform .ff-el-form-control {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: inset 0 0 0 1px #d1d5dc;
	color: #1e2939;
	font: 400 16px/1.4 var(--sr-font);
	letter-spacing: normal;
	outline: none;
	transition: box-shadow 0.15s;
}

.sr-contact-form .fluentform .ff-el-form-control::placeholder {
	color: #757575;
	opacity: 1;
}

.sr-contact-form .fluentform .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1px #6802ec, 0 0 0 3px #e9ddfd;
}

.sr-contact-form .fluentform textarea.ff-el-form-control {
	height: auto;
	min-height: 180px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

.sr-contact-form .fluentform select.ff-el-form-control {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none' stroke='%234A5565' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
	background-position: right 16px top 17px;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	cursor: pointer;
	appearance: none;
}

/* Errors: red ring, and a red line with the circle-"!" icon under the field. */
.sr-contact-form .fluentform .ff-el-is-error .ff-el-form-control,
.sr-contact-form .fluentform .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1.5px #d63638, 0 0 0 3px #fcebec;
}

.sr-contact-form .fluentform .ff-el-is-error .text-danger {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	color: #d63638;
	font-family: var(--sr-font);
	font-size: 13.5px;
	line-height: normal;
}

.sr-contact-form .fluentform .ff-el-is-error .text-danger::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Last line: "* Required fields" left, the button right, 4px more above. */
.sr-contact-form .fluentform fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
}

.sr-contact-form .fluentform fieldset > * {
	flex: 1 1 100%;
}

.sr-contact-form .fluentform fieldset > .ff-el-group:has(+ .ff-custom_html) {
	margin-bottom: 28px;
}

.sr-contact-form .fluentform .ff-custom_html,
.sr-contact-form .fluentform .ff_submit_btn_wrapper {
	flex: 0 1 auto;
	margin: 0;
}

.sr-contact-form .fluentform .ff-custom_html p {
	margin: 0;
	color: #6a7282;
	font-family: var(--sr-font);
	font-size: 14px;
	line-height: normal;
}

.sr-contact-form .fluentform .sr-req {
	margin-right: 4px;
	color: #d63638;
}

.sr-contact-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background-color: #6802ec;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px #5a00d1, 0 1px 2px rgba(74, 0, 176, 0.35), 0 8px 20px -8px rgba(104, 2, 236, 0.55);
	color: #fff;
	font: 500 15px/48px var(--sr-font);
	letter-spacing: normal;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.sr-contact-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: #4a00b0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px #4a00b0, 0 2px 4px rgba(74, 0, 176, 0.3), 0 12px 24px -8px rgba(104, 2, 236, 0.6);
	color: #fff;
	opacity: 1;
	transform: translateY(-1px);
}

/* After sending, Fluent hides the form and shows the confirmation message
   (its HTML is in the form settings). */
.sr-contact-form .ff-message-success {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.sr-contact-sent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 0;
	font-family: var(--sr-font);
}

.sr-contact-sent__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f4eefe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236802EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.sr-contact-sent h2 {
	margin: 0;
	color: #1e2939;
	font-family: var(--sr-font);
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.02em;
}

.sr-contact-sent__text,
.sr-contact-sent__more {
	font-family: var(--sr-font);
}

.sr-contact-sent__text {
	margin: 0;
	color: #4a5565;
	font-size: 16px;
	line-height: 1.6;
}

.sr-contact-sent__more {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.4;
}

.sr-contact-sent__again {
	color: #6802ec;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.sr-contact-sent__again:hover {
	color: #4a00b0;
}

/*
 * Blog page template: search box, Query Loop post cards and
 * pagination. Core blocks have no settings for these states.
 */
.sr-blog-search .wp-block-search__inside-wrapper {
	height: 42px;
	padding: 4px 4px 4px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.sr-blog-search .wp-block-search__inside-wrapper:focus-within {
	border-color: #6802ec;
	box-shadow: 0 0 0 3px #e9ddfd;
}

.sr-blog-search .wp-block-search__input {
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #1e2939;
	font: 400 14px/1.4 var(--sr-font);
	outline: none;
}

.sr-blog-search .wp-block-search__input::placeholder {
	color: #6a7282;
	opacity: 1;
}

.sr-blog-search .wp-block-search__button {
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #6a7282;
	transition: color 0.15s, background-color 0.15s;
}

.sr-blog-search .wp-block-search__button:hover {
	background: #f4eefe;
	color: #6802ec;
}

.sr-blog-search .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

/* Cards: equal height in a row, lift on hover, the image zooms slightly. */
.sr-post-grid {
	font-family: var(--sr-font);
}

.sr-post-grid .wp-block-post {
	display: flex;
}

.sr-post-card {
	flex: 1;
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sr-post-card:hover {
	box-shadow: 0 16px 32px -16px rgba(30, 41, 57, 0.18);
	transform: translateY(-3px);
}

.sr-post-card__img {
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.sr-post-card__img img {
	display: block;
	transition: transform 0.3s;
}

.sr-post-card:hover .sr-post-card__img img {
	transform: scale(1.03);
}

.sr-post-card__body {
	flex: 1;
	width: 100%;
}

.sr-post-card__cat a,
.sr-post-card__title a {
	text-decoration: none;
}

.sr-post-card__title a {
	font-family: var(--sr-font);
	transition: color 0.15s;
}

.sr-post-card:hover .sr-post-card__title a {
	color: #6802ec;
}

/* Category badges (as on the ShapedGallery blog), one per category. */
.sr-post-card__cat {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sr-post-card__cat .wp-block-post-terms__separator {
	display: none;
}

/* stylelint-disable-next-line no-descending-specificity -- other element */
.sr-post-card__cat a {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 4px;
	background: #f4eefe;
	transition: background-color 0.15s;
}

/* stylelint-disable-next-line no-descending-specificity -- other element */
.sr-post-card__cat a:hover {
	background: #e9ddfd;
}

.sr-post-card__meta {
	margin-top: auto;
}

.sr-post-card__date::before {
	content: "·";
	margin-right: 8px;
}

/*
 * Archive and search templates: the query title
 * at the Blog H1 sizes per Kadence breakpoint, and the category description.
 */
.sr-archive-title {
	font-family: var(--sr-font);
	font-size: 56px;
	letter-spacing: -1.96px;
}

.sr-archive-desc {
	max-width: 660px;
	margin-inline: auto;
}

@media (max-width: 1024px) {

	.sr-archive-title {
		font-size: 46px;
		letter-spacing: -1.61px;
	}
}

@media (max-width: 767px) {

	.sr-archive-title {
		font-size: 36px;
		letter-spacing: -1.26px;
	}
}

/* Pagination: 40px squares; the current page and hover are dark grey.
   The query's layout style (block gap 0) would reset the margin, hence
   .wp-block-query. */
.wp-block-query .sr-pagination {
	gap: 8px;
	margin-top: 56px;
	font: 500 14px/1 var(--sr-font);
}

.sr-pagination .page-numbers,
.sr-pagination .wp-block-query-pagination-previous,
.sr-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #364153;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

/* Page numbers are squares: the same width as height. */
.sr-pagination .page-numbers {
	width: 40px;
	padding: 0;
}

.sr-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
}

.sr-pagination a.page-numbers:hover,
.sr-pagination a[class*="pagination-"]:hover {
	border-color: #5a5a63;
	background: #5a5a63;
	color: #fff;
}

.sr-pagination .page-numbers.current {
	border-color: #5a5a63;
	background: #5a5a63;
	color: #fff;
}

.sr-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/*
 * Footer newsletter: the Fluent Forms form (live form 5) in the group
 * .sr-newsletter-form, as in Landing Page v3.dc.html: a 260px email field
 * and the Subscribe button in one row 12px apart (Inter 15px), the
 * "No spam" line 14px below; on phones the button wraps under the field.
 * Plus a styled error note under the row and a success card that replaces
 * the form. The field wrappers are display: contents and the field, button
 * and note have fixed grid cells, so extra nodes (password-manager icons)
 * cannot move them.
 */
/* stylelint-disable no-descending-specificity -- own scope. */
.sr-newsletter-form {
	width: 100%;
	margin: 0 0 12px;
}

.sr-newsletter-form .fluentform {
	margin: 0;
	font-family: Inter, sans-serif;
}

.sr-newsletter-form .fluentform fieldset {
	display: grid;
	grid-template-columns: minmax(0, 260px) auto;
	justify-content: start;
	gap: 0 12px;
}

.sr-newsletter-form .fluentform .ff-el-group,
.sr-newsletter-form .fluentform .ff-el-input--content {
	display: contents;
}

.sr-newsletter-form .fluentform .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sr-newsletter-form .fluentform .ff-el-form-control {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: inset 0 0 0 1px #d1d5dc;
	color: #1e2939;
	font: 400 15px/1 Inter, sans-serif;
	letter-spacing: normal;
	outline: none;
	transition: box-shadow 0.15s;
}

.sr-newsletter-form .fluentform .ff-el-form-control::placeholder {
	color: #757575;
	opacity: 1;
}

.sr-newsletter-form .fluentform .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1px #6802ec, 0 0 0 3px #e9ddfd;
}

/* The button wrapper is an .ff-el-group too: keep it a real grid item. */
.sr-newsletter-form .fluentform .ff_submit_btn_wrapper {
	display: block;
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.sr-newsletter-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background-color: #6802ec !important;
	box-shadow: none;
	color: #fff;
	font: 500 15px/1 Inter, sans-serif;
	letter-spacing: normal;
	white-space: nowrap;
	cursor: pointer;
	opacity: 1;
	transition: background-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.sr-newsletter-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover,
.sr-newsletter-form .fluentform .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
	background-color: #4a00b0 !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px #4a00b0, 0 2px 4px rgba(74, 0, 176, 0.3), 0 12px 24px -8px rgba(104, 2, 236, 0.6);
	color: #fff;
	opacity: 1;
	transform: translateY(-1px);
}

/* Error: red ring on the field, and a soft red note with an icon
   on its own row under the field and button. */
.sr-newsletter-form .fluentform .ff-el-is-error .ff-el-form-control,
.sr-newsletter-form .fluentform .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: inset 0 0 0 1.5px #d63638, 0 0 0 3px #fcebec;
}

.sr-newsletter-form .fluentform .text-danger,
.sr-newsletter-form .ff-errors-in-stack .error {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: 8px;
	max-width: 394px;
	margin: 10px 0 0;
	padding: 9px 12px;
	border: 1px solid #fbd5d6;
	border-radius: 8px;
	background: #fef3f2;
	color: #b42318;
	font: 500 13px/1.4 Inter, sans-serif;
	letter-spacing: normal;
}

.sr-newsletter-form .fluentform .text-danger::before,
.sr-newsletter-form .ff-errors-in-stack .error::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.8v3.6M8 11h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sr-newsletter-form .ff-errors-in-stack {
	margin: 0;
}

.sr-newsletter-form .ff-errors-in-stack .error {
	margin-top: 10px;
}

/* Success: Fluent hides the form and shows the confirmation message. */
.sr-newsletter-form .ff-message-success {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 394px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #d6c0fb;
	border-radius: 12px;
	background: linear-gradient(135deg, #f8f4ff, #f1e8fe);
	box-shadow: 0 10px 24px -14px rgba(104, 2, 236, 0.45);
	color: #4a5565;
	font: 400 14px/1.5 Inter, sans-serif;
	letter-spacing: normal;
}

.sr-newsletter-form .ff-message-success::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #6802ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 16px no-repeat;
	box-shadow: 0 0 0 4px #e9ddfd;
}

.sr-newsletter-form .ff-message-success p {
	margin: 0;
}

.sr-newsletter-form .ff-message-success strong {
	display: block;
	margin-bottom: 2px;
	color: #1e2939;
	font-size: 15px;
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {

	.sr-newsletter-form .fluentform .text-danger,
	.sr-newsletter-form .ff-errors-in-stack .error {
		animation: sr-nl-in 0.25s var(--sr-ease) both;
	}

	.sr-newsletter-form .ff-message-success {
		animation: sr-nl-in 0.4s var(--sr-ease) both;
	}

	.sr-newsletter-form .ff-message-success::before {
		animation: sr-nl-pop 0.45s 0.1s var(--sr-ease) both;
	}
}

@keyframes sr-nl-in {

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

@keyframes sr-nl-pop {

	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

/* Phones (Kadence's mobile breakpoint): the button wraps under the field. */
@media (max-width: 767px) {

	.sr-newsletter-form .fluentform fieldset {
		grid-template-columns: minmax(0, 260px);
	}

	.sr-newsletter-form .fluentform .ff_submit_btn_wrapper {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		margin-top: 12px;
	}
}
/* stylelint-enable no-descending-specificity */

/* Text links (Kadence Advanced Text + class "sp-sr-text-link"), e.g. the
   footer copyright: the link keeps the text colour with no underline and
   turns primary on hover. */
/* stylelint-disable no-descending-specificity -- other element */
.sp-sr-text-link a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}

.sp-sr-text-link a:hover,
.sp-sr-text-link a:focus-visible {
	color: var(--sr-primary, #6802ec);
}
/* stylelint-enable no-descending-specificity */