/* QueerFriends Accessibility Panel */

:root {
	--qf-a11y-accent: #6b46d8;
	--qf-a11y-accent-soft: #f2edff;
	--qf-a11y-border: #e1d9f1;
	--qf-a11y-text: #2d2638;
	--qf-a11y-muted: #766d82;
}

.qf-a11y-header-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0 !important;
	margin: 0 3px 0 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: #1f2433 !important;
	cursor: pointer;
	line-height: 1 !important;
	transition: background 160ms ease, transform 160ms ease;
}

.qf-a11y-header-button:hover {
	background: #f3effb !important;
	transform: translateY(-1px);
}

.qf-a11y-header-button:focus-visible {
	outline: 3px solid rgba(107, 70, 216, 0.28) !important;
	outline-offset: 2px;
}

.qf-a11y-header-button img {
	display: block !important;
	width: 25px !important;
	height: 25px !important;
	max-width: none !important;
	object-fit: contain;
	pointer-events: none;
}

.qf-a11y-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(30, 22, 44, 0.58);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.qf-a11y-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.qf-a11y-panel {
	position: relative;
	width: min(720px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 30px;
	border: 1px solid rgba(137, 108, 216, 0.20);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 30px 90px rgba(31, 20, 54, 0.28);
	color: var(--qf-a11y-text);
	font-family: "Poppins", Arial, sans-serif;
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 190ms ease, transform 190ms ease;
}

.qf-a11y-overlay.is-open .qf-a11y-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.qf-a11y-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.qf-a11y-eyebrow {
	display: inline-flex;
	margin-bottom: 9px;
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--qf-a11y-accent-soft);
	color: var(--qf-a11y-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.qf-a11y-header h2 {
	margin: 0 0 7px !important;
	color: #281f37 !important;
	font-family: "Poppins", Arial, sans-serif !important;
	font-size: clamp(25px, 4vw, 34px) !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: -.03em;
}

.qf-a11y-header p {
	margin: 0 !important;
	color: var(--qf-a11y-muted) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

.qf-a11y-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #f3effb !important;
	color: #594a6c !important;
	cursor: pointer;
	transition: transform 160ms ease, background 160ms ease;
}

.qf-a11y-close:hover {
	transform: rotate(5deg);
	background: #e8e0fa !important;
}

.qf-a11y-close svg {
	width: 19px;
	height: 19px;
}

.qf-a11y-text-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
	padding: 17px 18px;
	border: 1px solid var(--qf-a11y-border);
	border-radius: 18px;
	background: #fbf9ff;
}

.qf-a11y-text-size strong,
.qf-a11y-option-copy strong {
	display: block;
	color: #372c46;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.qf-a11y-text-size span,
.qf-a11y-option-copy small {
	display: block;
	margin-top: 3px;
	color: #80758d;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.45;
}

.qf-a11y-size-controls {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 4px;
	border-radius: 13px;
	background: #eee8fa;
}

.qf-a11y-size-controls button {
	min-width: 42px;
	height: 38px;
	padding: 0 10px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: #544363 !important;
	font-family: Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.qf-a11y-size-controls button.is-active {
	background: #fff !important;
	color: var(--qf-a11y-accent) !important;
	box-shadow: 0 4px 12px rgba(74, 48, 126, .10);
}


.qf-a11y-size-controls button:disabled {
	opacity: 0.38;
	cursor: not-allowed;
}

.qf-a11y-size-controls button:disabled:hover {
	background: transparent !important;
	color: #544363 !important;
	box-shadow: none !important;
}

.qf-a11y-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.qf-a11y-option {
	display: grid !important;
	grid-template-columns: 44px minmax(0, 1fr) 38px;
	align-items: center;
	gap: 12px;
	min-height: 86px;
	padding: 14px !important;
	border: 1px solid var(--qf-a11y-border) !important;
	border-radius: 18px !important;
	background: #fff !important;
	color: var(--qf-a11y-text) !important;
	text-align: left;
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.qf-a11y-option:hover {
	transform: translateY(-2px);
	border-color: #baa8e7 !important;
	background: #fcfbff !important;
	box-shadow: 0 10px 24px rgba(70, 45, 117, .08);
}

.qf-a11y-option[aria-pressed="true"] {
	border-color: #9d82e3 !important;
	background: #faf8ff !important;
	box-shadow: 0 0 0 3px rgba(107, 70, 216, .08);
}

.qf-a11y-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--qf-a11y-accent-soft);
	color: var(--qf-a11y-accent);
}

.qf-a11y-option-icon svg {
	width: 21px;
	height: 21px;
}

.qf-a11y-font-symbol {
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
}

.qf-a11y-switch {
	position: relative;
	display: inline-flex;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: #d8d0e4;
	transition: background 160ms ease;
}

.qf-a11y-switch span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(31, 21, 48, .22);
	transition: transform 160ms ease;
}

.qf-a11y-option[aria-pressed="true"] .qf-a11y-switch {
	background: var(--qf-a11y-accent);
}

.qf-a11y-option[aria-pressed="true"] .qf-a11y-switch span {
	transform: translateX(16px);
}

.qf-a11y-footer {
	margin-top: 18px;
	text-align: center;
}

.qf-a11y-reset {
	min-height: 44px;
	padding: 10px 18px !important;
	border: 1px solid #d9cfee !important;
	border-radius: 999px !important;
	background: #f8f5ff !important;
	color: #5d3dc2 !important;
	font-family: "Poppins", Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

#qf-a11y-status {
	min-height: 18px;
	margin: 8px 0 0 !important;
	color: #6c4dc4 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
}

/* Applied accessibility settings */

/*
 * Text resizing is applied by JavaScript to each rendered text element.
 * This works with BuddyBoss and custom sections that use fixed pixel sizes.
 */

html.qf-a11y-dark-mode {
	background: #0f0d13 !important;
	color-scheme: dark;
}

/*
 * Universal dark rendering:
 * the complete BuddyBoss site surface is inverted as one visual layer.
 * This keeps hard-coded white custom cards and their dark text readable,
 * instead of turning only the text white while leaving cards unchanged.
 */
html.qf-a11y-dark-mode body {
	background: #0f0d13 !important;
}

html.qf-a11y-dark-mode body > #page,
html.qf-a11y-dark-mode body > .site {
	background: #ffffff !important;
	filter: invert(1) hue-rotate(180deg);
}

/*
 * Restore photographic and embedded media to their original colors.
 * The parent site inversion plus this second inversion cancel each other.
 */
html.qf-a11y-dark-mode body > #page img,
html.qf-a11y-dark-mode body > #page video,
html.qf-a11y-dark-mode body > #page iframe,
html.qf-a11y-dark-mode body > #page canvas,
html.qf-a11y-dark-mode body > #page object,
html.qf-a11y-dark-mode body > #page embed,
html.qf-a11y-dark-mode body > .site img,
html.qf-a11y-dark-mode body > .site video,
html.qf-a11y-dark-mode body > .site iframe,
html.qf-a11y-dark-mode body > .site canvas,
html.qf-a11y-dark-mode body > .site object,
html.qf-a11y-dark-mode body > .site embed {
	filter: invert(1) hue-rotate(180deg) !important;
}

/*
 * The accessibility icon is a black transparent SVG. Let the parent
 * inversion turn it white so it remains visible in the dark header.
 */
html.qf-a11y-dark-mode
body > #page
.qf-a11y-header-button img,
html.qf-a11y-dark-mode
body > .site
.qf-a11y-header-button img {
	filter: none !important;
}

/*
 * Keep the accessibility dialog itself in its intentional UI palette if
 * the active theme happens to render the footer inside the site wrapper.
 */
html.qf-a11y-dark-mode
body > #page
.qf-a11y-overlay,
html.qf-a11y-dark-mode
body > .site
.qf-a11y-overlay {
	filter: invert(1) hue-rotate(180deg) !important;
}

html.qf-a11y-high-contrast {
	filter: contrast(1.18);
}

html.qf-a11y-grayscale {
	filter: grayscale(1);
}

html.qf-a11y-high-contrast.qf-a11y-grayscale {
	filter: grayscale(1) contrast(1.18);
}

html.qf-a11y-underline-links a:not(.qf-a11y-header-button) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}

html.qf-a11y-readable-font body,
html.qf-a11y-readable-font button,
html.qf-a11y-readable-font input,
html.qf-a11y-readable-font textarea,
html.qf-a11y-readable-font select {
	font-family: Arial, Helvetica, sans-serif !important;
	letter-spacing: .01em;
}

html.qf-a11y-reduce-motion *,
html.qf-a11y-reduce-motion *::before,
html.qf-a11y-reduce-motion *::after {
	scroll-behavior: auto !important;
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
}

body.qf-a11y-modal-open {
	overflow: hidden !important;
}

@media (max-width: 680px) {
	.qf-a11y-overlay {
		align-items: flex-end;
		padding: 10px;
	}

	.qf-a11y-panel {
		width: 100%;
		max-height: calc(100vh - 20px);
		padding: 24px 17px 18px;
		border-radius: 25px 25px 16px 16px;
	}

	.qf-a11y-grid {
		grid-template-columns: 1fr;
	}

	.qf-a11y-text-size {
		align-items: flex-start;
		flex-direction: column;
	}

	.qf-a11y-size-controls {
		width: 100%;
	}

	.qf-a11y-size-controls button {
		flex: 1;
	}

	.qf-a11y-header-button {
		width: 38px;
		height: 38px;
	}

	.qf-a11y-header-button img {
		width: 23px !important;
		height: 23px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qf-a11y-overlay,
	.qf-a11y-panel,
	.qf-a11y-header-button,
	.qf-a11y-option {
		transition: none !important;
	}
}