/* General Styles for ShadeSmith Website */
/* ==== Local fonts ==== */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Playfair Display';
	src: url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Playfair Display';
	src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		sans-serif;
	line-height: 1.6;
	color: #333;
	background-color: #fff;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 1rem;
}

h1 {
	font-size: 3rem;
	color: #2c3e50;
}

h2 {
	font-size: 2.5rem;
	color: #34495e;
}

h3 {
	font-size: 1.8rem;
	color: #34495e;
}

p {
	margin-bottom: 1rem;
	font-size: 1.1rem;
	line-height: 1.7;
}

/* Container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header Styles */
.header {
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: all 0.3s ease;
}

.main-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
}

.logo {
	font-size: 2rem;
	font-weight: 700;
	color: #8b4513;
	text-decoration: none;
	font-family: 'Playfair Display', serif;
	transition: color 0.3s ease;
}

.logo:hover {
	color: #a0522d;
}

.nav-links {
	display: flex;
	list-style: none;
	gap: 2rem;
}

.nav-links a {
	text-decoration: none;
	color: #333;
	font-weight: 500;
	transition: color 0.3s ease;
	position: relative;
}

.nav-links a:hover {
	color: #8b4513;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: #8b4513;
	transition: width 0.3s ease;
}

.nav-links a:hover::after {
	width: 100%;
}

/* Main Content */
main {
	margin-top: 80px;
}

/* Section Spacing */
section {
	padding: 4rem 0;
}

section:nth-child(even) {
	background-color: #f8f9fa;
}

/* Images */
img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Buttons */
.cta-button {
	background: linear-gradient(135deg, #8b4513, #a0522d);
	color: white;
	padding: 1rem 2rem;
	border: none;
	border-radius: 50px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.cta-button:hover {
	background: linear-gradient(135deg, #a0522d, #8b4513);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3);
}

/* Grid Layouts */
.grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	align-items: center;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}

/* Cards */
.card {
	background: white;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Footer Styles */
.footer {
	background-color: #2c3e50;
	color: white;
	padding: 3rem 0 1rem;
}

.footer-container {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.footer-brand {
	font-size: 1.5rem;
	font-weight: 700;
	color: #f39c12;
	margin-bottom: 1rem;
	font-family: 'Playfair Display', serif;
}

.footer-contact p {
	margin-bottom: 0.5rem;
}

.footer-contact a {
	color: #ecf0f1;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-contact a:hover {
	color: #f39c12;
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-links a {
	color: #ecf0f1;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-links a:hover {
	color: #f39c12;
}

.back-to-top {
	background: linear-gradient(135deg, #f39c12, #e67e22);
	color: white;
	border: none;
	padding: 0.8rem 1.5rem;
	border-radius: 25px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
}

.back-to-top:hover {
	background: linear-gradient(135deg, #e67e22, #f39c12);
	transform: translateY(-2px);
}

/* Form Styles */
.form-wrapper {
	max-width: 600px;
	margin: 0 auto;
}

.form-wrapper input,
.form-wrapper textarea {
	width: 100%;
	padding: 1rem;
	margin-bottom: 1rem;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

.form-wrapper input:focus,
.form-wrapper textarea:focus {
	outline: none;
	border-color: #8b4513;
}

.form-wrapper textarea {
	min-height: 120px;
	resize: vertical;
}

.form-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	cursor: pointer;
}

.form-checkbox input[type='checkbox'] {
	width: auto;
	margin: 0;
}

.form-checkbox a {
	color: #8b4513;
	text-decoration: none;
}

.form-checkbox a:hover {
	text-decoration: underline;
}

/* Animation Classes */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease;
}

.animate-on-scroll.animated {
	opacity: 1;
	transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
	.container {
		padding: 0 15px;
	}

	h1 {
		font-size: 2.2rem;
	}

	h2 {
		font-size: 1.8rem;
	}

	h3 {
		font-size: 1.4rem;
	}

	.main-nav {
		flex-direction: column;
		gap: 1rem;
	}

	.nav-links {
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer-container {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 2rem;
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	section {
		padding: 2rem 0;
	}

	main {
		margin-top: 120px;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 0 10px;
	}

	h1 {
		font-size: 1.8rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	p {
		font-size: 1rem;
	}

	.nav-links {
		font-size: 0.9rem;
	}

	.cta-button {
		padding: 0.8rem 1.5rem;
		font-size: 1rem;
	}

	.card {
		padding: 1.5rem;
	}

	main {
		margin-top: 140px;
	}
}

/* Image Optimization */
@media (max-width: 350px) {
	img {
		max-width: 100%;
		width: auto;
		height: auto;
	}
}

/* Hover Effects */
.hover-lift {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Loading States */
.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.animate-on-scroll {
		opacity: 1;
		transform: none;
	}
}

/* Focus Styles */
a:focus,
button:focus,
input:focus,
textarea:focus {
	outline: 2px solid #8b4513;
	outline-offset: 2px;
}

/* Print Styles */
@media print {
	.header,
	.footer,
	.cta-button {
		display: none;
	}

	main {
		margin-top: 0;
	}

	* {
		background: white !important;
		color: black !important;
	}
}
/* ===============================
   Thank You page (standalone)
   =============================== */

.thankyou-section {
	/* локальная палитра, не влияет на другие страницы */
	--bg: #f7f8fb;
	--ink: #1b1f23;
	--muted: #555e6b;
	--accent: #2f7d6d; /* спокойный зелёно-бирюзовый */
	--accent-2: #2a6f62; /* hover */
	--accent-ink: #ffffff;

	display: grid;
	place-items: center;
	padding: clamp(32px, 6vw, 80px) 16px;
	background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
}

.thankyou-container {
	width: min(720px, 100%);
	margin-inline: auto;
	padding: clamp(20px, 4vw, 40px);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	text-align: center;
}

/* красивое стекло — только если поддерживается */
@supports (backdrop-filter: blur(6px)) {
	.thankyou-container {
		backdrop-filter: blur(6px);
	}
}

.thankyou-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: clamp(28px, 4.5vw, 40px);
	line-height: 1.15;
	letter-spacing: 0.2px;
	margin: 0 0 12px;
}

.thankyou-message {
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial,
		sans-serif;
	font-size: clamp(16px, 1.7vw, 18px);
	line-height: 1.75;
	color: var(--muted);
	margin: 0 auto clamp(20px, 4vw, 28px);
}

/* Кнопка: переопределяем ТОЛЬКО в рамках секции */
.thankyou-section .cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 12px 22px;
	border-radius: 9999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transform: translateZ(0);
	box-shadow: 0 8px 18px rgba(47, 125, 109, 0.35);
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.2s ease, background-color 0.2s ease;
}

.thankyou-section .cta-button:hover {
	background: var(--accent-2);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(47, 125, 109, 0.4);
}

.thankyou-section .cta-button:active {
	transform: translateY(0);
}

.thankyou-section .cta-button:focus-visible {
	outline: 3px solid #84e1cf;
	outline-offset: 2px;
}

/* Меньшие экраны — чуть плотнее верстка */
@media (max-width: 480px) {
	.thankyou-container {
		padding: 20px;
		border-radius: 14px;
	}
}

/* Меньше движения, если пользователь просит */
@media (prefers-reduced-motion: reduce) {
	.thankyou-section .cta-button {
		transition: none;
	}
}