/**
 * Accessibility Focus Styles for BFL-OL WordPress Homepage
 * 
 * This stylesheet implements comprehensive focus indicators for all interactive elements
 * to meet WCAG 2.1 Level AA accessibility standards.
 * 
 * Key Requirements:
 * - Focus indicators must be visible with at least 3:1 contrast ratio
 * - Focus indicators should be at least 2px thick
 * - Focus should never be completely removed (outline: none is bad)
 * 
 * @author Accessibility Enhancement
 * @version 1.0
 */

/* ============================================
   CSS CUSTOM PROPERTIES FOR FOCUS STYLES
   ============================================ */

:root {
    /* Focus indicator colors - Updated to match accessibility report requirements */
    --focus-color-primary: #000000;
    --focus-color-secondary: #000000;
    --focus-color-light: #000000;
    --focus-color-dark: #000000;

    /* Focus indicator dimensions - Updated to match accessibility report requirements */
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
    --focus-outline-style: dotted;

    /* Focus shadow for better visibility */
    --focus-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
    --focus-shadow-inset: inset 0 0 0 2px rgba(0, 0, 0, 0.5);
}

/* ============================================
   GLOBAL FOCUS STYLES
   ============================================ */

/* Remove default outline and replace with custom focus styles */
*:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
}

/* Ensure focus is visible for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus,
[role="link"]:focus,
[tabindex]:not([tabindex="-1"]):focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
}

/* ============================================
   LINKS
   ============================================ */

/* Standard links */
a:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Navigation menu links */
.menu a:focus,
.nav a:focus,
nav a:focus,
#menu a:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    background-color: rgba(0, 0, 0, 0.05);
}

/* Footer links */
footer a:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    background-color: rgba(0, 0, 0, 0.05);
}

/* ============================================
   BUTTONS
   ============================================ */

/* Standard buttons */
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
.btn:focus,
.button:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Bold Builder buttons */
.bt_bb_button a:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Override the problematic outline: none on slick arrows */
/* Note: Using white dotted outline for dark backgrounds */
button.slick-arrow:focus {
    outline: 2px dotted #ffffff !important;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Timeline slick arrows */
.bold_timeline_container button.bold_timeline_slick_arrow:focus {
    outline: 2px dotted #ffffff !important;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Slider navigation dots - keyboard focus */
/* Override the problematic outline: none on slick dots */
/* Apply circular dotted outline to the li element instead of the button */
/* Uses pseudo-element to create a truly rounded dotted border */

/* Completely remove ALL focus styles from the button element */
.slick-dots li button:focus,
.slick-dots li button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Make li element position relative for pseudo-element positioning */
.slick-dots li {
    position: relative !important;
}

/* Create circular dotted outline using ::after pseudo-element */
.slick-dots li:focus-within {
    outline: 2px dotted #000000 !important;
    border-radius: 50px;
    pointer-events: none !important; /* Don't interfere with clicks */
    z-index: 1 !important;
}
/* Remove focus outline for mouse users (only show for keyboard navigation) */


/* Back to top button */
/* The button uses ::after for the icon, so we use ::before for the focus indicator */
/* Remove default outline and underline */
.bt_back_to_top_button:focus,
.bt_bb_back_to_top a:focus,
.bt_back_to_top_button:focus-visible,
.bt_bb_back_to_top a:focus-visible {
    outline: none !important;
    text-decoration: none !important;
}


/* Create focus indicator using ::before pseudo-element on the button */
/* This works because the icon uses ::after, so ::before is available */
.bt_back_to_top_button:focus::before,
.bt_back_to_top_button:focus-visible::before {
    outline: 2px dotted #000000 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    padding: 6px !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

/* Text inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: 0;
    border-color: var(--focus-color-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Select dropdowns */
select:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: 0;
    border-color: var(--focus-color-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Checkboxes and radio buttons */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

/* Custom fancy select */
.fancy-select .trigger:focus,
.fancy-select .trigger.open:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: 0;
    border-color: var(--focus-color-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) !important;
}

/* Contact Form 7 inputs */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: 0;
    border-color: var(--focus-color-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   IMAGES
   ============================================ */

/* Bold Builder images - allow outline to be visible */
.bt_bb_image:focus-within {
    overflow: visible !important;
}

/* Also apply to parent column if needed */
.bt_bb_column:focus-within,
.bt_bb_column_content:focus-within,
.bt_bb_column_content_inner:focus-within {
    overflow: visible !important;
}

/* Bold Builder images - clickable images */
.bt_bb_image a:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
    box-shadow: var(--focus-shadow), inset 0 0 0 3px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Use pseudo-element for guaranteed visibility */
.bt_bb_image a:focus::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px solid #000000 !important;
    pointer-events: none !important;
    z-index: 100 !important;
}

/* Bold Builder images - focus on image element itself */
.bt_bb_image a:focus img {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.8) !important;
    /* Reset transform on focus to prevent outline clipping */
    transform: scale3d(1, 1, 1) !important;
}

/* For zoom-in hover effect - prevent transform on focus */
.bt_bb_image.bt_bb_hover_style_zoom-in a:focus img,
.bt_bb_image.bt_bb_hover_style_zoom-in-to-grayscale a:focus img,
.bt_bb_image.bt_bb_hover_style_zoom-in-from-grayscale a:focus img {
    transform: scale3d(1, 1, 1) !important;
}

/* Gallery images */
.photoblocks-gallery .pb-block a:focus,
.gallery-item a:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
    box-shadow: var(--focus-shadow) !important;
}

/* Standard image links - apply to link element (modern browsers) */
a:has(img):focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
    box-shadow: var(--focus-shadow) !important;
}

/* Fallback for browsers that don't support :has() - apply to image */
a:focus img {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
}

/* Direct image links (not in .bt_bb_image wrapper) - apply to image */
a[href]:focus > img {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
}

/* Specific selector for btLazyLoadImage class */
a:focus > img.btLazyLoadImage,
a:focus > img.btLazyLoaded {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset) !important;
}

/* ============================================
   ICONS AND ICON LINKS
   ============================================ */

/* Bold Builder icons */
.bt_bb_icon a:focus,
.bt_bb_icon_holder:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
}

/* Social media icons */
/* Note: Using white dotted outline for dark icon backgrounds */
.bt_bb_icon a[href*="facebook"]:focus,
.bt_bb_icon a[href*="instagram"]:focus,
.bt_bb_icon a[href*="twitter"]:focus,
.bt_bb_icon a[href*="linkedin"]:focus {
    outline: 2px dotted #ffffff;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.3);
}

/* ============================================
   MODAL AND POPUP ELEMENTS
   ============================================ */

/* Magnific Popup close button */
.mfp-close:focus {
    outline: 2px dotted #ffffff !important;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Magnific Popup arrows */
.mfp-arrow:focus {
    outline: 2px dotted #ffffff !important;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Cookie banner buttons */
.rcb-sc-link:focus,
#rcb-sc-link-change:focus,
#rcb-sc-link-history:focus,
#rcb-sc-link-revoke:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
    outline-offset: var(--focus-outline-offset);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ============================================
   GOOGLE MAPS CONTROLS
   ============================================ */

/* Google Maps buttons */
.gm-control-active:focus {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary) !important;
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-shadow);
}

/* ============================================
   SKIP LINKS (for screen readers)
   ============================================ */

/* Skip to content link - should be visible on focus */
.skip-link:focus,
a.skip-link:focus {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100000;
    padding: 10px 15px;
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    outline: 2px dotted #000000;
    outline-offset: -3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

/* Ensure focus is visible in Windows High Contrast Mode */
@media (prefers-contrast: high) {
    *:focus {
        outline: 3px dotted;
        outline-offset: 2px;
    }
}

/* ============================================
   FOCUS-VISIBLE (Modern browsers)
   ============================================ */

/* Use :focus-visible for better UX - only show focus on keyboard navigation */
/* This is progressive enhancement - older browsers will use :focus */
@supports selector(:focus-visible) {
    /* Remove focus styles for mouse users */
    *:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }
    
    /* Apply focus styles only for keyboard users */
    *:focus-visible {
        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
        outline-offset: var(--focus-outline-offset);
    }
    
    a:focus-visible {
        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
        outline-offset: var(--focus-outline-offset);
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
    
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
        outline-offset: var(--focus-outline-offset);
    }

    /* Image links - keyboard focus only */
    .bt_bb_image a:focus-visible,
    .bt_bb_image a:focus-visible img,
    a:has(img):focus-visible,
    a:focus-visible img,
    a[href]:focus-visible > img {
        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-primary);
        outline-offset: var(--focus-outline-offset);
    }

    .bt_bb_image a:focus-visible,
    a:has(img):focus-visible {
        box-shadow: var(--focus-shadow);
    }
}



.bt-site-footer .bt_bb_icon a:hover {
    outline: 1px solid #000;
    outline-offset: var(--focus-outline-offset);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(0, 0, 0, 0.3);
}
.bt-site-footer a:hover {
    text-decoration: underline;
}

.link-underline a {
    text-decoration: underline !important;
}