/*
Theme Name:   Hello Elementor Child – Kaput Elektryk
Theme URI:    https://kaput.snappyweb.pl/
Description:  Motyw potomny Hello Elementor dla strony Bartosz Kaput – Elektryk Kraków. Własne zmiany kodu wpisuj tutaj, a nie w motywie głównym – przetrwają aktualizacje.
Author:       CleanCode
Author URI:   https://cleancodeas.pl
Template:     hello-elementor
Version:      1.7.2
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child
*/

/* Wygląd strony jest w Elementorze (klasy ke-*). Tutaj listy z ACF PRO: akapit z shortcodem kaput_* i klasą kx-*.
   Elementor usuwa klasy z wyniku shortcodu, więc style idą po strukturze tagów. */

/* Czcionki: własne pliki (Inter i Pathway Extreme, grubości 400–700, znaki łacińskie + polskie) zamiast pełnych z Elementora */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/inter-400-700.woff2") format("woff2"); }
@font-face { font-family: "Pathway Extreme"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/pathway-extreme-400-700.woff2") format("woff2"); }

:root {
	--kx-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%27%2F%3E%3C%2Fsvg%3E");
	--kx-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20d%3D%27M190.5%2066.9l22.2-22.2c9.4-9.4%2024.6-9.4%2033.9%200L441%20239c9.4%209.4%209.4%2024.6%200%2033.9L246.6%20467.3c-9.4%209.4-24.6%209.4-33.9%200l-22.2-22.2c-9.5-9.5-9.3-25%20.4-34.3L311.4%20296H24c-13.3%200-24-10.7-24-24v-32c0-13.3%2010.7-24%2024-24h287.4L190.9%20101.2c-9.8-9.3-10-24.8-.4-34.3z%27%2F%3E%3C%2Fsvg%3E");
	--kx-ok: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20d%3D%27M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%27%2F%3E%3C%2Fsvg%3E");
	--kx-chev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20448%20512%27%3E%3Cpath%20d%3D%27M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%27%2F%3E%3C%2Fsvg%3E");
	--kx-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20384%20512%27%3E%3Cpath%20d%3D%27M172.268%20501.67C26.97%20291.031%200%20269.413%200%20192%200%2085.961%2085.961%200%20192%200s192%2085.961%20192%20192c0%2077.413-26.97%2099.031-172.268%20309.67-9.535%2013.774-29.93%2013.773-39.464%200zM192%20272c44.183%200%2080-35.817%2080-80s-35.817-80-80-80-80%2035.817-80%2080%2035.817%2080%2080%2080z%27%2F%3E%3C%2Fsvg%3E");
}

/* Wspólny nagłówek (Kreator motywu): przyklejony u góry + aktywna pozycja menu (klasa z inc/naglowek.php) */
.elementor-location-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .elementor-location-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* na telefonie pasek admina WordPressa przewija się ze stroną – menu ma być przy samej górze */
@media (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }
.elementor-location-header .ke-mi.is-current { background-color: #F4F1EE; border-radius: 6px; }
.elementor-location-header .is-current-m, .elementor-location-header .is-current-m a { color: #FB5800 !important; }

/* Telefon: strona nie przesuwa się w bok (clip nie psuje przyklejonego menu) */
html, body { overflow-x: clip; }

/* Telefon: kafelki usług w 2 kolumnach (siatka z pętlą usług z ACF) */
@media (max-width: 767px) {
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) > * .ke-svc-wrap, .e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) > .ke-svc-wrap { height: 190px !important; }
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) .ke-svc { height: 190px !important; }
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) .ke-svc-cap { right: 0 !important; width: auto !important; padding: 10px 10px 10px 12px !important; gap: 6px !important; clip-path: none !important; border-radius: 0 12px 0 0 !important; }
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) .ke-svc-cap :is(p, span) { font-size: 12px !important; line-height: 1.3 !important; }
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) > .ke-svc-wrap > :first-child { height: 190px !important; padding: 14px !important; }
	.e-grid-base:has(> .e-collection-loop-base .ke-svc-wrap) > .ke-svc-wrap .ke-big { font-size: 32px !important; }
}

/* Jednolite nagłówki na całej stronie: H1 > H2 > H3 (desktop / tablet / telefon).
   Wyjątek: małe tytuły w kartach pętli (wpisy, realizacje, opinie) zostają w swoim rozmiarze. */
.elementor h1 { font-size: 56px !important; line-height: 1.1 !important; }
.elementor h2 { font-size: 40px !important; line-height: 1.15 !important; }
.elementor h3:not(.e-collection-loop-item h3) { font-size: 22px !important; line-height: 1.3 !important; }
@media (max-width: 1024px) {
	.elementor h1 { font-size: 44px !important; }
	.elementor h2 { font-size: 34px !important; }
	.elementor h3:not(.e-collection-loop-item h3) { font-size: 20px !important; }
}
@media (max-width: 767px) {
	.elementor h1 { font-size: 34px !important; }
	.elementor h2 { font-size: 28px !important; }
	.elementor h3:not(.e-collection-loop-item h3) { font-size: 19px !important; }
}

/* Zakres prac: [kaput_zakres] */
.kx-zakres { display: flex !important; flex-direction: column; gap: 12px; }
.kx-zakres > span { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ke-font-body, Inter, sans-serif); font-size: 16px; line-height: 1.65; color: #000; }
.kx-zakres > span::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; background-color: #FB5800; -webkit-mask: var(--kx-check) center / contain no-repeat; mask: var(--kx-check) center / contain no-repeat; }

/* Kafelki: [kaput_kiedy] (kx-kiedy) i [kaput_kroki] (kx-kroki) */
.kx-kiedy, .kx-kroki { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kx-kiedy > span, .kx-kroki > span { position: relative; display: block; min-width: 0; }
.kx-kiedy > span > span:first-child, .kx-kroki > span > span:first-child {
	display: flex; flex-direction: column; gap: 15px; height: 100%; min-height: 220px; box-sizing: border-box;
	padding: 40px 62px 15px 25px; background-color: #F4F1EE;
	clip-path: polygon(0 12px, 1.6px 6px, 3.5px 3.5px, 6px 1.6px, 12px 0, calc(100% - 78px) 0, calc(100% - 72px) 1.3px, calc(100% - 67px) 7px, calc(100% - 50px) 43px, calc(100% - 45px) 49px, calc(100% - 7px) 66px, calc(100% - 1.3px) 71px, 100% 77px, 100% calc(100% - 12px), calc(100% - 1.6px) calc(100% - 6px), calc(100% - 3.5px) calc(100% - 3.5px), calc(100% - 6px) calc(100% - 1.6px), calc(100% - 12px) 100%, 12px 100%, 6px calc(100% - 1.6px), 3.5px calc(100% - 3.5px), 1.6px calc(100% - 6px), 0 calc(100% - 12px));
	transition: transform .3s;
}
.kx-kroki > span > span:first-child { min-height: 300px; }
.kx-kiedy > span:hover > span:first-child, .kx-kroki > span:hover > span:first-child { transform: translateY(-4px); }
.kx-kiedy b, .kx-kroki b { display: block; font-family: var(--ke-font-head, "Pathway Extreme", sans-serif); font-size: 20px; font-weight: 600; line-height: 1.25; color: #000; }
.kx-kiedy > span > span:first-child > span, .kx-kroki > span > span:first-child > span { display: block; font-family: var(--ke-font-body, Inter, sans-serif); font-size: 14px; line-height: 1.6; color: #4A4A4A; }
.kx-kiedy > span > span:first-child > span:last-child, .kx-kroki > span > span:first-child > span:last-child { margin-top: auto; font-family: var(--ke-font-head, "Pathway Extreme", sans-serif); font-size: 13px; font-weight: 600; line-height: 1.5; color: #FB5800; }
.kx-kiedy > span > span:last-child, .kx-kroki > span > span:last-child { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 12px; }
.kx-kiedy > span > span:last-child { background-color: #FFFFFF; }
.kx-kiedy > span > span:last-child::before, .kx-kroki > span > span:last-child::before { content: ""; width: 16px; height: 16px; background-color: #000; -webkit-mask: var(--kx-arrow) center / contain no-repeat; mask: var(--kx-arrow) center / contain no-repeat; }
.kx-kiedy > span > span:last-child::before { transform: rotate(-45deg); }
.kx-kroki > span:last-child > span:last-child::before { background-color: #FB5800; -webkit-mask-image: var(--kx-ok); mask-image: var(--kx-ok); }

/* FAQ: [kaput_faq] */
.kx-faq { display: flex !important; flex-direction: column; gap: 12px; }
.kx-faq > span { display: block; border-radius: 12px; background-color: #F4F1EE; }
.kx-faq > span > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; }
.kx-faq b { font-family: var(--ke-font-head, "Pathway Extreme", sans-serif); font-size: 18px; font-weight: 600; line-height: 1.35; color: #000; }
.kx-faq > span > span:first-child > span { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background-color: #FFFFFF; transition: transform .3s; }
.kx-faq > span > span:first-child > span::before { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background-color: #FB5800; -webkit-mask: var(--kx-chev) center / contain no-repeat; mask: var(--kx-chev) center / contain no-repeat; }
.kx-faq > span.is-open > span:first-child > span { transform: rotate(180deg); }
.kx-faq > span > span:last-child { display: none; padding: 0 24px 24px; font-family: var(--ke-font-body, Inter, sans-serif); font-size: 16px; line-height: 1.65; color: #4A4A4A; }
.kx-faq > span.is-open > span:last-child { display: block; }

/* Dzielnice / miejscowości: [kaput_miejsca] */
.kx-miejsca { display: flex !important; flex-wrap: wrap; gap: 10px; }
.kx-miejsca > span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 30px; background-color: #FFFFFF; font-family: var(--ke-font-body, Inter, sans-serif); font-size: 14px; line-height: 1.3; color: #000; }
.kx-miejsca > span::before { content: ""; width: 12px; height: 12px; background-color: #FB5800; -webkit-mask: var(--kx-pin) center / contain no-repeat; mask: var(--kx-pin) center / contain no-repeat; }

@media (max-width: 1024px) {
	.kx-kiedy, .kx-kroki { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.kx-kiedy, .kx-kroki { grid-template-columns: 1fr; }
	.kx-kiedy > span > span:first-child, .kx-kroki > span > span:first-child { min-height: 0; }
	.kx-faq > span > span:first-child { padding: 18px; }
	.kx-faq b { font-size: 16px; }
	.kx-faq > span > span:last-child { padding: 0 18px 18px; }
}