/*
Theme Name: Perník Zachová – příprava
Theme URI: https://pernik-zachova.cz
Author: Martin Mareček
Description: Dočasná stránka, než vznikne katalog perníků. Až bude hotový web, tenhle motiv se vymění.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Text Domain: pernik-priprava
*/

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--cream: #efdcca;
	--brown: #bc6f36;
	--ink: #7a4320;
}

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

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	background: var(--cream);
	color: var(--ink);
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-weight: 400;
	line-height: 1.6;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("assets/pattern.svg");
	background-size: 440px 440px;
	opacity: 0.16;
	pointer-events: none;
}

.coming {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 56px 24px 72px;
}

.logo {
	width: min(340px, 78vw);
	height: auto;
	display: block;
}

.rule {
	width: 56px;
	height: 2px;
	margin: 32px auto 26px;
	background: var(--brown);
	border: 0;
}

h1 {
	margin: 0;
	color: var(--brown);
	font-size: clamp(30px, 4.2vw, 46px);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.lead {
	max-width: 34rem;
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 500;
}

@media (max-width: 640px) {
	.coming {
		padding: 40px 20px 56px;
	}

	.rule {
		margin-top: 26px;
	}

	.lead {
		font-size: 16px;
	}
}