/*
Theme Name: Puif
Theme URI: https://puif.cz
Author: Tomáš Roud
Description: Vlastní _s (Underscores) motiv pro web PRAGORENT / puif.cz. Nahrazuje Astra + Elementor, obsah je editovatelný v Gutenbergu.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: puif
*/

:root {
	--color-bg-light: #e5e5ff;
	--color-bg-dark: #091f2f;
	--color-heading-dark: #1e293b;
	--color-text: #1e293b;
	--color-accent: #046bd2;
	--color-accent-hover: #045cb4;
	--color-white: #ffffff;
	--header-height: 80px;
	--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

body {
	margin: 0;
	background: var(--color-bg-light);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	padding-top: var(--header-height);
}

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

a {
	color: var(--color-accent);
}

a:hover {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

h1, h2, h3, h4 {
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px;
	color: var(--color-heading-dark);
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

p {
	margin: 0 0 16px;
}

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-height);
	background: var(--color-bg-light);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	box-sizing: border-box;
	gap: 24px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-branding a {
	color: var(--color-heading-dark);
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	white-space: nowrap;
}

.main-navigation {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	overflow: hidden;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.main-navigation .secondary-menu {
	gap: 24px;
}

.main-navigation a {
	display: inline-block;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 0;
}

.main-navigation a:hover {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.menu-toggle {
	display: none;
}

/* Keep the fixed header below the WP admin bar when logged in */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 1140px) {
	.site-header {
		padding: 0 16px;
	}

	.main-navigation {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: var(--color-bg-light);
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		display: none;
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
	}

	.main-navigation.is-open {
		display: flex;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 12px;
	}

	.menu-toggle {
		display: block;
		background: none;
		border: none;
		font-size: 28px;
		cursor: pointer;
		color: var(--color-heading-dark);
	}
}

/* ---------- Layout / sections ---------- */

.full-width {
	width: 100%;
}

.section {
	padding: 64px 32px;
}

.projekty-heading-block {
	padding: 32px 16px;
}

.projekty-heading-block .section-heading {
	margin-bottom: 0;
}

.section-narrow {
	max-width: 1100px;
	margin: 0 auto;
	padding: 64px 32px;
}

.section-dark {
	background: var(--color-bg-dark);
	color: var(--color-white);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark a:not(.button) {
	color: var(--color-white);
}

.section-heading {
	text-align: center;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 48px;
}

h3.wp-block-heading {
	font-size: 40px;
	font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	padding: 64px 24px;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.57);
}

.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
}

.hero-inner h1 {
	color: var(--color-white);
	font-size: 48px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.hero-inner h2 {
	color: var(--color-white);
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 12px;
}

.hero-inner p {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 32px;
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

/* ---------- Buttons ---------- */

.button,
.wp-block-button__link,
input[type="submit"] {
	display: inline-block;
	background: var(--color-accent);
	color: var(--color-white) !important;
	font-weight: 500;
	font-size: 19px;
	padding: 14px 28px;
	border-radius: 4px;
	border: none;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: var(--color-accent-hover);
	color: var(--color-white) !important;
	text-decoration: none;
}

/* ---------- Project / media-text rows ---------- */

.media-row > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.media-row.reverse .media-row-media {
	order: 2;
}

.media-row.reverse .media-row-text {
	order: 1;
}

.media-row-media img {
	width: 440px;
	max-width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 20px;
}

.contact-card .media-row-media img,
.about-media .media-row-media img {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: initial;
	border-radius: 20px;
}

.media-row-text a {
	color: inherit;
	text-decoration: underline;
}

.card-block {
	margin-bottom: 0;
}

.card-block + .card-block {
	border-top: none;
}

@media (max-width: 782px) {
	.media-row.reverse .media-row-media,
	.media-row.reverse .media-row-text {
		order: initial;
	}

	.media-row > .wp-block-group__inner-container {
		display: block;
	}

	.media-row > .wp-block-group__inner-container > * + * {
		margin-top: 24px;
	}

	.hero-inner h1 {
		font-size: 34px;
	}

	.section-heading {
		font-size: 40px;
	}

	h3.wp-block-heading {
		font-size: 28px;
	}
}

/* ---------- Info box (Informační povinnost list) ---------- */

.info-box {
	background: #d2d2d2;
	border-radius: 20px;
	padding: 32px;
	color: #1e293b;
}

.info-box a {
	color: var(--color-accent);
}

/* ---------- Contact section ---------- */

.contact-info {
	text-align: center;
	font-size: 18px;
	margin-bottom: 40px;
}

.contact-card {
	background: #f1f1ff;
	border-radius: 20px;
	padding: 32px;
	max-width: 1200px;
	margin: 0 auto;
	color: var(--color-text);
}

.contact-card h1,
.contact-card h2,
.contact-card h3,
.contact-card p,
.contact-card label {
	color: var(--color-text);
}

.gdpr-button {
	display: block;
	max-width: 1200px;
	margin: 24px auto 0;
	text-align: right;
}

.gdpr-button a {
	display: inline-block;
	background: #18361d;
	color: var(--color-white) !important;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
}

/* ---------- Contact form ---------- */

.wpcf7-form p {
	margin-bottom: 16px;
}

.wpcf7-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-family: var(--font-body);
	background: var(--color-white);
}

.wpcf7-form input[type="submit"] {
	background: #000000;
}

.wpcf7-form input[type="submit"]:hover {
	background: #222222;
}

/* ---------- Page content (default template pages) ---------- */

.page-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 48px 32px 80px;
}

.page-content .entry-title {
	font-size: 34px;
	border-bottom: 1px solid #cbd5e1;
	padding-bottom: 24px;
	margin-bottom: 32px;
}

.page-content .wp-block-image.size-medium img {
	max-width: 380px;
}

/* ---------- Back to top ---------- */

.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	background: #000000;
	color: #fff;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	z-index: 99;
}

.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Footer ---------- */

.site-footer {
	text-align: center;
	padding: 24px;
	font-size: 14px;
	color: #64748b;
}