/* ==========================================================================
   VerdeLogic – style motywu
   Kolory i fonty pochodzą z theme.json (zmienne --wp--preset--*).
   ========================================================================== */

:root {
	--vl-radius: 20px;
	--vl-radius-lg: 28px;
	--vl-border: rgba(14, 59, 46, 0.12);
	--vl-shadow: 0 1px 2px rgba(10, 42, 33, 0.04), 0 8px 24px -12px rgba(10, 42, 33, 0.18);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss01";
}

/* Sekcje stoją jedna pod drugą bez odstępów między nimi */
.wp-site-blocks > *,
.vl-main > * { margin-block-start: 0; }
.wp-site-blocks > .vl-site-header { margin-block-start: 0; }

[id] { scroll-margin-top: 88px; }

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--verde);
	outline-offset: 3px;
}

/* ---------- Nagłówek ---------- */
.vl-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .vl-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .vl-site-header { top: 0; } }

.vl-header {
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--vl-border);
}
.vl-header-inner { gap: 1.5rem; }
.vl-header-nav { gap: 2rem; }
.vl-logo { margin: 0; }
.vl-logo img { display: block; height: auto; }

.vl-nav a { text-decoration: none; color: var(--wp--preset--color--ink); }
.vl-nav a:hover { color: var(--wp--preset--color--verde); }
.vl-nav .wp-block-navigation__container { gap: 1.75rem; }

@media (max-width: 781px) {
	.vl-header-cta { display: none; }
	.vl-logo img { width: 150px !important; }
}

/* Menu mobilne (overlay) */
.vl-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--forest) !important;
	color: #fff !important;
	padding: 2rem;
}
.vl-nav .wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 1.5rem; font-weight: 600; }

/* ---------- Elementy wspólne ---------- */
.vl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde);
}
.vl-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.vl-eyebrow--light { color: var(--wp--preset--color--lime); }

.vl-section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.vl-section-head > * { margin-left: 0 !important; }
.vl-section h2 { margin-top: 0; }

/* Przyciski */
.wp-block-button__link { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid currentColor;
	color: var(--wp--preset--color--forest);
	padding: calc(0.85rem - 1.5px) calc(1.6rem - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
	color: #fff;
}
.vl-btn-light.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.vl-btn-light.is-style-outline > .wp-block-button__link:hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--forest); }

.vl-btn-lime > .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--wp--preset--color--forest) !important;
}

/* ---------- Hero ---------- */
.vl-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-image:
		radial-gradient(60rem 40rem at 85% -10%, rgba(47, 163, 107, 0.35), transparent 60%),
		radial-gradient(40rem 30rem at -10% 110%, rgba(184, 233, 134, 0.12), transparent 60%);
}
.vl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(184, 233, 134, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(184, 233, 134, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.vl-hero-cols { gap: clamp(2rem, 5vw, 5rem); }
.vl-hero h1 { margin: 0 0 1.5rem; text-wrap: balance; }
.vl-hero h1 mark { background: none; }
.vl-hero .vl-lead { color: rgba(255, 255, 255, 0.8); max-width: 36rem; margin: 0 0 2rem; }
.vl-hero-buttons { gap: 0.75rem; }

.vl-hero-facts {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	font-size: 0.925rem;
	color: rgba(255, 255, 255, 0.72);
}
.vl-hero-facts li { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.vl-hero-facts li::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	box-shadow: 0 0 0 4px rgba(184, 233, 134, 0.15);
}

.vl-hero-visual { margin: 0; }
.vl-hero-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vl-radius-lg);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(184, 233, 134, 0.12);
}

@media (max-width: 781px) {
	.vl-hero-visual { max-width: 420px; margin-inline: auto; }
}

/* ---------- O firmie ---------- */
.vl-about-cols { gap: clamp(2rem, 6vw, 6rem); }
.vl-about-cols > .wp-block-column > p:first-child { margin-top: 0; }

.vl-values {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	border-top: 1px solid var(--vl-border);
}
.vl-values li {
	position: relative;
	padding: 1rem 0 1rem 2.25rem;
	margin: 0;
	border-bottom: 1px solid var(--vl-border);
	color: var(--wp--preset--color--slate);
}
.vl-values li strong { color: var(--wp--preset--color--forest); }
.vl-values li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- Usługi (karty) ---------- */
.vl-cards { gap: 1.25rem; }
.vl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--vl-border);
	border-radius: var(--vl-radius);
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: var(--vl-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vl-card > * { margin-block: 0; }
.vl-card > * + * { margin-top: 0.75rem; }
.vl-card:hover {
	transform: translateY(-3px);
	border-color: rgba(47, 163, 107, 0.45);
	box-shadow: 0 2px 4px rgba(10, 42, 33, 0.04), 0 22px 40px -20px rgba(10, 42, 33, 0.3);
}
.vl-card-num {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.75rem !important;
}
.vl-card:hover .vl-card-num { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--lime); }
.vl-card h3 { margin-top: 0.5rem !important; }
.vl-card .vl-checklist { margin-top: auto !important; padding-top: 1.25rem; }

.vl-checklist {
	list-style: none;
	padding: 1.25rem 0 0;
	border-top: 1px dashed var(--vl-border);
	font-size: 0.925rem;
}
.vl-checklist li {
	position: relative;
	padding-left: 1.5rem;
	margin: 0.35rem 0;
	color: var(--wp--preset--color--ink);
}
.vl-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 3px;
	background: var(--wp--preset--color--verde);
	transform: rotate(45deg) scale(0.75);
}

/* ---------- Jak pracujemy ---------- */
.vl-steps { gap: 1.25rem; counter-reset: step; }
.vl-step {
	position: relative;
	padding: 1.75rem 0 0;
	border-top: 2px solid var(--wp--preset--color--sage);
}
.vl-step > * { margin-block: 0; }
.vl-step > * + * { margin-top: 0.6rem; }
.vl-step::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 3rem;
	height: 2px;
	background: var(--wp--preset--color--verde);
}
.vl-step-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--verde);
	margin-bottom: 1rem !important;
}

/* ---------- CTA ---------- */
.vl-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--vl-radius-lg);
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
	gap: 1.5rem 3rem;
	background-image: radial-gradient(30rem 20rem at 100% 0%, rgba(47, 163, 107, 0.5), transparent 70%);
}
.vl-cta-text { max-width: 40rem; }
.vl-cta-text > * { margin-block: 0; }
.vl-cta-text > * + * { margin-top: 0.5rem; }
.vl-cta-text p { color: rgba(255, 255, 255, 0.78); }

/* ---------- Kontakt ---------- */
.vl-contact-cols { gap: clamp(2rem, 5vw, 5rem); }
.vl-contact-list {
	margin: 0;
	background: #fff;
	border: 1px solid var(--vl-border);
	border-radius: var(--vl-radius);
	overflow: hidden;
}
.vl-contact-item {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	margin: 0 !important;
}
.vl-contact-item + .vl-contact-item { border-top: 1px solid var(--vl-border); }
.vl-contact-item > * { margin: 0 !important; }
.vl-contact-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	padding-top: 0.15rem;
}
.vl-contact-value { font-weight: 500; color: var(--wp--preset--color--ink); }
.vl-contact-value a { text-decoration: none; color: var(--wp--preset--color--forest); }
.vl-contact-value a:hover { color: var(--wp--preset--color--verde); text-decoration: underline; }
@media (max-width: 480px) {
	.vl-contact-item { grid-template-columns: 1fr; gap: 0.25rem; }
}


/* ---------- Stopka ---------- */
.vl-footer a { color: #fff; text-decoration: none; }
.vl-footer a:hover { color: var(--wp--preset--color--lime); }
.vl-footer-cols { gap: clamp(2rem, 5vw, 4rem); }
.vl-footer-muted { color: rgba(255, 255, 255, 0.65); }
.vl-footer-title { letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600 !important; margin-top: 0.4rem; }
.vl-footer-links { list-style: none; padding: 0; margin: 1rem 0 0; }
.vl-footer-links li { margin: 0.45rem 0; }
.vl-legal { font-size: 0.875rem; line-height: 1.75; }
.vl-footer-bottom {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	gap: 0.5rem 2rem;
}
.vl-footer-bottom p { margin: 0; }
.vl-footer-bottom a { color: rgba(255, 255, 255, 0.65); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Strony i wpisy ---------- */
.vl-page .wp-block-post-title { margin-top: 0.5rem; }
.vl-page .wp-block-post-template { list-style: none; padding: 0; display: grid; gap: 1.25rem; }

/* poprawki odstępów */
.vl-card h3 + p { margin-bottom: 1.25rem; }
.vl-card .vl-checklist { margin-top: auto !important; }
.vl-hero-facts li { align-items: flex-start; }
.vl-hero-facts li::before { flex: none; margin-top: 0.45em; }

/* Karta szeroka (Doradztwo) */
.vl-card--wide {
	margin-top: 1.25rem !important;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1rem 3rem;
	align-items: end;
	background: var(--wp--preset--color--forest);
	border-color: transparent;
	background-image: radial-gradient(28rem 18rem at 100% 0%, rgba(47, 163, 107, 0.45), transparent 70%);
}
.vl-card--wide > * + * { margin-top: 0; }
.vl-card-wide-main > * { margin-block: 0; }
.vl-card-wide-main > * + * { margin-top: 0.75rem; }
.vl-card--wide h3 { color: #fff; }
.vl-card--wide .has-slate-color { color: rgba(255, 255, 255, 0.75) !important; }
.vl-card--wide .vl-card-num { background: rgba(184, 233, 134, 0.15); color: var(--wp--preset--color--lime); }
.vl-card--wide .vl-checklist { margin: 0 !important; border-top-color: rgba(255, 255, 255, 0.18); }
.vl-card--wide .vl-checklist li { color: #fff; }
.vl-card--wide .vl-checklist li::before { background: var(--wp--preset--color--lime); }
.vl-card--wide:hover { border-color: transparent; }
@media (max-width: 781px) {
	.vl-card--wide { grid-template-columns: 1fr; }
}
.vl-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.6rem); }

/* ---------- Podmenu usług ---------- */
.vl-nav .wp-block-navigation__submenu-container {
	background: #fff !important;
	border: 1px solid var(--vl-border) !important;
	border-radius: 14px;
	padding: 0.5rem !important;
	box-shadow: 0 18px 40px -18px rgba(10, 42, 33, 0.35);
	min-width: 250px !important;
}
.vl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.8rem !important;
	border-radius: 8px;
}
.vl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--mist);
}
.vl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	padding: 0.25rem 0 0.5rem 1rem !important;
}
.vl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1.05rem;
	font-weight: 500;
	opacity: 0.85;
}

/* ---------- Link „Dowiedz się więcej” na kartach ---------- */
.vl-card .vl-card-link { margin-top: 1rem !important; font-weight: 600; font-size: 0.95rem; }
.vl-card .vl-card-link a { color: var(--wp--preset--color--verde); text-decoration: none; }
.vl-card .vl-card-link a:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }
.vl-card--wide .vl-card-link a { color: var(--wp--preset--color--lime); }
.vl-card--wide .vl-card-link a:hover { color: #fff; }

/* ---------- Podstrony usług ---------- */
.vl-service .wp-block-post-content > .alignfull { margin-block: 0; }
.vl-service .wp-block-post-content > * + .alignfull { margin-block-start: 0; }
.vl-hero--page h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.vl-hero--page .vl-lead { max-width: 44rem; }
.vl-hero-page-inner > * { margin-left: 0 !important; }
.vl-breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); margin: 0 0 1.5rem !important; }
.vl-breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.vl-breadcrumb a:hover { color: var(--wp--preset--color--lime); text-decoration: underline; }
.vl-service .vl-cards .vl-card h3 { margin-top: 0 !important; }

/* Najczęstsze pytania */
.vl-faq > * { margin-left: 0 !important; }
.vl-faq-item {
	background: #fff;
	border: 1px solid var(--vl-border);
	border-radius: 16px;
	padding: 0;
	margin: 0 0 0.75rem !important;
	overflow: hidden;
}
.vl-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 3rem 1.1rem 1.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	position: relative;
}
.vl-faq-item summary::-webkit-details-marker { display: none; }
.vl-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--verde);
}
.vl-faq-item[open] summary::after { content: "–"; }
.vl-faq-item > p { margin: 0 !important; padding: 0 1.4rem 1.2rem; color: var(--wp--preset--color--slate); }