/**
 * 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;
}

footer a[style*="display: contents"],
footer a[style*="display:contents"] {
    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, 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: 0.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: 0.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;
}