/*
 * Roadmap for Sustainable IT – page styles.
 *
 * Every rule is scoped to .rsit and uses two classes (e.g. ".rsit .rsit-hero"),
 * which outranks the theme's ".post-content h2" style rules without !important.
 * The few !important font sizes below match the old page, where they stop
 * Avada's responsive typography from rescaling those particular headings.
 *
 * Breakpoints (same as the old page):
 *   37.48rem / 37.5rem   phone
 *   47.48rem             graphic scale-down
 *   49.998rem            tablet typography
 *   782px                columns stack (WordPress default)
 *   75rem / 100rem       large screens
 */

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

.rsit {
	--rsit-spacer: 2.1375rem; /* one empty 18px line + its margin, as on the old page */

	position: relative;
	overflow-x: clip;
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	word-spacing: normal;
	color: #000;
}

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

.rsit .rsit-hero h1,
.rsit h2[class^="rsit-"],
.rsit h3[class^="rsit-"],
.rsit h4[class^="rsit-"] {
	font-family: inherit;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.rsit p[class^="rsit-"] {
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
}

.rsit p[class^="rsit-"] strong,
.rsit .rsit-hero__cta strong {
	font-weight: 600;
}

.rsit p[class^="rsit-"] a {
	color: var(--rsit-link);
}

.rsit ol.rsit-timeline,
.rsit ul.rsit-tabs__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rsit li.rsit-timeline__row,
.rsit li.rsit-tabs__item {
	margin: 0;
	padding: 0;
}

.rsit li.rsit-timeline__row::before,
.rsit li.rsit-tabs__item::before {
	content: none;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.rsit .rsit-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 90svh;
	min-height: fit-content;
	max-height: 80rem;
	padding: 8rem 4rem 4rem;
}

.rsit .rsit-hero > * {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
}

.rsit .rsit-hero__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
}

.rsit .rsit-hero__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
}

.rsit .rsit-hero__logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 1rem;
}

.rsit .rsit-hero__tagline {
	margin: 0 0 0.5em;
	font-size: 1.25rem;
}

.rsit .rsit-hero__title {
	margin: 0 0 0.5em;
	font-size: 4.5rem !important;
}

/* The old page indented the second line with invisible characters. */
.rsit .rsit-hero__title-indent {
	padding-left: 1.73em;
}

.rsit .rsit-hero__cta {
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin-right: 0;
	padding: 0.425rem 0.85rem 0.425rem 1.3rem;
	border-radius: 999px;
	background: #000;
	color: #fff;
	font-size: 0.825rem;
	text-decoration: none;
}

.rsit .rsit-hero__cta svg {
	flex-shrink: 0;
}

/*
 * Hero text waits for the intro animation. rsit--js is set by a tiny inline
 * script before the page paints; rsit--ready by roadmap.js once it has taken
 * over; rsit--failed if roadmap.js hasn't started within a few seconds.
 */
.rsit.rsit--js:not(.rsit--ready):not(.rsit--failed) .rsit-hero__logo,
.rsit.rsit--js:not(.rsit--ready):not(.rsit--failed) .rsit-hero__tagline,
.rsit.rsit--js:not(.rsit--ready):not(.rsit--failed) .rsit-hero__title {
	opacity: 0;
}

/* Decoration, revealed and moved by the animation script. */
.rsit .rsit-hero__clouds,
.rsit .rsit-hero__leaves,
.rsit .rsit-hero__leaf-behind {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.rsit .rsit-hero__leaves,
.rsit .rsit-hero__leaf-behind {
	z-index: 3;
	height: auto;
	max-height: 90svh;
}

.rsit .rsit-hero__leaf-behind {
	z-index: -1;
}

.rsit .rsit-hero__leaves svg,
.rsit .rsit-hero__leaf-behind svg {
	overflow: visible;
}

/* The stroked paths are motion guides for the leaves, never shown. */
.rsit .rsit-hero__leaves svg > path,
.rsit .rsit-hero__leaf-behind svg > path {
	opacity: 0;
}

.rsit .rsit-hero__leaves #rsit-leaf-2 {
	opacity: 0;
}

.rsit .rsit-hero__clouds svg {
	position: absolute;
}

.rsit .rsit-hero__clouds svg:nth-child(7),
.rsit .rsit-hero__clouds svg:nth-child(8) {
	z-index: 3;
	opacity: 0;
}

.rsit .rsit-preview-banner {
	position: fixed;
	top: calc(1rem + var(--wp-admin--admin-bar--height, 0px));
	left: 50%;
	z-index: 1001;
	transform: translateX(-50%);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: #1d2327;
	color: #fff;
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Scroll progress bar                                                 */
/* ------------------------------------------------------------------ */

.rsit .rsit-progress {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	height: 0.5rem;
	pointer-events: none;
}

.rsit .rsit-progress__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--rsit-scroll, 0);
	height: 100%;
	background-color: var(--rsit-progress);
}

/* ------------------------------------------------------------------ */
/* Bands, intro and goals sections                                     */
/* ------------------------------------------------------------------ */

.rsit .rsit-band {
	background: var(--rsit-band);
}

.rsit .rsit-section {
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16rem 4rem 8rem;
}

.rsit .rsit-section__content {
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
}

.rsit .rsit-section__heading {
	margin: 0 0 0.5em;
	text-align: center;
	font-size: 3.25rem !important;
}

.rsit .rsit-section__icons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.rsit .rsit-section__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 0 1rem;
	object-fit: contain;
}

.rsit .rsit-spacer {
	height: 4rem;
}

/* ------------------------------------------------------------------ */
/* Focus-area teasers                                                  */
/* ------------------------------------------------------------------ */

.rsit .rsit-teaser {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 12rem 4rem;
}

.rsit .rsit-teaser__content {
	position: relative; /* the link card is placed relative to the content */
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
}

.rsit .rsit-teaser__bg {
	position: absolute;
	left: 50%;
	z-index: -1;
	width: 100%;
	max-width: 120rem;
	margin: 0;
}

.rsit .rsit-teaser__bg--top {
	top: 0;
	height: 28rem;
	transform: translateX(-50%);
}

.rsit .rsit-teaser__bg--bottom {
	bottom: -4rem;
	height: 32rem;
	transform: translate(-50%, 4rem);
}

.rsit .rsit-teaser__bg img {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
}

.rsit .rsit-teaser__bg--top img {
	object-position: right center;
}

.rsit .rsit-teaser__bg--bottom img {
	object-position: center;
}

.rsit .rsit-teaser__label {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
}

.rsit .rsit-teaser__label-text {
	max-width: 18rem;
	margin: 0 0 0.5em;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.rsit .rsit-teaser__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2em;
	margin: 0 0 1.75em;
}

.rsit .rsit-teaser__text,
.rsit .rsit-teaser__visual {
	flex: 1 1 100%;
	align-self: center;
	min-width: 0;
	overflow-wrap: break-word;
}

.rsit .rsit-teaser__heading {
	margin: 0;
	font-size: 3.25rem !important;
}

.rsit .rsit-graphic {
	position: relative;
	aspect-ratio: 1;
	border-radius: 9999px;
}

.rsit .rsit-graphic img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.rsit .rsit-graphic__layer {
	--size: 100%;

	position: absolute;
	inset: calc((100% - var(--size)) / 2);
	width: var(--size);
	height: var(--size);
	transform-origin: center;
}

.rsit .rsit-graphic__bg {
	z-index: 2;
	transform: scale(1.1);
}

/* As on the old page: the background's parallax movement is eased by CSS. */
@media (prefers-reduced-motion: no-preference) {
	.rsit .rsit-graphic__bg img {
		position: relative;
		transform-origin: center;
		transition: transform 0.75s ease-out;
	}
}

.rsit .rsit-graphic__main {
	z-index: 3;
	transform: scale(1.2);
}

.rsit .rsit-teaser__cta {
	position: absolute;
	bottom: 0;
	left: 60%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 16rem;
	padding: 1.5rem;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 7px 8px 19px rgba(165, 148, 188, 0.1);
	color: #000;
	text-decoration: none;
}

.rsit .rsit-teaser__cta svg {
	flex-shrink: 0;
	margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Socket                                                              */
/* ------------------------------------------------------------------ */

.rsit .rsit-socket {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	max-width: 100vw;
	margin-block: -4rem -8rem;
	padding-block: min(8rem, 8%) min(12rem, 12%);
}

.rsit .rsit-socket svg {
	max-width: 100%;
	height: auto;
	margin-right: 10%;
	overflow: visible;
}

/* First path is the motion guide for the plug. */
.rsit .rsit-socket svg > path:first-child {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Tabs                                                                */
/* ------------------------------------------------------------------ */

.rsit .rsit-tabs-heading {
	margin: 0;
	text-align: center;
	font-size: 2.125rem;
}

.rsit .rsit-tabs {
	/* Keeps the heading in view when the tabs are scrolled into view. */
	margin-top: -12rem;
	padding-top: 12rem;
}

.rsit ul.rsit-tabs__nav {
	position: sticky;
	top: calc(1rem + var(--adminbar-height, 0px));
	z-index: 10;
	display: none;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: calc(100% - 2rem);
	max-width: 50rem;
	margin: 2rem auto;
	padding: 0.5rem 1rem;
	border: 2px solid #eee;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 7px 8px 19px rgba(165, 148, 188, 0.1);
}

.rsit.rsit--tabs ul.rsit-tabs__nav {
	display: flex;
}

.rsit li.rsit-tabs__item {
	flex: 1 0 0%;
}

.rsit .rsit-tabs__button {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	appearance: none;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: normal;
	color: inherit;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.rsit .rsit-tabs__button[aria-selected="true"] {
	font-weight: 700;
}

.rsit .rsit-tabs__button:focus {
	outline: 0;
}

.rsit .rsit-panel:focus-visible {
	outline: 3px solid color-mix(in srgb, #88c593, transparent);
	outline-offset: 4px;
}

.rsit .rsit-tabs__button:focus-visible {
	outline: 3px solid color-mix(in srgb, #88c593, transparent);
	outline-offset: 0;
	border-radius: 5px;
}

/* ------------------------------------------------------------------ */
/* Tab panels                                                          */
/* ------------------------------------------------------------------ */

.rsit .rsit-panel {
	padding-inline: 1rem;
}

/*
 * With JavaScript, the panels share one grid cell: the tab area is as tall as
 * the longest panel (as on the old page) and switching tabs cross-fades.
 */
.rsit.rsit--tabs .rsit-tabs__panels {
	display: grid;
}

.rsit.rsit--tabs .rsit-panel {
	grid-area: 1 / 1;
	transition:
		opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
		visibility 0s linear 0.8s;
}

.rsit.rsit--tabs .rsit-panel:not(.is-active) {
	z-index: 0;
	visibility: hidden;
	opacity: 0;
}

.rsit.rsit--tabs .rsit-panel.is-active {
	z-index: 1;
	opacity: 1;
	transition:
		opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
		visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.rsit.rsit--tabs .rsit-panel,
	.rsit.rsit--tabs .rsit-panel.is-active {
		transition: none;
	}
}

/* Without JavaScript all panels are stacked; keep them apart. */
.rsit:not(.rsit--tabs) .rsit-panel + .rsit-panel {
	margin-top: 4rem;
}

/*
 * Note: the blocks inside a panel have no margins of their own. The old page
 * set margins on them in the editor, but its tab styles removed them all
 * (margin-block: 0 !important), so the spacing comes from the elements inside.
 */

.rsit .rsit-panel__inner {
	max-width: 60rem;
	margin-inline: auto;
}

/* Icon + text rows (panel head, step groups, goal). */
.rsit .rsit-iconrow {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.75em;
}

.rsit .rsit-iconrow__icon {
	flex: 0 0 4rem;
	min-width: 0;
}

.rsit .rsit-iconrow__icon--large {
	flex-basis: 6rem;
}

/* The old page squeezed the 80px icons into a 4rem column. */
.rsit .rsit-iconrow__icon img {
	display: block;
	width: 80px;
	max-width: 100%;
	height: 80px;
	margin: 0;
	object-fit: contain;
}

.rsit .rsit-iconrow__title {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 400;
}

.rsit .rsit-panel__title {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: 2.75rem;
}

.rsit .rsit-panel__h3 {
	margin: 0 0 0.5em;
	font-size: 2rem;
}

.rsit .rsit-panel__h4 {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
}

.rsit .rsit-panel__lead {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
	font-weight: 600;
}

.rsit .rsit-text {
	margin: 0 0 0.5em;
	font-size: 1rem;
}

.rsit .rsit-text--flush {
	margin: 0;
}

.rsit .rsit-cols,
.rsit .rsit-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	margin: 0 0 1.75em;
}

.rsit .rsit-groups--wide {
	gap: 2rem;
}

.rsit .rsit-cols__col {
	flex: 1 1 100%;
	min-width: 0;
}

.rsit .rsit-group {
	flex: 0 1 100%;
	min-width: 0;
}

.rsit .rsit-narrow {
	display: flow-root; /* keep the last paragraph's margin inside, as on the old page */
	max-width: 40rem;
	margin: 0 0 1.75em;
}

/* Padding, not margin: the old page's spacing does not collapse with the
   margin of the paragraph above. */
.rsit .rsit-history {
	max-width: 30rem;
	padding-top: var(--rsit-spacer);
}

.rsit .rsit-history__label {
	margin: 0 0 0.5em;
}

/* ------------------------------------------------------------------ */
/* Timelines (progress so far, 2024–2033)                              */
/* ------------------------------------------------------------------ */

.rsit .rsit-plan {
	padding-top: var(--rsit-spacer);
}

.rsit li.rsit-timeline__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 2em;
}

.rsit li.rsit-timeline__row:first-child {
	padding-top: 1.5rem;
}

.rsit .rsit-timeline__row--top {
	align-items: flex-start;
}

/* Vertical line through the dots. */
.rsit .rsit-timeline__marker {
	flex: 0 0 1rem;
	min-width: 0;
	background-image: linear-gradient(
		90deg,
		transparent 50%,
		rgba(0, 0, 0, 0.15) 50%,
		rgba(0, 0, 0, 0.15) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	background-position: -0.5px 0;
}

.rsit .rsit-timeline__row:first-child > .rsit-timeline__marker {
	background-position: -0.5px 0.4rem;
	background-size: 100% calc(100% - 0.4rem);
	background-repeat: no-repeat;
}

.rsit .rsit-timeline__row:last-child > .rsit-timeline__marker {
	background-position: -0.5px 0;
	background-size: 100% 0.4rem;
	background-repeat: no-repeat;
}

.rsit .rsit-dot {
	display: block;
	width: 1rem;
	height: 1rem;
	margin: 0.4rem 0;
	border-radius: 999px;
	background-color: var(--rsit-accent);
}

.rsit .rsit-timeline__body {
	flex: 1 1 0;
	min-width: 0;
	padding-bottom: 1.5rem;
}

.rsit p.rsit-timeline__label {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
}

.rsit .rsit-vision {
	margin: 0 0 0.5em;
	font-size: 2rem;
}

/* ------------------------------------------------------------------ */
/* Breakpoints                                                         */
/* ------------------------------------------------------------------ */

@media (min-width: 37.5rem) {
	.rsit .rsit-teaser__cols {
		gap: 5rem;
	}

	.rsit ul.rsit-tabs__nav {
		margin: 3rem auto 4rem;
		padding: 0.75rem 1.5rem;
	}
}

@media (min-width: 782px) {
	.rsit .rsit-teaser__cols,
	.rsit .rsit-cols,
	.rsit .rsit-groups {
		flex-wrap: nowrap;
	}

	.rsit .rsit-teaser__text {
		flex: 0 1 60%;
	}

	.rsit .rsit-teaser__visual,
	.rsit .rsit-cols__col {
		flex: 1 1 0;
	}
}

@media (min-width: 75rem) {
	.rsit .rsit-teaser__cols {
		gap: 6rem;
	}

	.rsit ul.rsit-tabs__nav {
		margin: 4rem auto 6rem;
		padding: 1rem 3rem;
	}
}

@media (min-width: 100rem) {
	.rsit .rsit-hero__title {
		font-size: 6rem !important;
	}
}

@media (max-width: 49.998rem) {
	.rsit .rsit-hero__title {
		font-size: 2.5rem !important;
	}

	.rsit .rsit-section__heading,
	.rsit .rsit-teaser__heading {
		font-size: 2rem !important;
	}

	.rsit .rsit-hero__tagline {
		font-size: 1rem;
	}

	.rsit .rsit-tabs__button {
		font-size: 1rem;
	}
}

@media (max-width: 47.48rem) {
	.rsit .rsit-graphic {
		transform: scale(0.85);
	}
}

@media (max-width: 37.48rem) {
	.rsit .rsit-hero {
		padding-inline: 2rem;
	}

	.rsit .rsit-hero__title {
		font-size: 2rem !important;
	}

	.rsit .rsit-hero__leaves,
	.rsit .rsit-hero__leaf-behind {
		transform: scale(0.7) translate(-50%, 10%);
	}

	.rsit .rsit-section {
		padding-inline: 2rem;
	}

	.rsit .rsit-section__heading,
	.rsit .rsit-teaser__heading {
		font-size: 1.5rem !important;
	}

	.rsit .rsit-teaser {
		padding: 4rem 2rem;
	}

	.rsit .rsit-teaser__bg {
		display: none;
	}

	.rsit .rsit-teaser__label {
		margin-bottom: 2rem;
	}

	.rsit .rsit-teaser__cta {
		right: 0;
		left: auto;
	}
}

@media (max-width: 34.98rem) {
	.rsit .rsit-tabs__button {
		font-size: 0.825rem;
	}
}