/**
 * JDH Developers — WCAG 2.1 AA Accessibility Fixes
 * ================================================
 * 
 * This stylesheet addresses all visual/CSS-level WCAG 2.1 AA issues
 * identified in the JDH Developers site audit.
 * 
 * INSTALLATION: Enqueued via jdh-functions-accessibility.php
 * DO NOT edit the parent theme CSS — all overrides go here.
 * 
 * @version 1.0.0
 * @link https://www.w3.org/TR/WCAG21/
 */


/* =================================================================
   1. SKIP NAVIGATION LINK (WCAG 2.4.1 — Level A)
   Visually hidden until focused. First focusable element on page.
   ================================================================= */

.jdh-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000001;
    padding: 14px 28px;
    background: #0E6B4E;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: top 0.2s ease;
    line-height: 1.4;
}

.jdh-skip-link:focus,
.jdh-skip-link:focus-visible {
    top: 0;
    outline: 3px solid #B94F15;
    outline-offset: 2px;
    color: #ffffff;
    text-decoration: none;
}


/* =================================================================
   2. SCREEN READER ONLY UTILITY (used throughout)
   Content hidden visually but accessible to assistive technology.
   ================================================================= */

.sr-only,
.jdh-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;
}


/* =================================================================
   3. FOCUS INDICATORS (WCAG 2.4.7 — Level AA)
   Consistent, high-contrast visible focus ring for all interactive
   elements. Uses :focus-visible to avoid showing on mouse clicks.
   ================================================================= */

/* Global focus ring */
*:focus-visible {
    outline: 3px solid #0E6B4E !important;
    outline-offset: 2px !important;
}

/* Specific interactive elements — reinforced in case theme overrides */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 3px solid #0E6B4E !important;
    outline-offset: 2px !important;
}

/* Remove any theme overrides that kill focus */
*:focus {
    /* Don't use outline: none here — only override if the theme does */
}

/* WP Residence specific: theme buttons and nav links */
.menu-main-nav a:focus-visible,
.menu-main-nav button:focus-visible,
.wpestate_header_btn:focus-visible,
#user_menu_trigger:focus-visible,
.compare_listings_button:focus-visible,
.property_listing a:focus-visible,
.load_more_properties a:focus-visible,
.wpestate_contact_form input:focus-visible,
.wpestate_contact_form textarea:focus-visible,
.wpestate_contact_form button:focus-visible {
    outline: 3px solid #0E6B4E !important;
    outline-offset: 2px !important;
}

/* Trigger button and compare floating button */
.wpresidence_button:focus-visible,
.wpresidence_submit:focus-visible,
.compare-button:focus-visible {
    outline: 3px solid #0E6B4E !important;
    outline-offset: 2px !important;
}

/* Image gallery thumbnails */
.carousel-indicators li:focus-visible,
.owl-dot:focus-visible,
.flex-control-thumbs li a:focus-visible,
.property_header_image_gallery a:focus-visible {
    outline: 3px solid #B94F15 !important;
    outline-offset: 2px !important;
}


/* =================================================================
   4. COLOR CONTRAST FIXES (WCAG 1.4.3 — Level AA)
   Minimum 4.5:1 for normal text, 3:1 for large text (18px+ / 14px bold+)
   ================================================================= */

/* Gray metadata text on property cards — was likely ~#999 on #fff (2.8:1) */
.property_listing .property_location,
.property_listing .property_listing_details span,
.property_listing .property_agent_details,
.listing-details .listing_detail span:first-child,
.property_taxonomy_item {
    color: #595959 !important;  /* 7.0:1 on white */
}

/* Footer text — ensure readable on dark bg */
.footer_content,
.footer_content p,
.footer_content li,
.footer_content span,
.footer_content .widget_text {
    color: #d4d4d4 !important;  /* min 7.0:1 on typical dark footer bg */
}

.footer_content a {
    color: #8ecfb8 !important;  /* 4.6:1 on dark bg */
    text-decoration: underline;
}

.footer_content a:hover,
.footer_content a:focus {
    color: #ffffff !important;
}

/* Placeholder text contrast — ensure readable */
::placeholder {
    color: #6b6b6b !important;  /* 5.7:1 on white */
    opacity: 1;
}

/* "Current" property badge */
.current_status,
.property_badge {
    font-weight: 700;
}

/* Ensure breadcrumb and small text meet contrast */
.breadcrumb_list,
.breadcrumb_list a,
.breadcrumb_list span {
    color: #595959 !important;
}

.breadcrumb_list a:hover,
.breadcrumb_list a:focus {
    color: #0E6B4E !important;
}


/* =================================================================
   5. LINK IDENTIFICATION (WCAG 1.4.1 — Level A)
   Links in body content must be distinguishable without relying on color alone.
   ================================================================= */

/* Body content links get underline */
.entry-content a:not(.btn):not(.button):not(.wpresidence_button):not(.property_listing a),
.wpestate_property_description a,
.elementor-widget-text-editor a,
.about-content a,
article a:not(.btn):not(.button) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.entry-content a:hover,
.wpestate_property_description a:hover {
    text-decoration-thickness: 2px;
}


/* =================================================================
   6. REDUCED MOTION (WCAG 2.3.1 / 2.2.2 — Level A)
   Respects user OS-level motion preference.
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Kill carousel slide animations */
    .owl-carousel .owl-stage,
    .flexslider .slides,
    .carousel-inner .carousel-item {
        transition: none !important;
    }

    /* Stop animated counters */
    .stat-number,
    .counter,
    [data-counter],
    .odometer {
        transition: none !important;
    }

    /* Replace GIF with static (JS handles the actual swap, this prevents flicker) */
    img[src$=".gif"] {
        animation: none !important;
    }
}


/* =================================================================
   7. TOUCH TARGET SIZE (WCAG 2.5.5 — Level AAA / 2.5.8 — Level AA)
   Minimum 44x44px for all interactive targets.
   ================================================================= */

/* Ensure nav links have adequate touch area */
.menu-main-nav > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

/* Social share buttons */
.share_unit a,
.social-share-btn,
.property_social_icons a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Carousel dots / pagination */
.owl-dot,
.flex-control-paging li a,
.carousel-indicators li {
    min-width: 44px;
    min-height: 44px;
}


/* =================================================================
   8. MODAL OVERLAY STYLES (WCAG 2.4.3)
   Visual treatment for focus-trapped modals.
   ================================================================= */

/* When modal is open, indicate the backdrop is inert */
body.jdh-modal-open {
    overflow: hidden;
}

/* Ensure modal content is above backdrop */
.jdh-modal-active {
    z-index: 1000002 !important;
}

/* Darken backdrop when modal is active */
.jdh-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000001;
}


/* =================================================================
   9. KEYBOARD NAVIGATION FOR DROPDOWNS (WCAG 2.1.1)
   Show dropdowns on keyboard focus, not just mouse hover.
   ================================================================= */

/* Show sub-menu when parent link receives focus-within */
.menu-main-nav li:focus-within > ul,
.menu-main-nav li.jdh-dropdown-open > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Mark currently expanded dropdown parent */
.menu-main-nav li.jdh-dropdown-open > a {
    background-color: rgba(14, 107, 78, 0.08);
}

/* Ensure sub-menu items are keyboard accessible */
.menu-main-nav ul ul a:focus-visible {
    outline: 3px solid #0E6B4E !important;
    outline-offset: -2px;
}


/* =================================================================
   10. PROPERTY CARD ACCESSIBILITY
   ================================================================= */

/* Ensure property cards have sufficient click/tap area */
.property_listing {
    position: relative;
}

/* Ensure "load more listings" link is descriptive */
.load_more_properties a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
}


/* =================================================================
   11. FORM LABEL VISIBILITY 
   For forms where we add sr-only labels, ensure the placeholders
   remain visible but are supplemented by real <label> elements.
   ================================================================= */

/* Contact form and search form label styling when visible */
.jdh-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 4px;
}

/* When we want labels visible */
.jdh-form-label--visible {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 4px 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}


/* =================================================================
   12. IMAGE GALLERY ACCESSIBILITY
   ================================================================= */

/* Gallery slide focus indicators */
.property_header_image_gallery .carousel-item:focus-visible,
.property_header_image_gallery a:focus-visible {
    outline: 3px solid #B94F15;
    outline-offset: -3px;
}

/* Thumbnail active state */
.property_header_image_gallery .carousel-indicators .active {
    outline: 2px solid #0E6B4E;
    outline-offset: 2px;
}


/* =================================================================
   13. TEAM MEMBER CARDS (About page)
   Ensure "Read More" toggle buttons are properly styled.
   ================================================================= */

.jdh-read-more-btn {
    background: none;
    border: 1px solid #0E6B4E;
    color: #0E6B4E;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.jdh-read-more-btn:hover {
    background: #0E6B4E;
    color: #ffffff;
}

.jdh-read-more-btn:focus-visible {
    outline: 3px solid #B94F15;
    outline-offset: 2px;
}

/* Hidden expanded content */
.jdh-expandable-content[aria-hidden="true"] {
    display: none;
}

.jdh-expandable-content[aria-hidden="false"] {
    display: block;
}


/* =================================================================
   14. PRINT STYLES — Accessibility
   ================================================================= */

@media print {
    .jdh-skip-link,
    .jdh-sr-only,
    .sr-only {
        display: none !important;
    }
}