/*
Theme Name: EVO Base
Theme URI: https://evo-code.pl
Author: EVO-CODE®
Author URI: https://evo-code.pl
Description: Motyw bazowy stron klienckich EVO-CODE®. Blokowy, bez plików krojów pisma, z dostępnością wpiętą w bramkę CI. Wygląd konkretnego klienta powstaje jako wariant stylu, nie jako kopia motywu.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.0.0
License: Proprietary
Text Domain: evo-base
Tags: block-templates, full-site-editing, accessibility-ready, translation-ready
*/

/*
 * Ten plik jest celowo krótki.
 *
 * Wszystko, co da się wyrazić w theme.json, siedzi w theme.json - bo tamto
 * przechodzi przez bramkę jakości, a CSS nie. Tutaj zostaje wyłącznie to,
 * czego theme.json nie potrafi: stany skupienia, redukcja ruchu i minimalne
 * cele dotykowe.
 */

/* ---------------------------------------------------------------------------
   Widoczność skupienia (WCAG 2.4.7, 2.4.11)

   Domyślny obrys przeglądarki bywa niewidoczny na kolorowym tle, a wiele
   motywów usuwa go całkowicie w imię estetyki. To odcina od strony każdego,
   kto porusza się klawiaturą.

   Dwuwarstwowy obrys - ciemny z jasną przerwą - jest czytelny zarówno na tle
   jasnym, jak i ciemnym, bez zgadywania, co pod nim leży.
--------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast, #16181d);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Przeglądarka nie może zabrać obrysu wewnątrz elementów przyciętych. */
:where(.wp-block-navigation) :focus-visible {
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Cele dotykowe (WCAG 2.2, 2.5.8 - poziom AA)

   Minimum to 24 na 24 piksele CSS. Odnośnik w stopce albo ikona mediów
   społecznościowych potrafi zejść do 16 pikseli i nadal wygląda dobrze na
   makiecie - a jest nietrafialny na telefonie w rękawiczce.
--------------------------------------------------------------------------- */
:where(.wp-block-navigation-item__content, .wp-block-social-link-anchor, .wp-block-post-title a) {
	min-block-size: 24px;
	min-inline-size: 24px;
}

/* ---------------------------------------------------------------------------
   Redukcja ruchu (WCAG 2.3.3)

   Ustawienie systemowe, nie preferencja estetyczna: animacja potrafi wywołać
   zawroty głowy u osób z zaburzeniami przedsionkowymi. Zerujemy czas trwania
   zamiast usuwać animacje, żeby stany końcowe nadal się ustawiały.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Typografia tekstu długiego
--------------------------------------------------------------------------- */

/* Wisząca sierota w nagłówku wygląda na niedopatrzenie. */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Długie adresy nie mogą rozpychać układu w poziomie. */
:where(p, li, dd, td) a {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Obrazy

   Bez tego obraz z zadeklarowanymi wymiarami rozpycha kolumnę na telefonie.
--------------------------------------------------------------------------- */
:where(img, svg, video, canvas) {
	max-inline-size: 100%;
	block-size: auto;
}

/* ---------------------------------------------------------------------------
   Znak firmowy EVO-CODE®

   Dwie rzeczy, które odróżniają złożenie profesjonalne od niedbałego.

   Po pierwsze `white-space: nowrap`. Nazwa zawiera dywiz, więc bez tego
   przeglądarka potrafi złamać ją na „EVO-" i „CODE®" na granicy wersu.
   Nazwa własna nie łamie się nigdy.

   Po drugie sam znak. W rozmiarze tekstu jest za ciężki i siedzi na linii
   pisma, przez co wygląda jak literówka. Zmniejszamy go i podnosimy do
   wysokości wersalika. Światło międzyliterowe zerujemy osobno, żeby nie
   odjechał od nazwy w blokach ze rozstrzelonym tekstem.
--------------------------------------------------------------------------- */
.marka-evo {
	white-space: nowrap;
}

.marka-evo .znak-r {
	font-size: 0.6em;
	line-height: 1;
	vertical-align: 0.7em;
	letter-spacing: 0;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Odnośnik pomijający nawigację

   WordPress dokłada go blokowym motywom sam, ale bez stylu jest widoczny
   dopiero po wejściu klawiaturą i wtedy potrafi zniknąć pod nagłówkiem.
--------------------------------------------------------------------------- */
.skip-link:focus {
	background-color: var(--wp--preset--color--base, #ffffff);
	color: var(--wp--preset--color--contrast, #16181d);
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}