/*
 * Accessibility layer (WCAG 2.2 AA), loaded AFTER base2.css.
 *
 * base2.css is minified and generated, so every fix lives here instead of being
 * edited into it. Deleting this file restores the previous look; nothing in
 * base2.css depends on it.
 */

/* ---- utilities ---------------------------------------------------------- */

/* Text for screen readers only (hidden headings, extra link context). */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* base2.css gives some blocks an explicit display, which would defeat the hidden attribute. */
[hidden] {
	display: none !important;
}

/* Spam-trap field of the contact form: off-screen, never focusable, never read. */
.formTrap {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- 2.4.1 Bypass Blocks: skip link ------------------------------------- */

.skipLink {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	background: #000;
	color: #fff !important;
	font-weight: 700;
	text-decoration: underline;
	transform: translateY(-200%);
}
.skipLink:focus {
	transform: none;
}

/* ---- 2.4.7 Focus Visible / 2.4.11 Focus Not Obscured -------------------- */

/*
 * base2.css sets `*{outline:0}`, which removed the focus indicator from the
 * whole site. A dark ring with a white halo stays visible on the white header
 * as well as on the black footer and on photo tiles.
 */
:focus-visible {
	outline: 3px solid #111 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff !important;
}
.footer :focus-visible {
	outline-color: #fff !important;
	box-shadow: 0 0 0 5px #000 !important;
}
/* <main> is only a skip-link target (tabindex=-1), not a control: no ring around the whole page. */
main:focus,
main:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

/* The menu is position:fixed (about 82px tall); keep focused elements out from under it. */
html {
	scroll-padding-top: 110px;
}
:target {
	scroll-margin-top: 110px;
}

/* ---- 1.4.3 Contrast: base2.css faded the whole page to 90% -------------- */

body {
	opacity: 1;
}

/* ---- 1.4.1 Use of Color: links inside running text ---------------------- */

main p a:not(.button):not([aria-hidden="true"]),
main li a:not(.button),
.wyswig a:not(.button),
.footer p a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
/* Tile and card descriptions are aria-hidden duplicates of the heading link, so they stay plain (excluded above). */

/* ---- 2.5.8 Target Size + 4.1.2: the menu buttons ------------------------ */

button.menuToggle,
button.menuClose {
	background: none;
	border: 0;
	padding: 0;
	min-width: 44px;
	min-height: 44px;
	line-height: 1;
	color: #111;
	font-size: inherit;
}
/* Closing the menu on small screens: the nav list stays reachable by keyboard only when open. */
.mainNav {
	display: contents;
}

/* ---- headings: real levels, same look ----------------------------------- */

/*
 * Headings that had to change level keep their old look. The `body` prefix lifts these selectors
 * above base2.css's `body.mid .big h2` / `body.small .big h2` responsive rules.
 */

/* Was `.big h1`: page-section titles ("Blog", "Przyjaciele") that are <h2> now. */
body .big h2.h1look {
	font-size: 300%;
	margin-bottom: 34px;
	position: relative;
	font-weight: 500;
	color: #333;
	line-height: 1.3;
}
body .big h2.h1look:after {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	width: 10%;
	height: 3px;
	margin-top: 12px;
	background-color: #A11C2A;
}
body .big .text-centered h2.h1look:after {
	left: 45%;
}
body.mid .big h2.h1look {
	font-size: 240%;
}
body.small .big h2.h1look {
	font-size: 200%;
	line-height: 1.1;
}

/* Was `.big h3`: the "other items" title on a price page, now the <h2> of that list. */
body .big h2.h3look {
	font-size: 220%;
	margin-bottom: 20px;
	font-weight: 500;
	color: #555;
	line-height: 1.3;
}
body.mid .big h2.h3look {
	font-size: 160%;
	margin-bottom: 15px;
}
body.small .big h2.h3look {
	font-size: 140%;
	margin-bottom: 10px;
	line-height: 1.1;
}

/* Was `.element h2`: blog card titles, now <h3> under the section heading. */
.element h3.cardTitle {
	font-size: 22px;
	line-height: 1.2;
}
body.mid .element h3.cardTitle,
body.small .element h3.cardTitle {
	font-size: 120%;
}
.element h3.cardTitle:after {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 10px;
	width: 12%;
	height: 3px;
	background-color: #ccc;
	transition: width .5s ease-out, left .5s ease-out;
}
.element:hover h3.cardTitle:after {
	left: 0;
	width: 52%;
}

/* Price lines were <h4>: a number is not a heading. */
.pricingElement p.price {
	font-size: 32px !important;
	color: #A11C2A !important;
	font-weight: 700;
}

/* Footer column titles keep their look but are announced as headings. */
.footerTitle {
	font-weight: 700;
	text-transform: uppercase;
}

/* ---- forms: 1.3.1, 1.3.5, 3.3.2, 2.5.8 ---------------------------------- */

/* Visible label text; base2.css already styles `fieldset label span`. */
form fieldset label .hint {
	display: block;
	font-size: 14px;
	color: #555;
	padding-bottom: 0;
}
/* 1.4.11 Non-text Contrast: the field outline (#bbb on white, 1.9:1) is what shows where to type; #767676 is 4.5:1. */
form fieldset label input,
form fieldset label textarea {
	border-color: #767676;
}
form fieldset label input:focus,
form fieldset label textarea:focus {
	border: 1px solid #111;
}
form .consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
form .consent input[type="checkbox"] {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: #A11C2A;
}
form .consent label {
	display: block;
	padding: 0;
	flex: 1 1 auto;
}
form .toggleFunction {
	background: none;
	border: 0;
	padding: 6px 0;
	min-height: 24px;
	font: inherit;
	font-size: 13px;
	color: #990000;
	text-decoration: underline;
	cursor: pointer;
}
form .toggleFunction[aria-expanded="true"] .icon:before {
	display: inline-block;
	transform: rotate(180deg);
}

/* Result of sending the form (4.1.3 Status Messages). */
.formStatus {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
}
.formStatus:empty {
	display: none;
}
.formStatus.isError,
.formStatus.isOk {
	padding: 14px 18px;
	border: 2px solid;
	border-radius: 4px;
	background: #fff;
}
.formStatus.isError {
	color: #7a0000;
	border-color: #7a0000;
}
.formStatus.isOk {
	color: #0a4d1c;
	border-color: #0a4d1c;
}

/* ---- opening hours list (was a run of <br>) ----------------------------- */

.hoursList {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- 2.3.3 / user preference: no decorative motion ---------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*:before,
	*:after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Page-theme colours the old <h1>/<h4> picked up from `.th-black h1` etc. */
body .th-black h2.h1look {
	color: #222;
}
body .th-white h2.h1look {
	color: #ddd;
}

/* "Godziny otwarcia" was an <h4> (18px bold); it is an <h3> now, under the station's <h2>. */
body .big h3.hoursTitle,
body.mid .big h3.hoursTitle,
body.small .big h3.hoursTitle {
	font-size: 18px;
	font-weight: 700;
	color: #555;
	margin-bottom: 0;
	line-height: 1.3;
}
.pricingElement p.price {
	margin-bottom: 0 !important;
}

/* ---- 1.4.3 Contrast: white text over the service photos on the home page ---- */

/*
 * The scrim started at 20% black, so text in the upper half of a tile sat on bright photo areas at
 * about 2:1 to 3.5:1. Starting at 50% brings the brightest 5% of pixels of every service photo to at
 * least 5.2:1 at the text positions (measured on the real images at 375, 700 and 427 px tile widths).
 */
.specialOfferElement .overlayGR {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.95) 100%);
}