/*
Theme Name: BrainWash
Theme URI: https://brainwash.org.pl
Author: Szkoła Językowa BrainWash
Description: Klasyczny, autorski motyw WordPressa dla Szkoły Językowej BrainWash. Minimalistyczny, sterowany paskiem u góry strony, z trybem jasnym i ciemnym, czcionką Museo i pełną obsługą telefonów. Bez page buildera, bez animacji, bez wyskakujących okienek.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: brainwash
Tags: education, custom-menu, dark-mode, accessibility-ready, translation-ready
*/

/* =========================================================================
   0. Museo — bundled woff2 (the client's own font package, weights 300/500/
      700/900; same four files the billing panel ships).
   ========================================================================= */

@font-face {
	font-family: 'Museo';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Museo 300'), url('assets/fonts/museo-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Museo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Museo 500'), url('assets/fonts/museo-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Museo';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: local('Museo 500'), url('assets/fonts/museo-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Museo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Museo 700'), url('assets/fonts/museo-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Museo';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: local('Museo 900'), url('assets/fonts/museo-900.woff2') format('woff2');
}

/* =========================================================================
   1. Palettes. Light is the base; dark overrides only the colour tokens.
      Order matters: prefers-color-scheme first (system default), then the
      explicit [data-theme] attributes so a stored choice always wins.
      Brand anchors come from the billing panel: navy #1d3c6e, yellow #f2c14e.
   ========================================================================= */

:root {
	--bw-bg: #f6f7fb;
	--bw-surface: #ffffff;
	--bw-surface-2: #eef1f7;
	--bw-text: #1c2430;
	--bw-muted: #5b6472;
	--bw-line: #e0e4ee;
	--bw-navy: #1d3c6e;
	--bw-navy-dark: #14294c;
	--bw-navy-soft: #eaeff8;
	--bw-accent: #f2c14e;
	--bw-accent-ink: #3a2c05;
	--bw-link: #1d3c6e;
	--bw-danger: #b91c1c;
	--bw-danger-bg: #fdeaea;
	--bw-success: #15803d;
	--bw-success-bg: #e9f6ee;
	--bw-shadow: 0 1px 3px rgba(20, 41, 76, .07), 0 8px 24px rgba(20, 41, 76, .05);
	--bw-shadow-sm: 0 1px 2px rgba(20, 41, 76, .08);
	--bw-radius: 10px;
	--bw-radius-sm: 6px;
	--bw-measure: 68ch;
	--bw-wrap: 1140px;
	/* Krok 9.4 / 9.5 — one width for every boxed section on every page (tiles,
	   forms, map, cards, lists), so nothing on a page is narrower or wider than
	   its neighbours. Running prose keeps --bw-measure; the Oferta grid of three
	   cards keeps the full --bw-wrap. */
	--bw-section: 900px;
	/* Brand colours of the social networks (Krok 9.3) — the same in both
	   themes: they are the networks' colours, not ours. Instagram's gradient
	   cannot be applied to a one-colour icon, so it gets its official solid. */
	--bw-brand-facebook: #1877f2;
	--bw-brand-instagram: #e4405f;
	--bw-font: 'Museo', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bw-bg: #0f1622;
		--bw-surface: #17202f;
		--bw-surface-2: #1e293b;
		--bw-text: #e7ecf4;
		--bw-muted: #9aa6b8;
		--bw-line: #29344a;
		--bw-navy: #7ea6e0;
		--bw-navy-dark: #a8c4ec;
		--bw-navy-soft: #1b283d;
		--bw-accent: #f2c14e;
		--bw-accent-ink: #2a1f03;
		--bw-link: #9dc0f0;
		--bw-danger: #f4a3a3;
		--bw-danger-bg: #3a1d1d;
		--bw-success: #86e0aa;
		--bw-success-bg: #14301f;
		--bw-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
		--bw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		color-scheme: dark;
	}
}

:root[data-theme='dark'] {
	--bw-bg: #0f1622;
	--bw-surface: #17202f;
	--bw-surface-2: #1e293b;
	--bw-text: #e7ecf4;
	--bw-muted: #9aa6b8;
	--bw-line: #29344a;
	--bw-navy: #7ea6e0;
	--bw-navy-dark: #a8c4ec;
	--bw-navy-soft: #1b283d;
	--bw-accent: #f2c14e;
	--bw-accent-ink: #2a1f03;
	--bw-link: #9dc0f0;
	--bw-danger: #f4a3a3;
	--bw-danger-bg: #3a1d1d;
	--bw-success: #86e0aa;
	--bw-success-bg: #14301f;
	--bw-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .28);
	--bw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	color-scheme: dark;
}

/* =========================================================================
   2. Reset / base
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bw-bg);
	color: var(--bw-text);
	font-family: var(--bw-font);
	font-size: 17px;
	line-height: 1.65;
	font-weight: 300;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img,
svg,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.25;
	color: var(--bw-text);
	margin: 0 0 .6em;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.6rem); font-weight: 900; }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p, ul, ol {
	margin: 0 0 1.1em;
}

a {
	color: var(--bw-link);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover,
a:focus {
	color: var(--bw-navy-dark);
}

hr {
	border: 0;
	border-top: 1px solid var(--bw-line);
	margin: 2.5rem 0;
}

/* One visible focus ring everywhere — the site has to be usable from the
   keyboard (WCAG 2.4.7). */
:focus-visible {
	outline: 3px solid var(--bw-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bw-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--bw-accent);
	color: var(--bw-accent-ink);
	padding: 10px 18px;
	font-weight: 700;
	border-radius: 0 0 var(--bw-radius-sm) 0;
}

.bw-skip-link:focus {
	left: 0;
}

/* =========================================================================
   3. Layout helpers
   ========================================================================= */

.bw-wrap {
	width: 100%;
	max-width: var(--bw-wrap);
	margin: 0 auto;
	padding: 0 18px;
}

.bw-main {
	flex: 1 0 auto;
	padding: 32px 0 64px;
}

.bw-narrow {
	max-width: var(--bw-measure);
	margin-left: auto;
	margin-right: auto;
}

.bw-center {
	text-align: center;
}

/*
 * One vertical gap for the whole site (Krok 10.3 on Kontakt, Krok 11.3 on
 * every page): "unormuj proszę odstępy pomiędzy wszystkimi sekcjami na całej
 * stronie w taki sposób, aby wszystkie były jednakowe". --bw-stack is the
 * distance from the page title to the first block, and from every block to
 * the next. A page's blocks sit in one .bw-stack, whose `gap` is the only
 * space between them — each block's own outer margin and padding, and the
 * top/bottom margins of its first and last child, are taken away here, so
 * nothing adds to it.
 */
:root {
	--bw-stack: 56px;
}

@media (max-width: 619px) {
	:root {
		--bw-stack: 40px;
	}
}

.bw-page-header {
	margin-bottom: var(--bw-stack);
}

.bw-page-header > :last-child {
	margin-bottom: 0;
}

.bw-stack {
	display: flex;
	flex-direction: column;
	gap: var(--bw-stack);
}

.bw-stack > * {
	/* Auto side margins in a flex column would shrink a block to its content;
	   full width keeps each one at its own max-width, as before. */
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.bw-stack > .bw-section {
	padding-top: 0;
	padding-bottom: 0;
}

.bw-stack > * > :first-child {
	margin-top: 0;
}

.bw-stack > * > :last-child {
	margin-bottom: 0;
}

.bw-page-header .bw-eyebrow {
	display: block;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bw-muted);
	font-weight: 700;
	margin-bottom: .4em;
}

.bw-card {
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 22px;
}

/* =========================================================================
   4. Buttons
   ========================================================================= */

.bw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: 12px 26px;
	min-height: 46px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--bw-navy);
	color: #fff;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* In dark mode --bw-navy is a light tint (it has to read as text on a dark
   ground), so the solid button gets its own mid-navy fill instead. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .bw-btn {
		background: #2a4f8f;
	}
}

:root[data-theme='dark'] .bw-btn {
	background: #2a4f8f;
}

.bw-btn:hover,
.bw-btn:focus {
	background: var(--bw-navy-dark);
	color: #fff;
}

:root[data-theme='dark'] .bw-btn:hover,
:root[data-theme='dark'] .bw-btn:focus {
	background: #35619f;
}

.bw-btn--accent {
	background: var(--bw-accent);
	color: var(--bw-accent-ink);
}

.bw-btn--accent:hover,
.bw-btn--accent:focus,
:root[data-theme='dark'] .bw-btn--accent,
:root[data-theme='dark'] .bw-btn--accent:hover,
:root[data-theme='dark'] .bw-btn--accent:focus {
	background: #e5b134;
	color: var(--bw-accent-ink);
}

.bw-btn--ghost {
	background: transparent;
	color: var(--bw-text);
	border-color: var(--bw-line);
}

.bw-btn--ghost:hover,
.bw-btn--ghost:focus {
	background: var(--bw-surface-2);
	color: var(--bw-text);
	border-color: var(--bw-navy);
}

.bw-btn--sm {
	padding: 8px 16px;
	min-height: 38px;
	font-size: .92rem;
}

/* =========================================================================
   5. Header / top bar — the whole site is steered from here.
   ========================================================================= */

.bw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bw-surface);
	border-bottom: 1px solid var(--bw-line);
	box-shadow: var(--bw-shadow-sm);
}

.bw-header__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.bw-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--bw-text);
	margin-right: auto;
	font-weight: 700;
}

.bw-brand__logo {
	display: block;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
}

.bw-brand__name {
	font-size: 1rem;
	line-height: 1.15;
}

@media (max-width: 400px) {
	.bw-brand__name {
		font-size: .9rem;
	}
}

/* --- tools (language + theme + hamburger) --- */

.bw-header__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bw-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
	background: var(--bw-surface);
	color: var(--bw-text);
	font: inherit;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

.bw-icon-btn:hover {
	background: var(--bw-surface-2);
}

.bw-burger__bars {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.bw-burger__bars::before,
.bw-burger__bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.bw-burger__bars::before { top: -6px; }
.bw-burger__bars::after  { top: 6px; }

.bw-lang {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
}

.bw-lang li a {
	display: block;
	padding: 6px 8px;
	border-radius: var(--bw-radius-sm);
	text-decoration: none;
	color: var(--bw-muted);
}

.bw-lang li a:hover {
	background: var(--bw-surface-2);
	color: var(--bw-text);
}

.bw-lang li.current-lang a,
.bw-lang li.current-lang > a {
	color: var(--bw-text);
	background: var(--bw-navy-soft);
}

/* --- navigation --- */

.bw-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bw-nav a {
	text-decoration: none;
	color: var(--bw-text);
	display: block;
}

.bw-nav .sub-menu {
	background: var(--bw-surface);
}

.bw-sub-toggle {
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bw-sub-toggle svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* A parent with no page of its own ("O nas") is one button, label included. */
.bw-sub-toggle--label {
	gap: 8px;
	width: 100%;
	justify-content: flex-start;
	padding: 13px 4px;
	font-weight: 500;
	text-align: left;
}

/* Mobile first: the nav is a panel that the hamburger opens. */
@media (max-width: 899px) {
	.bw-nav {
		display: none;
		order: 10;
		width: 100%;
		border-top: 1px solid var(--bw-line);
		padding: 8px 0 14px;
	}

	.bw-nav.is-open {
		display: block;
	}

	.bw-nav > ul > li {
		border-bottom: 1px solid var(--bw-line);
	}

	.bw-nav > ul > li:last-child {
		border-bottom: 0;
	}

	.bw-nav li.menu-item-has-children > .bw-nav__row {
		display: flex;
		align-items: center;
	}

	.bw-nav li.menu-item-has-children > .bw-nav__row > a {
		flex: 1 1 auto;
	}

	.bw-nav a {
		padding: 13px 4px;
		font-weight: 500;
	}

	.bw-sub-toggle {
		width: 48px;
		min-height: 48px;
		flex: 0 0 auto;
	}

	.bw-nav .sub-menu {
		display: none;
		padding: 0 0 8px 14px;
		border-left: 2px solid var(--bw-navy-soft);
		margin-left: 4px;
	}

	.bw-nav .sub-menu.is-open {
		display: block;
	}

	.bw-nav .sub-menu a {
		padding: 11px 4px;
		font-weight: 300;
		color: var(--bw-muted);
	}

	.bw-nav .sub-menu a:hover {
		color: var(--bw-text);
	}
}

/* Desktop: a horizontal bar with hover/focus dropdowns. */
@media (min-width: 900px) {
	.bw-burger {
		display: none;
	}

	.bw-nav {
		display: block !important;
	}

	.bw-nav > ul {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.bw-nav > ul > li {
		position: relative;
	}

	.bw-nav__row {
		display: flex;
		align-items: center;
	}

	.bw-nav > ul > li > .bw-nav__row > a,
	.bw-nav > ul > li > a {
		padding: 10px 12px;
		border-radius: var(--bw-radius-sm);
		font-size: .95rem;
		font-weight: 500;
		white-space: nowrap;
	}

	.bw-nav > ul > li > .bw-nav__row > a:hover,
	.bw-nav > ul > li > a:hover {
		background: var(--bw-surface-2);
	}

	.bw-nav > ul > li.current-menu-item > .bw-nav__row > a,
	.bw-nav > ul > li.current-menu-item > a,
	.bw-nav > ul > li.current-menu-ancestor > .bw-nav__row > a {
		box-shadow: inset 0 -3px 0 var(--bw-accent);
	}

	.bw-nav > ul > li.menu-item-has-children > .bw-nav__row > a {
		padding-right: 4px;
	}

	.bw-sub-toggle {
		padding: 10px 10px 10px 4px;
		border-radius: var(--bw-radius-sm);
	}

	.bw-sub-toggle--label {
		width: auto;
		padding: 10px 12px;
		font-size: .95rem;
		white-space: nowrap;
	}

	.bw-sub-toggle--label:hover {
		background: var(--bw-surface-2);
	}

	.bw-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 250px;
		border: 1px solid var(--bw-line);
		border-radius: var(--bw-radius);
		box-shadow: var(--bw-shadow);
		padding: 6px;
		/* Kept out of the flow instead of display:none so that focus-within
		   works and nothing "animates" into view — the survey's top
		   complaint was moving elements. */
		visibility: hidden;
		opacity: 0;
	}

	.bw-nav li:hover > .sub-menu,
	.bw-nav li:focus-within > .sub-menu,
	.bw-nav .sub-menu.is-open {
		visibility: visible;
		opacity: 1;
	}

	.bw-nav .sub-menu a {
		padding: 11px 14px;
		border-radius: var(--bw-radius-sm);
		font-size: .95rem;
		white-space: nowrap;
	}

	.bw-nav .sub-menu a:hover {
		background: var(--bw-surface-2);
	}

	.bw-nav .sub-menu li + li {
		border-top: 1px solid var(--bw-line);
	}
}

/* =========================================================================
   6. Front page
   ========================================================================= */

.bw-hero {
	background: var(--bw-surface);
	border-bottom: 1px solid var(--bw-line);
	padding: 56px 0 60px;
	text-align: center;
}

.bw-hero h1 {
	margin-bottom: .3em;
}

/* Krok 11.3 — from the hero to the first section: the same gap as between
   every other pair of blocks. */
.bw-hero + .bw-main {
	padding-top: var(--bw-stack);
}

/* =========================================================================
   Krok 11.28 — Co o nas mówią: three reviews between the hero and the news.
   This is the plain layout; each theme draws its own version in skins.css.
   ========================================================================= */

.bw-reviews__list {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	max-width: var(--bw-section);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 820px) {
	.bw-reviews__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bw-review figure {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	margin: 0;
	padding: 24px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
}

.bw-review__stars {
	margin: 0;
	color: var(--bw-accent);
	letter-spacing: .12em;
	font-size: 1.05rem;
	line-height: 1;
}

.bw-review__text {
	flex: 1 1 auto;
	margin: 0;
}

.bw-review__text p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--bw-text);
}

.bw-review__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bw-review__name {
	font-weight: 700;
	color: var(--bw-navy);
}

.bw-review__sample {
	font-size: .8rem;
	font-style: italic;
	color: var(--bw-muted);
}

.bw-hero__lead {
	max-width: 62ch;
	margin: 0 auto 1.8em;
	color: var(--bw-muted);
	font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
}

.bw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.bw-section {
	padding: 48px 0;
}

.bw-section__title {
	text-align: center;
	margin-bottom: 28px;
}

.bw-news {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.bw-news {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.bw-news {
		grid-template-columns: repeat(3, 1fr);
	}
}

.bw-news__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bw-news__thumb img {
	display: block;
	width: 100%;
	border-radius: var(--bw-radius-sm);
}

.bw-news__item h3 {
	margin: 0;
	font-size: 1.1rem;
}

.bw-news__item h3 a {
	text-decoration: none;
	color: var(--bw-text);
}

.bw-news__item h3 a:hover {
	color: var(--bw-link);
	text-decoration: underline;
}

.bw-meta {
	font-size: .85rem;
	color: var(--bw-muted);
}

.bw-empty {
	text-align: center;
	color: var(--bw-muted);
	border: 1px dashed var(--bw-line);
	border-radius: var(--bw-radius);
	padding: 34px 20px;
	background: var(--bw-surface);
}

/* =========================================================================
   7. Article / page content
   ========================================================================= */

.bw-entry {
	max-width: var(--bw-measure);
	margin: 0 auto;
}

.bw-entry img {
	border-radius: var(--bw-radius-sm);
}

.bw-entry blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--bw-accent);
	color: var(--bw-muted);
}

.bw-entry table {
	width: 100%;
	border-collapse: collapse;
}

.bw-entry th,
.bw-entry td {
	border: 1px solid var(--bw-line);
	padding: 8px 10px;
	text-align: left;
}

.bw-table-scroll {
	overflow-x: auto;
}

.bw-pagination {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.bw-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
	text-decoration: none;
	background: var(--bw-surface);
}

.bw-pagination .page-numbers.current {
	background: var(--bw-navy);
	border-color: var(--bw-navy);
	color: #fff;
}

/* =========================================================================
   8. Notices (form results — no pop-ups anywhere on this site)
   ========================================================================= */

.bw-notice {
	border-radius: var(--bw-radius);
	padding: 14px 18px;
	margin: 0 0 24px;
	border: 1px solid;
	font-weight: 500;
}

.bw-notice--ok {
	background: var(--bw-success-bg);
	border-color: var(--bw-success);
	color: var(--bw-success);
}

.bw-notice--error {
	background: var(--bw-danger-bg);
	border-color: var(--bw-danger);
	color: var(--bw-danger);
}

/* =========================================================================
   9. Footer
   ========================================================================= */

/*
 * Krok 8.6.1 — the footer is one line and nothing else ("Jedna linijka —
 * krótko, zwięźle i na temat. Unikaj proszę wysokich stopek zajmujących
 * połowę strony"). The brand block and the lead sentence that Krok 8.10 had
 * left above this line are gone, and with them .bw-footer__intro,
 * .bw-footer__brand and the intro's .bw-meta override.
 *
 * The padding is symmetric and a little more generous than the old bottom
 * row's, so the single line reads as a deliberate bar rather than as text
 * squashed against the dividing line.
 */
.bw-footer {
	flex: 0 0 auto;
	background: var(--bw-surface);
	border-top: 1px solid var(--bw-line);
	padding: 22px 0;
	font-size: .85rem;
	color: var(--bw-muted);
}

.bw-footer a {
	text-decoration: none;
	color: var(--bw-text);
}

.bw-footer a:hover {
	text-decoration: underline;
	color: var(--bw-link);
}

/*
 * One row: copyright left, Polityka Prywatności right. On a narrow screen the
 * two wrap onto two lines rather than colliding — the only case where the
 * footer is taller than one line, and it is that or an overflowing row.
 */
.bw-footer__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	justify-content: space-between;
}

/* =========================================================================
   10. 404
   ========================================================================= */

.bw-404 {
	text-align: center;
	padding: 40px 0 60px;
}

.bw-404__code {
	font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
	font-weight: 900;
	line-height: 1;
	color: var(--bw-navy-soft);
	margin: 0;
}

:root[data-theme='dark'] .bw-404__code {
	color: var(--bw-surface-2);
}

/* =========================================================================
   11. Reduced motion — we have nothing that moves, but be explicit.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}

/* =========================================================================
   12. Placeholder boxes — Misja / Oferta / Cennik
   ========================================================================= */

.bw-placeholder {
	max-width: var(--bw-section);
	margin: 0 auto;
	text-align: center;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 42px 24px;
}

.bw-placeholder__badge {
	display: inline-block;
	margin: 0 0 14px;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--bw-accent);
	color: var(--bw-accent-ink);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bw-placeholder__title {
	margin-bottom: .5em;
}

.bw-placeholder p:last-of-type {
	margin-bottom: 0;
}

.bw-placeholder .bw-btn {
	margin: 18px 4px 0;
}

/* =========================================================================
   13. Metoda — the client's copy, styled for reading
   ========================================================================= */

.bw-metoda h2 {
	margin-top: 2.2em;
	padding-top: .8em;
	border-top: 1px solid var(--bw-line);
}

.bw-metoda h2:first-of-type {
	margin-top: 1.4em;
}

.bw-metoda h3 {
	margin-top: 1.9em;
	font-size: 1.22rem;
	color: var(--bw-navy);
}

.bw-metoda > p:first-of-type {
	font-size: 1.1rem;
	color: var(--bw-muted);
}

/* The copy leads several paragraphs with a bold "label:" — give those a bit
   of air so the page scans instead of reading as one block. */
.bw-metoda p strong:first-child {
	color: var(--bw-text);
}

/* =========================================================================
   14. Lektorzy cards
   ========================================================================= */

.bw-lektorzy {
	display: grid;
	gap: 18px;
	max-width: var(--bw-section);
	margin: 0 auto;
}

.bw-lektor {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 18px;
}

@media (min-width: 640px) {
	.bw-lektor {
		grid-template-columns: 180px 1fr;
		align-items: start;
	}
}

/* The photo is whatever the owner uploads — a square avatar, a tall portrait
   from a phone, a wide snapshot. The fixed 1/1 box plus `cover` keeps every
   card the same height whatever arrives; `center top` decides what survives the
   crop of a tall one, and in a portrait that is the face rather than the shoes.
   The soft tint underneath covers the moment before a lazy-loaded photo paints,
   and keeps the frame visible if a file ever goes missing. */
.bw-lektor__photo img {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	background: var(--bw-navy-soft);
	border-radius: var(--bw-radius-sm);
}

.bw-lektor__name {
	margin: 0 0 .25em;
	font-size: 1.35rem;
}

.bw-lektor__role {
	margin: 0 0 1em;
	color: var(--bw-muted);
	font-size: .95rem;
	line-height: 1.45;
}

/* Krok 9.17 — the bios are justified, like the Oferta descriptions; `hyphens`
   keeps justification from opening rivers in a narrow column. */
.bw-lektor__bio {
	text-align: justify;
	hyphens: auto;
}

.bw-lektor__bio p:last-child {
	margin-bottom: 0;
}

.bw-lektor__links {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
}

.bw-lektor__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--bw-line);
	border-radius: 50%;
	color: var(--bw-navy);
}

.bw-lektor__icon:hover {
	background: var(--bw-navy-soft);
}

.bw-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.bw-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.bw-icon--lg svg {
	width: 30px;
	height: 30px;
}

/* =========================================================================
   15. Forms — Zapisy and Kontakt
   ========================================================================= */

.bw-form-wrap {
	max-width: var(--bw-section);
	margin: 0 auto;
}

.bw-form {
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 24px 22px;
}

.bw-field,
.bw-fieldset {
	margin: 0 0 18px;
}

.bw-field label,
.bw-fieldset legend {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: .95rem;
}

.bw-fieldset {
	border: 0;
	padding: 0;
}

.bw-fieldset legend {
	padding: 0;
}

.bw-req {
	color: var(--bw-danger);
}

.bw-form input[type='text'],
.bw-form input[type='tel'],
.bw-form input[type='date'],
.bw-form input[type='email'],
.bw-form textarea,
.bw-form select {
	width: 100%;
	padding: 12px 14px;
	min-height: 48px;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
	background: var(--bw-bg);
	color: var(--bw-text);
	font: inherit;
	/* 16px minimum stops iOS Safari zooming the whole page on focus — 60.6%
	   of respondents open the site on a phone. */
	font-size: 16px;
}

.bw-form textarea {
	resize: vertical;
	min-height: 130px;
}

.bw-form input:focus,
.bw-form textarea:focus,
.bw-form select:focus {
	border-color: var(--bw-navy);
}

.bw-field-row {
	display: grid;
	gap: 0 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.bw-field-row {
		grid-template-columns: 1fr 1fr;
	}
}

.bw-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bw-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	min-height: 46px;
	border: 1px solid var(--bw-line);
	border-radius: 999px;
	background: var(--bw-bg);
	cursor: pointer;
	font-size: .95rem;
	font-weight: 400;
}

.bw-radio:hover {
	border-color: var(--bw-navy);
}

.bw-radio input {
	margin: 0;
	accent-color: #1d3c6e;
}

.bw-radio:has(input:checked) {
	border-color: var(--bw-navy);
	background: var(--bw-navy-soft);
	font-weight: 700;
}

.bw-form__consent {
	margin: 22px 0 20px;
	font-size: .92rem;
	line-height: 1.5;
}

.bw-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.bw-form__consent input {
	margin-top: 4px;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: #1d3c6e;
}

/* Krok 9.2 / 9.11 — "Wyślij wiadomość" and "Wyślij zgłoszenie" sit in the
   middle of their form, not against its left edge. */
.bw-form__submit {
	margin: 0;
	text-align: center;
}

.bw-form__submit .bw-btn {
	width: 100%;
}

@media (min-width: 560px) {
	.bw-form__submit .bw-btn {
		width: auto;
		min-width: 220px;
	}
}

.bw-notice ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* The honeypot. Off-screen rather than display:none — some bots skip fields
   that are display:none, but almost all of them fill this one in. */
.bw-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   15b. Zapisy — terminy i sposoby zapisów, and the two tiles above the form
   ========================================================================= */

/* The two tiles reuse Kontakt's component (.bw-tiles / .bw-tile) instead of
   growing a second card of their own: one set of rules, and the two pages go
   on looking like the same website. Everything below is only what the tile
   could not already do — a list, a second paragraph and a button. Nothing
   here moves, and every colour is a token. */

/* As wide as every other section on the page (Krok 9.5). */
.bw-signup-card {
	max-width: var(--bw-section);
	margin: 0 auto;
}

.bw-signup-card > p:first-child {
	margin-top: 0;
}

.bw-signup-card > p:last-child {
	margin-bottom: 0;
}

.bw-ways {
	margin: 12px 0 0;
	padding-left: 1.3em;
	line-height: 1.6;
}

.bw-ways li {
	margin-top: 6px;
}

/* The holiday rule is the exception to the four lines above it, so it is set
   off by a line rather than reading as a fifth way of signing up. */
.bw-signup-note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bw-line);
	color: var(--bw-muted);
}

/* On Kontakt every tile holds a single line, so .bw-tile p is margin-free.
   These two hold several lines and a button under them. */
.bw-tile p + p {
	margin-top: .6em;
}

.bw-tile .bw-tile__cta {
	margin-top: 14px;
}

/* Krok 9.9 — on Zapisy the test and the group discount sit one under the
   other at the full section width, not side by side, and their buttons are
   centred. The tile's text column takes the whole remaining width so
   "centred" means the middle of the tile, not of a shrink-wrapped column. */
.bw-tiles.bw-tiles--stack {
	grid-template-columns: 1fr;
	/* Krok 11.3 — since 11.9/11.10 each box reads as a section of its own, so
	   they are spaced like every other pair of sections. */
	gap: var(--bw-stack);
}

.bw-tiles--stack .bw-tile > div {
	flex: 1 1 auto;
	min-width: 0;
}

.bw-tiles--stack .bw-tile__cta {
	text-align: center;
}

/* Krok 11.9 and 11.10 — the placement test and the group discount: "zwiększ
   wielkość czcionki w taki sposób, aby faktycznie przyciągała uwagę": a
   larger title and body in the main text colour, each of the client's lines
   on a line of its own. */
.bw-tile.bw-tile--feature {
	padding: 30px 34px;
	text-align: center;
}

/* Centred, the decorative icon would only push the client's lines into a
   narrower column and break them where he did not. */
.bw-tile.bw-tile--feature .bw-tile__icon {
	display: none;
}

.bw-tile.bw-tile--feature .bw-tile__title {
	font-size: 1.55rem;
	margin-bottom: .55em;
}

.bw-tile.bw-tile--feature p {
	font-size: 1.07rem;
	line-height: 1.6;
	color: var(--bw-text);
}

.bw-tile.bw-tile--feature p + p {
	margin-top: .35em;
}

.bw-tile.bw-tile--feature .bw-tile__cta {
	margin-top: 22px;
}

@media (max-width: 619px) {
	.bw-tile.bw-tile--feature {
		padding: 24px 20px;
	}

	.bw-tile.bw-tile--feature .bw-tile__title {
		font-size: 1.3rem;
	}

	.bw-tile.bw-tile--feature p {
		font-size: 1.04rem;
	}
}

/* =========================================================================
   16. Test poziomujący — the disclosure inside the Zapisy form
   ========================================================================= */

/* A native <details>, so it opens with no JavaScript and nothing animates —
   the survey's loudest complaint was about pages where things move. Closed by
   default: the test is optional and must never read as a step you have to get
   through before you can send the form. */
.bw-test {
	margin: 22px 0;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	background: var(--bw-surface-2);
}

.bw-test[open] {
	background: var(--bw-surface);
	box-shadow: var(--bw-shadow-sm);
}

/* The whole summary row is the hit area, and it is tall enough for a thumb.
   The default triangle goes; the chevron below replaces it, so it points the
   same way in every browser. */
.bw-test__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	border-radius: var(--bw-radius);
}

.bw-test__summary::-webkit-details-marker {
	display: none;
}

.bw-test__summary:hover,
.bw-test__summary:focus-visible {
	background: var(--bw-navy-soft);
}

.bw-test__icon {
	color: var(--bw-navy);
	flex: none;
}

.bw-test__summary-text {
	flex: 1 1 auto;
	min-width: 0;
}

.bw-test__summary-title {
	display: block;
	font-weight: 700;
	color: var(--bw-navy);
}

.bw-test__summary-hint {
	display: block;
	margin-top: 3px;
	font-size: .88rem;
	color: var(--bw-muted);
	line-height: 1.45;
}

/* A CSS-only chevron: one rotated square border, flipped when the disclosure
   is open. No icon font, no extra SVG, and it costs nothing when JS is off. */
.bw-test__summary::after {
	content: '';
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid var(--bw-navy);
	border-bottom: 2px solid var(--bw-navy);
	transform: rotate(45deg) translate(-2px, -2px);
}

.bw-test[open] > .bw-test__summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.bw-test__body {
	padding: 4px 18px 18px;
	border-top: 1px solid var(--bw-line);
}

.bw-test__title {
	margin: 16px 0 0;
	font-size: 1.16rem;
}

.bw-test__lead {
	margin: 10px 0 0;
	line-height: 1.6;
}

.bw-test__body .bw-meta {
	margin: 10px 0 0;
}

/* Written by site.js and hidden until it is; the test needs no counter to
   work, so nobody with scripts off sees an empty box. */
.bw-test__count {
	margin: 14px 0 0;
	padding: 8px 12px;
	border-radius: var(--bw-radius-sm);
	background: var(--bw-navy-soft);
	color: var(--bw-navy);
	font-size: .9rem;
	font-weight: 700;
}

.bw-test__list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.bw-test__item {
	margin: 0;
}

.bw-test__question {
	margin: 0;
	padding: 14px;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
	background: var(--bw-bg);
}

/* Krok 9.12 — "Pytania wyjeżdżają poza ramki". A <legend> is drawn ON the
   fieldset's top border by default, so every question sat across its own
   frame instead of inside it. Floating it is the one portable way to take a
   legend out of that special rendering: it becomes an ordinary full-width
   line inside the box, and the options clear it. */
.bw-test__legend {
	float: left;
	width: 100%;
	padding: 0;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.bw-test__n {
	color: var(--bw-muted);
	font-weight: 700;
	margin-right: 4px;
}

/* One option per line on a phone — four English phrases side by side wrap
   into an unreadable hedge at 360px. Two columns from the same breakpoint the
   rest of the form uses. */
.bw-test__options {
	clear: both;
	display: grid;
	gap: 8px;
	padding-top: 12px;
}

/* A fieldset defaults to min-width: min-content, which lets one long answer
   push the whole box wider than the form on a phone. */
.bw-test__question {
	min-width: 0;
}

.bw-test__option {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 560px) {
	.bw-test__options {
		grid-template-columns: 1fr 1fr;
	}
}

.bw-test__option {
	justify-content: flex-start;
	border-radius: var(--bw-radius-sm);
	background: var(--bw-surface);
	font-size: .93rem;
}

.bw-test__letter {
	color: var(--bw-muted);
	font-weight: 700;
	margin-right: 2px;
}

.bw-test__option:has(input:checked) .bw-test__letter {
	color: var(--bw-navy);
}

.bw-test__actions {
	margin: 16px 0 0;
}

.bw-test__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--bw-line);
	color: var(--bw-muted);
	font-size: .9rem;
	line-height: 1.5;
}

/* =========================================================================
   17. Dokumenty
   ========================================================================= */

.bw-docs {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--bw-section);
	display: grid;
	gap: 14px;
}

.bw-doc {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	align-items: center;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 18px;
}

.bw-doc__icon {
	color: var(--bw-navy);
}

.bw-doc__title {
	margin: 0;
	font-size: 1.08rem;
}

.bw-doc .bw-meta {
	margin: 2px 0 0;
}

.bw-doc__actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (min-width: 620px) {
	.bw-doc {
		grid-template-columns: auto 1fr auto;
	}

	.bw-doc__actions {
		grid-column: auto;
	}
}

.bw-doc__actions .bw-icon svg {
	width: 17px;
	height: 17px;
}

/* =========================================================================
   18. Kontakt
   ========================================================================= */

/* The vertical rhythm of this page is the site-wide .bw-stack (section 3). */

.bw-hours {
	text-align: center;
	margin: 0 auto;
	max-width: 60ch;
	color: var(--bw-muted);
	font-size: .98rem;
	line-height: 1.5;
}

.bw-hours span {
	display: block;
}

.bw-tiles {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	max-width: var(--bw-section);
	margin: 0 auto;
}

@media (min-width: 680px) {
	.bw-tiles {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Krok 8.6.3 — the icon is centred against the whole tile, not pinned to the
 * top of it ("dopilnuj, żeby były po środku, a nie u góry"). `center` does the
 * work for every tile whatever its height: one line of text (Sekretariat,
 * E-mail), two (Adres) or three (Dane Firmy) — the icon always sits on the
 * tile's middle. The 4px nudge that used to line the icon up with the first
 * line of the heading went with it; it would now push the icon off centre.
 */
.bw-tile {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 20px 22px;
}

.bw-tile__icon {
	color: var(--bw-navy);
	flex: 0 0 auto;
}

.bw-tile__title {
	margin: 0 0 .35em;
	font-size: 1.05rem;
}

.bw-tile p {
	margin: 0;
	font-size: .93rem;
	color: var(--bw-muted);
	line-height: 1.55;
}

.bw-tile a {
	color: var(--bw-link);
}

.bw-map {
	max-width: var(--bw-section);
	margin: 0 auto;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	overflow: hidden;
	box-shadow: var(--bw-shadow-sm);
	line-height: 0;
}

.bw-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

.bw-follow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	justify-content: center;
}

.bw-follow__list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--bw-text);
	font-weight: 500;
	padding: 8px 10px;
	border-radius: var(--bw-radius-sm);
}

.bw-follow__list a:hover {
	background: var(--bw-surface-2);
	color: var(--bw-link);
}

/* Krok 9.3 — the icons in their networks' own colours, as e-korepetycje's
   already was; the label next to each stays in the text colour. */
.bw-follow__list a[data-bw-target="facebook"] .bw-icon {
	color: var(--bw-brand-facebook);
}

.bw-follow__list a[data-bw-target="instagram"] .bw-icon {
	color: var(--bw-brand-instagram);
}

/* =========================================================================
   19. Oferta — the six category cards, and the detail page behind them

   The client specified this layout himself and it is followed literally:
   six categories, "2 rzędy po 3", and inside each card picture → title →
   description → button, in that order. "Spraw proszę, aby tekst był
   wyjustowany, a przyciski na dole były wyśrodkowane" — hence the justified
   description and the button centred and pinned to the bottom edge, so all
   six buttons line up however unevenly the descriptions run.

   Mobile-first: one column on a phone, two from 620px, three from 960px,
   where the six cards finally read as the two rows of three he drew.
   ========================================================================= */

/* `.bw-entry` caps a page at a 68-character reading measure, which is right
   for prose and far too narrow for three cards side by side. The grid page
   opts out and lets `.bw-wrap` (1140px) do the containing instead. The detail
   page keeps the measure: it is prose. */
.bw-oferta {
	max-width: none;
}

.bw-offers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	margin: 32px 0 0;
}

@media (min-width: 620px) {
	.bw-offers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.bw-offers {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* A column, so that `margin-top: auto` on the button can push it to the floor
   of the card. Grid stretches the cards to a common height by itself, which is
   what makes the row of buttons line up. */
.bw-offer {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 18px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
}

.bw-offer__media {
	margin: 0 0 16px;
}

/* The picture is a placeholder today and will be a photograph tomorrow, so the
   frame is fixed and the image is cropped to fill it: a 3:2 box keeps the six
   cards identical whatever shape of file arrives. The tint underneath shows
   while a lazy-loaded photo is still on its way, and the hairline keeps a pale
   picture from floating on the dark card in dark mode. */
.bw-offer__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	background: var(--bw-navy-soft);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
}

.bw-offer__title {
	margin: 0 0 .7em;
	color: var(--bw-navy);
	font-size: 1.02rem;
	letter-spacing: .02em;
	line-height: 1.3;
	text-align: center;
}

/* Justified, as asked. `hyphens` is what keeps justification from tearing
   rivers of white space through a narrow column; the page declares its
   language, so the browser hyphenates by Polish or English rules. */
.bw-offer__desc {
	margin: 0 0 20px;
	color: var(--bw-muted);
	font-size: .95rem;
	line-height: 1.6;
	text-align: justify;
	hyphens: auto;
}

/* `auto` on top is the pin: whatever is left over in a short card goes above
   the button, never below it. */
.bw-offer__action {
	margin: auto 0 0;
	text-align: center;
}

/* OSOBY DOROSŁE has no long description yet, so it has no button — this line
   stands in its place rather than a link that leads nowhere. */
.bw-offer__action--empty {
	color: var(--bw-muted);
	font-size: .88rem;
	font-style: italic;
}

/* --- a category page: its courses, in full (Krok 9.14, 10.4) ---------- */

/* "Instead, lets make them non-clickable, and list each profil one after the
   other. Make them bigger [...] and make the description text non-hidden".
   One course per row at the shared section width, the whole text shown and
   justified like every Oferta description. On a phone the picture sits above
   the text; from 760px it stands beside it, at the top. */
.bw-courses {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: var(--bw-section);
	margin: 32px auto 0;
}

.bw-course {
	padding: 22px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	/* The header is sticky; an address with #profil-N must not land under it. */
	scroll-margin-top: 84px;
}

.bw-course__media {
	margin: 0 0 18px;
}

.bw-course__title {
	margin: 0 0 .6em;
	color: var(--bw-navy);
	font-size: 1.3rem;
	letter-spacing: .02em;
	line-height: 1.3;
}

.bw-course__text > :first-child {
	margin-top: 0;
}

.bw-course__text > :last-child {
	margin-bottom: 0;
}

.bw-course__text p {
	text-align: justify;
	hyphens: auto;
	line-height: 1.65;
}

/* Krok 11.6 — every profile ends with its own "Zapisz się". */
.bw-course__cta {
	margin: 18px 0 0;
	text-align: right;
}

@media (min-width: 760px) {
	.bw-course {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 28px;
		align-items: start;
		padding: 28px;
	}

	.bw-course__media {
		margin: 0;
	}
}
.bw-offer-category .bw-offer-page__lead {
	text-align: center;
}

.bw-offer-category__intro {
	max-width: var(--bw-measure);
	margin: 0 auto;
}

.bw-offer-category__back {
	margin-top: 34px;
}

/* --- the detail page ------------------------------------------------- */

.bw-offer-index {
	max-width: var(--bw-measure);
	margin: 0 auto 36px;
	padding: 16px 20px;
	background: var(--bw-surface-2);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
}

.bw-offer-index__title {
	margin: 0 0 .6em;
	color: var(--bw-muted);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bw-offer-index ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.bw-offer-index a {
	font-weight: 700;
}

/* The long course descriptions are justified too, so the detail page reads as
   a continuation of the cards. `.bw-center` is excluded: the row of buttons at
   the foot of the page is centred, not justified. */
.bw-offer-details > p:not(.bw-center) {
	text-align: justify;
	hyphens: auto;
}

/* The header is sticky, so an anchor landing at the very top of the viewport
   would land underneath it. */
.bw-offer-details h2[id] {
	scroll-margin-top: 84px;
	color: var(--bw-navy);
}

/* --- the category's description at the top ------------------------- */

/* The short description from the card, repeated at the top of the page: the
   visitor clicked it, so it should still be there when the page opens. Set
   apart from the long text by weight, not by a box. */
.bw-offer-page__lead {
	max-width: var(--bw-measure);
	margin: 0 auto 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--bw-line);
	color: var(--bw-muted);
	font-size: 1.02rem;
}

/* OSOBY DOROSŁE until the client sends its description. */
.bw-offer-page__pending {
	max-width: var(--bw-measure);
	margin: 0 auto;
	color: var(--bw-muted);
	font-style: italic;
}

/* =========================================================================
   19b. Umowa — the contract signed online (Krok 10.2)

   The contract on a sheet of "paper", the form under it, both at the shared
   section width. The signature box is white in both themes — it is the paper
   the student signs on, and what is sent is exactly what they see.
   ========================================================================= */

.bw-contract__lead {
	max-width: 60ch;
	margin: .6em auto 0;
	color: var(--bw-muted);
}


/* Krok 11.17 — adult or minor: only the parts for the chosen kind show
   (data-bw-signer on the form, set by the dropdown; assets/js/signature.js). */
.bw-form[data-bw-signer='adult'] [data-bw-for='minor'],
.bw-form[data-bw-signer='minor'] [data-bw-for='adult'] {
	display: none;
}

.bw-contract__minor {
	margin: 0 0 8px;
}

/* ZAPISY — the way to the contract, the last section of the page. */
.bw-signup-contract {
	text-align: center;
}

.bw-signup-contract p {
	margin: 0 0 16px;
	color: var(--bw-muted);
}
.bw-contract {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: var(--bw-section);
	margin: 0 auto;
}

.bw-contract__doc {
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow-sm);
	padding: 24px clamp(18px, 4vw, 40px);
}

.bw-contract__doc h2 {
	margin: 0 0 .8em;
	text-align: center;
	font-size: 1.25rem;
	color: var(--bw-navy);
}

.bw-contract__doc h3 {
	margin: 1.2em 0 .3em;
	font-size: 1rem;
}

.bw-contract__doc p {
	margin: 0;
	text-align: justify;
	hyphens: auto;
	line-height: 1.6;
}

/* A phone column is too narrow to justify a legal text without gaping holes. */
@media (max-width: 559px) {
	.bw-contract__doc p {
		text-align: left;
	}
}

.bw-contract__doc .bw-contract__note {
	margin-top: 1.4em;
	color: var(--bw-muted);
	font-size: .9rem;
	font-style: italic;
}

.bw-form__title {
	margin: 0 0 18px;
	font-size: 1.15rem;
}

.bw-sign__label {
	margin: 0 0 6px;
	font-weight: 600;
}

.bw-sign__pad {
	display: block;
	width: 100%;
	height: 200px;
	background: #fff;
	border: 1px dashed var(--bw-line);
	border-radius: var(--bw-radius-sm);
	/* The finger draws; it must not scroll the page at the same time. */
	touch-action: none;
	cursor: crosshair;
}

.bw-sign.is-invalid .bw-sign__pad {
	border: 2px solid var(--bw-danger);
}

.bw-sign.is-invalid #bw-u-sign-help {
	color: var(--bw-danger);
}

.bw-sign__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
}

/* =========================================================================
   19c. Czat — the chat box in the corner of every page (Krok 10.1)

   A round button bottom-right; it opens a small panel above itself. On a
   phone the panel takes the whole width at the bottom of the screen. Colours
   are the site's tokens, so dark mode comes for free. Above the sticky
   header (z-index 100); out of the way while the phone menu is open.
   ========================================================================= */

.bw-chat {
	position: fixed;
	right: 18px;
	/* Krok 11.20 — lifted above the footer bar while it is on screen
	   (--bw-footer-peek, set by site.js), so it never covers Polityka
	   Prywatności. */
	bottom: calc(18px + var(--bw-footer-peek, 0px));
	z-index: 150;
	display: flex;
	flex-direction: column-reverse; /* the button below, its panel above it */
	align-items: flex-end;
	gap: 12px;
	/* The box is as wide as the screen on a phone; only its button and panel
	   take clicks, never the empty strip beside the button. */
	pointer-events: none;
}

.bw-chat > * {
	pointer-events: auto;
}

.bw-chat[hidden] {
	display: none;
}

body:has(.bw-nav.is-open) .bw-chat {
	display: none;
}

.bw-chat__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px 12px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--bw-navy);
	color: var(--bw-bg);
	font: inherit;
	font-weight: 700;
	box-shadow: var(--bw-shadow);
	cursor: pointer;
}

.bw-chat__toggle:hover {
	background: var(--bw-navy-dark);
}

.bw-chat__dot {
	position: absolute;
	top: 4px;
	right: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bw-accent);
	border: 2px solid var(--bw-bg);
}

.bw-chat__dot[hidden] {
	display: none;
}

.bw-chat__panel {
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100vw - 36px));
	/* Krok 11.21 — tall from the first moment, not a 3 cm strip that grows
	   with every message: the history fills the height and scrolls. */
	height: min(620px, calc(100vh - 110px - var(--bw-footer-peek, 0px)));
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius);
	box-shadow: var(--bw-shadow);
	overflow: hidden;
}

.bw-chat__panel[hidden] {
	display: none;
}

.bw-chat__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--bw-navy-soft);
	border-bottom: 1px solid var(--bw-line);
}


/* Krok 11.24 — the school's avatar left of the title: the brand hero in a
   circle, and a dot at its lower right — yellow by default, green while
   someone from the school is in the panel (GET /chat/status, chat.js). */
.bw-chat__avatar {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
}

.bw-chat__avatar img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--bw-surface);
}

.bw-chat__presence {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bw-p-yellow, #ffc857);
	border: 2px solid var(--bw-surface);
}

.bw-chat__presence.is-online {
	background: var(--bw-s-green, #20bf55);
}

.bw-chat__heading {
	flex: 1 1 auto;
	min-width: 0;
}
.bw-chat__title {
	margin: 0;
	font-size: 1rem;
	color: var(--bw-navy);
}

.bw-chat__sub {
	margin: 2px 0 0;
	font-size: .82rem;
	color: var(--bw-muted);
}

.bw-chat__close {
	flex: none;
	display: inline-flex;
	padding: 6px;
	border: 0;
	border-radius: var(--bw-radius-sm);
	background: transparent;
	color: var(--bw-text);
	cursor: pointer;
}

.bw-chat__close:hover {
	background: var(--bw-surface-2);
}

.bw-chat__log {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 12px 14px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bw-chat__msg {
	max-width: 85%;
}

.bw-chat__msg p {
	margin: 2px 0 0;
	padding: 8px 12px;
	border-radius: 14px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: .94rem;
	line-height: 1.45;
}

.bw-chat__msg--visitor {
	align-self: flex-end;
	text-align: right;
}

.bw-chat__msg--visitor p {
	background: var(--bw-navy);
	color: var(--bw-bg);
	border-bottom-right-radius: 4px;
	text-align: left;
}

.bw-chat__msg--school p {
	background: var(--bw-surface-2);
	color: var(--bw-text);
	border-bottom-left-radius: 4px;
}

.bw-chat__who {
	font-size: .72rem;
	color: var(--bw-muted);
}

.bw-chat__start,
.bw-chat__compose {
	padding: 12px 14px;
	border-top: 1px solid var(--bw-line);
}

.bw-chat__start {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bw-chat__start[hidden],
.bw-chat__compose[hidden],
.bw-chat__error[hidden] {
	display: none;
}

.bw-chat__hello {
	margin: 0 0 2px;
	font-weight: 600;
}

.bw-chat__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 12px;
}

.bw-chat__foot .bw-btn {
	flex: none;
}

.bw-chat__foot .bw-btn[hidden] {
	display: none;
}

.bw-chat input[type='text'],
.bw-chat textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
	background: var(--bw-bg);
	color: var(--bw-text);
	font: inherit;
	/* 16px: below that iOS zooms the page on focus. */
	font-size: 16px;
	resize: none;
}

.bw-chat input:focus,
.bw-chat textarea:focus {
	border-color: var(--bw-navy);
}

.bw-chat__compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}


/* Krok 11.25 — the paperclip left of the message field, and a file in the
   conversation: a thumbnail for a picture, a labelled button for the rest. */
.bw-chat__attach {
	flex: none;
	display: inline-flex;
	padding: 10px;
	border-radius: 50%;
	color: var(--bw-navy);
	cursor: pointer;
}

.bw-chat__attach:hover,
.bw-chat__attach:focus-within {
	background: var(--bw-surface-2);
}

.bw-chat__file {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
	margin: 2px 0 0;
	padding: 8px 12px;
	border: 1px solid var(--bw-line);
	border-radius: 14px;
	background: var(--bw-surface-2);
	color: var(--bw-text);
	font: inherit;
	font-size: .86rem;
	text-align: left;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.bw-chat__file img {
	display: block;
	max-width: 100%;
	max-height: 200px;
	border-radius: 8px;
}

.bw-chat__msg--visitor .bw-chat__file {
	margin-left: auto;
}

/* Krok 11.27 — the emoji button and its little grid, which opens above the
   message field. */
.bw-chat__emoji {
	position: relative;
	flex: none;
}

.bw-chat__tool {
	display: inline-flex;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.bw-chat__tool:hover,
.bw-chat__tool[aria-expanded='true'] {
	background: var(--bw-surface-2);
}

.bw-chat__emoji-grid {
	position: absolute;
	bottom: calc(100% + 8px);
	left: -40px;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	width: 300px;
	max-width: calc(100vw - 48px);
	padding: 8px;
	background: var(--bw-surface);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-radius-sm);
	box-shadow: var(--bw-shadow);
}

.bw-chat__emoji-grid[hidden] {
	display: none;
}

.bw-chat__emoji-grid button {
	padding: 4px 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1.3;
	cursor: pointer;
}

.bw-chat__emoji-grid button:hover,
.bw-chat__emoji-grid button:focus-visible {
	background: var(--bw-surface-2);
}
.bw-chat__send {
	flex: none;
	display: inline-flex;
	padding: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--bw-accent);
	color: var(--bw-accent-ink);
	cursor: pointer;
}

.bw-chat__error {
	margin: 0;
	padding: 6px 14px;
	color: var(--bw-danger);
	font-size: .85rem;
}

.bw-chat__privacy {
	flex: 1 1 auto;
	margin: 0;
	color: var(--bw-muted);
	font-size: .74rem;
	line-height: 1.4;
}

@media (max-width: 559px) {
	.bw-chat {
		right: 12px;
		bottom: calc(12px + var(--bw-footer-peek, 0px));
		left: 12px;
	}

	.bw-chat__panel {
		width: 100%;
		height: calc(100vh - 96px - var(--bw-footer-peek, 0px));
	}

	/* A round button only, so it never hides the content behind a wide pill. */
	.bw-chat__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.bw-chat__toggle {
		padding: 14px;
	}
}

@media print {
	.bw-chat {
		display: none;
	}
}

/* =========================================================================
   20. Print
   ========================================================================= */

@media print {
	.bw-header,
	.bw-footer,
	.bw-hero__actions,
	.bw-map,
	/* The sign-up form, and with it the placement test inside it: neither is
	   any use on paper, and the printable copy of the test is the PDF in the
	   Media Library. */
	.bw-form {
		display: none;
	}
}