/* Font Faces */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('./assets/fonts/roboto-v48-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('./assets/fonts/roboto-v48-latin-700.woff2') format('woff2');
}

/* CSS Variables */
:root {
	--red: hsl(4, 100%, 67%);
	--blue-800: hsl(234, 29%, 20%);
	--blue-700: hsl(235, 18%, 26%);
	--grey: hsl(0, 0%, 58%);
	--white: hsl(0, 0%, 100%);

	--input-invalid: hsl(4, 100%, 67%, 0.15);
	--btn-hover: linear-gradient(
		90deg,
		#ff527b,
		#ff5373,
		#ff556b,
		#ff5863,
		#ff5b5b,
		#ff5f52,
		#ff634a,
		#ff6741
	);

	--label-text: 0.75rem;
	--body-text: 1rem;
	--heading-text: clamp(2.5rem, 1.876rem + 2.6622vw, 3.5rem);

	--font-regular: 400;
	--font-bold: 700;

	--space-6: 0.375rem;
	--space-10: 0.625rem;
	--space-16: 1rem;
	--space-18: 1.125rem;
	--space-20: 1.25rem;
	--space-22: 1.375rem;
	--space-24: 1.5rem;
	--space-36: 2.25rem;
	--space-38: 2.375rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-64: 4rem;
	--space-88: 5.5rem;
	--space-136: 8.5rem;
	--space-fluid: clamp(1.5rem, -24.046rem + 45.977vw, 4rem);

	--radius-8: 8px;
	--radius-24: 24px;
	--radius-38: 38px;

	--newsletter-mw: 58rem;
	--success-message-mw: 31.5rem;
}

/* Reset and Global Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif;
	font-weight: var(--font-regular);
	color: var(--blue-800);
}

@media screen and (min-width: 426px) {
	body {
		background-color: var(--blue-700);
	}
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

p,
li {
	line-height: 1.5;
	text-wrap: pretty;
}

button,
input {
	font-family: inherit;
	font-weight: inherit;
}

/* Button */
.btn {
	position: relative;
	font-size: var(--body-text);
	font-weight: var(--font-bold);
	background-color: var(--blue-800);
	color: var(--white);
	border: none;
	border-radius: var(--radius-8);
	padding: var(--space-18) var(--space-22);
	cursor: pointer;
	z-index: 1;
}

.btn::before {
	position: absolute;
	content: '';
	inset: 0;
	opacity: 0;
	z-index: -1;
	background-image: var(--btn-hover);
	border-radius: var(--radius-8);
	transition: 0.3s ease-in-out;
}

.btn:hover::before {
	opacity: 1;
}

/* Main Layout */
@media screen and (min-width: 376px) {
	main {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

@media screen and (min-width: 426px) {
	main {
		min-height: 100dvh;
	}
}

/* Newsletter Container */
.newsletter-container {
	display: flex;
	flex-direction: column;
	background-color: var(--white);
}

@media screen and (min-width: 426px) {
	.newsletter-container {
		border-radius: var(--radius-24);
		margin-inline: var(--space-24);
		margin-block: clamp(1.5rem, -1.5977rem + 11.6618vw, 4rem);
	}
}

@media screen and (min-width: 889px) {
	.newsletter-container {
		flex-direction: row-reverse;
		align-items: center;
		max-width: var(--newsletter-mw);
		width: 100%;
		border-radius: var(--radius-38);
	}
}

/* Newsletter Image */
@media screen and (min-width: 376px) {
	.newsletter-image-wrapper {
		padding: var(--space-24);
		padding-block-end: 0;
	}
}

@media screen and (min-width: 889px) {
	.newsletter-image-wrapper {
		padding-block: var(--space-24);
		padding-inline: 0 var(--space-24);
	}
}

/* Newsletter Content */
.newsletter-content-wrapper {
	flex: 1;
	padding: var(--space-36) var(--space-24);
	width: 100%;
}

.newsletter-content-wrapper h2 {
	font-weight: var(--font-bold);
	font-size: var(--heading-text);
	margin-block-end: var(--space-20);
}

.newsletter-content-wrapper p {
	margin-block-end: var(--space-24);
}

@media screen and (min-width: 889px) {
	.newsletter-content-wrapper {
		padding: 0;
	}

	.newsletter-content {
		padding: var(--space-88) var(--space-fluid);
	}

	.newsletter-content .btn {
		margin-block-end: var(--space-10);
	}
}

/* Benefits List */
.newsletter-benefits {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin-block-end: var(--space-38);
}

.newsletter-benefits li {
	display: flex;
	gap: var(--space-16);
}

.newsletter-benefits li:before {
	content: url('./assets/icons/icon-list.svg');
}

@media screen and (min-width: 889px) {
	.newsletter-benefits {
		gap: var(--space-6);
	}
}

/* Form Styles */
.newsletter-form {
	display: flex;
	flex-direction: column;
}

label {
	font-size: var(--label-text);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-10);
}

input {
	font-size: var(--body-text);
	border: 1px solid var(--grey);
	border-radius: var(--radius-8);
	padding: var(--space-18) var(--space-22);
	margin-block-end: var(--space-6);
}

/* Success Message */
.success-message-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: var(--white);
	padding: var(--space-36) var(--space-24);
	min-height: 100dvh;
}

.success-message-container .btn {
	margin-block-start: var(--space-136);
}

@media screen and (min-width: 426px) {
	.success-message-container {
		min-height: auto;
		max-width: var(--success-message-mw);
		width: 100%;
		margin-inline: var(--space-24);
		border-radius: var(--radius-38);
		padding: var(--space-48) var(--space-64) var(--space-64);
	}

	.success-message-container .btn {
		margin-block-start: var(--space-40);
	}
}

.success-message {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.success-message img {
	width: 4rem;
	height: 4rem;
	margin-block-end: var(--space-40);
}

.success-message img + p {
	font-weight: var(--font-bold);
	font-size: var(--heading-text);
	line-height: 1;
	margin-block-end: var(--space-24);
}

/* Utility Classes */
.visually-hidden:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.hidden {
	display: none;
}

/* Error */
.invalid {
	border: 2px solid var(--red);
	background-color: var(--input-invalid);
}

.email-error {
	display: block;
	color: var(--red);
	font-size: var(--label-text);
	margin-block-end: var(--space-18);
}