/*

Theme Name: Zebra Site

Version: 1.0

Description: Divi Child Theme for Rare Disease Advocacy

Author: Ben Forred

Template: Divi

Author URL: https://zebrasitestudios.com

*/


/*-------My Theme Customizations------- */





/* ----- Color Presets ----- */

/* INSTRUCTIONS: UPDATE COLORS BELOW TO MATCH CLIENT BRAND GUIDELINES */

/* ELEMENT STYLES ACROSS THE SITE WILL UPDATE WITH PROPER CLASSES */

/* Classes: 

        Dynamic Font Sizes: .fwd-font-size <-- Assign to all text modules

        2-column Layout Width: .fwd-zebra-col <-- Assign to columns

        Consistent Margins Between Sections: .fwd-col-mar-top <-- Assign to columns

        Button Styles: .fwd-btn  <-- Assign to all button modules

*/


/* ------ Keyboard Focus ------ */



*:focus-visible {

    outline: 0.4rem solid var(--accent-color);

    z-index: 99999999999 !important;

}



/* ------ Skip Link ------ */



.skip-link {

    position: absolute !important;

    top: -6rem !important;

    left: 0;

    background-color: var(--base-color);

    color: var(--accent-color) !important;

    padding: 1rem;

    text-align: center;

    z-index: 1000;

    transition: top 0.3s ease-in-out;

}

.skip-link:focus-visible {
    top: 5rem !important;
    transition: top 300ms ease-in-out;
}

        



/* ------ Element Styles ------ */

 

.icon-color {

    color: var(--secondary-color);

}



.icon-size .et_pb_icon_wrap .et-pb-icon {

    font-size: clamp(9.5rem, calc(9.5rem + ((1vw - 0.32rem) * 6.7308)), 15rem) !important;

    min-height: 0vw;

  }





/* =============== ACCESSIBILITY MENU ================= */

@media screen and (max-width: 981px) {
    #accessibility_menu_container {
        transform: translateY(-118%) !important;
    }
}


/* Row ID: 'accessibility_menu_container' */

/* Menu Module ID: 'accessibility_menu' 

   Menu Module Class: 'accessibility-menu'*/



ul#menu-accessibility-menu {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 1.5rem;

}



.et_pb_menu .et_pb_menu__wrap {

    border: 1px solid var(--text-color);

    padding: 0rem 0.5rem 1.5rem 0.5rem;

    border-radius: 10px;

    background-color: var(--secondary-color);

}



div#accessibility_menu {

    margin-left: -150%;

    transition: margin-left 300ms ease;

}



div#accessibility_menu.access-expanded {

    margin-left: -20% !important;

    transition: margin-left 300ms ease;

}



#accessibility_icon {

    color: var(--secondary-color);

    cursor: pointer;

}



#accessibility_icon:hover {

    transform: scale(1.1);

}



button.new-access-icon-btn {

    border: none;

    background: transparent;

    cursor: pointer;

}



button.new-access-icon-btn svg {

    max-width: 3rem;

}



button.new-access-icon-btn svg:hover {

    transform: scale(1.25);

}



button.new-access-icon-btn svg path {

    fill: var(--primary-color);

}







/* ----- Dark Mode/Light Mode Toggle ------ */



body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header {

    top: 83.25px;

}



body.et_fixed_nav.et_secondary_nav_enabled #main-header {

    top: 51.25px;

}



.et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container {

    padding-top: 131px;

}



button.zss-dk-btn.fwd-font-size.is-focusable.accessibility-button.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-811 {

    background: transparent;

    border: none;

}



li#dark-mode-toggle_desktop_0 svg:hover {

    cursor: pointer;

}



/* ---------- DARK MODE BUTTON ANIMATION --------- */



    @keyframes spin {

        from {

            transform: rotate(0deg);

        }

        to {

            transform: rotate(360deg);

        }

    }



    .spin-animation {

        animation: spin 500ms ease;

    }





/*  --------- DARK MODE STYLING -------- */



html, body, .et_pb_section {

    background-color: var(--base-color) !important;

    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease !important;

}



.btn-color {

    background-color: var(--accent-color);

}



body {

    margin-top: 0 !important;

    padding-top: 0 !important;

}



/* style 'button' created for ARIA labeling */

button.new-dark-mode-btn {

    border: none;

    background: transparent;

}



.new-dark-mode-btn>svg {

    background-color: transparent;

    border: 1px solid transparent;

    border-radius: 50%;

    padding: 1rem;

    max-width: 5rem;

    max-height: 5rem;

}





/* ------ Grayscale Button ------ */



.new-grayscale-btn {

    max-width: 2rem !important;

    max-height: 2rem !important;

    margin-left: -3rem;

    margin-top: -2rem;

    margin-bottom: 2rem;

    background-color: transparent;

    border: transparent;

}



.new-grayscale-btn:hover {

    cursor: pointer;

}



.new-grayscale-btn svg {

    max-width: 2.5rem;

    max-height: 2.5rem;

    margin-left: 1rem;

}



body {

    overflow-x: hidden;

}



html.gray-scale {

    -moz-filter: grayscale(100%);

    -webkit-filter: grayscale(100%);

    filter: gray; 

    filter: grayscale(100%);

}



html.gray-scale :focus-visible {

    -moz-filter: none !important;

    -webkit-filter: none !important;

    filter: none !important;

}







/* =============New Button with ARIA============ */



.new-font-enlarge-btn {

    background: transparent;

    border: none;

    max-width: 2rem;

    max-height: 2rem;

    margin-left: -5rem;

    margin-top: -1rem;

}



.new-font-enlarge-btn>svg {

    margin-top: -1rem;

    max-width: 2.5rem;

    max-height: 2.5rem;

    margin-left: 3rem;

    cursor: pointer;

}







/* ----ACCESSIBILITY MENU RESPONSIVENESS---- */



@media screen and (max-width: 980px) {

    div#accessibility_menu_container .et_mobile_nav_menu {

        display: none;

    }



    .et_pb_menu .et_pb_menu__menu {

        display: block;

        max-width: 2rem;

    }



    ul#menu-accessibility-menu {

        margin-left: -2.5rem;

    }



}

    



/* ----- Button Animation (Enlarge Text) ------ */



    @keyframes wiggle {

        0% { transform: rotate(0deg);}

        25% { transform: rotate(-20deg);}

        50% { transform: rotate(20deg);}

        75% { transform: rotate(-20deg);}

        100% { transform: rotate(0deg);}

    }



    .wiggle {

        animation: wiggle 0.5s ease-in-out;

    }



/* ------ Enlarged Font Styles ------ */



    /* SEE ABOVE IN FONT SIZING PRESETS */