/*
 Theme Name:   Twentytwenty Child
 Description:  Twentytwenty Child Theme for Lauratibor
 Author:       Anke Wisch
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* * * Schriften und Farben * * */

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('fonts/roboto-v29-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('fonts/roboto-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
    background-color: #fff;
    background-attachment: fixed;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0;
    color: #004a78;
}

@supports (-webkit-touch-callout: inherit) { /* workaround for not fixable background in Safari mobile */
  body {
      background-position: right top;
      background-attachment: scroll;
  }
}
a {
    color: #3889c7;
}
:root .has-accent-color { 
    color: #3889c7;
}
.entry-content {
  font-family: 'Roboto', sans-serif;
}


/* * * Hide Author Info, Meta Info Icon, Category Title, wordpress footer, Categories, toggle-text in Mobile Menu * * */

/*.post-cat-tags, .post-author.meta-wrapper, */ .post-meta, .meta-icon, .archive-title .color-accent, .powered-by-wordpress, .entry-categories, .toggle-text {
	display: none;
}


/* * * Header anpassen - Transparenter Hintergrund, Logo-Größe, Navigation & Untermenü,  * * */

#site-header {
    position: fixed;
    width: 100%;
    top: 0;
}
#site-header,  .singular .entry-header, .singular .featured-media::before {
	background: unset;
}
ul.primary-menu, ul.modal-menu {
    background-color: transparent;
    letter-spacing: 0;
}
.modal-menu > li > .ancestor-wrapper > a {
    letter-spacing: unset;
}
.custom-logo {
    transition: 0.4s !important;
}
.site-logo img {
    max-height: 10rem;
}
#site-content {
    margin-top: 11rem;
}
@media (min-width: 700px)  {
    .site-logo img {
        max-height: 14rem;
    }
    #site-content {
        margin-top: 19rem;
    }
}
@media (min-width: 1000px) {
    .site-logo img {
        max-height: 20rem;
    }
    #site-content {
        margin-top: 25rem;
    }
}
.primary-menu ul {
    color: #004a78;
}
.primary-menu ul::after {
    border-bottom-color: #004a78;
}
.primary-menu ul {
    background-color: rgba(255,255,255,0.9);
    text-align: right;
    box-shadow: 3px 3px 5px #004a784d;
    border-radius: 0;
}

@media (min-width: 1000px) {
    .header-navigation-wrapper, .header-inner {
        align-items: unset;
    }
}
@media (min-width: 700px) {
    .header-navigation-wrapper, .header-inner {
        align-items: unset;
    }
}


/* * * Mobile Menu (drei Punkte ersetzt durch drei Striche in *
 * twentytwenty/classes/class-twentytwenty-svg-icons.php      *
 * muss ersetzt werden bei Theme update!!)                     *
 * * */

.nav-toggle .toggle-icon, .nav-toggle svg {
    height: 3rem;
    width: 3rem;
}
.header-inner .toggle {
    align-items: flex-start;
    margin-top: 2.5rem;
}

/* * * Mobile Menu immer statt Main-Menu auf Touch-screens ohne hover-Fähigkeit * * */
@media (hover: none){
    .primary-menu-wrapper {
        display: none;
    }
    .mobile-nav-toggle {
        display: block !important;
    }
    .mobile-menu {
        display: block; 
    }
}


/* * * Entry: Abstände, Hintergründe, Trennlinien * * */
.singular .featured-media-inner, .featured-media-inner.section-inner.medium {
            background-color:  rgba(255,255,255,0.8);
}
@media (min-width: 700px) {
    .singular .entry-header {
        padding: 0 0 4rem 0;
    }
    body:not(.singular) main > article:first-of-type {
        padding: 0;
    }
    .singular .featured-media-inner, .featured-media-inner.section-inner.medium {
        max-width: 58rem;
        padding: 1rem 2rem;
    }
    .featured-media {
        margin-top: 4rem;
}
}
.entry-title {
    letter-spacing: 0.03em;
}
.post-meta-wrapper {
    margin-top: 0;
}
.meta-text {
    color: #aaa;
}
.meta-text:before {
    content: "[";
}
.meta-text:after {
    content: "]";
}

/* * * Abstände verringern * * */
.entry-content>hr {
    padding: 0;
}
.entry-content>* {
	padding: 1rem 2rem;
    margin-bottom: 0;
}
.entry h1 {
	margin: 0;
}
h2, .heading-size-1, h1 {
    font-size: 4rem !important;
    margin: 0;
}

@media (min-width: 700px) {
  .entry-content h4, .entry-content h5, .entry-content h6 {
    /* margin: 4.5rem auto 2.5rem; */
    margin: 0 auto;
  }
  h4, .heading-size-4, h5, .heading-size-5, h6, .heading-size-6 {
    /* margin: 4.5rem auto 2.5rem; */
    margin: 0 auto;
  }
}
.post-inner {
	padding-top: 0;
}

h1, h2, h3, h4, h5, h6, .faux-heading, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  /* margin: 3.5rem auto 2rem; */
  margin: 0 auto;
}

/* * * Bildunterschriften näher ans Bild * * */
@media (min-width: 700px){
    .featured-media figcaption {
        margin: 1rem auto 0 auto;
    }
}

/* * * Trennlinie Styling * * */
p {
    margin-bottom: 0;
}

hr.styled-separator, .entry-content hr {
    display:block;
    border:0px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image:url('https://www.lauratibor.de/wp-content/uploads/chalkline.png');
}
.entry-content hr::before, .entry-content hr::after, hr.styled-separator::before, hr.styled-separator::after {
    display: none;
}


/* * * Footer * * */

.footer-nav-widgets-wrapper, #site-footer, .entry-content>* {
	background-color: rgba(255,255,255,0.8);
}

.footer-widgets-wrapper {
  justify-content: center;
}
.footer-menu {
	letter-spacing: 0;
}

------------------### Styling for Backend Interface ### --------------------------------------

.editor-styles-wrapper, .editor-styles-wrapper > * {
    color: #004a78 !important;
    font-family: 'Roboto', sans-serif;
}