/* 
================================================================================

Theme Name:     Kanzlei Bodmeier
Theme URI:      http://www.kanzlei-bodmeier.de

Description:    

Author:         creativdrei Werbeagentur GmbH
Author URI:     http://www.creativdrei.de

Version:        1.0

Date created:	08/08/2024
Last modified:	29/08/2024

================================================================================
*/




/*============================================================================*/
/* ----- GENERAL ----- */
/*============================================================================*/

* {
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* for fixed headers */
}

body {
    margin: 0px auto;
    overflow-x: hidden;
}

    /* Text selection */
    ::selection {background: #000; color: #fff;}
    ::-moz-selection { background: #000; color: #fff;}

    /* Images */
    a img {border: none; transition: all ease 0.4s;}
    a img:hover {opacity: 0.75;}

    /* Headlines */
    h1, h2, h3 {
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto; 
    }


/*============================================================================*/
/* ----- TEMPLATE & THEME ----- */
/*============================================================================*/

/* ----- HEADER ----- */

header {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100px;
    background: var(--wp--preset--color--white);
    border-bottom: 1px solid #F5F5F5;
}

    #header-container {
        position: relative;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        max-width: var(--wp--style--global--wide-size);

        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

        #logo {
            width: 100%;
            height: auto;
            max-width: 160px;
        }

            #logo img {
                width: 100%;
                height: auto;
                display: block;
            }

        nav#main-menu {
            width: auto;
            height: 100%;
        }

            /* 1st Level */
            nav#main-menu ul {
                width: 100%;
                height: 100%;
                list-style: none;

                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }

                nav#main-menu ul li {
                    width: auto;
                    height: 100%;
                    
                    display: flex;
                    align-items: center;
                }

                    /* Normal Menu Link */
                    nav#main-menu ul li a {
                        width: auto;
                        display: block;
                        padding: 0;
                        margin: 2.5rem 1.563rem 0 1.563rem;
                        transition: all ease 0.4s;

                        font-weight: 500;
                        line-height: 1.4;
                        letter-spacing: 1px;
                        text-decoration: none;
                        color: var(--wp--preset--color--black);
                        font-size: 0.875rem;
                    }

                    nav#main-menu ul li a:after {
                        position: relative;
                        content: "";
                        width: 75%;
                        height: 3px;
                        display: block;
                        margin: 3px auto 0 auto;
                        background: transparent;
                        transition: all ease 0.4s;
                    }

                    nav#main-menu ul li a:hover {
                        text-decoration: none;
                        color: var(--wp--preset--color--gold);
                    }

                    nav#main-menu ul li a:hover:after {
                        background: var(--wp--preset--color--gold);
                    }

                    /* Button Link */
                    nav#main-menu ul li.button a {
                        text-transform: uppercase;
                        color: var(--wp--preset--color--white);

                        margin: 2rem 1.563rem 0 1.563rem;
                        padding: 0.625rem 1.563rem 0.625rem 1.563rem;
                        background: var(--wp--preset--color--royal-blue);
                        box-shadow: 0px 3px 6px #00000030;
                    }

                    nav#main-menu ul li.button a:hover {
                        background: var(--wp--preset--color--gold);
                    }

                    nav#main-menu ul li.button a:after {
                        display: none !important;
                    }

                    /* Active Status */
                    nav#main-menu ul li.current-menu-item > a,
                    nav#main-menu ul li.current-menu-ancestor > a,
                    nav#main-menu ul li.current_page_parent > a,
                    nav#main-menu ul li.current-page-ancestor > a {
                        color: var(--wp--preset--color--gold);
                    }

                    nav#main-menu ul li.button.current-menu-item > a,
                    nav#main-menu ul li.button.current-menu-ancestor > a,
                    nav#main-menu ul li.button.current_page_parent > a,
                    nav#main-menu ul li.button.current-page-ancestor > a {
                        color: var(--wp--preset--color--white);
                    }

            /* 2nd Level */
            nav#main-menu ul li ul {
                position: absolute;
                top: 100px;
                height: auto;
                width: auto;
                display: none;
                background: #fff;
                padding: 0.625rem 0 0.625rem 0;
                border: 1px solid #F5F5F5;
            }

            nav#main-menu ul li:hover ul {
                display: block;

                animation-name: menu-dd;
                animation-duration: 0.4s;
                animation-iteration-count: 1;
                animation-direction: alternate;
                animation-timing-function: ease-in-out;
                animation-fill-mode: forwards;            
            }

            @keyframes menu-dd {
                0%   {opacity: 0;}
                100% {opacity: 1;}
            }

                nav#main-menu ul li ul li {
                    width: 100%;
                }

                nav#main-menu ul li ul li.overview {
                    display: none;
                }

                    nav#main-menu ul li ul li a {
                        margin: 0;
                        height: auto;
                        padding: 0.625rem 1.563rem 0.625rem 1.563rem;
                    }

                    nav#main-menu ul li ul li a:after {
                        display: none;
                    }

        #menu-button {
            display: none;
        }


/* ----- MAIN CONTENT ----- */

main {
    position: relative;
    padding-top: 100px;

    animation-name: starting;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes starting {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

    .has-trans-stripes-gradient-background {
        background-position: center center !important;
        background-size: cover !important;
    }


/* ----- FOOTER ----- */

footer {
    position: relative;
}


/*============================================================================*/
/* ----- BLOCK ADJUSTMENTS ----- */
/*============================================================================*/

/* General */
.alignfull.has-global-padding {
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
}

.is-layout-constrained > :first-child,
.is-layout-flow > :first-child {
    margin-block-start: 0;  
}

.is-layout-constrained > :last-child,
.is-layout-flow > :last-child {
    margin-block-end: 0;  
}

/* Media/Text Block */
.wp-block-media-text .wp-block-media-text__content {
    padding: 0 0 0 8%;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding: 0 8% 0 0;
}

/* Cover Block */
.wp-block-cover {
    padding: 0;
}

    .wp-block-cover .wp-block-cover__background {
        mix-blend-mode: multiply;
    }

    .wp-block-cover.alignfull .wp-block-cover__inner-container {
        padding-left: var(--wp--style--root--padding-left);
        padding-right: var(--wp--style--root--padding-right);
    }

/* Teaser Boxes (Cover Block) */
.wp-block-cover.teaser-box {
    position: relative;
}

    .wp-block-cover.teaser-box .wp-block-cover__background {
        opacity: 1 !important;
        mix-blend-mode: multiply;
        transition: all ease 0.4s;
        background: linear-gradient(45deg, rgba(45,75,155,0.9) 0%, rgba(255,255,255,0) 100%) !important;
    }

    .wp-block-cover.teaser-box:hover .wp-block-cover__background {
        opacity: 0.8 !important;
        background: linear-gradient(45deg, rgba(45,75,155,1) 100%, rgba(255,255,255,0) 100%) !important;
    }

        .wp-block-cover.teaser-box .teaser-title:before,
        .wp-block-cover.teaser-box .teaser-title:after {
            content: "";
            display: block;
            width: 100px;
            height: 3px;
            margin: 10px auto;
            transition: all ease 0.4s;
            background: var(--wp--preset--color--white);
        }

        .wp-block-cover.teaser-box:hover .teaser-title:before {
            width: 50px;
        }

        .wp-block-cover.teaser-box:hover .teaser-title:after {
            width: 150px;
        }

            .wp-block-cover.teaser-box:hover .teaser-title a {
                text-decoration: none;
            }

            .wp-block-cover.teaser-box .teaser-title a:after {
                position:absolute;
                display:block;
                left:0;
                top:0;
                content:"";
                width:100%;
                height:100%;
            }

                .wp-block-cover.teaser-box .teaser-title a mark {
                    transition: all ease 0.4s;
                    display: block;
                }
        
                .wp-block-cover.teaser-box:hover .teaser-title a mark {
                    transform: scale(1.1);
                
                }


/* Buttons Block */
.wp-block-button .wp-block-button__link {
    transition: all ease 0.4s;
    box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-button.is-style-outline .wp-block-button__link.has-gold-color:hover {
    color: var(--wp--preset--color--white) !important;
    background: var(--wp--preset--color--gold) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-gold-color:hover {
    border: 2px solid var(--wp--preset--color--gold) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-royal-blue-color:hover {
    color: var(--wp--preset--color--white) !important;
    background: var(--wp--preset--color--royal-blue) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-royal-blue-color:hover {
    border: 2px solid var(--wp--preset--color--royal-blue) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:hover {
    color: var(--wp--preset--color--gold) !important;
    background: var(--wp--preset--color--white) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:hover {
    border: 2px solid var(--wp--preset--color--white) !important;
}


/* File Block */
.wp-block-file {
    font-size: 1rem !important; 
}

.wp-block-file a:first-child:before {
    position: relative;
    float: left;
    width: 32px;
    height: 32px;
    content: "";
    display: block;
    margin: -4px 6px 0 0;
    background-color: #000;

    mask: url(img/icon-download.svg) no-repeat;
    -webkit-mask: url(img/icon-download.svg) no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* List Block */
ul.wp-block-list.has-arrows {
    list-style: none;
    padding: 0;
}

    ul.wp-block-list.has-arrows li {
        padding: 0 0 0 48px;
        background: url(img/icon-arrow-right-b.svg) no-repeat;
        background-size: 32px 32px !important;
        background-position: left center !important;
    }

    ul.wp-block-list.has-arrows.has-white-color li {
        background: url(img/icon-arrow-right-w.svg) no-repeat;
    }

/* Quote Block */
.wp-block-quote {
    position: relative;
}

.wp-block-quote:before,
.wp-block-quote:after {
    position: absolute;
    display: inline;
    line-height: 0;
    color: var(--wp--preset--color--gold);
    font-size: clamp(6.25rem, 25vw + -6.25rem, 12.5rem);
    font-family: var(--wp--preset--font-family--radley);
}

.wp-block-quote:before {
    top: -20px;
    left: -90px;
    content: "\201E";
}

.wp-block-quote:after {
    bottom: 0;
    right: -90px;
    content: "\201C";
}

/* Carousel Slider (Plugin) */
.wp-block-cb-carousel .slick-slide {
    padding: 0 !important;
}

.wp-block-cb-carousel .slick-prev,
.wp-block-cb-carousel .slick-next {
    width: 48px !important;
    height: 48px !important;
    transition: all ease 0.4s;
}

.wp-block-cb-carousel .slick-next {
    right: -80px;
    background: url(img/icon-arrow-right-b.svg) no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
}

.wp-block-cb-carousel .slick-prev {
    left: -80px;
    background: url(img/icon-arrow-left-b.svg) no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
}

.wp-block-cb-carousel .slick-prev:hover,
.wp-block-cb-carousel .slick-next:hover {
    opacity: 0.5 !important;
}

.wp-block-cb-carousel .slick-prev:before,
.wp-block-cb-carousel .slick-next:before {
    display: none !important;
}


/*============================================================================*/
/* ----- BLOCK EDITOR ADJUSTMENTS ----- */
/*============================================================================*/

/* Seitentitel */
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper {
    font-size: 10px;
    margin: 0 !important;
    text-align: center;
    border-bottom: 1px solid #E0E0E0;
}

    .editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1 {
	    font-size: 1rem;
        line-height: 1.4;
        font-weight: 700;
        color: #252525;
	    font-style: none;
        text-transform: none;
        margin: 0 auto !important;
        padding: 10px 0 10px 0 !important;
        font-family: var(--wp--preset--font-family--system-font);
    }


/* Widgets */
.wp-block[data-type="core/widget-area"] {
    max-width: none;
}

    .blocks-widgets-container .editor-styles-wrapper {
        max-width: none;
    }


/*============================================================================*/
/* ----- FORMS ----- */
/*============================================================================*/

main form {
    margin: 0;
    padding: 0;    
}

    main fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }
    
        main legend {display: none;}
        
        main label  {
            display: block;
            font-weight: 500;
            font-size: var(--wp--preset--font-size--s);
        }
        
        main input,
        main select,
        main textarea {
            outline: none;
            width: 95%;
            background: var(--wp--preset--color--white);
            padding: 0.938rem 2.5% 0.938rem 2.5%;
            border: 1px solid var(--wp--preset--color--gold);

            color: var(--wp--preset--color--gold);
            font-size: var(--wp--preset--font-size--s);
            font-family: var(--wp--preset--font-family--roboto);
        }
        
        main select {
            width: 100%;
        }
        
        main textarea {
            height: 150px;
            overflow: auto;
        }

        main input[type=radio],
        main input[type=checkbox] {
            width: auto;
        }        
        
        main input:focus,
        main select:focus,
        main textarea:focus {
            color: var(--wp--preset--color--royal-blue);
            border: 1px solid var(--wp--preset--color--royal-blue);
        }
        
        /* Buttons */
        main input[type=submit],
        main button[type=submit] {
            width: auto;
            cursor: pointer;
            transition: all ease 0.4s;
        }
        
        main input[type=submit]:hover,
        main button[type=submit]:hover {
            color: var(--wp--preset--color--white);
            background: var(--wp--preset--color--gold);
        }
        
        main input[type=submit]:active,
        main button[type=submit]:active,
        main input[type=submit]:focus,
        main button[type=submit]:focus {
            outline: none;
            color: var(--wp--preset--color--gold);
            border: 1px solid var(--wp--preset--color--gold);
        }


/* Plugin adjustments: Contact Form 7 */

.wpcf7-list-item {
    margin-left: 0 !important;
}        

img.ajax-loader {
    width: 16px !important;
    height: auto !important;
}

.wpcf7 form .wpcf7-response-output {
    border: none !important;
    width: 95%;
    margin: 0 !important;
    padding: 10px 2.5% 10px 2.5% !important;

    color: #fff !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: green;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    background: red;
}

.wpcf7-not-valid-tip {
    color: red !important;
}


/*############################################################################*/
/* ----- BREAKPOINT @ 1024 Pixel ----- */
/*############################################################################*/

@media only screen and (max-width: 1024px) { 
    
/* ----- HEADER ----- */

header {
    height: 60px;
}

    #header-container {
        width: 100%;
    }

        #logo {
            max-width: 100px;
            margin: 0 0 0 5%;
        }

        nav#main-menu {
            position: absolute;
            top: 60px;
            width: 100%;
            height: auto;
            display: none;
            background: transparent;
        }

            /* 1st Level */
            nav#main-menu ul {
                margin: 0;
                padding: 0;
                height: auto;
                display: block;
                overflow-y: auto;
                height: calc(100vh - 60px);
            }

                nav#main-menu ul li {
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    height: auto;
                    display: block;
                    margin-bottom: 1px;
                    background: rgba(255, 255, 255, 0.9);
                }

                nav#main-menu ul li:first-child {
                    margin-top: 2px;
                }

                nav#main-menu ul li.button {
                    background: rgba(45, 75, 155, 0.9)
                }

                    nav#main-menu ul li a {
                        height: auto;
                        margin: 0;
                        text-align: center;
                        padding: 1rem 5% 1rem 5%;
                    }

                    nav#main-menu ul li a:after {
                        display: none !important;
                    }

                    nav#main-menu ul li.button a {
                        background: none;
                        box-shadow: none;
                        margin: 0;
                        padding: 1rem 5% 1rem 5%;
                    }

            /* 2nd Level */
            nav#main-menu ul li ul,
            nav#main-menu ul li:hover ul {
                position: relative;
                top: 0;
                padding: 0;
                width: 100%;
                display: none;
                border: none;
            }

            @keyframes menu-dd {
                0%   {opacity: 1;}
                100% {opacity: 1;}
            }

                nav#main-menu ul li ul li.overview {
                    display: block;
                }

                nav#main-menu ul li ul li:last-child {
                    border-bottom: none
                }

                    nav#main-menu ul li ul li a {
                        width: 88%;
                        padding: 10px 5% 10px 7%;
                    }

        #menu-button {
            position: relative;
            width: 20px;
            height: 20px;
            display: block;
            cursor: pointer;
            margin: 0 5% 0 0;
            background: var(--wp--preset--color--black);
            transition: all ease 0.4s;
            mask: url(img/icon-menu.svg) no-repeat;
            mask-size: 100% 100% !important;
            -webkit-mask: url(img/icon-menu.svg) no-repeat;
            -webkit-mask-size: 100% 100% !important;
        }

        #menu-button.is-open {
            transform: rotate(180deg);
            mask: url(img/icon-close.svg) no-repeat;
            -webkit-mask: url(img/icon-close.svg) no-repeat;
        }

/* ----- MAIN CONTENT ----- */

main {
    padding-top: 60px;
}

/* ----- BLOCK ADJUSTMENTS ----- */

/* Quote Block */
.wp-block-quote:before {
    left: 0px;
    top: -50px;
}

.wp-block-quote:after {
    right: 0;
    bottom: -40px;
}

/* Carousel Slider (Plugin) */
.wp-block-cb-carousel .slick-prev,
.wp-block-cb-carousel .slick-next {
    top: auto;
    bottom: -28px;
    width: 24px !important;
    height: 24px !important;
}

.wp-block-cb-carousel.alignfull .slick-prev,
.wp-block-cb-carousel.alignfull .slick-next {
    bottom: 50%;
}

.wp-block-cb-carousel .slick-next {
    right: 0;
}

.wp-block-cb-carousel .slick-prev {
    left: 0;
}


    
} /* <--- END OF BREAKPOINT */


/*############################################################################*/
/* ----- BREAKPOINT @ 600 Pixel ----- */
/*############################################################################*/

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

/* Media/Text Block */
.wp-block-media-text .wp-block-media-text__content {
    padding: 0;
} 

.wp-block-media-text.alignfull .wp-block-media-text__content,
.wp-block-media-text.has-background .wp-block-media-text__content {
    padding: 0 5% 0 5%;
}
    
} /* <--- END OF BREAKPOINT */