/*
Theme Name: Childy Child
Template: childy
Version: 1.0.0
*/

/* ========================================
   Global color variables
======================================== */
:root {
    --color-black: #000;
    --color-white: #fff;
    --color-light-grey: #f2f1f2;

    --color-blue: #00AFCC;
    --color-green: #ADCA3C;
    --color-yellow: #FFCF51;
    --color-orange: #F39645;
    --color-magenta: #F15771;
    --color-darkred: #CD0254;
}

/* ========================================
   Typography
======================================== */
nav a {
    font-family: 'nivea_otf' !important;
}


/* ========================================
   Footer
======================================== */

.footer-link-group {
    margin-left: unset !important;
}

/* Remove wiggle + underline effect */
.footer_wrap .custom_links_list_item_link {
    margin: 0 !important;
}

.footer_wrap .custom_links_list_item_title::before,
.footer_wrap .custom_links_list_item_title::after {
    content: none !important;
}

/* ========================================
   Custom lists
======================================== */
.list-custom {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}
.list-custom li {
    position: relative;
}

.list-custom li::before {
    content: "➲";
    position: absolute;
    left: -1.2em;
    color: var(--list-color, var(--color-darkred));
}

/* List color variants */
.list-darkred {
    --list-color: var(--color-darkred);
}

.list-magenta {
    --list-color: var(--color-magenta);
}

.list-orange {
    --list-color: var(--color-orange);
}

.list-green {
    --list-color: var(--color-green);
}

.list-blue {
    --list-color: var(--color-blue);
}

.list-yellow {
    --list-color: var(--color-yellow);
}

/* ========================================
   Menu item colors (shared desktop + mobile)
======================================== */
#menu-item-143,
.menu_mobile_nav .menu-item-143 {
    --menu-hover-color: var(--color-blue);
}

#menu-item-489,
.menu_mobile_nav .menu-item-489 {
    --menu-hover-color: var(--color-green);
}

#menu-item-509,
.menu_mobile_nav .menu-item-509 {
    --menu-hover-color: var(--color-yellow);
}

#menu-item-317,
.menu_mobile_nav .menu-item-317 {
    --menu-hover-color: var(--color-orange);
}

#menu-item-526,
.menu_mobile_nav .menu-item-526 {
    --menu-hover-color: var(--color-magenta);
}

#menu-item-536,
.menu_mobile_nav .menu-item-536 {
    --menu-hover-color: var(--color-darkred);
}

/* ========================================
   Desktop navigation
======================================== */

/* Default top-level menu color */
#menu_main > li > a,
#menu_main > li > a span {
    color: var(--color-black) !important;
    transition: color 0.25s ease;
}

/* Hover / active / current states */
#menu_main > li:hover > a,
#menu_main > li:hover > a span,
#menu_main > li.current-menu-item > a,
#menu_main > li.current-menu-item > a span,
#menu_main > li.current-menu-parent > a,
#menu_main > li.current-menu-parent > a span,
#menu_main > li.current-menu-ancestor > a,
#menu_main > li.current-menu-ancestor > a span {
    color: var(--menu-hover-color, var(--color-black)) !important;
}

/* Submenu background = lighter shade of parent color */
#menu_main > li > .sub-menu {
    background-color: color-mix(in srgb, var(--menu-hover-color) 30%, white 70%);
}

/* Submenu text */
#menu_main .sub-menu a,
#menu_main .sub-menu a span {
    color: var(--color-black) !important;
}

/* ========================================
   Mobile menu
======================================== */

/* Light fullscreen overlay */
.menu_mobile.menu_mobile_fullscreen,
.menu_mobile.menu_mobile_fullscreen .menu_mobile_inner {
    background-color: var(--color-light-grey) !important;
}

/* Keep inner wrappers transparent */
.menu_mobile .menu_mobile_content_wrap,
.menu_mobile .menu_mobile_content_wrap_inner,
.menu_mobile .menu_mobile_header_wrap,
.menu_mobile .menu_mobile_widgets_area {
    background: transparent !important;
}

/* Default mobile top-level text */
.menu_mobile_nav > li > a,
.menu_mobile_nav > li > a span {
    color: var(--color-black) !important;
    transition: color 0.25s ease;
}

/* Colored mobile top-level items */
.menu_mobile_nav > li > a,
.menu_mobile_nav > li > a span {
    color: var(--menu-hover-color, var(--color-black)) !important;
}

/* Mobile submenu text + arrows */
.menu_mobile_nav .sub-menu a,
.menu_mobile_nav .sub-menu a span,
.menu_mobile_nav .open_child_menu {
    color: var(--color-black) !important;
}

/* Hide "close"-label on mobile */
.menu_button_close_text {
    display: none;
}

.menu_button_close_icon {
    color: black !important;
}

/* ========================================
   Contact Form
======================================== */
.wpcf7-submit-style {
    margin-top: 20px !important;
}

/* Hide E-Mail on Teams Single Page */
.team_member_details_email, .team_member_details {
    display: none !important;
}
.page_contact_form.team_page_form{
    float: left !important;
}

/*div.button_orange > p > span.wpcf7-submit-style > .wpcf7-form-control.wpcf7-submit.has-spinner {*/
/*    background-color: var(--color-orange) !important;*/
/*}*/