/*
 Theme Name:   SP41S v.2
 Description:  Motyw strony Szkoły Podstawowej Specjalnej Nr 41 im. WOŚP w Zabrzu, oparty na Bricksie.
 Author:       PixelVision
 Author URI:   https://pixelvision.pl
 Template:     bricks
 Version:      2.0.0
 Text Domain:  sp41s
*/

/* ==================================================================
   Warstwa bazowa. Tokeny (kolory, rozmiary, odstępy) są zmiennymi
   Bricksa, tu tylko reguły globalne. Komponenty to klasy BEM w Bricksie.
   Bricks trzyma swoje style w @layer bricks, więc te reguły bez warstwy
   wygrywają z nimi niezależnie od specyficzności.
================================================================== */

/* Font Google Sans Flex: Bricks → Custom fonts (zmienny, dwa podzbiory znaków).
   Rozmiary, interlinia, kolory tekstu i linków: Bricks → Theme Styles „SP41S”. */

/* --- wysoki kontrast, przełącznik „Kontrast” w nagłówku ---
   Tylko na html: sam przycisk też ma atrybut data-contrast. */
html[data-contrast="high"] {
	--color-muted: #16161C;
	--color-line: #16161C;
	--color-line-strong: #16161C;
	--color-line-field: #16161C;
	--color-bg-warm: #FFFFFF;
	--color-navy-mist: #FFFFFF;
	--color-blue-mist: #FFFFFF;
	--color-green-mist: #FFFFFF;
	--color-blue-on-mist: var(--color-blue-text);
	--color-green-on-mist: var(--color-green-text);
}

/* --- „A A+ A++” w nagłówku: powiększenie przez rozmiar korzenia ---
   Korzeń 100% ustawia Theme Style. Skaluje się wszystko, co jest w rem:
   tekst, odstępy i przyciski razem. */
html { scroll-behavior: smooth; }
html[data-text-scale="1.15"] { font-size: 115%; }
html[data-text-scale="1.3"]  { font-size: 130%; }

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Osie fontu zmiennego: Theme Styles nie ma na nie kontrolki. */
body { font-variation-settings: var(--font-axes-body); }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	/* większy rozmiar optyczny i mocniejsze zaokrąglenie dla nagłówków */
	font-variation-settings: var(--font-axes-heading);
	color: inherit;
	/* długie polskie słowa („psychologiczno-pedagogiczna”) nie mogą wypchnąć nagłówka poza ekran */
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}
h1 { font-variation-settings: var(--font-axes-display); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--weight-strong); }

a { text-underline-offset: 0.15em; }

/* Bricks nadaje etykietom szary #9E9E9E (kontrast 2,7:1). Ukryte etykiety wyszukiwarki
   i przełączniki Complianza go dziedziczyły, walidatory zgłaszały błąd kontrastu. */
label { color: inherit; }

img, svg, video { max-width: 100%; height: auto; }

/* widoczny focus: kolor i grubość w Theme Styles, tu odsunięcie i zaokrąglenie */
:focus-visible { outline-offset: 3px; border-radius: 6px; }

/* treść tylko dla czytników ekranu, np. etykiety pól wyszukiwania */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* link „Przejdź do treści”, pierwszy element na stronie */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-s);
	z-index: 1000;
	padding: 0.875rem 1.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-navy);
	color: #FFFFFF;
	font-weight: var(--weight-heading);
	text-decoration: none;
	transition: top 0.18s ease;
}
.skip-link:focus { top: var(--space-s); color: #FFFFFF; }

/* --- ikony jako maski: kolor bierze się z currentColor ---
   Używane jako mask-image w klasach BEM, więc w HTML nie ma ani plików,
   ani kodu SVG, a ikona zmienia kolor razem z tekstem. */
:root {
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a1 1 0 01-1 1A16 16 0 014 5a1 1 0 011-1z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 7l8 6 8-6' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	--icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5H16.7V3.6c-.3-.04-1.28-.13-2.42-.13-2.4 0-4.03 1.46-4.03 4.15V9.9H7.5V13h2.75v8h3.25z'/%3E%3C/svg%3E");
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
	--icon-contrast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E");
	--icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='10' width='16' height='10' rx='2.4' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 10V7.6a4 4 0 118 0V10' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9.5l6 6 6-6' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5l5 5L20 6.5' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='4' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 20.5c1.2-3.8 4.3-5.5 8-5.5s6.8 1.7 8 5.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.5' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7.5V12l3 2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11.2A6.5 6.5 0 0 1 18.5 9.8C18.5 14.8 12 21 12 21z' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9.8' r='2.3' fill='black'/%3E%3C/svg%3E");
	--icon-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a2.6 2.6 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.6 2.6 0 0 0 2.4 7.2 27 27 0 0 0 2 12a27 27 0 0 0 .4 4.8 2.6 2.6 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.6 2.6 0 0 0 1.8-1.8A27 27 0 0 0 22 12a27 27 0 0 0-.4-4.8zM10 15V9l5.2 3L10 15z'/%3E%3C/svg%3E");
	--icon-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 12.5V6a1.5 1.5 0 013 0v5m0-6.5a1.5 1.5 0 013 0V11m0-5a1.5 1.5 0 013 0v5.5m0-3a1.5 1.5 0 013 0V14c0 4.2-3 7-7 7-2.6 0-4.3-1.2-5.7-3.3L3.6 13.4a1.6 1.6 0 012.6-1.8L8 14' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-symbols: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.8' stroke='black' stroke-width='1.8'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.8' stroke='black' stroke-width='1.8'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.8' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='17' r='3.6' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
	--icon-tablet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='4' width='13' height='16' rx='2.2' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 17h3M19 9.5c1 .8 1.5 1.6 1.5 2.5s-.5 1.7-1.5 2.5M18.5 7c2 1.4 3 3 3 5s-1 3.6-3 5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	--icon-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 4h8v5a4 4 0 01-8 0V4zM8 6H4.5v1.5A3.5 3.5 0 008 11M16 6h3.5v1.5A3.5 3.5 0 0116 11M12 13v4m-4 3.5h8M9.5 20.5c0-1.9 1.1-3.5 2.5-3.5s2.5 1.6 2.5 3.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 3.5H7.5a2 2 0 00-2 2v13a2 2 0 002 2h9a2 2 0 002-2V8L14 3.5z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5V8h4.5M9 13h6M9 16.5h4' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4v11m0 0l-4.5-4.5M12 15l4.5-4.5M5 19.5h14' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 19V5M5.5 11.5L12 5l6.5 6.5' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- opakowanie nagłówka Bricksa ---
   Cały nagłówek jest sticky z ujemnym przesunięciem, które liczy site.js:
   pasy nad menu odjeżdżają, a pas menu (albo na telefonie pas główny) zostaje. */
#brx-header {
	position: sticky;
	top: var(--header-offset, 0px);
	z-index: 100;
	background: var(--color-bg);
}
/* Zalogowany redaktor ma nad stroną pasek administratora (stały od 601 px). */
@media (min-width: 601px) {
	.admin-bar #brx-header { top: calc(var(--header-offset, 0px) + var(--wp-admin--admin-bar--height, 32px)); }
}