/* Hand-written additions to legacy-content.css: things the old theme did outside main.min.css. */

/* The old section block centred its content in a 1216px Bootstrap container,
   which the conversion to core/group drops. */
.rw-legacy .rw-block--section {
	padding-left: max(12px, calc((100% - 1192px) / 2));
	padding-right: max(12px, calc((100% - 1192px) / 2));
}

/* Buttons take their look from the post content widget in the Elementor
   single templates (the site's button style); only layout is set here. */
.rw-legacy .wp-block-buttons {
	gap: 30px;
}

.rw-legacy .wp-block-button .wp-block-button__link {
	display: inline-block;
}

.rw-legacy .action-buttons .wp-block-button,
.rw-legacy .action-buttons .wp-block-button a {
	width: auto;
}

/* The old theme had no full-bleed alignment inside sections; the new theme's
   .alignfull pulls blocks out to the viewport edges, off screen on desktop. */
.rw-legacy .rw-block--section .alignfull {
	width: auto;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Same for the old image-and-text block, except its boxed-card style, which
   carried the container class itself. */
.rw-legacy .wp-block-rewind-blocks-image-and-text:not(.container) {
	padding-left: max(12px, calc((100% - 1192px) / 2));
	padding-right: max(12px, calc((100% - 1192px) / 2));
}

/* The old banner's top padding made room for the old fixed header. */
.rw-legacy .main-banner {
	padding-top: 60px;
	padding-bottom: 60px;
}

/* Banner built from the old "Header Fields" (LegacyHeader). */
.rw-legacy .rw-header__video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

.rw-legacy .rw-header__video-note {
	margin: 10px 0 0;
	font-size: 14px;
}

.rw-legacy .rw-header .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* A gradient class the extracted subset doesn't cover. */
.rw-legacy .bg-gradient-blue {
	background: linear-gradient(90deg, #3c5df3 0, #5f27cd 100%);
}

/* The hero: the first section of a resource, whether built from the header
   fields (.rw-header) or part of the content. */
.rw-legacy:not(.rw-legacy--full) > section:first-of-type {
	margin-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
	border-radius: 12px;
	overflow: hidden;
}

@media (max-width: 766.98px) {
	.rw-legacy:not(.rw-legacy--full) > section:first-of-type {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Old content sits in a column much narrower than the page it was designed
   for, so size things by the width of that column, not the viewport. */
.rw-legacy {
	container-type: inline-size;
}

/* Hero headings: the site-wide H1 size (64px) is for full-width page titles. */
.rw-legacy section h1,
.rw-legacy section .rw-header__title {
	font-size: clamp(28px, 5.5cqi, 44px);
	line-height: 1.15;
	letter-spacing: -1px;
	overflow-wrap: normal;
	word-break: normal;
}

/* Two-column rows stack when the column is too narrow to hold them side by side. */
@container (max-width: 640px) {
	.rw-legacy .wp-block-columns.is-style-rewind-cols {
		flex-wrap: wrap;
	}

	.rw-legacy .wp-block-columns.is-style-rewind-cols > .wp-block-column {
		/* The old grid's column widths (col-lg-7 and friends) are more specific. */
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

/* A banner with no background of its own got the old theme's default:
   the blue-to-purple gradient with white text. */
.rw-legacy > section.main-banner:not(.main-banner--light):not(.has-background):not([class*="bg-gradient"]) {
	background: linear-gradient(90deg, #3c5df3 0, #5f27cd 100%);
}

.rw-legacy > section.main-banner:not(.main-banner--light):not(.has-background),
.rw-legacy > section.main-banner:not(.main-banner--light):not(.has-background) :is(h1, h2, h3, h4, h5, p, li, span, strong) {
	color: #fff;
}

/* Testimonials converted from the old testimonial block. */
.rw-legacy .rw-testimonial {
	margin: 40px 0;
	padding: 32px 40px;
	border-radius: 12px;
}

.rw-legacy .rw-testimonial__photo img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 50%;
}

.rw-legacy .rw-testimonial .wp-block-quote {
	margin: 16px 0 !important;
}

.rw-legacy .rw-testimonial cite {
	display: block;
	margin-top: 12px;
	font-size: 16px;
	font-style: normal;
}

/* Holder for the wheel's cursor tooltip, moved to the body by Wheel. */
.rw-legacy--floating {
	container-type: normal;
}

/* Two helper classes the wheel uses that the old stylesheet defined elsewhere. */
.rw-legacy .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rw-legacy .z-index-5 {
	z-index: 5;
}

/* Photo beside the quote; stacked when the column is narrow. */
.rw-legacy .rw-testimonial__item:has(.rw-testimonial__photo) {
	display: grid;
	grid-template-columns: 72px 1fr;
	column-gap: 24px;
	align-items: start;
}

.rw-legacy .rw-testimonial__item:has(.rw-testimonial__photo) > * {
	grid-column: 2;
}

.rw-legacy .rw-testimonial__item > .rw-testimonial__photo {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 16px 0 0;
}

@container (max-width: 480px) {
	.rw-legacy .rw-testimonial__item:has(.rw-testimonial__photo) {
		display: block;
	}
}

/* Sections with a background are boxes in the content column: give their
   content room at the sides and round them like the hero. */
.rw-legacy:not(.rw-legacy--full) .rw-block--section:is(.has-background, .dark-background, [class*="bg-"]) {
	padding-left: max(40px, calc((100% - 1192px) / 2));
	padding-right: max(40px, calc((100% - 1192px) / 2));
	border-radius: 12px;
}

@media (max-width: 766.98px) {
	.rw-legacy:not(.rw-legacy--full) .rw-block--section:is(.has-background, .dark-background, [class*="bg-"]) {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* "Half background" sections paint their colour on a pseudo-element. */
.rw-legacy:not(.rw-legacy--full) .rw-block--section[class*="half-bg-"]::before {
	border-radius: 12px 12px 0 0;
}

/* Price calculator panel ([rewind-price-calc]). */
.rw-legacy .price-calc {
	padding: 40px !important;
}

@media (max-width: 766.98px) {
	.rw-legacy .price-calc {
		padding: 24px 20px !important;
	}
}

/* Video dialog (assets/video-modal.js). It is appended to the body, outside .rw-legacy. */
.rw-video-modal {
	width: min(1100px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #000;
	overflow: visible;
}

.rw-video-modal::backdrop {
	background: rgba(2, 9, 23, .8);
}

.rw-video-modal__frame {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
}

.rw-video-modal__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.rw-video-modal .rw-video-modal__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #020917;
	font-size: 24px;
	line-height: 36px;
	cursor: pointer;
}

/* HubSpot call-to-action buttons (script-injected, styled by HubSpot with
   ID selectors): make them the site button. The :is(#…) only raises the
   specificity above HubSpot's and the template's link rule. */
.rw-legacy :is(#rw-specificity, .hs-cta-wrapper) a.cta_button {
	display: inline-block !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--e-global-color-accent, #fdad0d) !important;
	box-shadow: none !important;
	color: var(--e-global-color-primary, #020917) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

.rw-legacy :is(#rw-specificity, .hs-cta-wrapper) a.cta_button * {
	font-weight: inherit !important;
	text-decoration: none !important;
}

.rw-legacy .hs-cta-wrapper {
	display: inline-block;
	margin: 8px 0 24px;
}

/* Loose paragraphs and images at the top level of old content. */
.rw-legacy > p {
	margin-top: 24px;
	margin-bottom: 24px;
}

.rw-legacy > .wp-block-image {
	margin-bottom: 32px;
}

/* Old Bootstrap-style button links (a.btn), mostly in reusable blocks: same
   treatment as the HubSpot buttons above, so every button matches the site. */
.rw-legacy :is(#rw-specificity, a.btn):not(.btn-link) {
	display: inline-block !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--e-global-color-accent, #fdad0d) !important;
	color: var(--e-global-color-primary, #020917) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

/* On pages with a legacy hero, hide whatever a template marks as its own
   header (CSS class "clio-template-header" on the Elementor element). */
.rw-has-legacy-hero .clio-template-header {
	display: none !important;
}

/* People row from the old "bios" component (FlexibleImporter). */
.rw-legacy .rw-bios {
	gap: 24px;
	margin-top: 24px;
}

.rw-legacy .rw-bio__photo img {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto 12px;
	object-fit: cover;
	border-radius: 50%;
}

.rw-legacy .bg-gradient-lightblue {
	background: linear-gradient(90deg, #3498db 0, #3c5df3 100%);
}

/* Logo row from the old "logos" component (FlexibleImporter). */
.rw-legacy .rw-logos {
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 40px;
	margin-top: 24px;
}

.rw-legacy .rw-logos > .wp-block-column {
	flex: 0 1 140px;
}

.rw-legacy .rw-logos__logo img {
	display: block;
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

/* Block buttons in old content, on every resource template: the site button.
   (Two of the Elementor templates set this themselves; the others don't.) */
.rw-legacy :is(#rw-specificity, .wp-block-button) > .wp-block-button__link {
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--e-global-color-accent, #fdad0d) !important;
	color: var(--e-global-color-primary, #020917) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}

.rw-legacy :is(#rw-specificity, .wp-block-button) > .wp-block-button__link:hover,
.rw-legacy :is(#rw-specificity, a.btn):not(.btn-link):hover,
.rw-legacy :is(#rw-specificity, .hs-cta-wrapper) a.cta_button:hover {
	background: var(--e-global-color-10ab63f, #d3910b) !important;
}

.rw-legacy .bg-gradient-purple {
	background: #5f27cd;
}

/* Text beside an image, from the old "col_text_button_col_img" component. */
.rw-legacy .rw-text-image {
	gap: 40px;
	align-items: center;
}

.rw-legacy .rw-text-image .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hand-written sections brought over as HTML (old "code_block" component):
   their own Bootstrap container shouldn't add a second set of gutters. */
.rw-legacy .code-block > .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.rw-legacy .code-block img {
	max-width: 100%;
	height: auto;
}

/* Extra case study rows ([rewind_case_study_extra]), matching the template's
   sidebar label/value styling. */
.rw-cs-extra {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.rw-cs-extra__label {
	padding-top: 12px;
	border-top: 1px solid var(--e-global-color-9ce066a, currentColor);
	color: var(--e-global-color-9ce066a, inherit);
	font-family: "Space Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.rw-cs-extra__value {
	margin-top: 24px;
	font-family: "Inter Tight", sans-serif;
	font-size: 20px;
}

.rw-cs-extra__value p {
	margin: 0;
}

/* Old landing pages shown across the full page width (.rw-legacy--full) keep
   the old theme's layout: full-bleed sections, content centred in them. The
   boxed-section rules above are for content inside a template column. */

/* "Rewind + partner" logo strip at the top of some banners (old theme's
   _global.scss); without it the Rewind logo shows at its full size. */
.rw-legacy .partner-logo-wrapper {
	display: flex;
	align-items: center;
}

.rw-legacy .partner-logo-wrapper strong {
	line-height: 30px;
}

.rw-legacy .partner-logo-wrapper__backups-logo {
	height: 30px;
}

.rw-legacy .partner-logo-wrapper__partner {
	max-height: 70px;
}