/*
 * =======================================================================================
 *
 *	Theme Name:   MHL-Law
 *	Theme URI:    http://www.mhl-law.de
 *
 *	Description:  MHL-Law - Rechtsberatung & Steuerberatung, national und international.
 *
 *	Author:       INTERPAGE
 *	Author URI:   http://www.interpage.de
 *
 *	Version:      1.0
 *
 *	Date created:	23/05/2023
 *	Last modified:	06/06/2023 (rz)
 *
 * =======================================================================================
 */





/*######################################################################################*/
/*	NORMAL (DESKTOP) VIEW
/*######################################################################################*/


/*======================================================================================*/
/*	General
/*======================================================================================*/

* {
    margin: 0;
    padding: 0;
}

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

body {
    padding: 0;
    height: 100%;
    margin: 0px auto;
    background: #fff;
}


/*======================================================================================*/
/*	Fonts  
/*======================================================================================*/

/* noto-serif-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: url('/fonts/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
src: url('/fonts/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('/fonts/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
/* noto-serif-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Serif';
font-style: italic;
font-weight: 400;
src: url('/fonts/noto-serif-v21-latin-italic.eot'); /* IE9 Compat Modes */
src: url('/fonts/noto-serif-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/noto-serif-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/noto-serif-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
        url('/fonts/noto-serif-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/noto-serif-v21-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
/* noto-serif-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: url('/fonts/noto-serif-v21-latin-700.eot'); /* IE9 Compat Modes */
src: url('/fonts/noto-serif-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/noto-serif-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/noto-serif-v21-latin-700.woff') format('woff'), /* Modern Browsers */
        url('/fonts/noto-serif-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/noto-serif-v21-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
/* noto-serif-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Serif';
font-style: italic;
font-weight: 700;
src: url('/fonts/noto-serif-v21-latin-700italic.eot'); /* IE9 Compat Modes */
src: url('/fonts/noto-serif-v21-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/noto-serif-v21-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/noto-serif-v21-latin-700italic.woff') format('woff'), /* Modern Browsers */
        url('/fonts/noto-serif-v21-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/noto-serif-v21-latin-700italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}


/*======================================================================================*/
/*	Text Formats  
/*======================================================================================*/

/* Headlines */
/* see theme.json file */

/* Paragraphs */
p {margin: 20px 0 20px 0;}

/* Bold Font */
b,strong {font-weight: 700;}

/* Hyperlinks */
/* see theme.json file */

/* Text aligns */
.text-left, .has-text-align-left {text-align: left;}
.text-center, .has-text-align-center {text-align: center;}
.text-right, .has-text-align-right {text-align: right;}

/* Text selection */
::selection {background: #E8EEEA; color: #497157;}
::-moz-selection { background: #E8EEEA; color: #497157;}

/* Lists */
main ul {
    list-style: square;
    margin-top: 20px;
    margin-bottom: 20px;
}

main ol {
    margin-top: 20px;
    margin-bottom: 20px;
}

main ul ol,
main ol ul,
main ul ul,
main ol ol {
    margin: 10px 0 10px 0;
}

    main li {
        margin: 5px 0 5px 20px;
    }

/* Marked text */
mark {
    width: auto;
}

/* Codes */
code {
    width: auto;
}

/* Keyboard entry */
kbd {
    width: auto;
}

/* Tables */
table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

    thead, tbody {
        border: none !important;
    }

        tr {vertical-align: middle;}
        
            td {padding: 0;}

/* Buttons Block */
.wp-block-buttons {
    margin: 20px 0 20px 0;
}

    a.wp-block-button__link {
        transition: all ease 0.4s;
    }

    a.wp-block-button__link:hover {
        transform: scale(1.05);
    }

/* --- Horizont ruler --- */
hr,
hr.wp-block-separator {
    width: 100%;
    padding: 0;
    height: 1px;
    border: 0 !important;
    background: #252525;
    margin: 40px auto 40px auto;
}

hr.wp-block-separator.is-style-wide {
    width: 100%;
}

hr.wp-block-separator.alignfull {
    width: 100vw;
}

/* Image links */
a img {
    border: none;
    transition: all ease 0.4s;
}

a img:hover {
    opacity: 0.75;
}


/* Image Captions */
.wp-caption .wp-caption-text {
    width: 100%;
}


/* Image Gallery */
.gallery {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

    .gallery-item {
        margin: 0 !important
    }

        .gallery img {
            width: 98%;
            height: 98%;
            display: block;
            margin: 0 auto 2% auto;
            border: none !important;
        }

        .gallery-caption {
            margin: 0 0 10px 0;
        }


/* Videos */
.is-type-video .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

    .is-type-video .wp-block-embed__wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


/*======================================================================================*/
/*	Forms
/*======================================================================================*/

form {
    margin: 0;
    padding: 0;    
}

    fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }
    
        legend {display: none;}
        
        label  {display: block;}
        
        
        /* Input fields */
        select,
        textarea,
        input[type=tel],
        input[type=text],
        input[type=file],
        input[type=date],
        input[type=email],
        input[type=search],
        input[type=number],
        input[type=password] {
            outline: none;
        }
        
        select {}
        
        textarea {}

        input[type=radio],
        input[type=checkbox] {
            
        }        
        
        select:focus,
        textarea:focus,
        input[type=tel]:focus,
        input[type=text]:focus,
        input[type=file]:focus,
        input[type=date]:focus,
        input[type=email]:focus,
        input[type=search]:focus,
        input[type=number]:focus,
        input[type=password]:focus {
            
        }
        
        /* Buttons */
        input[type=submit],
        button[type=submit] {
            
        }
        
        input[type=submit]:hover,
        button[type=submit]:hover {
            
        }
        
        input[type=submit]:active,
        button[type=submit]:active {
            outline: none;
        }



/*======================================================================================*/
/*	Site Structure
/*======================================================================================*/

/*  Header Area ------------------------------------------------------------------------*/

header {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100px;
    background: #FFF;
}

    #header-content {
        position: relative;
        width: 90%;
        height: 100%;
        margin: 0 auto;
        max-width: 1280px;

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

        #mobile-menu {
            display: none;
        }

        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 {
                    position: relative;
                    width: auto;
                    height: 100%;
                    margin: 0 20px 0 0;
                    border-top: 3px solid transparent;
                    
                    display: flex;
                    align-items: center;
                }

                nav#main-menu ul li.wpml-ls-item {
                    margin: 0;
                }

                nav#main-menu ul li.wpml-ls-first-item {
                    margin: 0 0 0 20px;
                }

                nav#main-menu ul li.current-menu-item,
                nav#main-menu ul li.current-menu-ancestor,
                nav#main-menu ul li.current_page_parent,
                nav#main-menu ul li.current_page_ancestor,
                nav#main-menu ul li.wpml-ls-current-language {
                    border-top: 3px solid #497157;
                }

                    nav#main-menu ul li a {
                        margin: 0;
                        width: auto;
                        display: block;
                        min-height: 55px;
                        padding: 5px 10px 5px 10px;
                        transition: all ease 0.4s;

                        color: #252525;
                        font-size: 0.875rem;
                        text-decoration: none;
                    }

                    nav#main-menu ul li:hover a {
                        background: #E8EEEA;
                    }

                    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,
                    nav#main-menu ul li.wpml-ls-current-language > a {
                        color: #497157;
                    }

            /* 2nd Level */
            nav#main-menu ul li ul {
                position: absolute;
                top: 78px;
                height: auto;
                width: 100%;
                display: none;
                background: #E8EEEA;
                padding: 10px 0 10px 0;
                border: 1px solid #EEE;
            }

            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.current-menu-item ul li,
                nav#main-menu ul li.current-menu-ancestor ul li,
                nav#main-menu ul li.current_page_parent ul li,
                nav#main-menu ul li.current_page_ancestor ul li {
                    border: none;
                }

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

                    nav#main-menu ul li ul li a {
                        margin: 0;
                        height: auto;
                        min-height: 0;
                    }

                    nav#main-menu ul li ul li a:hover {
                        color: #497157;
                    }

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

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


/*  Breadcrumbs Area -------------------------------------------------------------------*/

nav.rank-math-breadcrumb {
    position: relative;
    z-index: 5;
    top: 100px;
    width: 90%;
    margin: 0 auto;
    max-width: 1280px;
    background: #E8EEEA;

    color: #497157;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
}

    nav.rank-math-breadcrumb p {
        width: calc(100% - 20px);
        margin: 0;
        padding: 10px;
    }

        nav.rank-math-breadcrumb p a {
            color: #497157;
            text-decoration: none;
        }

        nav.rank-math-breadcrumb p a:hover {
            text-decoration: underline;
        }


/*  Main Content Area ------------------------------------------------------------------*/

main {
    position: relative;
    width: 90%;
    padding: 160px 5vw 60px 5vw;

    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;}
}


    /* ----- Gutenberg Widths ----- */

    /* Normal width */
    main > *,
    footer > * {
        max-width: 1024px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Wide width */
    .alignwide {
        max-width: 1280px;
        margin: 0 auto;
    }

    /* Full width */
    .alignfull {
        max-width: none;
        margin-left: calc(-1 * 5vw) !important;
        margin-right: calc(-1 * 5vw) !important;
    }

    main .alignfull:first-child {
        margin-top: -60px !important;
    }

    main .alignfull:last-child {
        margin-bottom: -60px !important;
    }


    /* ----- Gutenberg Blocks ----- */

    /* Columns Block */
    .wp-block-columns {
        gap: 2.8rem !important;
    }

    .wp-block-columns + .wp-block-columns {
        margin-block-start: 2.8rem;
    }

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

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

    .wp-block-media-text.has-background .wp-block-media-text__content {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* Code Block */
    .wp-block-code {
        padding: 20px;
        background: #E5E5E5;
        border-radius: 6px;
    }

    /* Code Block */
    .wp-block-code {
        padding: 20px;
        background: #E5E5E5;
        border-radius: 10px;
        margin: 20px 0 20px 0;
    }

    /* File Block */
    .wp-block-file {
        font-size: clamp(0.875rem, 0.333vw + 0.75rem, 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: #497157;

        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%;
    }



/*  Footer Area ------------------------------------------------------------------------*/

footer {
    position: relative;
    width: 90%;
    padding: 0 5vw 0 5vw;
}


/*######################################################################################*/
/*	BREAKPOINT (@ 1280 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 1280px) { 
    
/*  Header Area ------------------------------------------------------------------------*/

nav#main-menu ul li {
    margin: 0;
}

#logo {
    max-width: 240px;
}
    
} /* <--- END MEDIA */




/*######################################################################################*/
/*	BREAKPOINT (@ 1024 Pixel)
/*######################################################################################*/

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

header {
    height: 60px;
}

    #header-content {
        width: 100%;
    }

        #mobile-menu {
            position: relative;
            width: 24px;
            height: 24px;
            display: block;
            cursor: pointer;
            margin: 0 0 0 5%;
            transition: all ease 0.4s;
            background: url(img/icon-menu.svg) no-repeat;
            background-size: 100% 100% !important;
        }

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

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

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

                nav#main-menu ul li {
                    width: 100%;
                    height: auto;
                    display: block;
                    border-top: none;
                    border-bottom: 1px solid #FFF;
                }

                nav#main-menu ul li.wpml-ls-item,
                nav#main-menu ul li.wpml-ls-first-item {
                    display: inline;
                    border: none;
                    margin: 0;
                }

                nav#main-menu ul li.current-menu-item,
                nav#main-menu ul li.current-menu-ancestor,
                nav#main-menu ul li.current_page_parent,
                nav#main-menu ul li.current_page_ancestor {
                    border-top: none;
                }

                    nav#main-menu ul li a {
                        height: auto;
                        min-height: 0;
                        padding: 14px 5% 14px 5%;
                    }

                    nav#main-menu ul li.wpml-ls-item a {
                        display: inline-block;
                        padding: 14px 5px 14px 5px;
                    }

                    nav#main-menu ul li.wpml-ls-first-item a {
                        padding: 14px 5px 14px 5%;
                    }

                    nav#main-menu ul li a.has-sub:after {
                        position: relative;
                        float: right;
                        content: "↓";
                        margin: 0 0 0 5px;
                    }

                    nav#main-menu ul li a.has-sub.sub-open:after {
                        content: "↑"
                    }

                    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,
                    nav#main-menu ul li.wpml-ls-current-language > a {
                        font-weight: 700;
                    }

            /* 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;
                margin: 0 0 15px 0;
            }

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

                nav#main-menu ul li ul li {
                    border: none;
                }

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

                        nav#main-menu ul li ul li a {
                            width: 87%;
                            padding: 8px 5% 8px 8%;
                        }

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


/*  Breadcrumbs Area -------------------------------------------------------------------*/

nav.rank-math-breadcrumb {
    top: 60px;
}


/*  Main Content Area ------------------------------------------------------------------*/

main {
    padding: 80px 5vw 60px 5vw;
}

} /* <--- END MEDIA */




/*######################################################################################*/
/*	BREAKPOINT (@ 600 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 600px) { 
    
/*  Header Area ------------------------------------------------------------------------*/


/*  Cover Images Area ------------------------------------------------------------------*/


/*  Main Content Area ------------------------------------------------------------------*/

/* Media and Text Block */

.wp-block-media-text .wp-block-media-text__content {
    padding: 20px 0 0 0 !important;
}

.wp-block-media-text.has-background .wp-block-media-text__content {
    padding: 20px 5% 0 5% !important;
}

.wp-block-media-text.alignfull .wp-block-media-text__content {
    padding: 40px 5% 20px 5% !important;
}


/*  Footer Area ------------------------------------------------------------------------*/    
    
} /* <--- END MEDIA */