/*!
Theme Name: Divi Child
Theme URI: https://www.elegantthemes.com/gallery/divi/
Description: Divi Child Theme with WCAG-compliant color contrast fixes
Author: Your Name
Author URI: https://www.elegantthemes.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: divi-child
*/

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */

:root {
    /* Brand Colors */
    --color-primary: #2A7864;           /* Accessible teal - 5.4:1 contrast with white (WCAG AA compliant) */
    --color-primary-transparent: rgba(42, 120, 100, 0.3); /* Semi-transparent primary for focus states */

    /* Base Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --dark-text: #404041;

    /* Focus State Settings */
    --outline-width-thin: 2px;          /* For navigation and links */
    --outline-width-medium: 3px;        /* For buttons and interactive elements */
    --outline-offset: 2px;              /* Standard offset for focus outlines */
}

/* Text colors */
#et_search_icon:hover,
.mobile_menu_bar:before,
.mobile_menu_bar:after,
.et_toggle_slide_menu:after,
.et-social-icon a:hover,
.et_pb_sum,
.et_pb_pricing li a,
.et_pb_pricing_table_button,
.et_overlay:before,
.entry-summary p.price ins,
.et_pb_member_social_links a:hover,
.et_pb_widget li a:hover,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active,
.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active,
.et_pb_gallery .et_pb_gallery_pagination ul li a.active,
.wp-pagenavi span.current,
.wp-pagenavi a:hover,
.nav-single a,
.tagged_as a,
.posted_in a {
    color: var(--color-primary) !important;
}

/* Button and form colors */
.et_pb_contact_submit,
.et_password_protected_form .et_submit_button,
.et_pb_bg_layout_light .et_pb_newsletter_button,
.comment-reply-link,
.form-submit .et_pb_button,
.et_pb_bg_layout_light .et_pb_promo_button,
.et_pb_bg_layout_light .et_pb_more_button,
.et_pb_contact p input[type="checkbox"]:checked+label i:before,
.et_pb_bg_layout_light.et_pb_module.et_pb_button {
    color: var(--color-primary) !important;
}

/* Footer widget headers */
.footer-widget h4,
#main-footer .footer-widget h4,
#main-footer .widget_block h1,
#main-footer .widget_block h2,
#main-footer .widget_block h3,
#main-footer .widget_block h4,
#main-footer .widget_block h5,
#main-footer .widget_block h6 {
    color: var(--color-primary) !important;
}

/* Border colors */
.et-search-form,
.nav li ul,
.et_mobile_menu,
.footer-widget li:before,
.et_pb_pricing li:before,
blockquote {
    border-color: var(--color-primary) !important;
}

.footer-widget li:before {
    border-color: var(--color-primary) !important;
}

/* Background colors - This is where the contrast ratio matters most */
.et_pb_counter_amount,
.et_pb_featured_table .et_pb_pricing_heading,
.et_quote_content,
.et_link_content,
.et_audio_content,
.et_pb_post_slider.et_pb_bg_layout_dark,
.et_slide_in_menu_container,
.et_pb_contact p input[type="radio"]:checked+label i:before {
    background-color: var(--color-primary) !important;
}



.et_pb_text_inner a, .et_pb_text_inner a span {
    color: var(--color-primary) !important;
    text-decoration: underline;

    &:hover {
        color: var(--dark-text) !important;
    }
}

.et_pb_fullwidth_header .header-content h1 {
    text-shadow: 0 0 10px #000;
}

.et_pb_blog_0 .et_pb_post div.post-content a.more-link {
    &:hover {
        color: var(--color-primary) !important;
    }
}

.et_pb_text_13, .et_pb_text_14, .et_pb_text_15, .et_pb_text_16, .et_pb_text_17 {
    & .et_pb_text_inner span {
        color: var(--dark-text) !important;
    }
}

/* Secondary navigation */
.et_secondary_nav_enabled #page-container #top-header {
    background-color: var(--color-primary) !important;
}


#et-main-area .et_pb_section_4.et_pb_section .et_pb_text_3 h5, #et-main-area .et_pb_section_4.et_pb_section .et_pb_text_4 h5, #et-main-area .et_pb_section_4.et_pb_section .et_pb_text_5 h5, #et-main-area .et_pb_section_4.et_pb_section .et_pb_text_6 h5, #et-main-area .et_pb_section_4.et_pb_section .et_pb_text_7 h5, #et-main-area .et_pb_section_4.et_pb_section .et_pb_text_8 h5 {
    color: var(--color-white) !important;
}


#main-content .et_pb_toggle {
    & .et_pb_toggle_title {
        color: var(--dark-text) !important;

        &:before {
            color: var(--dark-text) !important;
        }

        & .et_pb_toggle_content {
            color: var(--dark-text) !important;
        }
    }

    & .et_pb_toggle_content {
        color: var(--dark-text) !important;
    }
}

.page-id-136 .et_pb_section_11 .et_pb_text {
    color: var(--dark-text) !important;
}

.page-id-104 .et_pb_section_4 .et_pb_column .et_pb_text_inner {
    color: var(--color-black) !important;

    & h5,
    & span {
        color: var(--color-black) !important;
    }
}

.page-id-152 {
    & .et_pb_section_1.et_pb_section .et_pb_text {
        color: var(--dark-text) !important;
    }

    & .et_pb_section_7.et_pb_section h2 span,
    & .et_pb_section_9.et_pb_section h2 span {
        color: var(--dark-text) !important;
    }

}

#main-header #top-menu li.current-menu-item>a, #main-header #top-menu li.current_page_item>a {
    color: var(--color-primary) !important;
}

.wpml-ls-slot-8.wpml-ls-current-language, .wpml-ls-slot-8.wpml-ls-current-language a, .wpml-ls-slot-8.wpml-ls-current-language a:visited {
    color: var(--color-primary) !important;
}

.et_pb_blog_0 .et_pb_post div.post-content a.more-link {
    color: var(--color-primary) !important;
}




    /* WPML language switcher (if used) */
    .wpml-ls-current-language a {
        color: var(--color-primary) !important;
    }

    #page-container .et-fixed-header #top-menu .wpml-ls-current-language a {
        color: var(--color-primary) !important;
    }

    #et-main-area .et_pb_text_3 h5, #et-main-area .et_pb_text_4 h5, #et-main-area .et_pb_text_5 h5, #et-main-area .et_pb_text_6 h5, #et-main-area .et_pb_text_7 h5, #et-main-area .et_pb_text_8 h5 {
        color: var(--color-primary) !important;
    }

    /* ========================================
       ACCESSIBILITY IMPROVEMENTS
       ======================================== */

    /* Skip to Content Link */
    .skip-to-content {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 999999;
        padding: 1em 1.5em;
        background-color: var(--color-primary);
        color: var(--color-white) !important;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        line-height: 1;
    }

    .skip-to-content:focus {
        left: 0;
        top: 0;
        outline: var(--outline-width-medium) solid var(--color-black);
        outline-offset: var(--outline-offset);
    }

    /* ========================================
       VISIBLE FOCUS STATES (Browser Defaults)
       ======================================== */

    /* Remove all outline:none and ensure browser default focus is visible */
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus,
    .et_pb_button:focus,
    .et_pb_contact_submit:focus,
    .et_pb_newsletter_button:focus,
    .et_pb_promo_button:focus,
    .et_password_protected_form .et_submit_button:focus,
    [tabindex]:focus {
        outline: revert !important;
        outline-offset: var(--outline-offset) !important;
    }

    /* Ensure all interactive elements have visible focus */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    .et_pb_button:focus-visible,
    [role="button"]:focus-visible,
    [tabindex]:focus-visible {
        outline: auto !important;
        outline-offset: var(--outline-offset) !important;
    }

    /* Override any Divi styles that remove outlines */
    * {
        outline-color: revert !important;
    }

    *:focus {
        outline-style: auto !important;
        outline-width: medium !important;
    }

    /* Ensure form inputs have clear focus states */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    textarea:focus,
    select:focus {
        outline: auto !important;
        outline-offset: 0 !important;
        box-shadow: 0 0 0 var(--outline-width-thin) var(--color-primary-transparent) !important;
    }

    /* Ensure buttons have clear focus states */
    button:focus,
    .et_pb_button:focus,
    .et_pb_contact_submit:focus,
    input[type="submit"]:focus,
    input[type="button"]:focus,
    input[type="reset"]:focus {
        outline: var(--outline-width-medium) solid var(--color-black) !important;
        outline-offset: var(--outline-offset) !important;
    }

    /* Navigation links focus */
    #top-menu a:focus,
    .et_mobile_menu a:focus,
    #et-secondary-nav a:focus {
        outline: var(--outline-width-thin) solid var(--color-black) !important;
        outline-offset: var(--outline-offset) !important;
    }

    /* ========================================
       HEADING HIERARCHY FIX
       ======================================== */

    /* Style .et_pb_text_0 h4 to match h2 appearance for proper heading hierarchy */
    /* Note: The actual HTML tag should be changed to <h2> in the Divi Builder for semantic correctness */
    .et_pb_text_0 h4 {
        font-size: 2em !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0.67em 0 !important;
    }
}