/*****
Theme Name: MH Magazine Child Theme
Theme URI: https://www.mhthemes.com/themes/mh/magazine/
Description: This is a child theme for MH Magazine WordPress theme to make customizations much easier for you. By using this child theme you make sure, that you keep your changes after an update of the parent theme.
Author: MH Themes
Author URI: https://www.mhthemes.com/
Template: mh-magazine
Version: 1.0.0
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*****/


body {
/*
  background-image: linear-gradient(to top, #006699 0%, #669933 10%, #669933 90%, #006699 100%) !important; */
/*
  background-image: linear-gradient(to bottom, #006699 0%, white 25%, white 75%, #006699 100%) !important;*/
/* 006699 669933   CFE2F1 ffffff */
}


#wpadminbar { /* Nur bei der Bildgrößen Vorschau im FF springt oft die Adminbar zu tief runter. So bleibt sie oben */
  position: fixed;
}


/*
ACHTUNG: Normalerweise hat das MH "Box-Layout" (s. Customizer) ~1080px.
Sobald man aber hier höher geht, stimmen manche Beitragsbilder nicht mehr, weil sie damit auch größer gezeigt werden.
Dies, weil die 'function mh_magazine_image_sizes' zB. für mh-magazine-content', uä. 678, 381 vorsieht.
Das geht sich bei der Standard-Höchstbreite 1080px genau aus, damit keine Bildskalierung stattfindet.
Wenn aber hier zB. 1280px max-width steht, werden die Bilder statt mit 678px mit 810px Breite gezeigt, skaliert und unscharf.
Also muss man id. 'functions.php' etwas höhere Bildgrößen definieren: Bei 3:2 wäre das dann 810x539px, b. 16:9 810x456px.
Achja: Zeitweise klappte das nicht so toll -> Workaround: zmdst die Beitragsbilder etwas größer erstellen: 1030 x XXX ???
s. functions.php im Child! */
* .mh-container {
  max-width:1280px;
}

.entry-thumbnail {
  margin: 0px auto 2rem auto;
}

.mh-posts-grid {
  padding: 0em 0em 0em 0.5em;
}

.mh-widget-title {
  margin-bottom: 10px !important;
}


/*
Das Widget "Category Columns" vereint idF. 2 Kategorien (Ausflug & Gastro).
Man kann aber immer nur einen Link in eine Überschrift der MH-Widgets legen
Mehr Links usw lassen sich aber in den Titel eines normalen Textwidgets packen (mit dem Plugin "HTML Widget Text")
So ist nun ein solches darüber gestellt - folgendes minimiert den nun zu großen Abstand: */
#text-11.mh-widget {
  margin-bottom: 0px !important;
}



/* Nur für Sidebar (HOME 6) */
/* Da MH-Slider keinen Titel hat, macht auch hier ein Textwidget den Titel "Wichtige Infos" drüber */
#text-6 h4.mh-widget-title, #text-6.mh-widget {
  margin-bottom: 0px !important;
}

/* Slider in Sidebar */
.mh-slider-normal {
  width:auto;
}
#mh_magazine_slider-3 {
  margin-bottom: 0px !important;
}
#mh_magazine_slider-3 .flexslider {
  padding: 0em 0em 1em 0em;
  background-color: rgba(0, 102, 153, 1);
}
.mh-widget-col-1 .mh-slider-layout4 .mh-slider-caption {
  background-color: transparent !important;
}
.mh-slider-layout4 .mh-slider-caption h2 {
  margin-left: 10px;
}
.mh-slider-layout4 .mh-slider-caption a {
  color: White;
}


/* Kategorienname aus dem lineup Widget nehmen */
.mh-image-caption.mh-posts-lineup-category {
  display: none;
}
/* Abstand lineup Titel zu dessen Inhalt auf 0 */
#mh_magazine_posts_lineup-4 h4:nth-child(1) {
  margin-bottom: 0px !important;
}
/*img.mh-posts-lineup-thumb  {
  height: 100% !important;
}*/


/* Custom Post in Sidebar (unter Slider)  */
#mh_magazine_custom_posts-10 ,#mh_magazine_custom_posts-10 .mh-custom-posts-item {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}
/* Datum aus manchen "Custom Post" u. "Digest" entfernen */
#mh_magazine_custom_posts-10  .entry-meta-date, #mh_magazine_posts_digest-5 .entry-meta-date {
  display: none;
}
#mh_magazine_custom_posts-10  .mh-custom-posts-xl-title {
  display: none;/* Ein (H3) "xl-title" ist nur sichtbar, wenn im Widget "Exerpts" an ist */
  /*font-size: 1em;*/
}
#mh_magazine_custom_posts-10 .mh-custom-posts-small-title {
  display: block;/* Ein "small-title" ist nur sichtbar, wenn im Widget "Exerpts" aus ist */
}
/*#mh_magazine_custom_posts-10 h4.mh-widget-title  {
  margin-bottom: 0px;
}*/
#mh_magazine_custom_posts-10 .mh-excerpt {
  /*height: 25vw;*/
  padding: 0em 2px 2px 2px;
  /*background-color: rgba(102, 153, 51, 0.6);*/
  border-bottom: #6699CC 1px solid;
}


/* Suche im Header-Widget */
#mh-mobile .mh-header-2, #search-14, .mh-widget .search-form {
  margin: 0px;
  padding: 0px;
  background-color: transparent;
}
.mh-widget .search-form .search-field {
  width: 50%;
  height: 25px;
  margin: 4px auto;
  padding: 1px;
  background-color: White; opacity:0.75;
}

.download-box {
  float: left;
}
.download-box img.wp-post-image {
	display: inline;
  max-width: 150px !important;
}
.download-button {
	padding: 0.5em;
	line-height: 1em;
	color: white !important;
}
.download-box h1 {
  font-size: 1em;
}


#menu-menu2 {
  text-transform: none;
}



/* HEADER */
.mh-header .mh-custom-header {
  height: auto;
  margin: 0em;
  padding: 0em 0em 1em 0em;
  border-bottom: 2px solid Gold;
  background-image: none;
}
/* HEADER Spalten
im Hauptcontainer ".mh-header" ist normalerweise ungeteilt Platz;
Darin kann sich ".mh-col-1-1" den gesamten verfügbaren Bereich nehmen.
Außer wenn man den Widget-Bereich "Header 2 - Anzeige" (ober Seitencontainer) aktiviert.
Dann teilt sich der Header in ".mh-col-1-3" (li) und ".mh-col-2-3" (re)
".mh-col-1-3" (u.ev.".mh-col-2-3") muss aber mit .mh-header vorselektiert werden, weil es noch mehrere gibt.
 */
.mh-header .mh-col-1-1 {
}
.mh-header .mh-col-1-3 {
  margin: 0px;
  padding: 0px;
  /*border: Red 1px solid;*/
  background-color: transparent;
}
.mh-header .mh-col-2-3 {
  margin: 0px;
  padding: 0px;
  /*border: Blue 1px solid;*/
  background-color: transparent;
}

.mh-site-logo {
  margin: 0px auto;
  padding: 0px 0px 5px 0px !important;
}
.mh-header-text {
  margin: 0px auto;
  padding: 0px;
  text-transform: none;
}
h1.mh-header-title, h2.mh-header-title {
  padding-top: 5px; margin-top: 5px;/* zieht beide Schriften horizontal näher zusammen */
  font-size: 0.75rem;
  text-transform: uppercase;
  text-shadow: 5px 5px 5px black;
}
h2.mh-header-tagline, h3.mh-header-tagline {
  padding-top: 5px; margin-top: 5px;/* zieht beide Schriften horizontal näher zusammen */
  display: block;
  font-size: 0.5rem;
  text-shadow: 3px 3px 3px black;
}
img.custom-logo {
    display: none;
}


@media screen and (min-width: 320px) {
  .mh-header .mh-custom-header {
    height: 10em;
    margin: 0em;
    padding: 0em 0em 0em 0em;
    background-image: url(../../uploads/2019/04/header.jpg) !important;
	  background-position: left top !important;
	  background-size: cover !important;
	  background-repeat: no-repeat !important;
  }
  .mh-header .mh-col-1-1 {
  }
  .mh-header .mh-col-1-3 {
  }
  .mh-header .mh-col-2-3 {
  }

  .mh-site-logo {
  }
  .mh-header-text {
  /* padding sollte id. nächsten media queries lfd. erhöht werden, falls der skalierende Higru feste Elemente hat (zb. Balken, Streifen,...). Sonst springt die Schrift zmdst, optisch, im Vergleich zum Higrubild */
    float: left;
    padding: 1em 0em 0em 1em;
    text-align: left;
  }
  h1.mh-header-title, h2.mh-header-title {
    font-size: 0.9rem;
  }
  h2.mh-header-tagline, h3.mh-header-tagline {
    font-size: 0.5rem;
  }
  img.custom-logo {
    display: block;
    max-width:10%;
    float: left;
    margin: 1em 0em 0em 1em;
    box-shadow: 2px 2px 10px black;
  }
/* MH blendet die Auszüge nomalerweise unter 620 vw aus - willi net. Unter 320 ists ok */
.mh-custom-posts-content .mh-excerpt, .mh-posts-list-excerpt, #mh-mobile .mh-posts-focus-excerpt-small, .mh-posts-focus-caption-small {
  display: block !important;
}
}


@media screen and (min-width: 620px) {
  .mh-header .mh-custom-header {
    height: 12em;
    padding: 0em 0em 0em 0em;
  }
  .mh-header .mh-col-1-1 {
  }
  .mh-header .mh-col-1-3 {
    width: 66%;
    float: left;
  }
  .mh-header .mh-col-2-3 {
    width: 30%;
    float: right;
  }

  .mh-site-logo {
  }
  .mh-header-text {
    padding: 1.5em 0em 0em 1em;
  }
  h1.mh-header-title, h2.mh-header-title {
    font-size: 1rem;
  }
  h2.mh-header-tagline, h3.mh-header-tagline {
    font-size: 0.6rem;
  }
  img.custom-logo {
    max-width:15%;
  }
  .mh-widget .search-form .search-field {
    width: 99%;
    float: right;
    margin: 0px auto;
  }
}


@media screen and (min-width: 767px) {
  .mh-header .mh-custom-header {
    height: 14em;
    padding: 0em 0em 0em 0em;
  }
  .mh-header .mh-col-1-1 {
  }
  .mh-header .mh-col-1-3 {
  }
  .mh-header .mh-col-2-3 {
  }

	.mh-site-logo {
	}
	.mh-header-text {
    padding: 2em 0em 0em 1em;
	}
  h1.mh-header-title, h2.mh-header-title {    /* header-title = auf Startseite H1, ansonsten H2 */
		font-size: 1.4em;
	}
	h2.mh-header-tagline, h3.mh-header-tagline { /* header-tagline = auf Startseite H2, ansonsten H3 */
		font-size: 0.75em;
	}
	img.custom-logo {
    max-width:20%;
	}
}


@media screen and (min-width: 900px) {
  .mh-header .mh-custom-header {
    height: 18em;
    padding: 0em 0em 0em 0em;
  }
  .mh-header .mh-col-1-1 {
  }
  .mh-header .mh-col-1-3 {
  }
  .mh-header .mh-col-2-3 {
  }

	.mh-site-logo {
	}
	.mh-header-text {
    padding: 2.5em 0em 0em 1em;
	}
  h1.mh-header-title, h2.mh-header-title {    /* header-title = auf Startseite H1, ansonsten H2 */
		font-size: 1.5em;
	}
	h2.mh-header-tagline, h3.mh-header-tagline { /* header-tagline = auf Startseite H2, ansonsten H3 */
		font-size: 0.8em;
	}
	img.custom-logo {
    max-width:20%;
	}
}


@media screen and (min-width: 1120px) {
  .mh-header .mh-custom-header {
    height: 20em;
    padding: 0em 0em 0em 0em;
  }
  .mh-header .mh-col-1-1 {
  }
  .mh-header .mh-col-1-3 {
  }
  .mh-header .mh-col-2-3 {
  }

  .mh-site-logo {
  }
  .mh-header-text {
    padding: 3em 0em 0em 1em;
  }
  h1.mh-header-title, h2.mh-header-title {
    font-size: 1.75em;
  }
  h2.mh-header-tagline, h3.mh-header-tagline {
    font-size: 0.9em;
  }
  img.custom-logo {
    max-width:33%;
  }
}



@media screen and (min-width: 1475px) {
  .mh-header .mh-custom-header {
    height: 22em;
    padding: 0em 0em 0em 0em;
  }
  .mh-header .mh-col-1-1 {
  }
  .mh-header .mh-col-1-3 {
  }
  .mh-header .mh-col-2-3 {
  }

  .mh-site-logo {
  }
  .mh-header-text {
    padding: 3.5em 0em 1em 1em;
  }
  h1.mh-header-title, h2.mh-header-title {
    font-size: 2.2em;
  }
  h2.mh-header-tagline, h3.mh-header-tagline {
    font-size: 1.3em;
  }
  img.custom-logo {
    max-width:100%;
  }
}








/*
Sidebar (Widget Pos 6) versetzen oder ausblenden + HOME 3+4 je 50% geben
.mh-home-area-6 {width: 100%} setzt die Sidebar (in voller Breite) tatsächlich unter die Widgetposition 5
(wie unter 768px VW (ACHTUNG: Bei VW < 768px kommt die dann doch recht weit unten))
.mh-home-area-6 {display: none;} blendet sie aus
folgende Elemente kriegen nun den freien Platz (wie HOME 1 sowiso):
HOME 2+5 kriegen 100% vertikal (ansonsten jeweils 2/3)
HOME 3+4 teilen sich diesen nun 1:1 horizontal (wäre zusammen 2/3)
.mh-home-area-6, .mh-right-sb #main-content, .mh-left-sb #main-content {width: 100%;}
*/


/*
Falls man gewissen Widgetbereichen einen DUNKLEN Parallax-Effekt hinterlegen will,
sollte man die Schriften und Links heller, evtl. gleich weiß machen.
Da aber bei Handys der Efffekt eh nicht geht, würde dann weiße Schrift auf dem weißen Standard-Higru sein.
Daher setzt man auch die Backgroundfarbe dunkler.

Alle gesammelt: Für je 2 Grids u 2 Digest (die Zahlen dahinter müssen nicht immer stimmen)
#mh_magazine_posts_grid-2,#mh_magazine_posts_grid-2 a,#mh_magazine_posts_grid-6,#mh_magazine_posts_grid-6 a,#mh_magazine_posts_digest-5,#mh_magazine_posts_digest-5 a,#mh_magazine_posts_digest-7,#mh_magazine_posts_digest-7 a {color: White;}
#mh_magazine_posts_grid-2 a:hover,#mh_magazine_posts_grid-6 a:hover,#mh_magazine_posts_digest-5 a:hover,#mh_magazine_posts_digest-7 a:hover {color: Red;}
#mh_magazine_posts_grid-2,#mh_magazine_posts_grid-6,#mh_magazine_posts_digest-5,#mh_magazine_posts_digest-7 {background-color: #006633;}
#mh_magazine_posts_grid-2 img,#mh_magazine_posts_grid-6 img,#mh_magazine_posts_digest-5 img,#mh_magazine_posts_digest-7 img {border: White 1px solid;}

Einzeln:
#mh_magazine_posts_grid-2,#mh_magazine_posts_grid-2 a {color: White;}
#mh_magazine_posts_grid-2 a:hover {color: Red;}
#mh_magazine_posts_grid-2 {background-color: #006633;}
#mh_magazine_posts_grid-2 img {border: White 1px solid;}

#mh_magazine_posts_digest-5,#mh_magazine_posts_digest-5 a {color: White;}
#mh_magazine_posts_digest-5 a:hover {color: Red;}
#mh_magazine_posts_digest-5 {background-color: #006633;}
#mh_magazine_posts_digest-5 img {border: White 1px solid;}

#mh_magazine_posts_grid-6,#mh_magazine_posts_grid-6 a {color: White;}
#mh_magazine_posts_grid-6 a:hover {color: Red;}
#mh_magazine_posts_grid-6 {background-color: #006633;}
#mh_magazine_posts_grid-6 img {border: White 1px solid;}

#mh_magazine_posts_digest-7,#mh_magazine_posts_digest-7 a  {color: White;}
#mh_magazine_posts_digest-7 a:hover {color: Red;}
#mh_magazine_posts_digest-7 {background-color: #006633;}
#mh_magazine_posts_digest-7 img {border: White 1px solid;}
*/


/* Nur f Widget "Category Posts"
#category-posts-2-internal a.cat-post-title {
  font-size: 1.5em !important;
  font-weight: bold;
}
#category-posts-2-internal .cat-post-item:last-child {
  border-bottom: #6699CC 1px solid !important;
}
*/

/*.switcher .option a:hover {
  color: #6699CC !important;
}*/