/**
 * Base Styles
 * CSS Variables, Reset, Typography
 */

 @font-face {
	font-family: 'ActayWide';
	src: url('../fonts/ActayWide-Bold.woff2') format('woff2'),
		url('../fonts/ActayWide-Regular.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.woff2') format('woff2'),
		url('../fonts/Inter-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Medium.woff2') format('woff2'),
		url('../fonts/Inter-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {	
	font-family: 'Inter';
	src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
		url('../fonts/Inter-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Bold.woff2') format('woff2'),
		url('../fonts/Inter-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	/* Colors */
	--color-black: #0a0a0a;
	--color-black-50: #f2f2f2;
	--color-black-100: #e6e6e6;
	--color-black-200: #cccccc;
	--color-black-300: #b3b3b3;
	--color-black-400: #999999;
	--color-black-500: #808080;
	--color-black-600: #666666;
	--color-black-700: #4d4d4d;
	--color-black-800: #333333;
	--color-black-900: #1a1a1a;
	--color-white: #ffffff;
	--color-dark-bg: #222222;
	--color-dark-footer: #323232;

	/* Accent Colors */
	--color-accent: #e5403e;

	/* Gradients */
	--gradient-header-dark: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0) 100%);
	--gradient-marketplace: linear-gradient(30.96deg, rgba(111, 1, 251, 1) 0%, rgba(255, 73, 215, 1) 100%);

	/* Shadows */
	--shadow-cookie: 0 0.2rem 3.2rem 0 rgba(58, 58, 58, 0.32);
	--shadow-faq-icon: 0 0 4.8rem 0 rgba(115, 123, 130, 0.12);

	/* Typography */
	--font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-actay: 'ActayWide', sans-serif;

	/* Font Sizes */
	--font-size-xs: 1.2rem;
	--font-size-sm: 1.4rem;
	--font-size-base: 1.6rem;
	--font-size-md: 1.8rem;
	--font-size-lg: 2rem;
	--font-size-xl: 2.4rem;
	--font-size-2xl: 3.2rem;
	--font-size-2-5xl: 4rem;
	--font-size-3xl: 4.8rem;
	--font-size-4xl: 6.4rem;

	/* Font Weights */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line Heights */
	--line-height-tight: 0.95;
	--line-height-snug: 1.1;
	--line-height-normal: 1.3;
	--line-height-relaxed: 1.35;
	--line-height-loose: 1.6;

	/* Spacing */
	--spacing-xs: 0.4rem;
	--spacing-sm: 0.8rem;
	--spacing-md: 1.2rem;
	--spacing-lg: 1.6rem;
	--spacing-xl: 2.4rem;
	--spacing-2xl: 3.2rem;
	--spacing-3xl: 4.8rem;
	--spacing-4xl: 5.6rem;
	--spacing-5xl: 6rem;
	--spacing-6xl: 10rem;

	/* Border Radius */
	--radius-sm: 0.4rem;
	--radius-md: 1.2rem;
	--radius-lg: 2.4rem; 
	--radius-full: 4rem;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* Z-index */
	--z-header: 1000;
	--z-modal: 1100;
	--z-cookie: 1050;

	/* Layout */
	--container-width: 144rem;
	--header-height: 11.2rem;
	--header-height-mobile: 8rem;
	--header-padding-x: 3rem;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: .6944444444vw;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (max-width: 1079px) {
	body,html {
		-webkit-font-smoothing: auto;
		font-size: 10px;
	}
}

body {
	font-family: var(--font-inter);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-loose);
	color: var(--color-black);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.text-title-xl {
	font-family: var(--font-actay);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

.text-title-lg {
	font-family: var(--font-actay);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

.text-body-lg {
	font-family: var(--font-inter);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-relaxed);
}

.text-body {
	font-family: var(--font-inter);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
}

.text-nav {
	font-family: var(--font-inter);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.text-footer {
	font-family: var(--font-inter);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
}

.text-legal {
	font-family: var(--font-inter);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.visually-hidden {
	position: absolute;
	width: 0.1rem;
	height: 0.1rem;
	padding: 0;
	margin: -0.1rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--spacing-5xl);
}

.container.no-padding {
	padding: 0;
}

@media (max-width: 1079px) {
	.container {
		padding:0 var(--spacing-lg)
	}
}

/* ==========================================================================
   Gutenberg Compatibility
   ========================================================================== */

.entry-content > * {
	max-width: 88rem;
}

.entry-content > .alignwide {
	max-width: 120rem;
}

.entry-content > .alignfull {
	max-width: none;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: var(--font-actay);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	margin-bottom: var(--spacing-xl);
}

.entry-content h1 {
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
}

.entry-content h2 {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-tight);
}

.entry-content h3 {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
}

.entry-content p {
	font-family: var(--font-inter);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-black);
	margin-bottom: var(--spacing-lg);
}

.entry-content p:last-child {
	margin-bottom: 0;
}

.entry-content a {
	color: var(--color-black);
	text-decoration: underline;
	transition: opacity var(--transition-fast);
}

.entry-content a:hover {
	opacity: 0.7;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: var(--spacing-lg);
	padding-left: var(--spacing-xl);
}

.entry-content li {
	margin-bottom: var(--spacing-sm);
}

.entry-content ul li {
	list-style-type: disc;
}

.entry-content ol li {
	list-style-type: decimal;
}

.site-main {
	padding-top: var(--header-height);
}

.home .site-main,
.page-template-page-catalog .site-main {
	padding-top: 0;
}