/*
Theme Name: Ziemowit Balcer — W drodze
Theme URI: https://ziemowitbalcer.pl
Template: twentytwentyfive
Author: Ziemowit Balcer
Description: Child theme Twenty Twenty-Five dostosowany do Księgi Marki Osobistej Ziemowita Balcera — surowa, minimalistyczna identyfikacja (czerń/grafit + złamana biel, akcent monospace, długa forma w szeryfie).
Version: 1.0.0
Text Domain: ziemowitbalcer-child
*/

/* Nagłówek: separator na pełną szerokość ekranu + przyklejenie do góry przy przewijaniu. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* Stały odstęp 100px między blokiem nagłówka a treścią — na każdej stronie.
   !important konieczne: szablony (page.html, page-no-title.html, single.html itd.)
   ustawiają margin-top na <main> jako inline style, co ma wyższy priorytet niż zwykła reguła w arkuszu. */
main.wp-block-group {
	margin-top: 100px !important;
}

/* Pionowy separator między pozycjami menu (nagłówek i stopka) */
.wp-block-navigation-item + .wp-block-navigation-item {
	border-left: 1px solid var(--wp--preset--color--accent-6);
	padding-left: 1em;
	margin-left: 1em;
}

/* Linki social w stopce — na mobile ten blok spada do własnego wiersza
   (rodzic ma flexWrap:wrap), więc centrujemy go i zdejmujemy pionową kreskę,
   która na jednej, wyśrodkowanej linii nie miałaby już sensu jako separator. */
@media (max-width: 600px) {
	/* Cały dolny wiersz stopki (copyright / menu / social) układa się w kolumnę
	   i centruje jako całość — nadrzędne wobec poszczególnych reguł poniżej,
	   które dodatkowo domykają wyrównanie tekstu wewnątrz każdego bloku. */
	.footer-bottom-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	.footer-social {
		width: 100%;
		justify-content: center;
		border-left: none;
		padding-left: 0;
	}
	.footer-social p {
		text-align: center;
	}
	.footer-nav {
		width: 100%;
		justify-content: center;
	}
	.footer-nav .wp-block-navigation__container {
		justify-content: center;
	}
}

/* Okrągłe zdjęcia (nagłówek, strona główna, O Mnie) — ta sama klasa obsługuje
   różne rozmiary (40px/140px/200px), dlatego wymuszamy proporcję kwadratu
   przez aspect-ratio zamiast sztywnych wymiarów w px. Bez tego kolumna, w której
   siedzi zdjęcie, mogła przy pewnych szerokościach ekranu (np. przy składaniu
   kolumn na wąskich viewportach) przestać być kwadratowa — border-radius:50%
   na niekwadratowym pudełku daje owal/wygięty kształt zamiast koła. */
.site-avatar-round {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}
.site-avatar-round img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}

/* Formularz kontaktowy (Contact Form 7) — dopasowany do estetyki marki:
   ostre krawędzie, delikatne obramowania, mono-akcenty, czarny przycisk jak reszta CTA na stronie. */
.wpcf7 form p {
	margin: 0 0 1.25em;
}

.wpcf7 .wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-1);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0;
	padding: 0.9em 1em;
	transition: border-color 0.2s ease;
}

.wpcf7 .wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--accent-4);
}

.wpcf7 .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
}

.wpcf7 textarea.wpcf7-form-control {
	min-height: 180px;
	resize: vertical;
}

.wpcf7 .wpcf7-submit {
	width: auto;
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 0;
	padding: 1em 2.25em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpcf7 .wpcf7-submit:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);
}

.wpcf7-spinner {
	background-color: var(--wp--preset--color--contrast);
}

.wpcf7-spinner::before {
	background-color: var(--wp--preset--color--base);
}

.wpcf7 form .wpcf7-response-output {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	border-radius: 0;
}

.wpcf7-not-valid-tip {
	font-family: var(--wp--preset--font-family--fira-code);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.4em;
}