/*
Theme Name: Hempel
Theme URI: https://frank-hempel.de
Author: Frank Hempel
Author URI: https://frank-hempel.de
Description: Very simple classic theme
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diy
Tags: one-column, featured-images, sticky-post, threaded-comments, translation-ready, blog
*/

/* mulish-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: 'Mulish';
    font-style: normal;
    font-weight: 400;
    src: url('inc/fonts/mulish-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* plus-jakarta-sans-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: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 300;
    src: url('inc/fonts/plus-jakarta-sans-v8-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* plus-jakarta-sans-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: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    src: url('inc/fonts/plus-jakarta-sans-v8-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* open-sans-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: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('inc/fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




body,
html {
    margin:0;
    padding: 0;
}
body {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #fff;
    font-size: 1.05rem;
    border-bottom: 1px solid transparent; /* display always vertical scrollbar */

}

/* Basic formatting */
main,
header,
nav,
nav a,
div,
section,
article,
dl,
dt,
footer {
    box-sizing: border-box;
}

h1, h2 {
    font-weight: normal;
}

a {
    color: #fff;
    text-decoration: none;
}

a[href^="tel"],
a[href^="tel"]:hover {
    text-decoration: none;
    border:none;
    cursor: default;
}
a[href*=".jpg"], a[href*=".jpg"]:hover {
    border: none;
}

a[target="_blank"]:after {
            content: "";
            background-image: url(inc/pics/external_link_icon.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 0.6em;
            height: 0.6em;
            margin-bottom: 0.2em;
            margin-left: 0.2em;
            display: inline-block;
        }


img {
    max-width: 100%;
    height:auto;
}
iframe {
    max-width: 100%;
}
.clearfloat {
    clear: both;
    display:block;
    float:none;
}
.no-border img {
    border: none;
}
.klein {
    font-size: 0.85em;
}

/* Back to top  */
#smoothup {
    height: 40px;
    width: 40px;
    position:fixed;
    bottom:30px;
    right:5%;
    text-indent:-9999px;
    display:none;
    background: url("inc/pics/top_icon.png");
    background-size: 100%;
    opacity: 0.6;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s; transition-duration: 0.4s;
    outline: none;
    border:none;
    text-decoration:none;
}
#smoothup:hover {
-webkit-transform: rotate(360deg);
}
.ml-slider {
    margin: 2em 0;
}

/* styling */
body {
/*    background-color: #EDEDED; */
    background-color: #666666;
}
#wrapper {
/*    box-shadow: 0 0 10px #333; */
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;

    }
.inner, .articles {
    max-width: 1100px;
    margin:auto;
    padding: 0 1em;
    width:100%;
}

header {
    background-color: #474747;
    font-family: 'Mulish', Arial, sans-serif;
    font-family: 'Plus Jakarta Sans';
    color: #fff;
}
header .inner {
    background-color: #383838;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 1rem 1rem 1rem;
}

header h1,
header h2 {
    margin:0;
    line-height: 1em;
}
header h2 {
    font-size: 1em;
}

.logo {
    color: #ddd;
    font-size: 1.25em;
}
.logo img {
    padding-left:1.5px;
}
.logo h1 {
    margin:0;
    padding: 0;
}

.logo .hempel {
    font-size: 4.5rem;
    letter-spacing: -0.11em;
    margin-left: -0.3rem;
    white-space: nowrap;
}
.logo .hempel .g {
    text-transform: uppercase;
    font-size: 1em;
    }
.logo .hempel .k {
    font-size: 1.35em;
    font-weight: 300;
    }
.logo .hempel .m {
    letter-spacing: -0.05em;
    }

header a,
header a:hover {
    border: none;
    color: #fff;
}

/* Navigation Header */

header nav  {
    display: inline-block;
    margin-top: 2em;
}
header nav, header nav > div, header ul {

}

header nav ul {
    margin:0;
    padding:0;
}
header nav li {
    list-style: none;
}
header nav ul {
    display: flex;
    flex-wrap: wrap;
}
header nav li {
    margin: 0 0.3em;
}
header nav a {
    display: grid;
    width: 5.5em;
    height: 5.5em;
    border-radius: 5.5em;
    border: 2px solid #fafafa;
    box-shadow: 0 0 7px transparent;
    transition: border 0.5s, box-shadow 0.5s, color 0.5s;
    align-items: center;
    justify-content: center;
    hyphens: auto;
    font-size: 1.2em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 0px 3px #000;
    color: #fff;
background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);


/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,000000+51,111111+60,2b2b2b+76,1c1c1c+91,131313+100;Black+Gloss+%231 */
background: linear-gradient(135deg,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

header nav a:hover {
    border-color: #fff;
    color: #ccc;
    box-shadow: 0 0 7px #ccc;
}
header nav a[href*="foto"]:hover,
.page-fotografie header nav a[href*="foto"]
    {
    border-color: #09AAFB;
    color: #09AAFB;
    box-shadow: 0 0 7px #09AAFB;
}
.page-fotografie .logo, .page-fotografie .logo a {
    color: #0394DD;
}

header nav a[href*="web"]:hover,
.page-webdesign header nav a[href*="web"]
 {
    color: #FFDA6B;
    border-color: #FFDA6B;
    box-shadow: 0 0 7px #FFDA6B;
}
.page-webdesign .logo, .page-webdesign .logo a {
    color: #FFC929;
}

header nav a[href*="news"]:hover,
.blog header nav .current-menu-item a,
.single-post header nav .current_page_parent a, .single-post header nav a[href*="news"] {
    color: #66CC00;
    border-color: #66CC00;
    box-shadow: 0 0 7px #66CC00;
}
.blog .logo, .blog .logo a, .single-post .logo, .single-post .logo a {
    color: #57AD00;
}

header nav a[href*="kontakt"]:hover,
.page-kontakt header nav .current-menu-item a {
    color: #E60000;
    border-color: #E60000;
    box-shadow: 0 0 7px #E60000;
}
.page-kontakt .logo, .page-kontakt .logo a {
    color: #D60000;
}

.wp-post-image {
    float: left;
    margin: 0 1em 1em 0;
}
.articles {
    min-height: 100%;
    background-color: #383838;
    border-top: 1px solid #aaa;
    border-left: 3px solid #aaa;
}
.page-kontakt .articles {
    border-left: 3px solid #E60000;
    border-top: 1px solid #E60000;
}
.page-fotografie .articles {
    border-left: 3px solid #09AAFB;
    border-top: 1px solid #09AAFB;
}
.page-webdesign .articles {
    border-left: 3px solid #FFDA6B;
    border-top: 1px solid #FFDA6B;
}

.blog .articles, .single-post .articles {
    border-left: 3px solid #66CC00;
    border-top: 1px solid #66CC00;
}

.home h2.article-headline {
    display:none;
}
h2.article-headline {
    margin:1em 0 0.1em 0;
    font-size: 1.2em;
}
.blog h2.article-headline {
    font-size: 1.4em;
}
h2.wp-block-heading {
    line-height: 1.3em;
}

article {
    padding: 1em 2em;
    color: #efefef;
    line-height: 1.3em;
}
.home article {
    padding: 0 0 1em 0;
 }

article h2 {
    margin:0 0 0.3em 0;
}

.blog article,
.single article {
    padding-bottom: 2em;
}
.blog article {
    border-bottom: 1px solid #999;
}

p.article-date {
    margin:0 0 0.5em 0;
    font-size: 0.85em;
    text-align: right;
}
article p {
    margin: 0 0 0.6em 0;
}

article li {
    margin: 0.5em 0;
}

article a {
    border-bottom: 1px dotted #fff;
}
article a:hover {
    border-bottom: 1px solid #fff;
}
.wp-block-image a, .wp-block-image a:hover {
    border: none;
}
article img {
    border: 1px solid #999;
}
figure.wp-block-image figcaption {
    background-color: rgba(50,50,50,0.3) !important;
}
figure.aligncenter {
    margin: 1em 0;
}

.kommentare {
    margin-top: 5em;
    border-top: 1px solid #999;
    font-size: 0.85em;
    clear: both;
}

#comments {

}

.comments-link  {
    text-align: right;
}
.read-more {
    text-align: right;
    margin-bottom: 1em;
    clear: both;
}
.next-previous-posts,
.next-previous-post {
    clear:both;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.previous-posts,
.next-post {
    text-align: right;
}
.next-previous-post {
    clear: both;
    border-top: 1px solid #bbb;
}


.comments-link {
    font-size: 0.85em;
}
#respond {
    border-top: 1px solid #bbb;
    font-size: 0.9em;
    clear:both;
}
#respond h3 {
    font-weight: normal;
}
footer {
    font-size: 0.75em;
    background-color: #3B3B3B;
    }
footer .inner {
    display: flex;
    flex-wrap: wrap;
    padding: 1em 1rem;
    background-color: #474747;
    color: #dfdfdf;
}
footer ul, footer li {
    list-style: none;
    margin:0;
    padding:0;
}

footer .inner > ul, footer .inner > div {
    margin: 0 2em 1em 0;
    padding: 0;
}
footer .widget h2 {
    margin:0 0 0.2em 0;
    font-weight: normal;
    font-size: 1.4em;
}
footer .widget h3 {
    margin:0 0 0.2em 0;
    font-size: 1.2em;
}

footer a {
    border-bottom: 1px dotted #fff;
}
footer a:hover {
    border-bottom: 1px solid #fff;
}

footer p {
    margin: 0 0 0.3em 0;
}

footer .menu {
    line-height: 1.4em;
}

#lightbox a {
    border: none;
}

@media screen and (width < 800px) {
    body {
        font-size: 1rem;
    }
    .wp-post-image {
        float: none;
        margin: 0 auto 0.5em auto;
    }

    .logo .hempel {
        font-size: 3.8rem;
}
    .home article {
        padding: 1em 0;
}
}

/* Spezielles */

/* Kontakt article schmaler */
#post-9 {
    max-width: 300px;
    margin:auto;
}
/* Links zu Fotos auf Kontakt mit Unterstreichung */
a[href*="LKW_kl.jpg"], a[href*="Hirn.jpg"] {
    border-bottom: 1px dotted #fff;
}
a[href*="LKW_kl.jpg"]:hover,
a[href*="Hirn.jpg"]:hover {
    border-bottom: 1px solid #fff;
}