/*=====
Theme Name: Kave Home Guides
Author: weco.digital
Author URI: https://weco.digital/
Description: A custom WordPress theme developed with ♥ by weco.digital, specifically designed for the Kave Home Guides website. All rights reserved. This theme is not intended for redistribution, modification, or resale.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.9.0
Requires PHP: 7.0
License: Proprietary - All Rights Reserved
License URI: https://weco.digital/license
Text Domain: kave-home-guides
Tags: custom, modern, responsive, SEO-friendly, accessible
=======*/



/* BASIC */

:root {
	--black: #000;
	--black-overlay: #00000026;
	--gray: #3F3F3F;
	--light-gray: #AFAFAF;
	--gray-light: #666666;
	--white: #fff;
	--cream-50: #F1EEEA;
	--cream-100: #D9D6CF;
	--cream-200: #AFAA9E;
	--cream-300: #9B9688;
	--cream-400: #8A8574;
	--black-faded: #00000066;
	--yellow-100: #D1BB77;
	--yellow-200: #9E7C33;
	--green-200: #818D6E;
	--blue-100: #7796A3;
	--blue-200: #4A606B;
	--error: #DE4323;
	--text-h1: clamp(36px, 3vw, 64px);
	--text-h2: clamp(24px, 2.5vw, 44px);
	--text-h3: clamp(18px, 2vw, 24px);
	--text-regular: clamp(14px, 0.75vw, 16px);
	--text-small: 12px;
	--cubic-bezier: cubic-bezier(.6,0,.4,1);

	interpolate-size: allow-keywords;
}

::-moz-selection {
	color: var(--white);
	background: var(--black);
}
  
::selection {
	color: var(--white);
	background: var(--black);
}

.nojq  {
	display: none;
}

* {
	/* Designer mode */
	/* outline: 1px solid blue; */
	margin: 0;
	padding: 0;
	letter-spacing: 0.05ch;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body,
html {
	overflow-x:hidden;
}

body {
	width: 100%;
	height: 100%;
	font-family: 'Kave Haffer', sans-serif;
	color: var(--black);
	background-color: var(--white);
	font-size: var(--text-regular);
	font-weight: 400;
	margin: 0;
	padding: 0;
	/* opacity: 0;
	animation: fade-in .5s forwards; */
}

.pause-animations * {
    animation-play-state: paused !important;
    transition: none !important;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes minimize {
	from {
		opacity: 1;
		width: auto;
	}
	to {
		opacity: 0;
		width: 0;
	}
}

@keyframes slide-in-left {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes slide-out-left {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-100%);
	}
}

@keyframes mobile-header {
	from {
		height: 0;
		padding: 0 var(--text-h2);
	}
	to {
		height: auto;
		padding: 24px var(--text-h2);
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-h1);
}

h2 {
	font-size: var(--text-h2);
}

h3 {  
	font-size: var(--text-h3);  
}

h4 {  
	font-size: 33.16px;  
}

h5 {  
	font-size: 24.88px;  
}

h6 {  
	font-size: 18.66px;  
}

p {
	font-size: var(--text-regular);
	text-wrap: pretty;
}

a {
	text-decoration: none;
	color: var(--black);
}

b {
	font-weight: 700;
}

/* Fonts */
@font-face {
	font-family: 'Kave Haffer';
	font-display: swap;
	src: url("assets/fonts/KaveHaffer/KaveHaffer-Light.woff2") format('woff2');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Kave Haffer';
	font-display: swap;
	src: url("assets/fonts/KaveHaffer/KaveHaffer-Regular.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Kave Haffer';
	font-display: swap;
	src: url("assets/fonts/KaveHaffer/KaveHaffer-Medium.woff2") format('woff2');
	font-weight: 570;
	font-style: normal;
}

@font-face {
	font-family: 'Kave Haffer';
	font-display: swap;
	src: url("assets/fonts/KaveHaffer/KaveHaffer-SemiBold.woff2") format('woff2');
	font-weight: 670;
	font-style: normal;
}

@font-face {
	font-family: 'Martina Plantijn';
	font-display: swap;
	src: url("assets/fonts/Martina/MartinaPlantijn-Regular.woff2") format('woff2');
	font-weight: 400;
	font-style: normal;
}


/* Login */

.login {
	main {
		height: calc(100svh - (var(--text-h2) * 2));
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: var(--cream-100) !important;
		overflow: hidden;
		padding: var(--text-h2);
		transition: background .3s;

		#login {
			width: 100%;
			max-width: 580px;
			transition: opacity .3s;

			.wp-login-logo,
			#backtoblog {
				display: none;
			}

			.notice {
				border-left: none;
				background-color: transparent;
				box-shadow: none;
				color: var(--error);
				position: relative;
				margin-left: 25px;
				padding-left: 25px;

				&::before {
					content: "";
                    position: absolute;
                    left: 0;
                    height: 20px;
                    width: 20px;
                    background-size: 100%;
					background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" viewBox="0 0 26 26"><path stroke="%23de4323" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="M12.75 6.26302V14.75m0 3.777v-.277m12-5.5c0 6.6274-5.3726 12-12 12-6.62742 0-12-5.3726-12-12 0-6.62742 5.37258-12 12-12 6.6274 0 12 5.37258 12 12Z"/></svg>');
				}
			}
		}

		#loginform,
		#lostpasswordform {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			background: transparent;
			box-shadow: none;
			border: none;

			p:first-of-type {
				order: 1;
			}

			.user-pass-wrap {
				order: 2;
			}

			.submit {
				order: 3;
				justify-self: start;

				input {
					background: var(--black);
                    color: var(--white);
                    padding: 10px 20px;
                    line-height: normal;
                    min-height: auto;
                    font-size: 16px;
                    font-weight: 400;
					border-radius: 0;
                    border: 1px solid var(--black);
					transition: all .1s;

					&:hover {
						background-color: var(--black);
						color: var(--white);
					}
				}
			}

			.forgetmenot {
				order: 4;
				justify-self: end;
				display: flex;
				align-items: center;
				gap: 10px;

				input {
					background: transparent;
					border: 2px solid #49454F;
					border-radius: 2px;
					display: grid;
					place-content: center;
					aspect-ratio: 1;

					&::before {
						content: "";
						width: 12px;
						height: 12px;
						margin: 0;
						clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
						transform: scale(0);
						box-shadow: inset 1em 1em var(--black);
						background-color: CanvasText;
					}

					&:checked::before {
						transform: scale(1);
					}
				}
				
				label {
					font-size: 16px;
					font-weight: 400;
					white-space: nowrap;
				}
			}

			p:first-of-type,
			.user-pass-wrap {
				position: relative;
				grid-column: 1 / 3;
				
				label {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					font-size: var(--text-h2);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 100%;
					color: var(--black-overlay);
					transition: all 0.3s var(--cubic-bezier);
					pointer-events: none;
					z-index: 1;
				}
				
				input {
					margin: 0;
					border: 0;
					border-bottom: 1px solid var(--black);
					border-radius: 0;
					background: transparent;
					font-size: var(--text-h2);
					
					&:-webkit-autofill {
						-webkit-box-shadow: 0 0 0 50px var(--cream-100) inset !important;
					}
					
					&:focus {
						box-shadow: none;
					}
				}
				
				&:has(input:focus) label,
				&:has(input:not(:placeholder-shown)) label,
				&:has(input:-webkit-autofill) label {
					transform: translateY(-200%);
					font-size: var(--text-regular);
				}
				
				.dashicons-visibility,
				.dashicons-hidden {
					color: var(--black);
				}

				.wp-hide-pw {
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.wp-login-lost-password,
		.wp-login-log-in {
			font-size: 16px;
			font-weight: 400;
			color: var(--black) !important;
			text-decoration: underline !important;
		}
	}
}

.profile-toggle {
	position: fixed;
	top: 2rem;
	right: 2rem;
	z-index: 99999;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;

	.icon {
		width: 45px;
		height: 45px;
		border-radius: 50px;
		background-color: var(--black);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--white);
		font-size: 15px;
		cursor: pointer;
	}

	.arrow {
		cursor: pointer;
		transition: transform .2s ease-out;

		path {
			stroke: var(--black);
		}

		@media (max-width:900px) {
			& {
				display: none;
			}
		}
	}

	.mobile {
		display: none;

		@media (max-width:900px) {
			& {
				display: block;
			}
		}
	}

	.profile-card {
		position: absolute;
		opacity: 0;
		transform: translateY(-20px);
		pointer-events: none;
		top: 60px;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 18px;
		min-width: 250px;
		background-color: var(--white);
		border-radius: 6px;
		box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
		transition: opacity .2s, transform .3s ease-out;

		.mobile-close {
			display: none;
		}

		hr {
			height: .25px;
			width: 100%;
			border: none;
			background-color: #DAD4C7;
		}

		.info {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;

			.card-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 33px;
				height: 33px;
				background-color: #535046;
				color: var(--white);
				border-radius: 40px;
				font-size: 12px;
			}

			.text {
				display: flex;
				flex-direction: column;

				.name {
					font-size: 15px;
					font-weight: 400;
				}

				.email {
					font-size: 14px;
					font-weight: 300;
				}
			}
		}

		.privileges {
			padding-left: 43px;

			.access {
				font-size: 12px;
				font-weight: 400;
			}

			.description {
				font-size: 12px;
				font-weight: 300;
			}
		}

		.logout {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
			padding: 10px;
			align-self: flex-end;
			color: var(--white);
			background-color: var(--black);
			cursor: pointer;

			.logout-icon {
				path {
					stroke: var(--white);
				}
			}
		}
	}

	&.open {
		svg {
			transform: rotate(180deg);
		}

		.profile-card {
			opacity: 1;
			transform: translateY(0);
			pointer-events: all;
		}
	}

	@media (max-width:900px) {
		& {
			top: 15px;
			left: 20px;
			right: auto;
			opacity: 0;
			pointer-events: none;
			transition: opacity .3s .2s;

			.icon {
				background-color: #535046;
			}

			&.visible {
				opacity: 1;
				pointer-events: all;
			}

			.profile-card {
				position: fixed;
                inset: 0 20px;
                width: calc(100% - 100px);
				max-width: 300px;
                height: fit-content;
                margin: auto;

				.mobile-close {
					display: block;
					align-self: flex-end;
				}
			}
		}
	}
}

.kave-logo {
	display: flex;
    justify-content: space-between;
    gap: 15px;
	transition: gap .3s var(--cubic-bezier);

	.kave,
	.home {
		height: 100%;
		width: fit-content;
		max-height: 160px;
	}
}

main {
	display: flex;
	flex-direction: row;
	transition: opacity .3s;
}

header {
	height: calc(100svh - (var(--text-h2) * 2));
	width: calc(100vw - (var(--text-h2) * 2));
	background-color: var(--cream-200);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--text-h2);
	transition: all .5s var(--cubic-bezier);
	z-index: 2;

	nav {
		display: flex;
		flex-direction: column;
		gap: var(--text-regular);

		a {
			white-space: nowrap;
			font-size: var(--text-h2);
			font-weight: 400;
			color: var(--black-faded);
			width: fit-content;
			transition: font-size .5s var(--cubic-bezier);

			&.current {
				color: var(--black);
			}
		}

		.toggle {
			display: none;
		}

		@media (min-width:650px) {
			a:hover {
				color: var(--black);
			}
		}

		@media (max-width:650px) {
			& {
				gap: 0;
				
				.no-dropdown {
					display: none;
				}

				a {
					width: 100%;
					justify-content: space-between;
					padding: 12px 0;
					border-bottom: .5px solid var(--cream-400);
				}

				.toggle {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					align-items: center;
					justify-content: center;
					border-bottom: .5px solid var(--cream-400);

					a {
						grid-column: 1 / 3;
						border-bottom: none;
					}

					.toggle-icon {
						grid-column: 3;
                        justify-self: end;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        aspect-ratio: 1;
                        width: 30px;
                        height: 30px;
                        border-radius: 3px;

						svg {
							transition: transform .3s var(--cubic-bezier);
						}
					}

					.dropdown {
						grid-column: 1 / 4;
						display: flex;
						flex-direction: column;
						gap: 15px;
						padding: 0;
						height: 0;
						overflow: hidden;
						transition: height .3s var(--cubic-bezier), padding .3s var(--cubic-bezier);
						
						a {
							font-size: 16px;
							padding: 0;
						}
					}

					&.open {
						.toggle-icon {
							svg {
								transform: rotate(180deg);
							}
						}

						.dropdown {
							height: auto;
							padding: 12px 0 28px;
						}
					}
				}
			}
		}
	}

	.search {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		border-bottom: 1px solid var(--black);
		max-width: 700px;

		input {
			font-family: 'Kave Haffer', sans-serif;
			background: transparent;
			border: none;
			font-size: var(--text-h1);
			width: 100%;
			transition: font-size .3s var(--cubic-bezier);

			&::placeholder {
				color: var(--black-overlay);
			}

			&:focus {
				outline: none;
			}
		}

		button {
			background: transparent;
            border: none;
            width: var(--text-h2);
            height: var(--text-h2);
            margin: 10px 0;
			cursor: pointer;
			transition: width .3s var(--cubic-bezier), height .3s var(--cubic-bezier);

			svg {
				display: block;
				width: 100%;
				height: 100%;
				min-width: 25px;
                min-height: 25px;
			}

			&.hidden {
				display: none;
			}
		}
	}

	@media (max-width:650px) {
		& {
			padding: 100px var(--text-h2) var(--text-h2);
			height: calc(100svh - 100px - var(--text-h2));
		}
	}
}

main.home {
	.mobile-menu-toggle {
		display: none;
	}
}

main.intro {
	header {
		background-color: var(--cream-200);
	}

	.mobile-header {
		background-color: transparent;
	}

	.profile-toggle {
		.arrow {
			path {
				stroke: var(--white);
			}
		}
	}
}

main.brand-assets {
	header,
	.mobile-header {
		background-color: var(--yellow-200);
	}
}

main.guides {
	header,
	.mobile-header {
		background-color: var(--green-200);
	}
}

main.media {
	header,
	.mobile-header {
		background-color: var(--blue-200);
	}
}

main.intro,
main.brand-assets,
main.guides,
main.media,
main.search,
main.not-found {
	header {
		width: clamp(200px, 15vw, 350px);
		padding: clamp(20px, 1.5vw, 35px);
		height: calc(100svh - (clamp(20px, 1.5vw, 35px) * 2));

		nav {
			opacity: 1;
			animation: none;

			a {
				font-size: 24px;
				font-weight: 400;
			}
		}

		.search {
			opacity: 1;
			animation: none;

			input {
				font-size: 36px;
			}
			button {
				width: 25px;
            	height: 25px;
			}
		}

		@media (max-width:900px) {
			& {
				position: fixed;
				inset: 0;
				overflow: hidden;
				z-index: 99999;
				width: auto;
				background-color: var(--cream-100);
				padding: 0 var(--text-h2) 0;
				height: 0;

				&.open {
					padding: 100px var(--text-h2) var(--text-h2);
					height: calc(100svh - 100px - var(--text-h2));
				}
			}
		}
	}

	.mobile-header {
		position: fixed;
		inset: 0 0 auto 0;
		width: calc(100% - (var(--text-h2) * 2));
		padding: 24px var(--text-h2);
		color: var(--white);
		overflow: hidden;
		z-index: 2;
		animation: mobile-header .5s var(--cubic-bezier);

		h1 {
			font-size: 24px;
			font-weight: 400;
		}

		@media (min-width:900px) {
			& {
				display: none;
			}
		}
	}

	@media (max-width:900px) {
		& {
			display: flex;
			flex-direction: column;
			gap: 25px;
		}
	}
}

main.home {
	.mobile-header {
		@media (min-width:650px) {
			& {
				display: none;
			}
		}
	}
}

main.search {
	header {
		background-color: var(--white);
		width: calc(50vw - (var(--text-h2) * 2));
	}

	.mobile-menu-toggle {
		span {
			background-color: var(--black);
		}
	}

	@media (max-width:650px) {
		header {
			width: auto;
		}

		.assets-wrapper {
			padding: 100px 0 var(--text-h2);
		}
	}
}

.search-results-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	width: 100%;
	height: fit-content;
	padding: var(--text-h2) 0;
	animation: fade-in .5s;

	.search-result-item {
		height: fit-content;
	}
}

@media (max-width:900px) {
	main.brand-assets,
	main.guides,
	main.media {
		margin-top: 76px;
	}	
}

.download-btn {
	width: fit-content;
	border: 1px solid var(--black);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 16px;
	cursor: pointer;
	font-size: 16px;
	padding: 12px 20px;
	transition: background-color .2s, color .2s;

	svg {
		display: block;
		width: 12px;
		height: auto;

		path {
			transition: stroke .2s;
		}
	}

	&.icon {
		border: none;
		padding: 10px;

		svg {
			width: 14px;
		}
	}

	@media (min-width:900px) {
		&:hover {
			background-color: var(--black);
			color: var(--white);

			svg {
				path {
					stroke: var(--white);
				}
			}
		}
	}

	@media (max-width:650px) {
		& {
			font-size: 12px;
			padding: 9px 12px;
			gap: 12px;

			svg {
				width: 10px;
			}
		}
	}
}

.transition-fade {
	animation: fade-out .5s forwards !important;
}

.transition-minimize {
	animation: minimize .5s forwards !important;
}

.mobile-menu-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 20px;
	right: 20px;
	gap: 6px;
	padding: 8px;
	z-index: 999999;

	span  {
		width: 27px;
		height: 2px;
		border-radius: 2px;
		background-color: var(--white);
		transition: transform .3s var(--cubic-bezier), width .3s var(--cubic-bezier), opacity .2s, background-color .2s .1s;
	}

	@media (min-width:900px) {
		& {
			display: none;
		}
	}

	&.open {
		span {
			background-color: var(--black);
		}

		span:first-of-type {
			transform: translateY(8px) rotate(45deg);
		}

		span:nth-of-type(2) {
			width: 0;
			opacity: 0;
		}

		span:last-of-type {
			transform: translateY(-8px) rotate(-45deg);
		}
	}
}

/* Intro */
.intro-wrapper {
	width: calc(100% - (clamp(20px, 3vw, 54px) * 2));
	height: calc(100svh - (clamp(20px, 3vw, 54px) * 2));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	padding: clamp(20px, 3vw, 54px);
	animation: fade-in .5s;

	.intro-title {
		z-index: 2;
		
		h1 {
			font-family: 'Martina Plantijn', serif;
			color: var(--white);
			font-size: clamp(24px, 4vw, 48px);
			font-weight: 400;
		}
	}

	.description-text {
		z-index: 2;
		color: var(--white);
		display: flex;
		flex-direction: column;
		gap: 50px;

		p {
			font-size: 30px;
			font-weight: 400;
			max-width: 70ch;
		}

		p.serif {
			font-family: 'Martina Plantijn', serif;
			line-height: 110%;
			font-size: 24px;
		}

		@media (max-width:650px) {
			& {
				gap: 20px;

				p {
					font-size: 22px;
				}

				p.serif {
					font-size: 18px;
				}
			}
		}
	}

	video {
		position: absolute;
		inset: 0;
		object-fit: cover;
		width: 100%;
		height: 100svh;
		z-index: 0;
		animation: fade-in .3s;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-color: var(--black-overlay);
	}

	@media (max-width:650px) {
		& {
			justify-content: flex-end;
			gap: 25px;

			.intro-title {
				h1 {
					font-size: 36px;
				}
			}
		}
	}
}

/* Brand assets */
.brand-assets-filter {
	display: flex;
	flex-direction: column;
	gap: var(--text-regular);
	width: clamp(200px, 15vw, 350px);
	padding: clamp(20px, 1.5vw, 35px);
	height: calc(100svh - (clamp(20px, 1.5vw, 35px) * 2));
	background-color: var(--yellow-100);
	transition: all .5s var(--cubic-bezier);
	animation: slide-in-left .5s var(--cubic-bezier);

	span {
		cursor: pointer;
		color: var(--black-faded);
		font-size: 24px;
		font-weight: 400;

		&.current {
			color: var(--black);
		}

		@media (min-width:650px) {
			&:hover {
				color: var(--black);
			}
		}
	}

	&.slide-out {
		animation: slide-out-left .3s var(--cubic-bezier) forwards;

		@media (max-width:650px) {
			& {
				animation: fade-out .3s forwards;
			}
		}
	}

	@media (max-width:900px) {
		& {
			gap: 7px;
			padding: 15px 20px;
			width: auto;
			height: auto;
			flex-direction: row;
			background-color: var(--white);
			border-bottom: .25px solid var(--gray);
			animation: fade-in .3s;

			span {
				font-size: 16px;
				line-height: 100%;
				padding: 10px 20px;
				background-color: var(--white);
				border: .25px solid var(--cream-200);
				border-radius: 40px;

				&.current {
					background-color: var(--yellow-100);
					border: .25px solid var(--yellow-100);
				}
			}
		}
	}
}

.assets-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(100svh - (var(--text-h2) * 2));
	padding: var(--text-h2) 0;
	overflow-y: scroll;
	animation: fade-in .5s;

	.search-query {
		font-size: var(--text-h2);
		font-weight: 400;
		margin-bottom: 40px;
		padding: 0 var(--text-h2);
	}

	&.has-filter {
		width: calc(100% - (clamp(200px, 15vw, 350px) * 2));

		@media (max-width:900px) {
			& {
				width: 100%;
				gap: 20px;
				padding: 10px 0;
			}
		}
	}

	@media (max-width:900px) {
		& {
			height: auto;
			overflow-y: auto;
			gap: 15px;

			&.color-block {
				grid-template-columns: repeat(2, 1fr);
			}
		}
	}

	.no-results {
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: var(--text-h2);
	}

	.asset-group {
		display: flex;
		flex-direction: column;
		max-width: 1100px;
		padding-right: 80px;

		.format-heading {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 0 var(--text-h2);
			padding: 8px 0;

			h2 {
				font-size: 24px;
				font-weight: 400;
			}
		}

		@media (max-width:900px) {
			& {
				gap: 10px;
				padding-right: 0;
			}
		}
	}

	.assets-block {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		gap: var(--text-h2);
		/* width: calc(100% - (var(--text-h2) * 2)); */
		padding: var(--text-h2);

		&.font {
			display: flex;
			flex-direction: column;

			.single-asset {
				border: none;
				padding: 0;
				border-radius: 0;

				.img-wrapper {
					padding: 0;
					border-radius: 0;
					background-color: transparent;
				}
			}
		}

		.single-asset {
			display: flex;
			flex-direction: column;
			gap: 5px;
			border-radius: 5px;
			border: .25px solid var(--light-gray);
			height: fit-content;
			padding: 8px;
			transition: box-shadow .2s;

			.asset-header {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 5px 0;

				.asset-title,
				.color-title {
					font-size: 15px;
					font-weight: 400;
					padding-left: 15px;
				}

				.color-title {
					padding-left: 0;
				}

				.asset-buttons {
					display: flex;
					flex-direction: row;
					gap: 5px;
				}
			}

			.img-wrapper {
				padding: 25px 15px;
				border-radius: 5px;
				overflow: clip;
				background-color: var(--cream-50);

				img {
					display: block;
					width: 100%;
					height: auto;
					transition: transform .2s ease-out;
				}
			}

			.color-swatch {
				width: 100%;
				aspect-ratio: 4 / 3;
				cursor: pointer;
			}

			.screen-group {
				display: flex;
				flex-direction: column;
				gap: 15px;
				padding-top: 10px;

				span {
					font-size: 15px;
                    font-weight: 400;
					border-bottom: .25px solid var(--black);
					padding: 5px 0;
				}

				.color-table {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 5px;
					font-size: 14px;
					line-height: 100%;

					.color-space {
						grid-column: 1;
						font-size: 12px;
					}

					.color-value {
						grid-column: 2 / 4;
						font-size: 12px;
						font-weight: 300;
					}
				}
			}

			&.hover {
				box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);

				img {
					transform: scale(1.05);
				}
			}
		}

		&.color-block {
			grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
		}

		@media (max-width:1100px) {
			& {
				grid-template-columns: repeat(1, 1fr);
			}
		}
	}

	.single-guide {
		display: flex;
		flex-direction: column;
		gap: 5px;
		border-radius: 5px;
		border: .25px solid var(--black);
		height: fit-content;
		padding: 8px;
		transition: box-shadow .2s;

		.guide-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			h3 {
				font-size: 15px;
				font-weight: 400;
				padding-left: 15px;
			}

			.guide-buttons {
				display: flex;
				flex-direction: row;
				gap: 5px;
				
				a {
					width: 20px;
					height: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: background-color .2s;

					svg {
						display: block;
						width: 15px;
                        height: 15px;

						path {
							transition: fill .2s;
						}
					}

					@media (min-width:900px) {
						&:hover {
							background-color: var(--black);

							svg {
								path {
									fill: var(--white);
									stroke: none;
								}
							}
						}
					}
				}
			}
		}

		.img-wrapper {
			overflow: clip;
			border-radius: 5px;

			img {
				display: block;
				width: 100%;
				height: auto;
				transform-origin: bottom left;
				transition: transform .2s ease-out;
			}
		}

		&.hover {
			box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.10);

			img {
				transform: scale(1.05);
			}
		}
	}
}

/* Guides */
.guides-block {
	padding: 0 calc(var(--text-h2) + 80px) 0 var(--text-h2) !important;
	gap: var(--text-h3) !important;

	@media (max-width:900px) {
		& {
			padding: 0 var(--text-h2) !important;
		}
	}
}

/* Figma link */
.figma-link {
	position: fixed;
	bottom: 2rem;
    right: 2rem;
    z-index: 99999;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
	background-color: var(--black);
	color: var(--white);
	font-size: 28px;
	border-radius: 6px;
	padding: 10px 10px 10px 20px;
	overflow: hidden;

	.text,
	.text-hover {
		white-space: nowrap;
		transition: transform .3s var(--cubic-bezier);
	}

	.text-hover {
		position: absolute;
		top: 50%;
		transform: translateY(150%);
		left: 20px;
	}

	.icon {
		width: 58px;
        height: 58px;
        border-radius: 3px;
        background-color: var(--gray);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
		position: relative;
		overflow: hidden;

		svg {
			position: absolute;
			display: block;
			width: 40px;
			height: 40px;
			transition: transform .3s var(--cubic-bezier);

			&.arrow {
				transform: translateX(-150%);
			}
		}
	}

	@media (min-width:900px) {
		&:hover {
			.text {
				transform: translateY(-200%);
			}

			.text-hover {
				transform: translateY(-50%);
			}

			svg {
				transform: translateX(150%);

				&.arrow {
					transform: translateX(0);
				}
			}
		}
	}

	@media (max-width:900px) {
		& {
			right: 50%;
			transform: translateX(50%);
		}
	}
}