/*
 * Panel ułatwień dostępu (makieta: _component-a11y.scss, 1:1).
 * Nad treścią i przyklejonym paskiem nagłówka (z-index 50), pod panelem menu
 * mobilnego; przy otwartym menu przycisk znika.
 */

.a11y {
	position: fixed;
	bottom: var(--space-9);
	left: var(--space-9);
	z-index: 50;
}

.no-js .a11y,
.has-nav-open .a11y {
	display: none;
}

/* Otwarty pasek zgody na cookies: przycisk stoi nad nim. */
.flexisnap-zgoda-otwarta .a11y {
	bottom: calc(var(--flexisnap-zgoda-wysokosc, 0px) + var(--space-9));
}

.a11y__toggle {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	border: 2px solid var(--c-surface);
	border-radius: var(--radius-circle);
	background: var(--c-primary);
	color: var(--c-surface);
	box-shadow: var(--shadow-panel);
	cursor: pointer;
	transition: background 0.15s;
}

.a11y__toggle:hover,
.a11y.is-open .a11y__toggle {
	background: var(--c-primary-hover);
}

.a11y__toggle-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.a11y__panel {
	position: absolute;
	bottom: 4.25rem;
	left: 0;
	width: min(20rem, 100vw - 2rem);
	max-height: calc(100dvh - 6rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-11);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-7);
	background: var(--c-surface);
	color: var(--c-text);
	box-shadow: var(--shadow-panel);
}

.a11y__panel[hidden] {
	display: none;
}

.a11y__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-7);
	margin-bottom: var(--space-9);
}

.a11y__title {
	margin: 0;
	color: var(--c-ink);
	font-size: var(--text-5);
	font-weight: 600;
}

.a11y__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-circle);
	background: var(--c-tint);
	color: var(--c-text-soft);
	cursor: pointer;
}

.a11y__close svg {
	width: 1.5rem;
	height: 1.5rem;
}

.a11y__close:hover {
	background: var(--c-tint-strong);
	color: var(--c-ink);
}

.a11y__label {
	margin: 0 0 var(--space-5);
	color: var(--c-text-muted);
	font-size: var(--text-2);
}

.a11y__sizes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	margin-bottom: var(--space-11);
}

.a11y__size,
.a11y__option {
	min-height: var(--target-min);
	border: 1px solid var(--c-border-sep);
	border-radius: var(--radius-5);
	background: var(--c-surface);
	color: var(--c-ink);
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.a11y__size {
	padding: 0;
	font-size: var(--text-5);
	font-weight: 600;
	line-height: 1;
}

.a11y__size--lg {
	font-size: var(--text-7);
}

.a11y__size--xl {
	font-size: var(--text-9);
}

.a11y__size:hover,
.a11y__option:hover {
	border-color: var(--c-primary);
}

.a11y__size[aria-pressed="true"] {
	border-color: var(--c-primary);
	background: var(--c-primary);
	color: var(--c-surface);
}

.a11y__options {
	display: grid;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a11y__option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-7);
	width: 100%;
	padding: var(--space-5) var(--space-7);
	font-size: var(--text-4);
	font-weight: 600;
	text-align: left;
}

.a11y__option[aria-pressed="true"] {
	border-color: var(--c-primary);
	background: var(--c-tint);
}

.a11y__option-icon {
	width: 1.375rem;
	height: 1.375rem;
	color: var(--c-primary);
}

.a11y__switch {
	position: relative;
	width: 2.5rem;
	height: 1.5rem;
	border: 2px solid var(--c-text-muted);
	border-radius: var(--radius-pill);
	background: var(--c-surface);
}

.a11y__switch::after {
	content: "";
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 1rem;
	height: 1rem;
	border-radius: var(--radius-circle);
	background: var(--c-text-muted);
	transition: transform 0.15s;
}

.a11y__option[aria-pressed="true"] .a11y__switch {
	border-color: var(--c-primary);
	background: var(--c-primary);
}

.a11y__option[aria-pressed="true"] .a11y__switch::after {
	background: var(--c-surface);
	transform: translateX(1rem);
}

.a11y__reset {
	display: inline-flex;
	align-items: center;
	min-height: var(--target-min);
	margin-top: var(--space-9);
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-primary-hover);
	font-family: inherit;
	font-size: var(--text-5);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.a11y__reset:hover {
	color: var(--c-primary-deep);
}

/* Kanwa: przycisk stoi w miejscu wstawienia, nie w rogu okna edytora. */
.editor-styles-wrapper .a11y {
	position: relative;
	inset: auto;
}