/* ============================================================================
 * CaliNetworks Accessibility Remediation v4 - CSS Component
 * Site: jorgensenhr.com
 * Companion to accessibility-fixes.php
 *
 * v4 CSS is functionally identical to v3. If you already have v3 installed,
 * you do not need to update the CSS file. Only the PHP file changed in v4.
 * ============================================================================ */


/* ----------------------------------------------------------------------------
 * Fix 4: WCAG 2.2 Target Size (Minimum) - SC 2.5.8
 * ---------------------------------------------------------------------------- */

.et-pb-controllers {
    line-height: 1 !important;
    letter-spacing: 0 !important;
    font-size: 0 !important;
}

.et-pb-controllers a,
.et-pb-controllers a.et-pb-active-control {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    vertical-align: middle !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    line-height: 24px !important;
    cursor: pointer !important;
}

.et-pb-controllers a::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.et-pb-controllers a:hover::before {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.et-pb-controllers a.et-pb-active-control::before {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: translate(-50%, -50%) scale(1.3) !important;
}

.et-pb-controllers a:focus-visible::before {
    box-shadow: 0 0 0 2px #2c3e8a !important;
}


/* ----------------------------------------------------------------------------
 * Slider arrow focus & visibility
 * ---------------------------------------------------------------------------- */

.et-pb-arrow-prev:focus-visible,
.et-pb-arrow-next:focus-visible,
.et-pb-arrow-prev:focus,
.et-pb-arrow-next:focus {
    outline: 2px solid #2c3e8a !important;
    outline-offset: 2px !important;
}


/* ----------------------------------------------------------------------------
 * Form label accessible hiding (.label_none)
 * ---------------------------------------------------------------------------- */

.label_none,
form .label_none {
    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;
    display: block !important;
    visibility: visible !important;
}


/* ----------------------------------------------------------------------------
 * Form field improvements for keyboard users
 * ---------------------------------------------------------------------------- */

.wpcf7-form input[type="text"]:focus-visible,
.wpcf7-form input[type="tel"]:focus-visible,
.wpcf7-form input[type="email"]:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form input[type="checkbox"]:focus-visible,
.wpcf7-form input[type="submit"]:focus-visible {
    outline: 2px solid #2c3e8a !important;
    outline-offset: 2px !important;
}


/* ----------------------------------------------------------------------------
 * Site-wide visible focus indicators (WCAG 2.4.7)
 * ---------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #2c3e8a;
    outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
 * Screen-reader-only utility class
 * Used by H1 fallback, injected legends, and the CF7 hidden-fields legend.
 * ---------------------------------------------------------------------------- */

.cn-sr-only,
.cn-sr-only-h1 {
    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;
}