/* ==========================================================================
   Spis treści wpisów (inc/spis-tresci.php) + drobny styling wpisów
   (sekcja 7: formularz kontaktowy) — kozlecki-przewiertysterowane.pl
   --------------------------------------------------------------------------
   Wygląd przeniesiony ze spisu minostar.com (wersja finalna, zaakceptowana
   31.08.2026) i przełożony na barwy Blocksy tej strony:
     akcent   #ffcd05 (palette-1, żółty marki)
     akcent-2 #eebe3e (palette-2, przyciski)
     nagłówki #0a0500 (palette-4)
     tekst    #728291 (palette-3)
   Jedna świadoma różnica: na żółtej belce (hover/rozwinięcie) tekst i ikony
   są CIEMNE — biały na #ffcd05 ma kontrast ~1.6:1 i byłby nieczytelny.
   Zwijanie: natywne details/summary — zero JS, cały pasek klikalny.
   Punktory: fajeczka (żółte koło + ciemny znacznik) przy H2, okrąg-obrys
   przy H3 (14px) i H4 (12px). Skala pisma 17/16/15, mobile 16/15/14.
   ========================================================================== */

.koz-toc {
	--koz-toc-akcent:   #ffcd05;
	--koz-toc-akcent-2: #eebe3e;
	--koz-toc-ink:      #0a0500;
	--koz-toc-tekst:    #39424c;  /* ciemniejszy niż palette-3 — linki mają być czytelne */
	--koz-toc-tekst-2:  #5a6570;
	--koz-toc-ramka:    #e6e9ee;
	--koz-toc-belka:    #f7f8fa;
	--koz-toc-bg:       #ffffff;
}

/* --------------------------------------------------------------------------
   1. Karta
   -------------------------------------------------------------------------- */

.koz-toc {
	margin: 28px 0 36px;
}

/* karta jako pierwszy element tresci (spis na gorze) - bez gornego odstepu */
.entry-content > .koz-toc:first-child {
	margin-top: 0;
}

.koz-toc {
	padding: 0;
	border: 1px solid var(--koz-toc-ramka);
	border-radius: 12px;
	background: var(--koz-toc-bg);
	overflow: hidden; /* belka musi trzymać się zaokrągleń */
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   2. Belka tytułu (summary): jasna, po hover i przy otwartym spisie żółta
   z ciemnym tekstem. Cały pasek klikalny (to summary), bez natywnego
   trójkącika.
   -------------------------------------------------------------------------- */

.koz-toc > .koz-toc__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 20px 14px 24px;
	background-color: var(--koz-toc-belka);
	color: var(--koz-toc-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color .25s ease, color .25s ease;
}

.koz-toc > .koz-toc__bar::-webkit-details-marker { display: none; }
.koz-toc > .koz-toc__bar::marker { content: ""; }

.koz-toc > .koz-toc__bar:hover,
.koz-toc[open] > .koz-toc__bar {
	background-color: var(--koz-toc-akcent);
	color: var(--koz-toc-ink);
}

.koz-toc > .koz-toc__bar:focus-visible {
	outline: 3px solid rgba(238, 190, 62, .8);
	outline-offset: -4px;
}

/* tytuł + hamburger (maska w currentColor — ciemny na jasnej i żółtej belce) */
.koz-toc .koz-toc__title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

.koz-toc .koz-toc__title::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0500' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

@supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
	.koz-toc .koz-toc__title::before {
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0500' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0500' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	}
}

/* chevron: daszek w dół (zamknięty) / w górę (otwarty), rysowany maską */
.koz-toc .koz-toc__chevron {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0500' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	transition: transform .25s ease;
}

@supports ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
	.koz-toc .koz-toc__chevron {
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0500' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0500' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	}
}

.koz-toc[open] .koz-toc__chevron {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   3. Lista: fajeczki przy H2, okręgi-obrysy przy H3/H4, skala 17/16/15.
   Pionowe oddechy przez ::before/::after (content znika przy zwinięciu).
   -------------------------------------------------------------------------- */

.koz-toc .koz-toc__nav { padding: 0; }

.koz-toc ol.koz-toc__list {
	margin: 0 !important;
	padding: 0 40px !important;
	list-style: none !important;
}

.koz-toc ol.koz-toc__list::before,
.koz-toc ol.koz-toc__list::after {
	content: "";
	display: block;
}

.koz-toc ol.koz-toc__list::before { height: 20px; }
.koz-toc ol.koz-toc__list::after  { height: 24px; }

.koz-toc .koz-toc__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.koz-toc .koz-toc__item::marker { content: "" !important; }

/* H2: fajeczka — żółte koło z ciemnym znacznikiem */
.koz-toc ol.koz-toc__list > .koz-toc__item {
	padding-left: 32px;
}

.koz-toc ol.koz-toc__list > .koz-toc__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ffcd05'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.4' fill='none' stroke='%230a0500' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.koz-toc .koz-toc__item > a {
	color: var(--koz-toc-tekst);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none !important;
	transition: color .18s ease;
	display: inline-block;
	padding: 10px 0;
}

.koz-toc .koz-toc__item > a:hover,
.koz-toc .koz-toc__item > a:focus {
	color: var(--koz-toc-ink);
	text-decoration: underline !important;
	text-decoration-color: var(--koz-toc-akcent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.koz-toc .koz-toc__item > a:focus-visible {
	outline: 2px solid rgba(238, 190, 62, .8);
	outline-offset: 2px;
	border-radius: 4px;
}

/* H3: okrąg-obrys, pismo 16px */
.koz-toc ol.koz-toc__sub {
	margin: 2px 0 10px 16px !important;
	padding: 0 !important;
	list-style: none !important;
}

.koz-toc .koz-toc__sub .koz-toc__item {
	padding-left: 24px;
}

.koz-toc .koz-toc__sub .koz-toc__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23eebe3e' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.koz-toc .koz-toc__sub .koz-toc__item > a {
	font-size: 16px;
	font-weight: 500;
	color: var(--koz-toc-tekst-2);
	padding: 6px 0;
}

/* H4: mniejszy okrąg, pismo 15px */
.koz-toc .koz-toc__sub .koz-toc__sub {
	margin: 2px 0 8px 12px !important;
}

.koz-toc .koz-toc__sub .koz-toc__sub .koz-toc__item::before {
	width: 12px;
	height: 12px;
	top: 9px;
	left: 1px;
}

.koz-toc .koz-toc__sub .koz-toc__sub .koz-toc__item > a {
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. Rozwijanie + kotwice
   -------------------------------------------------------------------------- */

@keyframes koz-toc-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.koz-toc[open] .koz-toc__nav {
	animation: koz-toc-in .2s ease;
}

/* sticky header Blocksy (auto-hide) — oddech nad celem skoku */
.single-post h2[id],
.single-post h3[id],
.single-post h4[id] {
	scroll-margin-top: 110px;
}

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

/* --------------------------------------------------------------------------
   5. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {
	.koz-toc { border-radius: 10px; }

	.koz-toc > .koz-toc__bar {
		padding: 12px 14px 12px 18px;
		font-size: 17px;
	}

	.koz-toc ol.koz-toc__list { padding: 0 26px !important; }

	.koz-toc .koz-toc__item > a { font-size: 16px; }
	.koz-toc .koz-toc__sub .koz-toc__item > a { font-size: 15px; }
	.koz-toc .koz-toc__sub .koz-toc__sub .koz-toc__item > a { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   6. Dostępność i druk
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.koz-toc > .koz-toc__bar,
	.koz-toc .koz-toc__chevron { transition: none; }
	.koz-toc[open] .koz-toc__nav { animation: none; }
}

@media print {
	.koz-toc { break-inside: avoid; }
	.koz-toc .koz-toc__chevron { display: none; }
	.koz-toc .koz-toc__nav { display: block !important; }
}

/* --------------------------------------------------------------------------
   7. Formularz kontaktowy we wpisach (WPForms, render modern) — 2026-08-31.
   Blok formularza rozciągał się na całą szerokość treści i nie wyglądał jak
   sekcja kontaktowa. Zwężenie + wyśrodkowanie + szare tło jak belka spisu,
   pola na białym (zmienna modern renderu). Kolory ramek/przycisku CELOWO
   nietknięte. Zasięg: tylko pojedyncze wpisy (ten plik ładuje się tylko tam),
   dodatkowo scope .entry-content, żeby nie łapać formularzy poza treścią.
   -------------------------------------------------------------------------- */

.single-post .entry-content .wpforms-container {
	max-width: 720px;
	margin: 40px auto 44px;
	padding: 30px 34px 34px;
	background: #f7f8fa; /* jak spoczynkowa belka spisu */
	border-radius: 12px;
	/* pola na BIALO - dwie sciezki, bo pola szarzy globalnie BLOCKSY
	   (--theme-form-field-background-initial-color: #F4F4F4 w global.css),
	   a nie WPForms; zmienna wpforms zostaje dla porzadku */
	--wpforms-field-background-color: #ffffff;
	--theme-form-field-background-initial-color: #ffffff;
	--theme-form-field-background-focus-color: #ffffff;
	/* ramki pol: Blocksy daje #F4F4F4 = duch na karcie #f7f8fa; delikatnie
	   ciemniej, zeby pola i checkbox byly widoczne (focus zostaje zolty) */
	--theme-form-field-border-initial-color: #c9d0d8;
}

/* checkbox zgody: bialy srodek + wyrazniejsza ramka - byl niewidoczny */
.single-post .entry-content .wpforms-container input[type="checkbox"] {
	background-color: #ffffff !important;
	border-color: #97a1ac !important;
}

.single-post .entry-content .wpforms-container input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.single-post .entry-content .wpforms-container textarea,
.single-post .entry-content .wpforms-container select {
	background-color: #ffffff !important;
}

@media (max-width: 640px) {
	.single-post .entry-content .wpforms-container {
		margin: 30px auto 34px;
		padding: 22px 16px 26px;
	}
}

/* =========================================================================
   8. PODOBNE WPISY — kompensacja po zmianie H3/H4 na <p> (SEO, 2026-09-01)
   Tagi zmieniaja filtry theme_mod_* w functions.php childa. Rozmiar i waga
   szly dotad z selektorow elementowych h3/h4 (global.css Blocksy:
   h3 30px/700/1.5, h4 25px/700/1.5) — po zmianie tagu te same wartosci
   musza wejsc na klasach. Konsumentem zmiennych jest zbiorczy selektor
   typografii w main.min.css, ktory przewiduje warianty
   .ct-module-title:is(p,span) oraz .related-entry-title:is(p,span).
   ------------------------------------------------------------------------- */

/* etykieta "Podobne wpisy" — 1:1 jak dotychczasowe h3 */
.ct-related-posts .ct-module-title {
	--theme-font-size: 30px;
	--theme-font-weight: 700;
	--theme-line-height: 1.5;
}

/* KOLOR: wariantowa regula Blocksy (.ct-module-title:is(p,span) w
   main.min.css) czyta var(--theme-heading-color) BEZ fallbacku — a te
   zmienna definiuje dopiero opcja koloru etykiety w Customizerze (tu
   nieustawiona). h3/h4 mialy pelny lancuch fallbackow do
   --theme-headings-color; bez ponizszego oba tytuly dziedzicza szary
   kolor tekstu (#728291). Link w tytule karty tez — jego
   --theme-link-initial-color:initial robi unset -> inherit z rodzica. */
.ct-related-posts .ct-module-title,
.ct-related-posts .related-entry-title {
	--theme-heading-color: var(--theme-headings-color, #0a0500);
}

/* wariant <p> dostaje z main.min.css margin-bottom:15px, a h3 mial
   .3em + 10px = 19px — wyrownanie, zeby modul nie drgnal po zmianie */
.ct-related-posts p.ct-module-title:not(:empty) {
	margin-bottom: 19px;
}

/* tytul karty — rozmiar 16px zostaje (global.css ustawia go na KLASIE,
   wiec przezyl zmiane tagu); z h4 szly tylko waga i interlinia */
.ct-related-posts .related-entry-title {
	--theme-font-weight: 700;
	--theme-line-height: 1.5;
}