/*
Theme Name: Katen Child
Template: katen
Theme URI: https://themeforest.net/user/themeger/portfolio
Author: ThemeGer
Author URI: https://themeger.shop
Description: Minimal Blog & Magazine WordPress Theme
Template Version: 1.0
License: GNU General Public License
License URI: https://themeforest.net/licenses
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* national-park-200 - 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: 'National Park';
    font-style: normal;
    font-weight: 200;
    src: url('fonts/national-park-v3-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* national-park-300 - 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: 'National Park';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/national-park-v3-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* national-park-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: 'National Park';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/national-park-v3-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* national-park-500 - 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: 'National Park';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/national-park-v3-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* national-park-600 - 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: 'National Park';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/national-park-v3-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* national-park-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: 'National Park';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/national-park-v3-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* national-park-800 - 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: 'National Park';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/national-park-v3-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url('fonts/national-park-v3-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* weniger abstand zum header auf Kontakt, Über uns, ... Wordpress Seiten */
body .main-content {
    margin-top: 0;
}

/* verstecken der drei punkte bzw. more buttons */
.post-bottom .more-button {
    display: none;
}

/* Borders */
.bordered {
    border: 1px solid #b1c1d9 !important;
}

.widget,
.tags a,
#return-to-top,
.page-numbers,
.load-more a.btn.btn-simple:not(:hover),
table,
table tr,
table tr th,
table tr td,
.post.post-xl .post-bottom,
.post.post-single {
    border: 1px solid #b1c1d9 !important;
}

/*display: flex*/
/* Align items: center*/

/* TODO: Anpassung der Nav-Border Farben */
.carousel-botNav-prev,
.carousel-botNav-next,
a#return-to-top {
    border: 1px solid #b1c1d9 !important;
    color: #001c31 !important;
    background-color: #ffffff !important;

    &:hover {
        border-color: #ff243a !important;
        color: #ff243a !important;
    }
}

.post.post-single {
    border: 1px solid #b1c1d9 !important;

    .post-bottom {
        border-top: 1px solid #b1c1d9 !important;
    }

    .nextprev-post {
        height: 100%;
        border: 1px solid #b1c1d9 !important;
    }
}

.section-title > a {
    color: inherit;
}

.section-title > a:hover {
    color: #ff243a;
}

.widget-header.text-center {
    text-align: start !important;
}

/* Canvas Menu / Overlay */

.site-wrapper .main-overlay.active {
    background: #303233 !important;
    opacity: 0.8 !important;
}

.canvas-menu {
    button.btn-close {
        color: #001c31 !important;
        opacity: 1 !important;
        background-color: unset;
    }
}

/* Header */
.header-default {

    margin-bottom: 24px;
    padding: 20px 0 !important;

    @media (max-width: 767px) {
        margin-bottom: 12px !important;
    }

    .navbar {

        .nav-link {
            padding-right: 1rem !important;
            padding-left: 1rem !important;
        }

        .navbar-nav {

            margin-left: 100px;

            .menu-item:not(:last-child) {
                padding-right: 5px;
            }
        }

        .header-right {
            .header-buttons {
                margin-left: 10px;
            }
        }

        .navbar-collapse {
            flex-grow: 0;
            margin-left: auto;
        }
    }

    .header-buttons {
        .burger-menu.icon-button {
            display: none;
        }

        @media (max-width: 991px) {
            .burger-menu.icon-button {
                display: inline-flex;
            }
        }

    }

}

/* Switcher button fix */
.switcher-button {
    .switcher-button-inner-left:before {
        top: 2px;
        right: 30px !important;
    }

    &.active {
        .switcher-button-inner-left:before {
            right: 10px !important;
        }
    }
}

div.switcher-button {
    display: none;
    visibility: hidden;
}

/* Search popup */
.search-popup {
    &.visible {
        background: rgba(48, 50, 51, 0.8);
        animation: unset;
    }

    .search-form {
        height: auto;
    }

    .btn-close {
        position: inherit !important;
        top: 0 !important;
        right: 0 !important;
        min-width: 30px;
        padding: 10px;
        margin-left: 8px;
        font-size: 16px;
        height: auto;
        opacity: 1;
        border-radius: 25px;
        background-color: #ff243a;
        color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");

        &:hover {
            opacity: 1 !important;
        }
    }

    .btn-lg {
        padding: 10px;
        min-width: 50px;
        height: auto;
        line-height: 0;

        .icon-magnifier {
            font-size: 16px;
        }
    }

    .search-content {
        .text-center {
            display: none;
        }
    }
}

/* Navbar */
.navbar {
    .dropdown-item::after {
        display: none !important;
    }
}

/* Separator coloring */
.post.post-list:after,
.post.post-list-sm.before-seperator:before,
.pagination-seperator:before,
.post-list-sm:after,
.widget.widget_recent_entries li:before {
    background: #b1c1d9 !important;
}

/* Post Singular styling */
.post.post-single,
.post.post-xl {
    background-color: #fff;
    border-radius: 15px;
    padding: 35px 30px;
}

.post .meta li img.avatar.photo.author {
    margin-right: 0;
}


/* Footer */
.footer {

    @media (max-width: 767px) {
        .row.gx-5 {
            --bs-gutter-y: 1.5rem;
        }

        .container-xl {
            margin-bottom: 0;
        }
    }

    .widget.footer-widget {
        border: none !important;

        .menu-footer-menue-container {
            line-height: 1;
        }
    }
}

/* Widgets & containers */
.widget.widget_katen_popular_posts,
.widget.widget_recent_entries,
.widget.widget_katen_posts_carousel,
.widget.widget_search,
.widget.widget_categories,
.post.post-grid,
.padding-30.rounded.bordered,
.post.post-classic {
    background-color: #fff;
    border-color: #b1c1d9;
    margin-bottom: 24px !important;
}

.elementor-widget-container .rounded.bordered {
    background-color: #fff;
    border-color: #b1c1d9;
}

/* unset of the meta list-item dots */
/*.post .meta li:after {*/
/*    content: unset !important;*/
/*}*/

/*!* set the dots for the right panel slider because icons cant be used there *!*/
/*.post.slick-slide {*/
/*    .meta.list-inline {*/
/*        gap: 0 !important;*/
/*    }*/

/*    .meta li:after {*/
/*        content: '' !important;*/
/*        top: 0 !important;*/
/*    }*/
/*}*/

/* align post-meta items inline */
/*.meta.list-inline, .meta.list-inline .list-inline-item, .meta.list-inline .list-inline-item > * {*/
/*    vertical-align: middle;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.meta.list-inline .list-inline-item {*/
/*    vertical-align: middle;*/
/*    !*margin-right: 1.5rem !important;*!*/
/*    */
/*    &:after {*/
/*        vertical-align: middle;*/
/*        top: 0;*/
/*    }*/

/*    i, img {*/
/*        vertical-align: middle;*/
/*        margin-right: 4px !important;*/
/*    }*/
/*}*/

.post .post-format, .post .post-format-sm,
.post.post-list-sm .thumb .number,
.post.post-list-sm.counter:before,
span.post-format, span.post-format-sm {
    background-color: #7399BD !important;
    background-image: none !important;
}

button.toggle-button:hover::before, a i.fab:hover, a i.far:hover {
    color: #ff243a !important;
}

/* Gutenberg blocks */
.wp-block-heading {
    margin-top: 40px;
}

.wp-block-image img {
    border-radius: 10px;
}

/* Verstecken Wellen linie unter den Überschriften */
/*div.section-header {*/
/*    svg {*/
/*        display: none;*/
/*    }*/
/*}*/

.pagination .page-numbers a:hover, .pagination .page-numbers:not(.current):hover {
    color: #ff243a !important;
    background-color: unset !important;
    background-image: unset !important;
    background: unset !important;
    border-color: #ff243a !important; /* darker border on hover */
}

.page-header {
    display: none;
}

mark, .mark {
    background-color: #fce8ec !important;
}

.post .meta li img.avatar.photo.author {
    margin-right: 5px;
}

@media (max-width: 1199px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.3rem;
        padding-left: 1.3rem;
    }
}


.widget.widget_categories .widget-header {
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .row.gx-5 {
        --bs-gutter-x: 0 !important;
    }

    .row.gy-5 {
        --bs-gutter-y: 0 !important;
    }
}

@media (min-width: 767px) and (max-width: 1199px) {
    body {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.list-inline-item > span, .list-inline-item > a {
    opacity: 0.6;
}

.post {
    .thumb {
        .post-format, .post-format-sm {
            display: none;
            visibility: hidden;
        }
    }
}

/* Überschreiben der Farbe (Strokes) für den Separator, da die linearGradient variable mit id="gradient" irgendwo überschrieben wird */
.section-header, .widget-header {
    svg path {
        stroke: #ff243a;
    }
}

.post.post-list-sm.counter:before {
    content: unset !important;
}


.widget.bp-custom-widget {
    .e-con-inner {
        padding: 0;


        .elementor-widget-image {
            overflow: hidden;
            border-radius: 12px;

            img {
                transform-origin: center center;
                transition: transform 0.45s ease;
                will-change: transform;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            &:hover img {
                transform: scale(1.07);

                @media (hover: none) and (pointer: coarse) {
                    selector:hover img {
                        transform: none;
                    }
                }
            }
        }

        .elementor-widget-katen-section-header .section-header {
            margin-bottom: 0px;

            h3 {
                font-size: 20px;
            }
        }
    }
}