@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@layer theme {
	:root {
		--section-spacing: 30px;
		--body-font-family: 'Poppins';
		--column-min-size: 270px;
		--max-width: 1170px;
		--default-line-height: 1.5;
		--list-bullet-color: #ff855a;
		--link-color: #bd4d24;
		--link-hover-color: #963d1d;
		--button-border-radius: 0;
		--primary-button-color: #262626;
		--primary-button-background-color: #ffa182;
		--primary-button-border-color: #121212;
		--primary-button-hover-color: var(--primary-button-color);
		--primary-button-hover-background-color: #ffa182;
		--primary-button-hover-border-color: var(--primary-button-border-color);
		--secondary-button-color: #262626;
		--secondary-button-background-color: #e6e5e2;
		--secondary-button-border-color: #121212;
		--secondary-button-hover-color: var(--color-white);
		--secondary-button-hover-background-color: #340f52;
		--secondary-button-hover-border-color: var(--secondary-button-border-color);
		--text-button-color: #bd4d24;
		--text-button-hover-color: #963d1d;
		--cookie-consent-background-color: #210933;
	}

	.button.on-dark {
		--secondary-button-background-color: var(--color-white);
		--secondary-button-border-color: var(--color-white);
	}

	.success-by-numbers-gradient li {
		--cards-color: var(--color-white);

		&:nth-child(1) {
			--cards-background: linear-gradient(90deg, #210933, #4a1b7c);
		}

		&:nth-child(2) {
			--cards-background: linear-gradient(90deg, #4a1b7c, #d51b3a);
		}

		&:nth-child(3) {
			--cards-background: linear-gradient(90deg, #ef2a4b, #ff6631);
		}

		&:nth-child(4) {
			--cards-background: linear-gradient(90deg, #ff6631, #ffd13b);
		}
	}

	.label-style {
		letter-spacing: .15em;
		text-transform: uppercase;
	}
}

@layer overrides {

	/* Buttons  */
	.button {
		letter-spacing: .15em;

		&.primary {
			background-image: linear-gradient(90deg, #ef2a4b, #ffd13b, #fff, #fff);
			background-position: 0 0;
			background-size: 300% 100%;
			transition:
				background-position var(--transition-time) ease-in-out,
				text-decoration-color var(--transition-time) ease-in-out;

			&:hover,
			&:focus-visible {
				background-position: 100% 0;
			}
		}
	}

	/* Header */
	.main-nav {

		& a,
		& button {
			font-weight: 600;
		}

		&>li> :where(a, button) {
			@media (width >=75em) {
				&::after {
					background-color: #bd4d24;
				}
			}
		}

		@media (width < 75em) {
			border-block-end: none;
		}
	}

	.mobile-nav-button {

		&::before,
		&::after,
		& span {
			background-color: #bd4d24;
		}
	}

	.sub-nav-wrapper {
		--link-color: #ffa182;
		--link-hover-color: #ff7e54;

		background-color: #340f52;
	}

	.nav-wrapper {
		--link-color: #bd4d24;
		--link-hover-color: #963d1d;

		@media (width < 75em) {
			--link-color: #ffa182;
			--link-hover-color: #ff7e54;

			background-color: #340f52;
			block-size: calc(100dvh - var(--header-height, 61px));
		}
	}

	/* Footer */
	.footer {
		--link-color: #ffa182;
		--link-hover-color: #ff7e54;
	}

	.footer-top {
		@media (width >=48em) {
			grid-template-columns: 3fr repeat(3, 1fr);
		}
	}

	.footer-bottom {
		border-block-start-color: #ffa182;

		& p {
			color: var(--color-white);
			font-weight: 500;
		}

		& a {
			font-size: var(--body-font-size-s);
			font-weight: 600;
		}
	}

	.footer-wrapper {
		background-color: #210933;
	}

	.link-column {
		align-content: center;
		font-weight: 600;
	}

	/* Sections */
	.section {
		--section-block-spacing: 45px;

		@media (width >=75em) {
			--section-block-spacing: 60px;
		}

		&.hero-container {
			--section-block-spacing: 0;
		}
	}

	/* Titles */
	.title-extra-extra-large {
		--title-font-weight: 700;
		line-height: 1.3;
	}

	.title-extra-large {
		--title-font-weight: 700;
		line-height: 1.3;
	}

	.title-large {
		--title-font-weight: 700;
		line-height: 1.344;
	}

	.title-medium {
		--title-font-weight: 500;
		line-height: 1.344;
	}

	.title-small {
		--title-font-weight: 600;
		line-height: 1.344;
	}

	/* Background */
	.bg-color-violet {
		background-color: #4a1b7c;
	}

	.bg-color-violet-light {
		background-color: #f8f6fa;
	}

	/* Hero */
	.hero-container {
		--hero-padding: 50px 60px;

		@media (width >=48em) {
			--hero-padding: 75px 90px;
		}

		.homepage & {
			--hero-padding: 170px 30px;

			@media (width >=48em) {
				--hero-padding: 100px;
			}
		}

		.error & {
			--hero-padding: 80px;

			@media (width >=48em) {
				--hero-padding: 120px;
			}

			& h1 {
				color: #210933;
				padding-block-start: 30px;
			}
		}
	}

	.hero-sub-title {
		font-size: var(--heading-font-size-m);
		font-weight: 500;

		.homepage &,
		.error & {
			font-size: var(--body-font-size-m);
			font-weight: 400;
		}
	}

	/* Blockquote */
	.blockquote.compact {
		--quote-font-size: var(--body-font-size-m);

		align-items: start;
		background-color: #340f52;
		color: var(--color-white);
		grid-template-columns: auto 1fr;
		padding: 15px;

		& .blockquote-content {
			gap: 25px;
		}

		& cite {
			color: var(--color-white);
		}
	}

	/* To top button */
	.back-to-top {
		display: none;
	}

	.live-chat-button {
		position: relative;
	}

	.live-chat-button::before {
		content: '';
		position: absolute;
		left: 16px;
		width: 8px;
		height: 8px;
		background-color: #00d145;
		border-radius: 50%;
		z-index: 1;
	}

	.sticky-footer-wrapper {
		z-index: 1;
	}
}