/*!
Theme Name:   Francesca Child
Template:     francesca
Theme URI:    https://github.com/webmandesign/child-theme/
Author:       WebMan Design
Author URI:   https://www.webmandesign.eu/
Version:      1.0.0
Description:  You can change this description text in your child theme's "style.css" file.
License:      GNU General Public License v3
License URI:  http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*******************************************************************************************
* ELEMENTS
*******************************************************************************************/

/* FONTS */

/* Import Google Web Fonts. */
@import "css/fonts.css";

/* Add hyphens to titles and headings. */
h1,h2,h3,h4,h5,h6,
.page-header .page-summary,
.page-header .page-title {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

abbr,
acronym {
    border-color: #000;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: #e2f3fa;
    padding: 0 4px;
}

/* BUTTONS */

/* Changes outline color of WP buttons of theme's accent color in favor of accessibility. */
.wp-block-button__link:focus {
    /*outline-color: #333;*/
}

/* Header submit buttons, e.g. search form. */
.site-header-section [type=submit]:focus {
    outline-color: #333;
}

/* Header submit buttons on inverted header, e.g. search form. */
.has-header-variant-inverted .site-header-section [type=submit]:focus {
    outline-color: #fff;
}

/* Gutenberg cover block content using text shadow. */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6,
.wp-block-cover p,
.wp-block-cover cite {
    text-shadow: 0 0 4px #000;
    -webkit-font-smoothing: antialiased;
}

.button-border-dark {
    border: 1px solid #333;
    border-radius: 10px;
}

/*******************************************************************************************
* HEADER & NAVIGATION
*******************************************************************************************/

/* Main navigation text shadow without affecting sub menus. */
.has-header-variant-inverted .menu-primary > li > a {
    text-shadow: 0 0 4px #000;
    -webkit-font-smoothing: antialiased;
}

/* Remove any menu text shadow on mobile navigation. */
/*.has-navigation-mobile .menu-primary > li > a {*/
/*    text-shadow: none;*/
/*}*/

/* Underline navigation menu items on focus and hover. */
.menu-item a:focus,
.menu-item a:hover {
    text-decoration: underline;
}

/* Menu link hover background. */
.site .main-navigation .sub-menu li:focus-within:before,
.site .main-navigation .sub-menu li:hover:before {
    background: #009ddf;
}

/* Change focus outline color of button in inverted header. */
.has-header-variant-inverted .site-header-section .wp-block-button__link:focus {
    outline-color: #fff;
}

/* Remove the site title on hover upon logo in main navigation. */
.site-branding-text {
    display: none !important;
}

/* Menu color for custom page template. */
.custom-menu-color .site-header-section {
    background: #fff;
}

/* Menu color for custom inverted header page template. */
.custom-menu-color.has-header-variant-inverted .site-header-section {
    background: #333;
}

/**
 * Prevents mega menus from going outside of display bounds on desktop resolutions.
 *
 * Targeted are only the mega menu parent items so mega menu sub menus are not affected.
 *
 * Note:
 * Mega menu items are displayed centered under the menu parent item by default.
 * The percentage value for the offset is dependent on the actual mega menu content
 * and needs to be adjusted accordingly and case-wise.
 */
@media screen and (min-width: 1280px) {
    /* Kinder */
    #menu-item-885 > .sub-menu {
        left: 170%;
    }
    /* Jugendliche */
    #menu-item-860 > .sub-menu {
        /*left: 70%;*/
    }
}

/*******************************************************************************************
* LINKS
*******************************************************************************************/

a:hover,
a:focus {
    text-decoration: none;
}

/* Links within lists including Gutenberg list styles. */
.entry-content .is-style-default li a,
.entry-content .is-style-inline li > a:not(:hover):not(:focus),
.entry-content .is-style-inline-modern li > a:not(:hover):not(:focus),
.entry-content .is-style-border-inner > li > a:not(:hover):not(:focus) {
    text-decoration: underline !important;
    color: #135e87 !important;
}

.entry-content .is-style-default li a:focus,
.entry-content .is-style-default li a:hover,
.entry-content .is-style-inline li > a:focus,
.entry-content .is-style-inline li > a:hover,
.entry-content .is-style-inline-modern li > a:focus,
.entry-content .is-style-inline-modern li > a:hover,
.entry-content .is-style-border-inner > li > a:focus,
.entry-content .is-style-border-inner > li > a:hover {
    text-decoration: none !important;
    color: #135e87 !important;
}

/*******************************************************************************************
* FOOTER
*******************************************************************************************/

/* Underline footer menu items by default and on focus. */
footer a {
    text-decoration: underline;
    text-decoration-style: solid;
}

footer a:hover,
footer a:focus {
    text-decoration: none;
}

/* Underline footer menu list items by default and on hover. */
footer .is-style-inline li > a,
footer .is-style-inline-modern li > a {
    text-decoration: underline !important;
    text-decoration-style: solid !important;
    text-underline-offset: 0.25em;
}

footer .is-style-inline li > a:hover,
footer .is-style-inline-modern li > a:hover,
footer .is-style-inline li > a:focus,
footer .is-style-inline-modern li > a:focus {
    text-decoration: none !important;
}

/*******************************************************************************************
* RESPONSIVE
*******************************************************************************************/

@media (max-width: 1279px) {

    /* Remove text shadow on mobile navigation. */
    .has-navigation-mobile .main-navigation a {
        text-shadow: none !important;
    }

}

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

    /* Remove 'Group' gradient on responsive. */
    .has-split-to-right-gradient-background {
        background: #fff !important;
    }

}

/*******************************************************************************************
* PLUGINS
*******************************************************************************************/

/* CONTACT FORM 7. */

/* Input widths. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100% !important;
    background-color: #fafafa;
    padding: 0.6em 1em;
}

/* Checkboxes. */
.wpcf7-form input[type="checkbox"] {
    margin-right: 6px;
}

/* Checkbox labels. */
.wpcf7-list-item-label {
    font-weight: normal;
}

/* List items. */
.wpcf7-list-item {
    margin-left: 0;
}

/* Labels. */
.wpcf7-form label {
    font-weight: bold;
}

/* Custom required class. */
.field-required {
    color: #505050;
    font-weight: normal;
}

/* Validation error tip. */
.wpcf7-not-valid-tip {
    color: #9d1b1b;
    font-size: 0.8em;
    margin-top: 10px;
}

/* Field with validation error. */
.wpcf7-not-valid {
    border-color: #9d1b1b;
}

/* Response. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    background-color: #fff;
    color: #9d1b1b;
    border-color: #9d1b1b;
    border-radius: 3px;
    margin-left: 0;
}

/* GDPR Cookie Consent */

/* Accept all button. */
.cli-style-v2 .cli-bar-btn_container .cli-plugin-button {
    padding: 14px 40px;
    border-radius: 6px;
}

.cli-style-v2 .cli-bar-btn_container .cli-plugin-button:focus {
    outline-color: #135e87;
    outline-width: 2px;
    outline-style: dotted;
    outline-offset: 3px;
    text-decoration: underline;
}