<?php
/**
 * MenuX — Accessibility Settings Panel
 *
 * Admin UI for the Menux_Accessibility settings.
 * Renders inside the main admin page as a sidebar panel.
 *
 * @package GiuliomaxMenuBuilder
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * Renders the accessibility configuration panel.
 * Called from admin-page.php inside its main <form>.
 */
function menux_render_accessibility_panel() {
	$a = Menux_Accessibility::get_settings();
	?>
	<style>
	/* ── Master toggle banner ── */
	.mx-a11y-master{
		display:flex;align-items:center;justify-content:space-between;
		gap:16px;flex-wrap:wrap;
		background:linear-gradient(135deg,#f5f3ff,#ede9fe);
		border:2px solid #a78bfa;border-radius:12px;
		padding:18px 22px;margin-bottom:6px;
	}
	.mx-a11y-master-text h3{margin:0 0 4px;font-size:15px;font-weight:700;color:#3730a3;}
	.mx-a11y-master-text p{margin:0;font-size:12px;color:#4c1d95;line-height:1.5;}
	.mx-a11y-disabled-notice{
		background:#fafafa;border:1px solid #e5e7eb;border-radius:10px;
		padding:20px 24px;text-align:center;color:#9ca3af;font-size:13px;
		margin-bottom:6px;
	}
	/* ── Toggle switch component ── */
	.mx-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
	.mx-toggle input{position:absolute;opacity:0;width:0;height:0;}
	.mx-toggle-track{
		position:relative;width:44px;height:24px;
		background:#d1d5db;border-radius:12px;
		transition:background .2s;flex-shrink:0;
	}
	.mx-toggle input:checked + .mx-toggle-track{background:#4f46e5;}
	.mx-toggle input:focus-visible + .mx-toggle-track{
		outline:2px solid #4f46e5;outline-offset:3px;
	}
	.mx-toggle-thumb{
		position:absolute;top:3px;left:3px;
		width:18px;height:18px;
		background:#fff;border-radius:50%;
		box-shadow:0 1px 3px rgba(0,0,0,.25);
		transition:transform .2s;
	}
	.mx-toggle input:checked + .mx-toggle-track .mx-toggle-thumb{transform:translateX(20px);}
	.mx-toggle-label{font-size:13px;color:#374151;font-weight:500;}

	/* ── WCAG badge ── */
	.mx-wcag{
		display:inline-block;font-size:9px;font-weight:700;
		padding:1px 6px;border-radius:10px;
		text-transform:uppercase;letter-spacing:.5px;
		vertical-align:middle;margin-left:6px;
	}
	.mx-wcag-a  {background:#dbeafe;color:#1d4ed8;}
	.mx-wcag-aa {background:#d1fae5;color:#065f46;}
	.mx-wcag-aa-new{background:#ede9fe;color:#5b21b6;}

	/* ── Section divider ── */
	.mx-section{
		font-size:10px;font-weight:700;color:#9ca3af;
		text-transform:uppercase;letter-spacing:.8px;
		padding:16px 0 8px;border-top:1px solid #f3f4f6;
		margin-top:4px;
	}
	.mx-section:first-child{border-top:none;padding-top:0;}

	/* ── Form row ── */
	.mx-row{
		display:grid;grid-template-columns:1fr auto;
		gap:16px 24px;align-items:flex-start;
		padding:12px 0;border-bottom:1px solid #f9fafb;
	}
	.mx-row:last-child{border-bottom:none;padding-bottom:0;}
	.mx-row-label{font-size:13px;font-weight:600;color:#374151;}
	.mx-row-help{font-size:12px;color:#6b7280;margin:4px 0 0;line-height:1.5;}
	.mx-row-help code{
		background:#f3f4f6;padding:1px 5px;border-radius:4px;
		font-size:11px;color:#4b5563;
	}
	.mx-row-ctrl{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;min-width:180px;}

	/* ── Input / Select ── */
	.mx-input,.mx-select{
		width:100%;max-width:340px;padding:7px 11px;
		font-size:13px;border:1px solid #d1d5db;border-radius:8px;
		background:#fff;color:#111827;font-family:inherit;
		transition:border-color .15s,box-shadow .15s;
	}
	.mx-input:focus,.mx-select:focus{
		border-color:#4f46e5;outline:none;
		box-shadow:0 0 0 3px rgba(79,70,229,.15);
	}
	.mx-input-sm{max-width:120px;}
	.mx-color-wrap{display:flex;align-items:center;gap:8px;}
	.mx-color-wrap input[type=color]{
		width:42px;height:36px;padding:2px;border:1px solid #d1d5db;
		border-radius:6px;cursor:pointer;background:#fff;
	}
	.mx-color-hex{
		font-size:12px;font-family:monospace;
		border:1px solid #d1d5db;border-radius:6px;
		padding:4px 8px;width:86px;
	}
	/* ── Contrast notice ── */
	.mx-contrast-notice{
		font-size:11px;padding:6px 10px;border-radius:6px;margin-top:6px;
	}
	.mx-contrast-ok {background:#d1fae5;color:#065f46;}
	.mx-contrast-fail{background:#fee2e2;color:#991b1b;}
	</style>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   MASTER TOGGLE
	   ────────────────────────────────────────────────────────────────────── */
	$a11y_on = ( $a['enabled'] === '1' );
	?>

	<div class="mx-a11y-master">
		<div class="mx-a11y-master-text">
			<h3>♿ <?php esc_html_e( 'Accessibility Features (WCAG 2.2 AA)', 'giuliomax-menu-builder' ); ?></h3>
			<p><?php esc_html_e( 'When enabled, activates full keyboard navigation, ARIA roles, focus ring, skip link, live region, touch targets, reduced-motion support and Windows High Contrast Mode. Disabled by default — enable when you\'re ready to configure.', 'giuliomax-menu-builder' ); ?></p>
		</div>
		<label class="mx-toggle" style="flex-shrink:0;">
			<input type="checkbox" id="mx-a11y-master-toggle"
				name="menux_accessibility[enabled]" value="1"
				<?php checked( $a['enabled'], '1' ); ?>
				onchange="mxA11yMasterToggle(this.checked)">
			<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
			<span class="mx-toggle-label" id="mx-a11y-master-label" style="font-weight:700;font-size:14px;">
				<?php echo $a11y_on ? esc_html__( 'Enabled', 'giuliomax-menu-builder' ) : esc_html__( 'Disabled', 'giuliomax-menu-builder' ); ?>
			</span>
		</label>
	</div>

	<?php if ( ! $a11y_on ) : ?>
	<div class="mx-a11y-disabled-notice" id="mx-a11y-disabled-msg">
		♿ <?php echo wp_kses_post( __( 'Accessibility features are currently <strong>disabled</strong>.', 'giuliomax-menu-builder' ) ); ?><br>
		<?php esc_html_e( 'Enable the toggle above to configure WCAG 2.2 AA settings.', 'giuliomax-menu-builder' ); ?>
	</div>
	<?php endif; ?>

	<div id="mx-a11y-sections" <?php if ( ! $a11y_on ) echo 'style="display:none;"'; ?>>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   CARD 1 — Keyboard Navigation
	   WCAG: 2.1.1 (A), 2.1.2 (A), 2.4.1 (A), 2.4.3 (A)
	   ────────────────────────────────────────────────────────────────────── */
	?>
	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon bm-card-icon-blue">⌨️</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php esc_html_e( 'Keyboard Navigation', 'giuliomax-menu-builder' ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Full menu control without a mouse — arrows, Tab, Esc and Home/End', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Enable keyboard navigation', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 2.1.1 A</span>
					<p class="mx-row-help"><?php esc_html_e( 'Master switch. Enables Tab, arrow keys, Esc and Home/End throughout the menu.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[keyboard_nav]" value="1" <?php checked( $a['keyboard_nav'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
						<span class="mx-toggle-label"><?php echo $a['keyboard_nav'] === '1' ? esc_html__( 'Enabled', 'giuliomax-menu-builder' ) : esc_html__( 'Disabled', 'giuliomax-menu-builder' ); ?></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Tab key behaviour', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 2.4.3 A</span>
					<p class="mx-row-help">
						<?php echo wp_kses_post( __( '<strong>Top level only</strong> — Tab moves only between top-level items; use ↓ to enter submenus (ARIA APG recommended pattern).', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>All items</strong> — every link is reachable with Tab (simpler but more key presses).', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[tab_behavior]" class="mx-select">
						<option value="top_level_only" <?php selected( $a['tab_behavior'], 'top_level_only' ); ?>><?php esc_html_e( 'Top level only (recommended)', 'giuliomax-menu-builder' ); ?></option>
						<option value="all_items"       <?php selected( $a['tab_behavior'], 'all_items' );       ?>><?php esc_html_e( 'All items', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Arrow key navigation', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 2.1.1 A</span>
					<p class="mx-row-help"><?php esc_html_e( '← → move between top-level items. ↓ opens a submenu; ↑ opens and selects the last item.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[arrow_keys]" value="1" <?php checked( $a['arrow_keys'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Home / End keys', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php esc_html_e( 'Home jumps to the first item in the current level; End jumps to the last. Recommended by ARIA APG.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[home_end_keys]" value="1" <?php checked( $a['home_end_keys'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Esc closes submenus', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 2.1.2 A</span>
					<p class="mx-row-help"><?php esc_html_e( 'Pressing Esc collapses the open submenu/mega menu and returns focus to the trigger link. Prevents keyboard traps.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[escape_closes]" value="1" <?php checked( $a['escape_closes'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Skip navigation link', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 2.4.1 A</span>
					<p class="mx-row-help"><?php esc_html_e( 'Visible on first Tab press — lets keyboard users skip straight to the main content without traversing the menu.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[skip_nav_link]" value="1" <?php checked( $a['skip_nav_link'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Skip link text', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php esc_html_e( 'Label read by screen readers and displayed on focus.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="text" name="menux_accessibility[skip_nav_text]" value="<?php echo esc_attr( $a['skip_nav_text'] ); ?>" class="mx-input" placeholder="<?php esc_attr_e( 'Skip to content', 'giuliomax-menu-builder' ); ?>">
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Skip link target ID', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'ID of the main content element without <code>#</code>. Default: <code>main</code>. Add <code>id="main"</code> to your theme\'s content wrapper if not already present.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="text" name="menux_accessibility[skip_nav_target]" value="<?php echo esc_attr( $a['skip_nav_target'] ); ?>" class="mx-input mx-input-sm" placeholder="main">
				</div>
			</div>

		</div>
	</div>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   CARD 2 — Focus Appearance
	   WCAG: 2.4.11 (AA new), 2.4.12 (AA new), 1.4.11 (AA)
	   ────────────────────────────────────────────────────────────────────── */
	?>
	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon bm-card-icon-amber">🎯</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php esc_html_e( 'Focus Appearance', 'giuliomax-menu-builder' ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Visible focus indicators for keyboard users — WCAG 2.2 introduces stricter rules', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Focus indicator style', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa-new">WCAG 2.4.11 AA ★</span>
					<p class="mx-row-help">
						<?php echo wp_kses_post( __( '<strong>Ring</strong> — <code>outline</code> around the element (recommended).', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Fill</strong> — high-contrast background fill.', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Theme</strong> — let your active WordPress theme control it.', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[focus_style]" class="mx-select">
						<option value="ring"   <?php selected( $a['focus_style'], 'ring' );   ?>><?php esc_html_e( 'Ring / Outline (recommended)', 'giuliomax-menu-builder' ); ?></option>
						<option value="fill"   <?php selected( $a['focus_style'], 'fill' );   ?>><?php esc_html_e( 'Fill — background highlight', 'giuliomax-menu-builder' ); ?></option>
						<option value="theme"  <?php selected( $a['focus_style'], 'theme' );  ?>><?php esc_html_e( 'Inherit from theme', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Focus ring color', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 1.4.11 AA</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Must achieve ≥ 3:1 contrast ratio against adjacent colors. Default <code>#005FCC</code> gives ≈ 4.8:1 on white.', 'giuliomax-menu-builder' ) ); ?></p>
					<p id="mx-contrast-result" class="mx-contrast-notice" style="display:none;"></p>
				</div>
				<div class="mx-row-ctrl">
					<div class="mx-color-wrap">
						<input type="color" id="mx-focus-color-picker"
							   name="menux_accessibility[focus_color]"
							   value="<?php echo esc_attr( $a['focus_color'] ); ?>"
							   oninput="mxA11ySyncColor(this)">
						<input type="text" id="mx-focus-color-hex" class="mx-color-hex"
							   value="<?php echo esc_attr( $a['focus_color'] ); ?>"
							   placeholder="#005FCC"
							   oninput="mxA11ySyncHex(this)"
							   maxlength="7">
					</div>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Ring thickness', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa-new">WCAG 2.4.11 AA ★</span>
					<p class="mx-row-help"><?php esc_html_e( 'Minimum 2 px recommended. WCAG 2.2 requires the focus area perimeter ≥ 2px × component perimeter. 3 px is safe for all font sizes.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="number" name="menux_accessibility[focus_width]"
						   value="<?php echo esc_attr( $a['focus_width'] ); ?>"
						   min="2" max="8" step="1" class="mx-input mx-input-sm">
					<span style="font-size:12px;color:#6b7280;padding-top:8px;">px</span>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Ring offset', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php esc_html_e( 'Distance between the element edge and the ring. A small offset avoids the ring blending into the element background.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="number" name="menux_accessibility[focus_offset]"
						   value="<?php echo esc_attr( $a['focus_offset'] ); ?>"
						   min="0" max="8" step="1" class="mx-input mx-input-sm">
					<span style="font-size:12px;color:#6b7280;padding-top:8px;">px</span>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Focus not obscured by sticky header', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa-new">WCAG 2.4.12 AA ★</span>
					<p class="mx-row-help"><?php esc_html_e( 'When the sticky menu is active, automatically scrolls the page so the focused element is never hidden behind the navigation bar.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[focus_not_obscured]" value="1" <?php checked( $a['focus_not_obscured'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Trap focus in mobile overlay', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 2.1.2 A</span>
					<p class="mx-row-help"><?php esc_html_e( 'When a fullscreen or drawer mobile menu is open, Tab/Shift+Tab cycle only within the menu panel. Esc always closes it. Required for modal-like overlays.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[focus_trap_mobile]" value="1" <?php checked( $a['focus_trap_mobile'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

		</div>
	</div>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   CARD 3 — ARIA & Screen Readers
	   WCAG: 4.1.2 (A), 1.1.1 (A), 4.1.3 (AA)
	   ────────────────────────────────────────────────────────────────────── */
	?>
	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon bm-card-icon-purple">📢</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php echo wp_kses_post( __( 'ARIA &amp; Screen Readers', 'giuliomax-menu-builder' ) ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Semantic labels, roles and live announcements for assistive technologies', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php echo wp_kses_post( __( 'Navigation <code>aria-label</code>', 'giuliomax-menu-builder' ) ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 4.1.2 A</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Distinguishes this <code>&lt;nav&gt;</code> from other navigation landmarks (footer, breadcrumb). NVDA/VoiceOver announce it when entering the landmark.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="text" name="menux_accessibility[nav_aria_label]"
						   value="<?php echo esc_attr( $a['nav_aria_label'] ); ?>"
						   class="mx-input" placeholder="<?php esc_attr_e( 'Main navigation', 'giuliomax-menu-builder' ); ?>">
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php echo wp_kses_post( __( '<code>aria-current</code> on current page', 'giuliomax-menu-builder' ) ); ?></span>
					<p class="mx-row-help">
						<?php echo wp_kses_post( __( '<strong>page</strong> — VoiceOver/NVDA announce "current page".', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>true</strong> — generic active state (use for archive/section pages).', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Disabled</strong> — rely only on the <code>.active</code> CSS class.', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[aria_current]" class="mx-select">
						<option value="page"     <?php selected( $a['aria_current'], 'page' );     ?>><?php echo wp_kses_post( __( '<code>aria-current="page"</code> (recommended)', 'giuliomax-menu-builder' ) ); ?></option>
						<option value="true"     <?php selected( $a['aria_current'], 'true' );     ?>><?php echo wp_kses_post( __( '<code>aria-current="true"</code> — section active', 'giuliomax-menu-builder' ) ); ?></option>
						<option value="disabled" <?php selected( $a['aria_current'], 'disabled' ); ?>><?php esc_html_e( 'Disabled', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php echo wp_kses_post( __( '<code>aria-haspopup</code> on mega menu triggers', 'giuliomax-menu-builder' ) ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 4.1.2 A</span>
					<p class="mx-row-help">
						<?php echo wp_kses_post( __( '<strong>dialog</strong> — semantically correct for a mega menu panel containing mixed content (recommended).', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>menu</strong> — standard dropdown list pattern.', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[aria_haspopup_mega]" class="mx-select">
						<option value="dialog" <?php selected( $a['aria_haspopup_mega'], 'dialog' ); ?>><?php esc_html_e( 'dialog (recommended for mega menu)', 'giuliomax-menu-builder' ); ?></option>
						<option value="menu"   <?php selected( $a['aria_haspopup_mega'], 'menu' );   ?>><?php esc_html_e( 'menu (standard dropdown)', 'giuliomax-menu-builder' ); ?></option>
						<option value="false"  <?php selected( $a['aria_haspopup_mega'], 'false' );  ?>><?php esc_html_e( 'false (disabled)', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Hide decorative icons from screen readers', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 1.1.1 A</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Adds <code>aria-hidden="true"</code> to Font Awesome icons. Without this NVDA may announce "f015 Home Home", duplicating the link label.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[icon_aria_hidden]" value="1" <?php checked( $a['icon_aria_hidden'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Notification dot — screen reader text', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 1.1.1 A</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Text announced to screen reader users when a menu item has a notification dot (the red pulsing circle). The dot itself is hidden with <code>aria-hidden</code>.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="text" name="menux_accessibility[badge_sr_text]"
						   value="<?php echo esc_attr( $a['badge_sr_text'] ); ?>"
						   class="mx-input" placeholder="<?php esc_attr_e( 'New notification', 'giuliomax-menu-builder' ); ?>">
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Hamburger button — open label', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 4.1.2 A</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( '<code>aria-label</code> read when the mobile menu is <strong>closed</strong>. VoiceOver announces this as the button name.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="text" name="menux_accessibility[hamburger_label_open]"
						   value="<?php echo esc_attr( $a['hamburger_label_open'] ); ?>"
						   class="mx-input" placeholder="<?php esc_attr_e( 'Open menu', 'giuliomax-menu-builder' ); ?>">
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Hamburger button — close label', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( '<code>aria-label</code> read when the mobile menu is <strong>open</strong>. Updated dynamically by JavaScript.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="text" name="menux_accessibility[hamburger_label_close]"
						   value="<?php echo esc_attr( $a['hamburger_label_close'] ); ?>"
						   class="mx-input" placeholder="<?php esc_attr_e( 'Close menu', 'giuliomax-menu-builder' ); ?>">
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Live region announcements', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 4.1.3 AA</span>
					<p class="mx-row-help">
						<?php echo wp_kses_post( __( '<strong>Off</strong> — no announcements (default, avoid verbosity).', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Polite</strong> — announces after user stops typing/interacting.', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Assertive</strong> — interrupts immediately (use sparingly).', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[live_region]" class="mx-select">
						<option value="off"        <?php selected( $a['live_region'], 'off' );       ?>><?php esc_html_e( 'Off (default)', 'giuliomax-menu-builder' ); ?></option>
						<option value="polite"     <?php selected( $a['live_region'], 'polite' );    ?>><?php esc_html_e( 'Polite — non-intrusive', 'giuliomax-menu-builder' ); ?></option>
						<option value="assertive"  <?php selected( $a['live_region'], 'assertive' ); ?>><?php esc_html_e( 'Assertive — immediate interrupt', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Mega menu heading level', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-a">WCAG 1.3.1 A</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'HTML heading tag for column section headings inside mega menu panels. Choose a level consistent with your page outline. Use <code>span</code> for no semantic heading.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[heading_level]" class="mx-select">
						<option value="h2"  <?php selected( $a['heading_level'], 'h2' );  ?>>h2</option>
						<option value="h3"  <?php selected( $a['heading_level'], 'h3' );  ?>><?php printf( esc_html__( 'h3 %s', 'giuliomax-menu-builder' ), esc_html__( '(recommended)', 'giuliomax-menu-builder' ) ); ?></option>
						<option value="h4"  <?php selected( $a['heading_level'], 'h4' );  ?>>h4</option>
						<option value="span"<?php selected( $a['heading_level'], 'span' );?>><?php printf( esc_html__( 'span %s', 'giuliomax-menu-builder' ), esc_html__( '(no heading)', 'giuliomax-menu-builder' ) ); ?></option>
					</select>
				</div>
			</div>

		</div>
	</div>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   CARD 4 — Motion & Contrast
	   WCAG: 2.3.3 (AAA/best), 1.4.3 (AA), 1.4.12 (AA)
	   ────────────────────────────────────────────────────────────────────── */
	?>
	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon bm-card-icon-green">🎬</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php echo wp_kses_post( __( 'Motion, Contrast &amp; Visibility', 'giuliomax-menu-builder' ) ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Respect OS preferences for reduced motion, high contrast and forced colors', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

			<p class="mx-section"><?php esc_html_e( 'Motion', 'giuliomax-menu-builder' ); ?></p>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php echo wp_kses_post( __( 'Respect <code>prefers-reduced-motion</code>', 'giuliomax-menu-builder' ) ); ?></span>
					<p class="mx-row-help"><?php esc_html_e( 'Disables/shortens all CSS animations and transitions when the OS is set to "Reduce Motion" (macOS, Windows, iOS, Android). Affects entrance animations, hover effects and submenu transitions. Critical for users with vestibular disorders.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[reduced_motion]" value="1" <?php checked( $a['reduced_motion'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Animation duration multiplier', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Manual override applied regardless of OS setting. <strong>0×</strong> = instant (no motion); <strong>0.5×</strong> = fast; <strong>2×</strong> = slow (easier to follow for some cognitive disabilities).', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[anim_multiplier]" class="mx-select">
						<option value="0"   <?php selected( $a['anim_multiplier'], '0' );   ?>><?php esc_html_e( '0× — No animations', 'giuliomax-menu-builder' ); ?></option>
						<option value="0.5" <?php selected( $a['anim_multiplier'], '0.5' ); ?>><?php esc_html_e( '0.5× — Fast', 'giuliomax-menu-builder' ); ?></option>
						<option value="1"   <?php selected( $a['anim_multiplier'], '1' );   ?>><?php esc_html_e( '1× — Default', 'giuliomax-menu-builder' ); ?></option>
						<option value="2"   <?php selected( $a['anim_multiplier'], '2' );   ?>><?php esc_html_e( '2× — Slow', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Hover activation delay', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php esc_html_e( 'Milliseconds before a submenu closes after the pointer leaves. A small delay prevents accidental closure for users with motor tremors or imprecise pointing. Set to 0 for instant.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="number" name="menux_accessibility[hover_delay]"
						   value="<?php echo esc_attr( $a['hover_delay'] ); ?>"
						   min="0" max="1000" step="50" class="mx-input mx-input-sm">
					<span style="font-size:12px;color:#6b7280;padding-top:8px;">ms</span>
				</div>
			</div>

			<p class="mx-section"><?php echo wp_kses_post( __( 'Contrast &amp; Color', 'giuliomax-menu-builder' ) ); ?></p>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Enforce contrast validation', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 1.4.3 AA</span>
					<p class="mx-row-help">
						<?php esc_html_e( 'Checks your text/background color pairs (links, hover, active, submenu, mobile) when you save.', 'giuliomax-menu-builder' ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Warn</strong> — asks for confirmation if any pair is below 4.5:1; you can still save.', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>Block</strong> — prevents saving until every failing pair is fixed.', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[enforce_contrast]" class="mx-select">
						<option value="false" <?php selected( $a['enforce_contrast'], 'false' ); ?>><?php esc_html_e( 'Disabled', 'giuliomax-menu-builder' ); ?></option>
						<option value="warn"  <?php selected( $a['enforce_contrast'], 'warn' );  ?>><?php esc_html_e( 'Warn (recommended)', 'giuliomax-menu-builder' ); ?></option>
						<option value="block" <?php selected( $a['enforce_contrast'], 'block' ); ?>><?php esc_html_e( 'Block save on failure', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php echo wp_kses_post( __( 'Respect <code>prefers-contrast: more</code>', 'giuliomax-menu-builder' ) ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 1.4.3 AA</span>
					<p class="mx-row-help"><?php esc_html_e( 'Adds stronger borders, underlines and higher-contrast colors when the OS signals the user needs more contrast (Windows Accessibility settings, macOS Accessibility → Increase Contrast).', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[respect_prefers_contrast]" value="1" <?php checked( $a['respect_prefers_contrast'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php echo wp_kses_post( __( 'Windows High Contrast / <code>forced-colors</code>', 'giuliomax-menu-builder' ) ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 1.4.3 AA</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Adds <code>@media (forced-colors: active)</code> rules that replace custom colors with system colors (ButtonText, LinkText, Highlight, Canvas). Users with low vision who enable Windows High Contrast Mode rely on this.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[forced_colors]" value="1" <?php checked( $a['forced_colors'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Text spacing compatibility', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 1.4.12 AA</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Ensures the menu remains usable when browser extensions or user CSS override text spacing (line-height ≥ 1.5, letter-spacing ≥ 0.12em). Uses <code>min-height</code> instead of fixed <code>height</code> on links.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[text_spacing]" value="1" <?php checked( $a['text_spacing'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

		</div>
	</div>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   CARD 5 — Mobile & Touch
	   WCAG: 2.5.8 (AA new), 1.4.4 (AA)
	   ────────────────────────────────────────────────────────────────────── */
	?>
	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon" style="background:#fff7ed;">📱</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php echo wp_kses_post( __( 'Mobile &amp; Touch', 'giuliomax-menu-builder' ) ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Tap target sizing and touch interaction — WCAG 2.5.8 is new in WCAG 2.2', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Minimum touch target size', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa-new">WCAG 2.5.8 AA ★</span>
					<p class="mx-row-help">
						<?php echo wp_kses_post( __( 'Minimum width <em>and</em> height for all interactive menu elements on touch screens.', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>24 px</strong> — absolute WCAG 2.2 AA minimum.', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>44 px</strong> — Apple iOS HIG &amp; Android recommended (covers most thumb sizes).', 'giuliomax-menu-builder' ) ); ?><br>
						<?php echo wp_kses_post( __( '<strong>48 px</strong> — Google Material Design recommendation.', 'giuliomax-menu-builder' ) ); ?>
					</p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[touch_target]" class="mx-select">
						<option value="24" <?php selected( $a['touch_target'], '24' ); ?>><?php esc_html_e( '24 px — WCAG 2.2 minimum', 'giuliomax-menu-builder' ); ?></option>
						<option value="44" <?php selected( $a['touch_target'], '44' ); ?>><?php esc_html_e( '44 px — Apple / WCAG recommended', 'giuliomax-menu-builder' ); ?></option>
						<option value="48" <?php selected( $a['touch_target'], '48' ); ?>><?php esc_html_e( '48 px — Material Design', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Spacing between touch targets', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa-new">WCAG 2.5.8 AA ★</span>
					<p class="mx-row-help"><?php esc_html_e( 'Minimum gap between adjacent targets in the submenu. WCAG 2.2 requires targets smaller than 24 px to have ≥ 24 px spacing. Extra spacing reduces accidental taps.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<input type="number" name="menux_accessibility[touch_spacing]"
						   value="<?php echo esc_attr( $a['touch_spacing'] ); ?>"
						   min="0" max="24" step="2" class="mx-input mx-input-sm">
					<span style="font-size:12px;color:#6b7280;padding-top:8px;">px</span>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Prevent pinch-zoom disable', 'giuliomax-menu-builder' ); ?></span>
					<span class="mx-wcag mx-wcag-aa">WCAG 1.4.4 AA</span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Verifies the shortcode never outputs <code>user-scalable=no</code> in the viewport meta tag. Users with low vision rely on OS/browser zoom — disabling it is a direct WCAG violation and illegal in many jurisdictions.', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<label class="mx-toggle">
						<input type="checkbox" name="menux_accessibility[prevent_zoom_disable]" value="1" <?php checked( $a['prevent_zoom_disable'], '1' ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>
			</div>

			<div class="mx-row">
				<div>
					<span class="mx-row-label"><?php esc_html_e( 'Close button position (overlay / drawer)', 'giuliomax-menu-builder' ); ?></span>
					<p class="mx-row-help"><?php echo wp_kses_post( __( 'Position of the × button in fullscreen and drawer mobile menus. <strong>Bottom center</strong> is often easier to reach on large phones (thumb zone).', 'giuliomax-menu-builder' ) ); ?></p>
				</div>
				<div class="mx-row-ctrl">
					<select name="menux_accessibility[close_btn_position]" class="mx-select">
						<option value="top_right"     <?php selected( $a['close_btn_position'], 'top_right' );     ?>><?php esc_html_e( 'Top right (default)', 'giuliomax-menu-builder' ); ?></option>
						<option value="top_left"      <?php selected( $a['close_btn_position'], 'top_left' );      ?>><?php esc_html_e( 'Top left', 'giuliomax-menu-builder' ); ?></option>
						<option value="bottom_center" <?php selected( $a['close_btn_position'], 'bottom_center' ); ?>><?php esc_html_e( 'Bottom center (thumb friendly)', 'giuliomax-menu-builder' ); ?></option>
					</select>
				</div>
			</div>

		</div>
	</div>

	<?php
	/* ──────────────────────────────────────────────────────────────────────
	   Compliance Summary
	   ────────────────────────────────────────────────────────────────────── */
	?>
	<div class="bm-card" style="border:1px solid #d1fae5;">
		<div class="bm-card-header" style="background:linear-gradient(180deg,#f0fdf4,#fff);">
			<span class="bm-card-icon bm-card-icon-green">✅</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title" style="color:#065f46;"><?php esc_html_e( 'WCAG 2.2 AA — Coverage Summary', 'giuliomax-menu-builder' ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Criteria addressed by these settings when all toggles are on', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">
			<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;">
				<?php
				$criteria = array(
					array( '1.1.1', 'A',   __( 'Non-text Content', 'giuliomax-menu-builder' ),          __( 'Icon aria-hidden, notification SR text', 'giuliomax-menu-builder' ) ),
					array( '1.3.1', 'A',   __( 'Info and Relationships', 'giuliomax-menu-builder' ),    __( 'nav landmark, heading levels', 'giuliomax-menu-builder' ) ),
					array( '1.4.3', 'AA',  __( 'Contrast Minimum', 'giuliomax-menu-builder' ),          __( 'enforce_contrast, prefers-contrast', 'giuliomax-menu-builder' ) ),
					array( '1.4.4', 'AA',  __( 'Resize Text', 'giuliomax-menu-builder' ),               __( 'Pinch-zoom protection', 'giuliomax-menu-builder' ) ),
					array( '1.4.11','AA',  __( 'Non-text Contrast', 'giuliomax-menu-builder' ),         __( 'Focus ring color ≥ 3:1', 'giuliomax-menu-builder' ) ),
					array( '1.4.12','AA',  __( 'Text Spacing', 'giuliomax-menu-builder' ),              __( 'min-height links, overflow visible', 'giuliomax-menu-builder' ) ),
					array( '2.1.1', 'A',   __( 'Keyboard', 'giuliomax-menu-builder' ),                  __( 'Full arrow/tab/esc navigation', 'giuliomax-menu-builder' ) ),
					array( '2.1.2', 'A',   __( 'No Keyboard Trap', 'giuliomax-menu-builder' ),          __( 'Esc closes, focus trap in overlay', 'giuliomax-menu-builder' ) ),
					array( '2.4.1', 'A',   __( 'Bypass Blocks', 'giuliomax-menu-builder' ),             __( 'Skip navigation link', 'giuliomax-menu-builder' ) ),
					array( '2.4.3', 'A',   __( 'Focus Order', 'giuliomax-menu-builder' ),               __( 'Roving tabindex, tab_behavior', 'giuliomax-menu-builder' ) ),
					array( '2.4.11','AA ★', __( 'Focus Appearance', 'giuliomax-menu-builder' ),          __( 'Ring width ≥ 2 px, offset, color', 'giuliomax-menu-builder' ) ),
					array( '2.4.12','AA ★', __( 'Focus Not Obscured', 'giuliomax-menu-builder' ),        __( 'Sticky scroll compensation', 'giuliomax-menu-builder' ) ),
					array( '2.5.8', 'AA ★', __( 'Target Size Minimum', 'giuliomax-menu-builder' ),       __( 'touch_target ≥ 44 px + spacing', 'giuliomax-menu-builder' ) ),
					array( '4.1.2', 'A',   __( 'Name, Role, Value', 'giuliomax-menu-builder' ),         __( 'aria-expanded, aria-haspopup, labels', 'giuliomax-menu-builder' ) ),
					array( '4.1.3', 'AA',  __( 'Status Messages', 'giuliomax-menu-builder' ),           __( 'Live region for menu state', 'giuliomax-menu-builder' ) ),
				);
				foreach ( $criteria as $c ) :
					$level_class = strpos( $c[1], '★' ) !== false ? 'mx-wcag-aa-new' : ( $c[1] === 'A' ? 'mx-wcag-a' : 'mx-wcag-aa' );
				?>
				<div style="display:flex;gap:8px;align-items:flex-start;padding:6px 8px;background:#f8fafc;border-radius:6px;border:1px solid #e5e7eb;">
					<span class="mx-wcag <?php echo esc_attr( $level_class ); ?>" style="flex-shrink:0;margin-left:0;"><?php echo esc_html( $c[1] ); ?></span>
					<div>
						<strong style="font-size:11px;color:#374151;"><?php echo esc_html( $c[0] ); ?> <?php echo esc_html( $c[2] ); ?></strong>
						<div style="font-size:11px;color:#6b7280;"><?php echo esc_html( $c[3] ); ?></div>
					</div>
				</div>
				<?php endforeach; ?>
			</div>
			<p style="font-size:11px;color:#9ca3af;margin:14px 0 0;">★ <?php esc_html_e( '= new in WCAG 2.2. Full WCAG 2.2 AA requires also addressing content-level criteria (color of body text, image alt text, form labels) which are outside the scope of a navigation plugin.', 'giuliomax-menu-builder' ); ?></p>
		</div>
	</div>

	</div><!-- /#mx-a11y-sections -->

	<script>
	/* ── Master toggle show/hide ─────────────────────────────────────── */
	function mxA11yMasterToggle(enabled) {
		var sections = document.getElementById('mx-a11y-sections');
		var notice   = document.getElementById('mx-a11y-disabled-msg');
		var label    = document.getElementById('mx-a11y-master-label');
		if (sections) sections.style.display = enabled ? '' : 'none';
		if (notice) {
			if (enabled) {
				notice.style.display = 'none';
			} else {
				notice.style.display = '';
				// If the notice was removed by a previous "show", re-inject it
				if (!notice.parentNode) {
					var master = document.querySelector('.mx-a11y-master');
					if (master && master.nextSibling) {
						master.parentNode.insertBefore(notice, master.nextSibling);
					}
				}
			}
		}
		if (label) label.textContent = enabled ? 'Enabled' : 'Disabled';
	}

	/* ── Color picker sync ───────────────────────────────────────────── */
	function mxA11ySyncColor(picker) {
		var hex = document.getElementById('mx-focus-color-hex');
		if (hex) hex.value = picker.value;
		mxA11yCheckContrast(picker.value);
	}
	function mxA11ySyncHex(input) {
		var val = input.value.trim();
		if (!/^#[0-9A-Fa-f]{6}$/.test(val)) return;
		var picker = document.getElementById('mx-focus-color-picker');
		if (picker) picker.value = val;
		mxA11yCheckContrast(val);
	}

	/* ── Inline contrast check (sRGB luminance) ─────────────────────── */
	function mxA11yCheckContrast(hex) {
		var notice = document.getElementById('mx-contrast-result');
		if (!notice || !/^#[0-9A-Fa-f]{6}$/.test(hex)) return;
		var r = parseInt(hex.slice(1,3),16)/255;
		var g = parseInt(hex.slice(3,5),16)/255;
		var b = parseInt(hex.slice(5,7),16)/255;
		function lin(c){ return c <= 0.04045 ? c/12.92 : Math.pow((c+0.055)/1.055,2.4); }
		var L = 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b);
		// Contrast against white (L=1)
		var contrast = (1.05) / (L + 0.05);
		notice.style.display = 'block';
		if (contrast >= 3) {
			notice.className = 'mx-contrast-notice mx-contrast-ok';
			notice.textContent = '✓ Contrast ratio ' + contrast.toFixed(1) + ':1 — passes WCAG 1.4.11 Non-text Contrast (≥ 3:1)';
		} else {
			notice.className = 'mx-contrast-notice mx-contrast-fail';
			notice.textContent = '✗ Contrast ratio ' + contrast.toFixed(1) + ':1 — fails WCAG 1.4.11 (needs ≥ 3:1 against adjacent colors)';
		}
	}

	/* Run check on load */
	document.addEventListener('DOMContentLoaded', function() {
		var picker = document.getElementById('mx-focus-color-picker');
		if (picker) mxA11yCheckContrast(picker.value);
	});
	</script>
	<?php
}
