/*
 * Theme Name:   Blogowice Child
 * Template:     base-block
 * Author:       expe
 * Version:      1.0.0
 * Base Block:   2
 * Description:  Blogowice — Wolne Miasto Blogów: child na base-block (lifting starej strony; plansze v2, LIFTING.md v1.2).
 * Text Domain:  blogowice
 */

/*
 * BUILDER FIRST: wszystko, co da się ustawić w edytorze (tło, kolor, ramka,
 * radius, padding, margin, gap, layout, font-size, szerokości), ustawiasz
 * ATRYBUTEM BLOKU — nie tutaj. CSS tylko: pseudo-elementy, stany, color-mix/
 * clamp/aspect-ratio/gradienty, media queries, markup spoza bloków.
 * Bramka: python Theme-blocks/lint-css.py blogowice-child → 0 naruszeń.
 * Po dodaniu/zmianie wzorców w patterns/ podbij Version (cache WP).
 */

/* ─── 1. Neutralne role koloru — wyliczane z marki (accent-3 = grafit) ─ */
/* Procenty z LIFTING §4 (kontrast na białym: body 8,6:1, muted 5,5:1,    */
/* line-strong 3,1:1 — obrys pól). Wartości z theme.json = fallback.        */
@supports (color: color-mix(in srgb, red, white)) {
	:root {
		--wp--preset--color--body:          color-mix(in srgb, var(--wp--preset--color--accent-3) 90%, #fff);
		--wp--preset--color--muted:         color-mix(in srgb, var(--wp--preset--color--accent-3) 75%, #fff);
		--wp--preset--color--line-strong:   color-mix(in srgb, var(--wp--preset--color--accent-3) 55%, #fff);
		--wp--preset--color--line:          color-mix(in srgb, var(--wp--preset--color--accent-3) 16%, #fff);
		--wp--preset--color--surface-2:     color-mix(in srgb, var(--wp--preset--color--accent-3)  7%, #fff);
		--wp--preset--color--surface:       color-mix(in srgb, var(--wp--preset--color--accent-3)  4%, #fff);
		--wp--preset--color--muted-invert:  color-mix(in srgb, var(--wp--preset--color--accent-3) 15%, #fff);
		--wp--preset--color--accent-4-soft: color-mix(in srgb, var(--wp--preset--color--accent-4) 25%, #fff);
		--wp--preset--color--accent-1-soft: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, #fff);
	}
}

/* ─── 2. Header — tło i linia po przewinięciu ───────────────────────── */
/* base-block: header position:fixed + klasa .is-scrolled (JS).            */
/* Tło na ::before — backdrop-filter na <header> przycinałby overlay menu.  */
header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--white);
	transition: box-shadow 0.25s ease-out;
}

header.is-scrolled::before {
	box-shadow: 0 1px 0 var(--wp--preset--color--line), 0 6px 16px -12px color-mix(in srgb, var(--wp--preset--color--accent-3) 40%, transparent);
}

/* Pasek górny — linki bez podkreślenia, podkreślenie przy hover (LIFTING §3.8) */
.blogowice-pasek a {
	text-decoration: none;
}

.blogowice-pasek a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── 2b. Header — menu (desktop) ─────────────────────────────────── */
/* Kolor menu z bloku (textColor). Hover i bieżąca strona: grafitowy tekst */
/* + kreska 2 px pod pozycją (rośnie od środka); miejsce na kreskę        */
/* zarezerwowane — tekst się nie przesuwa (LIFTING §3.8, §5.3).           */
header .wp-block-navigation-item__content {
	position: relative;
	padding: 0.75rem 0;
	text-decoration: none;
}

header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.25rem;
	height: 2px;
	background: var(--wp--preset--color--accent-2-ink);
	transform: scaleX(0);
	transition: transform 0.2s ease-out;
}

header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible)::after,
header .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* ─── 2c. Header — telefon i tablet (menu zwinięte ≤ 991 px, base-block) ─ */
/* Kolejność jak na planszy: logo · lupa · menu; pola dotyku 44 × 44 px;    */
/* logo ok. 48 px wysokości (LIFTING §3.8).                                 */
@media (max-width: 991.98px) {
	header .blogowice-szukaj {
		order: -1;
	}

	header .wp-block-navigation__responsive-container-open,
	header .wp-block-navigation__responsive-container-close {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
	}

	/* Menu otwarte: pozycje 52 px z liniami, bieżąca — kreska z lewej */
	header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1rem var(--wp--custom--gutter);
	}

	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 3.5rem;
	}

	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0;
		width: 100%;
	}

	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.875rem 0;
	}

	header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		padding-left: 0.75rem;
		box-shadow: inset 3px 0 0 var(--wp--preset--color--accent-2-ink);
	}

	header .wp-block-navigation__responsive-container.is-menu-open {
		animation: blogowice-pojaw 0.25s ease-out;
	}
}

@media (max-width: 782px) {
	header .wp-block-site-logo img {
		max-height: 48px;
		width: auto;
	}
}

/* ─── 2d. Nakładka wyszukiwania (blok Szukaj „tylko przycisk”) ───────── */
/* Mechanika core: klik w lupę otwiera pole, Esc i klik poza polem          */
/* zamykają (bez własnego JS). Tu tylko wygląd: lupa w polu 44 px, a pole   */
/* otwarte = nakładka grafit 96 % na cały ekran (LIFTING §3.8).            */
.blogowice-szukaj .wp-block-search__button {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	justify-content: center;
	background: transparent;
	color: var(--wp--preset--color--accent-3);
	border: 0;
	box-shadow: none;
}

.blogowice-szukaj .wp-block-search__button:is(:hover, :focus-visible) {
	transform: none;
	background: transparent;
	color: var(--wp--preset--color--accent-2-ink);
}

/* Lupa z zestawu Lucide (LIFTING §5.1) zamiast ikony core — każda wyszukiwarka */
.wp-block-search__button.has-icon {
	align-items: center;
	justify-content: center;
}

.wp-block-search__button.has-icon svg {
	display: none;
}

.wp-block-search__button.has-icon::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.blogowice-szukaj:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	position: fixed;
	inset: 0;
	z-index: 1300;
	width: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--wp--custom--gutter);
	border: 0;
	background: color-mix(in srgb, var(--wp--preset--color--accent-3) 96%, transparent);
	animation: blogowice-pojaw 0.25s ease-out;
}

/* „×” — wizualna podpowiedź; klik w tło nakładki zamyka (core: utrata fokusu) */
.blogowice-szukaj:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--white);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.blogowice-szukaj:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	flex: 0 1 600px;
	height: 48px;
	padding: 0 1rem;
	border: 2px solid var(--wp--preset--color--accent-3);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font-size: 1rem;
}

.blogowice-szukaj:not(.wp-block-search__searchfield-hidden) .wp-block-search__button,
.blogowice-szukaj:not(.wp-block-search__searchfield-hidden) .wp-block-search__button:is(:hover, :focus-visible) {
	width: 48px;
	height: 48px;
	border-radius: 0 8px 8px 0;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-3);
}

@keyframes blogowice-pojaw {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ─── 2e. Przycisk z obrysem (styl „Obrys”) — hover ────────────────── */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	transition: background-color 0.2s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* ─── 2f. Wyszukiwarka z przyciskiem w środku — fokus ─────────────── */
/* Core zdejmuje obrys pola — obrys na ramce pola, jak fokus przycisków.   */
.wp-block-search__button-inside .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

/* ─── 2g. Bloki base-block — kontrast i kropki karuzel (WCAG AA) ──── */
body .base-block-breadcrumbs .base-block-breadcrumbs__link {
	opacity: 1;
}

body :is(.base-block-post-card__fields, .base-block-post-carousel__fields, .base-block-post-fields, .base-block-archive-fields, .base-block-post-relations__body) .base-block-field__label {
	opacity: 1;
	color: var(--wp--preset--color--muted);
}

body .base-block-post-carousel.swiper > .swiper-pagination,
body .base-block-content-carousel .base-block-content-carousel__nav .base-block-content-carousel__dots {
	gap: 15px;
}

.base-block-image-carousel {
	--swiper-pagination-bullet-horizontal-gap: 0px;
	--swiper-pagination-bottom: 0px;
}

body .base-block-image-carousel .swiper-pagination-bullet {
	box-sizing: content-box;
	padding: 8px;
	background-clip: content-box;
}

/* ─── 3. Przyciski — stany (LIFTING §3.1, §5.3) ────────────────────── */
/* Kolory bazowe i hover zielonego: theme.json → elements.button. Tu ruch  */
/* 1 px i hover wariantów z palety (klasy kolorów WP mają !important).     */
.wp-element-button {
	transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}

.wp-block-button__link:is(:hover, :focus-visible) {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: none;
}

/* Pomarańczowy (accent-2-ink, biały napis) → hover grafit */
.wp-block-button__link.has-accent-2-ink-background-color:is(:hover, :active) {
	background-color: var(--wp--preset--color--accent-3) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Grafitowy → hover zielony z grafitowym napisem; fokus żółty */
.wp-block-button__link.has-accent-3-background-color:is(:hover, :active) {
	background-color: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--accent-3) !important;
}

.wp-block-button__link.has-accent-3-background-color:focus-visible,
.has-accent-3-background-color .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--accent-4);
}

/* Przycisk na zielonym tle (np. formularz) — hover białe tło (LIFTING §3.1) */
.has-accent-1-background-color :is(.wp-block-button__link.has-accent-3-background-color, .wpcf7-submit):is(:hover, :active) {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--accent-3) !important;
}

/* Napis przycisku łamie się między słowami, nie po literach (LEKCJE §30) */
.wp-block-button__link {
	word-break: normal;
}

/* ─── 4. Linki ──────────────────────────────────────────────────────── */
/* W treści podkreślone (theme.json → elements.link). Bez podkreślenia,    */
/* z podkreśleniem przy hover: tytuły kart, menu, stopka.                  */
:is(.wp-block-post-title, .wp-block-latest-posts, footer) a {
	text-decoration: none;
}

:is(.wp-block-post-title, .wp-block-latest-posts, footer) a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─── 5. Pola formularzy — CF7 (markup spoza bloków; LIFTING §3.2) ───── */
.wpcf7-form label {
	display: block;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-3);
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7-form-control-wrap :is(input, textarea, select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 6px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.wpcf7-form-control-wrap textarea {
	padding: 12px 14px;
	min-height: 160px;
}

.wpcf7-form-control-wrap :is(input, textarea, select):focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-3);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-2) 35%, transparent);
}

.wpcf7-form-control-wrap :is(input, textarea)::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wpcf7-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--accent-2-ink);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--wp--preset--color--accent-2-ink);
	font-size: 0.875rem;
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form-control-wrap input[type=checkbox] {
	width: auto;
	min-height: 0;
}

.wpcf7 form.sent .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--accent-1-soft);
	color: var(--wp--preset--color--body);
}

/* ─── 6. Stopka — listy z liniami, przycisk „do góry” ──────────────── */
/* Linie między pozycjami (LIFTING §5.2): lista i „Najnowsze wpisy” nie    */
/* mają ramek pozycji w edytorze.                                           */
.blogowice-linie {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blogowice-linie li {
	padding: 0.625rem 0;
}

.blogowice-linie li:first-child {
	padding-top: 0;
}

.blogowice-linie li:last-child {
	padding-bottom: 0;
}

.blogowice-linie li + li {
	border-top: 1px solid var(--wp--preset--color--line-invert);
}

/* „Do góry” — pomarańczowe koło 44 px, widoczne po przewinięciu (bez JS:  */
/* klasa .is-scrolled nagłówka z base-block).                               */
.blogowice-do-gory {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out;
}

body:has(header.is-scrolled) .blogowice-do-gory {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.blogowice-do-gory:is(:hover, :focus-visible) {
	transform: translateY(-1px);
}

.blogowice-do-gory:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

/* ─── 7. Blokada FREEMIUM (wzorzec synchronizowany; inc/freemium.php) ─ */
.blogowice-blokada__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--accent-3);
}

/* Telefon: para przycisków jeden pod drugim, na pełną szerokość (LIFTING  */
/* §3.1). Orientacji przycisków per viewport WP nie stosuje (LEKCJE §35).  */
@media (max-width: 480px) {
	.blogowice-blokada .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.blogowice-blokada .wp-block-button {
		width: 100%;
	}
}

/* ─── 8. Równe wysokości w rzędzie (standard fabryki) ──────────────── */
:where(.wp-block-column, .wp-block-post-template > li) > .wp-block-group:only-child:is(.has-background, .has-border-color) {
	box-sizing: border-box;
	height: 100%;
}

/* ─── 9. Blog z panelem bocznym (szablony home, category, tag,          */
/*        single-post; część sidebar) ──────────────────────────────── */
@media (min-width: 992px) {
	.wp-block-columns.sidebar-layout > .sidebar-column {
		order: var(--wp--custom--sidebar-order, 1);
	}
}

@media (max-width: 991.98px) {
	.wp-block-columns.sidebar-layout > .wp-block-column {
		flex-basis: 100% !important;
	}
}