/**
 * Wood Ranch Accessibility Fixes - CSS
 * Fixes for WCAG 2.2 Level AA compliance
 */

/**
 * Fix: H1 heading should look like the original H2
 * When we convert H2 to H1 for accessibility, preserve the visual styling
 *
 * Original styling from theme (from DevTools inspection):
 * - .wr-location-menu-container h2 has font-size: 4.6rem and font-family: var(--wr-heading-style)
 * - h2 has letter-spacing: -1px, line-height: var(--wp--custom--line-height--xx-small)
 * - h1, h2, h3, h4, h5, h6 has color: var(--wp--preset--color--primary)
 * - h2 has margin-top: var(--wp--preset--spacing--medium)
 */
.wr-location-menu-container h1 {
	/* Match exact H2 styles from .wr-location-menu-container h2 */
	font-size: 4.6rem !important;
	font-family: var(--wr-heading-style) !important;
	letter-spacing: -1px !important;
	line-height: var(--wp--custom--line-height--xx-small) !important;
	margin-top: var(--wp--preset--spacing--medium) !important;
	color: var(--wp--preset--color--primary) !important;
	font-style: normal !important;
}

/* Also ensure .wr-featured h1 inherits properly */
.wr-featured h1 {
	font-size: 4.6rem !important;
	font-family: var(--wr-heading-style) !important;
	letter-spacing: -1px !important;
	line-height: var(--wp--custom--line-height--xx-small) !important;
	color: var(--wp--preset--color--primary) !important;
	font-style: normal !important;
}

/**
 * Fix: Font scaling at 200% (WCAG 1.4.4)
 * Issue: Floating menu navigation obscures content when zoomed
 * Solution: Use responsive layout at smaller viewports
 */
@media (max-width: 1024px) {
	/* Remove fixed/sticky positioning on scrolling nav at zoom levels */
	.wr-location-menu-container .wr-scrolling-nav {
		position: relative !important;
		top: auto !important;
	}
	
	/* Reduce padding on main heading when scaled */
	.wr-featured h1, .wr-featured h2 {
		padding: 1em 0 !important;
	}
}

/**
 * Fix: Social media links keyboard focusability (WCAG 2.1.1)
 * Ensure display: contents doesn't remove from focus order
 */
footer a {
	display: inline-block !important;
}

/**
 * Fix: Visible focus indicators for keyboard navigation
 * WCAG 2.4.7 - Focus Visible
 */
.wr-button[role="tab"]:focus, .wr-menu-item-description-toggle:focus {
	outline: 2px solid #005fcc !important;
	outline-offset: 2px !important;
}

/**
 * Fix: Info button positioning after DOM reorder
 * Ensure visual layout remains correct after moving button before header
 */
.wr-menu-item {
	display: flex;
	flex-direction: column;
}

.wr-menu-item .wr-menu-item-description-toggle {
	/* Position button at top-right visually */
	align-self: flex-end;
	order: 1;
}

.wr-menu-item .wr-item-header {
	order: 2;
}

.wr-menu-item .wr-item-allergen-list {
	order: 3;
}

.wr-menu-item .wr-item-description {
	order: 4;
}

/**
 * Fix: Mobile menu accessibility (WCAG 1.4.10)
 * Ensure "Menus" link is not removed on mobile
 */
@media (max-width: 768px) {
	.swt-hide-mobile {
		display: block !important;
		visibility: visible !important;
	}
}

/**
 * Fix: Improve submenu dismissal visual feedback
 */
.wp-block-navigation-item.hover-active .wp-block-navigation__submenu-container {
	display: block !important;
}

/**
 * Fix: Ensure proper contrast for focus states
 * WCAG 1.4.11 - Non-text Contrast
 */
[role="tab"]:focus-visible {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 0, 0, .05) !important;
}

/**
 * Fix: Better visual indication of active tab
 */
[role="tab"][aria-selected="true"] {
	font-weight: bold;
	border-bottom: 3px solid currentColor;
}

/**
 * Fix: Ensure disabled tabs don't look clickable
 */
[role="tab"][tabindex="-1"]:not(:hover):not(:focus) {
	opacity: .7;
}

/**
 * Fix: Screen reader only content positioning
 * Ensure .screen-reader-text is properly hidden but accessible
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border-width: 0 !important;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: .5rem 1rem !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	background-color: #f1f1f1 !important;
	color: #000 !important;
	text-decoration: none !important;
	z-index: 100000 !important;
}