/* ============================================================
   ПМК-6 · Фірмова дизайн-система
   Палітра "Бетон і сигнальний":
   --pmk-dark    #20262E  графіт (опалубка)
   --pmk-light   #EDEEEA  світлий бетон (фон)
   --pmk-mid     #C9CCC4  бетон середній (лінії, підписи)
   --pmk-orange  #F2600C  сигнальний помаранчевий (акцент)
   Шрифти: Unbounded (заголовки) + Manrope (текст)
   ============================================================ */

:root {
	--pmk-dark:   #20262E;
	--pmk-dark-2: #2B333D;
	--pmk-light:  #EDEEEA;
	--pmk-mid:    #C9CCC4;
	--pmk-orange: #F2600C;
	--pmk-white:  #FFFFFF;
	--pmk-font-display: 'Unbounded', sans-serif;
	--pmk-font-body: 'Manrope', sans-serif;
	--pmk-ease: cubic-bezier(.22,.61,.36,1);
}

body {
	font-family: var(--pmk-font-body);
	color: var(--pmk-dark);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .pmk-display {
	font-family: var(--pmk-font-display);
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   Фірмовий елемент №1: "будівельна розмітка" —
   тонка діагональна hazard-смуга як роздільник секцій.
   Додайте клас .pmk-hazard контейнеру або віджету Spacer.
   ------------------------------------------------------------ */
.pmk-hazard {
	height: 10px !important;
	min-height: 10px;
	background: repeating-linear-gradient(
		-45deg,
		var(--pmk-orange) 0 14px,
		var(--pmk-dark) 14px 28px
	);
	background-size: 40px 10px;
	animation: pmk-hazard-move 18s linear infinite;
}
@keyframes pmk-hazard-move {
	from { background-position: 0 0; }
	to   { background-position: 400px 0; }
}

/* Тонша, спокійніша версія для внутрішніх сторінок */
.pmk-hazard-thin {
	height: 5px !important;
	min-height: 5px;
	background: repeating-linear-gradient(
		-45deg,
		var(--pmk-orange) 0 10px,
		transparent 10px 20px
	);
}

/* ------------------------------------------------------------
   Фірмовий елемент №2: нумерація напрямів Д·01 — Д·04
   Клас .pmk-index на віджеті Heading
   ------------------------------------------------------------ */
.pmk-index .elementor-heading-title {
	font-family: var(--pmk-font-display);
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--pmk-orange);
}
.pmk-index .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 48px;
	height: 2px;
	background: var(--pmk-orange);
	margin-left: 14px;
	vertical-align: middle;
	transform-origin: left;
	animation: pmk-line-grow 1s var(--pmk-ease) both;
}
@keyframes pmk-line-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------
   Анімація появи при скролі.
   Клас .pmk-reveal на будь-якому контейнері/віджеті.
   JS додає .is-visible коли елемент у зоні видимості.
   Варіанти: .pmk-reveal-left / .pmk-reveal-right / .pmk-reveal-scale
   ------------------------------------------------------------ */
.pmk-reveal,
.pmk-reveal-left,
.pmk-reveal-right,
.pmk-reveal-scale {
	opacity: 0;
	transition: opacity .8s var(--pmk-ease), transform .8s var(--pmk-ease);
	will-change: opacity, transform;
}
.pmk-reveal        { transform: translateY(36px); }
.pmk-reveal-left   { transform: translateX(-48px); }
.pmk-reveal-right  { transform: translateX(48px); }
.pmk-reveal-scale  { transform: scale(.94); }

.pmk-reveal.is-visible,
.pmk-reveal-left.is-visible,
.pmk-reveal-right.is-visible,
.pmk-reveal-scale.is-visible {
	opacity: 1;
	transform: none;
}

/* Каскадна затримка для сусідніх карток */
.is-visible.pmk-d1 { transition-delay: .05s; }
.is-visible.pmk-d2 { transition-delay: .18s; }
.is-visible.pmk-d3 { transition-delay: .31s; }
.is-visible.pmk-d4 { transition-delay: .44s; }

/* ------------------------------------------------------------
   Картки напрямів діяльності (.pmk-card на контейнері/Icon Box)
   ------------------------------------------------------------ */
.pmk-card {
	background: var(--pmk-white);
	border: 1px solid var(--pmk-mid);
	position: relative;
	overflow: hidden;
	transition: transform .45s var(--pmk-ease), box-shadow .45s var(--pmk-ease), border-color .45s;
}
.pmk-card::before {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 4px;
	background: var(--pmk-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--pmk-ease);
}
.pmk-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -18px rgba(32, 38, 46, .28);
	border-color: transparent;
}
.pmk-card:hover::before { transform: scaleX(1); }

.pmk-card .elementor-icon {
	transition: transform .45s var(--pmk-ease), color .45s;
}
.pmk-card:hover .elementor-icon {
	transform: translateY(-4px) rotate(-6deg);
	color: var(--pmk-orange) !important;
}

/* Темна версія картки (для темних секцій) */
.pmk-card-dark {
	background: var(--pmk-dark-2);
	border: 1px solid rgba(255,255,255,.08);
}
.pmk-card-dark:hover { box-shadow: 0 24px 48px -18px rgba(0,0,0,.6); }

/* ------------------------------------------------------------
   Кнопки
   .pmk-btn-primary  — помаранчева з "заливкою" при ховері
   .pmk-btn-ghost    — контурна
   ------------------------------------------------------------ */
.pmk-btn-primary .elementor-button,
.pmk-btn-ghost .elementor-button {
	font-family: var(--pmk-font-body);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 18px 36px;
	position: relative;
	overflow: hidden;
	transition: color .35s var(--pmk-ease), border-color .35s;
	z-index: 1;
}

.pmk-btn-primary .elementor-button {
	background: var(--pmk-orange);
	color: var(--pmk-white);
}
.pmk-btn-primary .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pmk-dark);
	transform: translateX(-101%);
	transition: transform .4s var(--pmk-ease);
	z-index: -1;
}
.pmk-btn-primary .elementor-button:hover::after { transform: translateX(0); }
.pmk-btn-primary .elementor-button:hover { color: var(--pmk-white); }

.pmk-btn-ghost .elementor-button {
	background: transparent;
	color: var(--pmk-white);
	border: 2px solid rgba(255,255,255,.4);
}
.pmk-btn-ghost .elementor-button:hover {
	border-color: var(--pmk-orange);
	color: var(--pmk-orange);
}
/* Контурна кнопка на світлому фоні */
.pmk-btn-ghost.pmk-on-light .elementor-button { color: var(--pmk-dark); border-color: var(--pmk-dark); }
.pmk-btn-ghost.pmk-on-light .elementor-button:hover { color: var(--pmk-orange); border-color: var(--pmk-orange); }

/* ------------------------------------------------------------
   Hero: повільний Ken Burns для фонового зображення
   Клас .pmk-hero на контейнері hero-секції
   ------------------------------------------------------------ */
.pmk-hero {
	position: relative;
	isolation: isolate;
}
.pmk-hero > .elementor-background-overlay,
.pmk-hero::before { z-index: 0; }
@media (prefers-reduced-motion: no-preference) {
	.pmk-hero {
		animation: none;
	}
	.pmk-hero[style*="background-image"],
	.pmk-hero .elementor-background-slideshow {
		animation: pmk-kenburns 26s ease-in-out infinite alternate;
	}
}
@keyframes pmk-kenburns {
	from { background-size: 100% auto; background-position: 50% 40%; }
	to   { background-size: 112% auto; background-position: 52% 55%; }
}

/* Великий заголовок hero */
.pmk-hero-title .elementor-heading-title {
	line-height: 1.08;
	text-wrap: balance;
}
.pmk-hero-title .elementor-heading-title em,
.pmk-hero-title .elementor-heading-title i {
	font-style: normal;
	color: var(--pmk-orange);
}

/* ------------------------------------------------------------
   Лічильники (віджет Counter)
   ------------------------------------------------------------ */
.pmk-counter .elementor-counter-number-wrapper {
	font-family: var(--pmk-font-display);
	color: var(--pmk-orange);
}
.pmk-counter .elementor-counter-title {
	font-family: var(--pmk-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--pmk-mid);
}

/* ------------------------------------------------------------
   Липкий хедер: JS додає .pmk-header-scrolled до <body>
   Хедеру в Elementor дайте клас .pmk-header
   ------------------------------------------------------------ */
.pmk-header {
	transition: background-color .4s var(--pmk-ease), box-shadow .4s, padding .4s;
}
body.pmk-header-scrolled .pmk-header {
	background-color: rgba(32, 38, 46, .96) !important;
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 32px -12px rgba(0,0,0,.45);
}

/* Пункти меню (Icon List у хедері з класом .pmk-nav) */
.pmk-nav .elementor-icon-list-item a {
	font-family: var(--pmk-font-body);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--pmk-white);
	position: relative;
	padding-bottom: 4px;
	transition: color .3s;
}
.pmk-nav .elementor-icon-list-item a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--pmk-orange);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s var(--pmk-ease);
}
.pmk-nav .elementor-icon-list-item a:hover { color: var(--pmk-orange); }
.pmk-nav .elementor-icon-list-item a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ------------------------------------------------------------
   Список продукції бетонного вузла (Icon List .pmk-products)
   ------------------------------------------------------------ */
.pmk-products .elementor-icon-list-item {
	padding: 14px 0;
	border-bottom: 1px dashed var(--pmk-mid);
	transition: padding-left .35s var(--pmk-ease);
}
.pmk-products .elementor-icon-list-item:hover { padding-left: 12px; }
.pmk-products .elementor-icon-list-icon i { color: var(--pmk-orange); }

/* ------------------------------------------------------------
   Кроки процесу (.pmk-step на Icon Box)
   ------------------------------------------------------------ */
.pmk-step { border-left: 3px solid var(--pmk-mid); padding-left: 24px; transition: border-color .4s; }
.pmk-step:hover { border-color: var(--pmk-orange); }

/* ------------------------------------------------------------
   Доступність та мобільні пристрої
   ------------------------------------------------------------ */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible {
	outline: 3px solid var(--pmk-orange);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pmk-reveal, .pmk-reveal-left, .pmk-reveal-right, .pmk-reveal-scale {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.pmk-hazard, .pmk-hero[style*="background-image"] { animation: none !important; }
	.pmk-card, .pmk-card::before, .elementor-button::after { transition: none !important; }
}

@media (max-width: 767px) {
	.pmk-hero-title .elementor-heading-title { font-size: clamp(28px, 8vw, 40px) !important; }
	.pmk-btn-primary .elementor-button,
	.pmk-btn-ghost .elementor-button { width: 100%; text-align: center; }
	.pmk-hazard { height: 8px !important; }
}

/* ------------------------------------------------------------
   Форми Contact Form 7 у фірмовому стилі
   Працює і на світлому, і на темному фоні (.pmk-form-dark)
   ------------------------------------------------------------ */
.wpcf7 .pmk-form-row { margin-bottom: 18px; }

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	font-family: var(--pmk-font-body);
	font-size: 16px;
	color: var(--pmk-dark);
	background: var(--pmk-white);
	border: 2px solid var(--pmk-mid);
	border-radius: 0;
	padding: 14px 16px;
	transition: border-color .3s var(--pmk-ease), box-shadow .3s;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--pmk-orange);
	box-shadow: 0 0 0 3px rgba(242, 96, 12, .18);
}

/* Поле файла */
.wpcf7 input[type="file"] {
	width: 100%;
	font-family: var(--pmk-font-body);
	font-size: 14px;
	color: var(--pmk-dark);
	background: var(--pmk-white);
	border: 2px dashed var(--pmk-mid);
	padding: 16px;
	cursor: pointer;
	transition: border-color .3s;
}
.wpcf7 input[type="file"]:hover { border-color: var(--pmk-orange); }
.wpcf7 input[type="file"]::file-selector-button {
	font-family: var(--pmk-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pmk-white);
	background: var(--pmk-dark);
	border: none;
	padding: 10px 18px;
	margin-right: 14px;
	cursor: pointer;
	transition: background .3s;
}
.wpcf7 input[type="file"]::file-selector-button:hover { background: var(--pmk-orange); }

.pmk-form-hint {
	display: block;
	font-size: 13px;
	color: #7A828C;
	margin-top: 6px;
}

/* Кнопка відправки */
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] {
	font-family: var(--pmk-font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pmk-white);
	background: var(--pmk-orange);
	border: none;
	border-radius: 0;
	padding: 18px 36px;
	cursor: pointer;
	transition: background .35s var(--pmk-ease), transform .2s;
}
.wpcf7 input[type="submit"]:hover, .wpcf7 button[type="submit"]:hover {
	background: var(--pmk-dark);
}
.wpcf7 input[type="submit"]:active { transform: scale(.98); }
.wpcf7 .wpcf7-spinner { margin-left: 12px; }

/* Темна секція (анкета на сторінці вакансій) */
.pmk-form-dark .wpcf7 input[type="text"],
.pmk-form-dark .wpcf7 input[type="tel"],
.pmk-form-dark .wpcf7 input[type="email"],
.pmk-form-dark .wpcf7 select,
.pmk-form-dark .wpcf7 textarea,
.pmk-form-dark .wpcf7 input[type="file"] {
	background: var(--pmk-dark-2);
	color: var(--pmk-white);
	border-color: #4A5058;
}
.pmk-form-dark .wpcf7 ::placeholder { color: #8B939E; }
.pmk-form-dark .pmk-form-hint { color: var(--pmk-mid); }
.pmk-form-dark .wpcf7 input[type="submit"]:hover { background: var(--pmk-white); color: var(--pmk-dark); }

/* Повідомлення валідації та результату */
.wpcf7 .wpcf7-not-valid-tip {
	font-family: var(--pmk-font-body);
	font-size: 13px;
	color: #E24B4A;
	margin-top: 6px;
}
.wpcf7 .wpcf7-response-output {
	font-family: var(--pmk-font-body);
	font-size: 15px;
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 2px solid var(--pmk-orange) !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #63993D !important;
	background: rgba(99, 153, 61, .08);
}