/* ---- Accessibility widget (floating button, bottom-right) ---- */
/* Self-contained: only reads the same --color-* variables as styles.css, */
/* so it stays on-brand automatically and reacts to high-contrast mode. */
/* Include this file + js/accessibility.js on any page to get the widget. */

#a11y-widget
{
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: 'Ubuntu', sans-serif;
	text-align: left;
}

#a11yToggleBtn
{
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background-color: var(--color-accent);
	color: var(--color-light);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}

#a11yToggleBtn:hover
{
	opacity: 0.85;
}

#a11yToggleBtn svg
{
	width: 30px;
	height: 30px;
	fill: currentColor;
}

#a11yPanel
{
	position: absolute;
	right: 0;
	bottom: 68px;
	width: 240px;
	background-color: var(--color-dark);
	color: var(--color-light);
	border-radius: 10px;
	padding: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
}

#a11yPanel[hidden]
{
	display: none;
}

.a11y-panel-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.a11y-panel-title
{
	font-size: 15px;
	font-weight: bold;
}

#a11yCloseBtn
{
	background: none;
	border: none;
	color: var(--color-light);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
}

#a11yCloseBtn:hover
{
	opacity: 0.75;
}

.a11y-section
{
	margin-bottom: 10px;
}

.a11y-section:last-child
{
	margin-bottom: 0;
}

.a11y-section-label
{
	display: block;
	font-size: 12px;
	opacity: 0.85;
	margin-bottom: 6px;
}

.a11y-btn-row
{
	display: flex;
	gap: 6px;
}

.a11y-btn-row button,
.a11y-toggle
{
	flex: 1;
	font-family: 'Ubuntu', sans-serif;
	font-size: 13px;
	border-radius: 20px;
	border: 1px solid var(--color-accent);
	background-color: var(--color-darkest);
	color: var(--color-light);
	padding: 6px 4px;
	cursor: pointer;
}

.a11y-toggle
{
	width: 100%;
	display: block;
	text-align: center;
}

.a11y-toggle:disabled
{
	opacity: 0.4;
	cursor: not-allowed;
}

.a11y-btn-row button:hover,
.a11y-toggle:not(:disabled):hover
{
	opacity: 0.8;
}

.a11y-toggle[aria-pressed="true"]
{
	background-color: var(--color-accent);
	font-weight: bold;
}

#a11y-widget button:focus-visible
{
	outline: 3px solid var(--color-light);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce)
{
	#a11yToggleBtn,
	#a11yCloseBtn,
	.a11y-btn-row button,
	.a11y-toggle
	{
		transition: none;
	}
}

/* ---- High contrast theme ---- */
/* Overriding the same custom properties the rest of styles.css already */
/* reads means every existing rule (buttons, panels, table) picks this up */
/* automatically -- no need to duplicate/override each selector. */
html.a11y-high-contrast
{
	--color-darkest: #000000;
	--color-dark: #000000;
	--color-accent: #ffd400;
	--color-accent-hover: #e6c000;
	--color-light: #ffffff;
}

html.a11y-high-contrast body
{
	background: #000000;
}

/* Only elements that keep a yellow (--color-accent) background in high
   contrast mode need black text -- .a11y-toggle/.a11y-btn-row buttons sit on
   --color-darkest (black in this mode), so forcing black text on them here
   would make it unreadable against their own background. */
html.a11y-high-contrast .buttons,
html.a11y-high-contrast #a11yToggleBtn,
html.a11y-high-contrast .a11y-toggle[aria-pressed="true"],
html.a11y-high-contrast #contactsTable th
{
	color: #000000;
}

html.a11y-high-contrast .a11y-toggle,
html.a11y-high-contrast .a11y-btn-row button
{
	color: #ffffff;
}

html.a11y-high-contrast input[type="text"],
html.a11y-high-contrast input[type="password"]
{
	border: 2px solid #ffd400;
}

html.a11y-high-contrast #loginResult,
html.a11y-high-contrast #registerResult,
html.a11y-high-contrast #addContactResult,
html.a11y-high-contrast #editContactResult,
html.a11y-high-contrast #searchResult
{
	color: #ff6b6b;
	font-weight: bold;
}

html.a11y-high-contrast .switchText a
{
	text-decoration: underline;
}

html.a11y-high-contrast *:focus-visible
{
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px;
}

/* ---- Utility ---- */
.visually-hidden
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}