/**
 * Roma ADA Fixes — CSS
 *
 * Each section is scoped with a body class (e.g. .roma-ada-fix-focus-indicators)
 * so that individual fixes can be toggled from the admin settings page.
 *
 * Priority: loaded at wp_enqueue_scripts priority 9999, after Elementor/Astra/Pojo.
 * Uses !important where necessary to override Elementor inline styles.
 */

/* ═══════════════════════════════════════════════
   UTILITY: Screen-reader-only (visually hidden)
   ═══════════════════════════════════════════════ */
.roma-ada-sr-only {
    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: 0 !important;
}

/* ═══════════════════════════════════════════════
   ISSUE 1 — Focus Indicators  (WCAG 2.4.7)
   ═══════════════════════════════════════════════ */

/*
 * Modern browsers: :focus-visible fires only on keyboard navigation,
 * so mouse-click users won't see the outline.
 */
.roma-ada-fix-focus-indicators a:focus-visible,
.roma-ada-fix-focus-indicators button:focus-visible,
.roma-ada-fix-focus-indicators input:focus-visible,
.roma-ada-fix-focus-indicators select:focus-visible,
.roma-ada-fix-focus-indicators textarea:focus-visible,
.roma-ada-fix-focus-indicators [tabindex]:focus-visible,
.roma-ada-fix-focus-indicators [role="button"]:focus-visible {
    outline: 3px solid #1a5276 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(26, 82, 118, 0.25) !important;
}

/* High-contrast outline for elements on the dark header/nav bar */
.roma-ada-fix-focus-indicators .elementor-location-header a:focus-visible,
.roma-ada-fix-focus-indicators .elementor-location-header button:focus-visible,
.roma-ada-fix-focus-indicators .elementor-nav-menu a:focus-visible,
.roma-ada-fix-focus-indicators header a:focus-visible {
    outline-color: #f9e547 !important;
    box-shadow: 0 0 0 5px rgba(249, 229, 71, 0.35) !important;
}

/*
 * Defensive reset: explicitly remove focus styles on mouse/pointer interaction.
 * Some browsers (or elements with explicit role attributes) may still trigger
 * :focus on click even in browsers that support :focus-visible. This ensures
 * the outline only appears during keyboard navigation.
 */
.roma-ada-fix-focus-indicators a:focus:not(:focus-visible),
.roma-ada-fix-focus-indicators button:focus:not(:focus-visible),
.roma-ada-fix-focus-indicators input:focus:not(:focus-visible),
.roma-ada-fix-focus-indicators select:focus:not(:focus-visible),
.roma-ada-fix-focus-indicators textarea:focus:not(:focus-visible),
.roma-ada-fix-focus-indicators [tabindex]:focus:not(:focus-visible),
.roma-ada-fix-focus-indicators [role="button"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Fallback for older browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
    .roma-ada-fix-focus-indicators a:focus,
    .roma-ada-fix-focus-indicators button:focus,
    .roma-ada-fix-focus-indicators input:focus,
    .roma-ada-fix-focus-indicators select:focus,
    .roma-ada-fix-focus-indicators textarea:focus,
    .roma-ada-fix-focus-indicators [tabindex]:focus,
    .roma-ada-fix-focus-indicators [role="button"]:focus {
        outline: 3px solid #1a5276 !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 5px rgba(26, 82, 118, 0.25) !important;
    }
}

/* ═══════════════════════════════════════════════
   ISSUE 7 — Link Underlines  (WCAG 1.4.1)
   ═══════════════════════════════════════════════
   Underline content links by default.
   Exclude: navigation, buttons, icons, Pojo toolbar, WooCommerce buttons.
*/
.roma-ada-fix-link-underlines .elementor-widget-text-editor a,
.roma-ada-fix-link-underlines .elementor-widget-theme-post-content a,
.roma-ada-fix-link-underlines .entry-content a,
.roma-ada-fix-link-underlines .site-content a:not(.elementor-button):not(.elementor-icon):not(.elementor-social-icon):not([class*="menu"]):not([role="button"]):not(.add_to_cart_button):not(.product_type_simple):not(.woocommerce-loop-product__link),
.roma-ada-fix-link-underlines footer .elementor-widget-text-editor a,
.roma-ada-fix-link-underlines .elementor-location-footer a:not(.elementor-icon):not(.elementor-social-icon) {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Preserve: nav links, buttons, social icons, Pojo toolbar, WooCommerce */
.roma-ada-fix-link-underlines .elementor-nav-menu a,
.roma-ada-fix-link-underlines .ast-header-menu a,
.roma-ada-fix-link-underlines .elementor-button,
.roma-ada-fix-link-underlines .elementor-social-icon,
.roma-ada-fix-link-underlines .pojo-a11y-toolbar-link,
.roma-ada-fix-link-underlines .pojo-a11y-toolbar-toggle,
.roma-ada-fix-link-underlines .woocommerce .button,
.roma-ada-fix-link-underlines .add_to_cart_button,
.roma-ada-fix-link-underlines nav a,
.roma-ada-fix-link-underlines .elementor-icon,
.roma-ada-fix-link-underlines .pojo-skip-link {
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════
   ISSUE 8 — Touch Target Size  (WCAG 2.5.8)
   ═══════════════════════════════════════════════
   Minimum 44 × 44 px for all interactive elements.
*/

/* Pojo accessibility toolbar links (audited at 34px tall) */
.roma-ada-fix-touch-targets .pojo-a11y-toolbar-link {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
}

/* Skip-to-content link (audited at 25px tall) */
.roma-ada-fix-touch-targets .pojo-skip-link.pojo-skip-content,
.roma-ada-fix-touch-targets .skip-link.screen-reader-text {
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 16px !important;
}

/* Social media icon links */
.roma-ada-fix-touch-targets .elementor-social-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Elementor nav menu top-level items */
.roma-ada-fix-touch-targets .elementor-nav-menu > li > a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Dropdown sub-menu links */
.roma-ada-fix-touch-targets .elementor-nav-menu--dropdown li > a {
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Header utility links (social icons in top bar) */
.roma-ada-fix-touch-targets .elementor-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* WooCommerce Add to Cart buttons */
.roma-ada-fix-touch-targets .add_to_cart_button,
.roma-ada-fix-touch-targets .woocommerce .button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 20px !important;
}

/* ═══════════════════════════════════════════════
   ISSUE 13 — Font Sizes  (WCAG 1.4.4)
   ═══════════════════════════════════════════════
   Ensure base is relative; override Elementor inline px sizes.
*/
/* html font-size is enforced as relative — cannot scope with body class */
html {
    font-size: 93.75% !important;  /* preserves the 15px equivalent via % */
}

body.roma-ada-fix-font-sizes {
    font-size: 1rem !important;
}

/* Elementor widgets that may have inline px font-size */
body.roma-ada-fix-font-sizes .elementor-widget-text-editor p,
body.roma-ada-fix-font-sizes .elementor-widget-text-editor li,
body.roma-ada-fix-font-sizes .elementor-widget-text-editor span {
    font-size: inherit !important;
}

/* ═══════════════════════════════════════════════
   ISSUE 2 (CSS part) — Injected H1 Styling
   ═══════════════════════════════════════════════
   Matches the existing visual appearance of H2 titles.
*/
.roma-ada-injected-h1 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════
   GENERAL — Accessibility toolbar toggle
   ═══════════════════════════════════════════════
   Ensure the floating icon is large enough and has good contrast.
*/
.roma-ada-fix-a11y-widget .pojo-a11y-toolbar-toggle {
    min-width: 48px !important;
    min-height: 48px !important;
}