/*
Theme Name: Myjnia Kroczyce
Theme URI: https://myjnia-kroczyce.pl
Description: Motyw potomny Extendable dla Myjni Bezdotykowej HBT w Kroczycach. Paleta marki i poprawki dostępności zapisane w theme.json zamiast nadpisań !important.
Author: HBT
Author URI: https://hbt.com.pl
Template: extendable
Version: 1.0.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myjnia-kroczyce
Tags: block-patterns, full-site-editing, custom-colors
*/

/* ==========================================================================
   ZASADA TEGO PLIKU

   Kolory, typografia i odstępy są w theme.json — nie tutaj.
   Tutaj trafia wyłącznie to, czego theme.json nie potrafi wyrazić.

   Nie dodawaj tu reguł typu `p, li, span { color: X !important }`.
   Dokładnie takie nadpisania psuły wcześniej style inline w treści
   (czarny tekst na pomarańczowym przycisku robił się pomarańczowy
   na pomarańczowym — czyli niewidoczny).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Nagłówek i stopka — ciemniejsze niż tło strony, dla rozdzielenia stref
   -------------------------------------------------------------------------- */

.wp-block-template-part[data-area="header"],
.wp-site-blocks > header {
	background-color: var(--wp--preset--color--darker);
	border-bottom: 3px solid var(--wp--preset--color--primary);
}

.wp-block-template-part[data-area="footer"],
.wp-site-blocks > footer {
	background-color: var(--wp--preset--color--darker);
	border-top: 1px solid var(--wp--preset--color--card-border);
}


/* --------------------------------------------------------------------------
   2. Nawigacja

   Rozwijane submenu dziedziczyło białe tło z presetu `background`.
   Po migracji palety preset jest już ciemny, ale ustawiamy to wprost —
   submenu bywa renderowane poza kontekstem motywu.
   -------------------------------------------------------------------------- */

.wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--darker);
	border: 1px solid var(--wp--preset--color--card-border);
	border-radius: 6px;
	padding-block: 0.35rem;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}


/* --------------------------------------------------------------------------
   3. Nagłówki

   Wyśrodkowany nagłówek nie może mieć kreski po lewej — na szerokim
   ekranie kreska zostaje daleko od tekstu i wygląda jak błąd renderowania.
   Nagłówki do lewej dostają kreskę, wyśrodkowane dostają akcent pod spodem.
   -------------------------------------------------------------------------- */

.entry-content :is(h2, h3):not(.has-text-align-center):not(.has-text-align-right) {
	border-left: 5px solid var(--wp--preset--color--primary);
	padding-left: 1rem;
}

.entry-content :is(h1, h2, h3, h4).has-text-align-center {
	border-left: 0;
	padding-left: 0;
}

.entry-content :is(h2, h3, h4).has-text-align-center::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 0.55em auto 0;
	border-radius: 2px;
	background-color: var(--wp--preset--color--primary);
}

/* Nazwy własne nie mogą się dzielić myślnikiem — „Bezdoty-kowa" */
.wp-block-cover :is(h1, h2),
.entry-content h1 {
	hyphens: none;
	overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   4. Rytm sekcji

   Sekcje Gutenberga miały 112px, sekcje z bloków HTML 60px.
   Ujednolicone — bez tego widać przeskok w połowie strony.
   -------------------------------------------------------------------------- */

.entry-content > section {
	padding-block: clamp(3.25rem, 8vw, 5rem);
}


/* --------------------------------------------------------------------------
   5. Czytelność drobnego tekstu

   Etykiety węży i przyciski były renderowane w 11px kolorem #ccc.
   Kolor naprawia migracja palety; tutaj tylko minimalny rozmiar,
   żeby etykiety dało się przeczytać na telefonie.
   -------------------------------------------------------------------------- */

.entry-content section span[style*="font-size"] {
	font-size: max(0.75rem, 12px);
}

.entry-content small,
.has-small-font-size {
	color: var(--wp--preset--color--foreground-alt);
}


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

/* Widoczny fokus klawiaturowy — bez tego nie da się nawigować Tabem */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Cele dotykowe w nawigacji — 26px to za mało na telefonie */
@media (max-width: 781px) {
	.wp-block-navigation-item__content {
		padding-block: 0.6rem;
	}
}

/* Szanuj ustawienie systemowe ograniczenia ruchu */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.ext-animate--on,
	.faq-accordion-answer {
		transition: none !important;
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}


/* --------------------------------------------------------------------------
   7. Drobiazgi
   -------------------------------------------------------------------------- */

/* Blokuje poziomy scroll bez robienia z body kontenera przewijania.
   `overflow-x: hidden` wymusiłby na drugiej osi `auto` i dołożył
   drugi, wewnętrzny pasek przewijania. */
body {
	overflow-x: clip;
}

/* Obrazki nie wychodzą poza swój kontener */
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* Tabele — czytelne na ciemnym tle */
.wp-block-table :is(th, td) {
	border-color: var(--wp--preset--color--card-border);
}

.wp-block-table thead {
	border-bottom-color: var(--wp--preset--color--primary);
}