/*
Theme Name: Unser-Ebertplatz-Theme.
Author: Daniel Herfen
Description: Ein überarbeitetes Theme basierend auf der Gestaltung von Maria Wildeis für die Domain unser-ebertplatz.koeln.
Version: 30.05.2023.1
Requires at least: 0.0.1. 
Tested up to: 6.2
Requires PHP: The oldest PHP version supported, in X.X format, only the number.
License: The license of the theme.
License URI: The URL of the theme license.
Text Domain: The string used for textdomain for translation. The theme slug.
*/

:root {
  --uep-breakpoints-xs: 576px;
  --uep-breakpoints-sd: 768px;
  --uep-breakpoints-md: 992px;
  /* lower = mobile */
  --uep-breakpoints-xl: 1200px;
  --uep-breakpoints-xxl: 1400px;

  --uep-font-weight-normal: 400;
  --uep-font-weight-bold: 600;
}

html {
  scroll-behavior: smooth;
}

body {
  padding:0 0.5rem 0 1rem;
  font-size:18px;
  line-height:1.7rem;
	-webkit-text-size-adjust: 100%;
}

@media (max-width: 992px) {
  body {
	  padding:0 0.5rem 0 1rem;
    font-size:20px;
    line-height:2rem;
    -webkit-text-size-adjust: 100%;
  }
}

h1 {
  font-size: 1.5em;
}

.single .wp-block-post-title {
  font-size: 2.34rem;
  line-height: 2.5rem;
}


.site-wrapper {
  display: flex;
  flex-flow: row wrap;
}

.site-content-menu-wrapper {}

.site-header {
  flex: 1;
}

.site-menu {}

.site-footer {
  flex: 2;
}






/***********************************************************
*
*     EN Translation
*
***********************************************************/
.site-header .wp-block-column:last-child {
  min-height: 100%;
  vertical-align: middle;
  line-height: 1.4;
}

.site-header .wp-block-column:last-child p {
  font-family: var(--wp--preset--font-family--allerta-stencil);
  line-height: 120px;
  text-align: right;
  padding-right: 3rem;
}

.site-header .wp-block-column:last-child p a {
  text-decoration: none;
  color: var(--wp--preset--color--primary);

}

.site-header .wp-block-column:last-child p a:hover {
  color: var(--wp--preset--color--secondary);
}

@media (max-width: 992px) {
  .site-header .wp-block-column:last-child {
    vertical-align: middle;
    line-height: 1.4;
    height: 3rem;
    margin-top: 5rem;
  }
  .site-header .wp-block-column:last-child p {
    font-family: var(--wp--preset--font-family--allerta-stencil);
    line-height: 1rem;
    text-align: left;
    padding-right: 15px;
  }

  .site-header .wp-block-columns {
    margin-bottom: 3rem;
    flex-direction: column-reverse;
  }
  .home .site-header .wp-block-columns {
    margin-bottom: 3rem;
    flex-direction: column-reverse;
  }

  .site-header .wp-block-columns .wp-block-site-title{
    margin-top: 0;
  }

}

/***********************************************************
*
*     Page Titel and Subtitle
*
***********************************************************/
.wp-block-site-title {
  margin-top: 8rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

.wp-block-site-tagline {
  margin-top: 0;
  padding-top: 0;
  line-height: 1.1;
  font-family: var(--wp--preset--font-family--abel);
  color: var(--wp--preset--color--primary);
}








/***********************************************************
*
*     Content Styling .site-content
*
***********************************************************/
.site-content {
  display: flex;
  /* background: red; */
  width: 100%;
  max-width: var(--wp--style--global--content-size);
}

.site-content img {
  max-width: 100%;
  max-width: var(--wp--style--global--content-size);
  object-fit: contain;
}

/* inline text links coloration */
.site-content a , .eventSingle p a {
  font-family: var(--wp--preset--font-family--allerta-stencil);
  color: var(--wp--preset--color--primary);
}

.site-content a:hover , .eventSingle p a:hover {
  color: var(--wp--preset--color--secondary);
}

/* first p has no top marginr or padding */
.site-content .wp-block-post-content p:first-child {
  margin-top: 0;
  padding-top: 0;
}
.site-content h2{
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 2.5rem;
  font-family: var(--wp--preset--font-family--allerta-stencil);
}



.page img , .site-content img{
  max-width: 100%;
  height: auto;
}




/***********************************************************
*
*     UEP - Subtitle from WP Subtitle Plugin
*
***********************************************************/
.uep_subtitle {
  font-family: var(--wp--preset--font-family--allerta-stencil);
  font-size: 1.1rem !important;
}




/***********************************************************
*
*     Hexagon Maske 
*
***********************************************************/

.hexagon-corners {
  -webkit-mask-image: url(./assets/img/hexagonneu2.png);
  mask-image: url(./assets/img/hexagonneu2.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  /* Größe an das Bild anpassen */
  mask-size: contain;
  /* Größe an das Bild anpassen */
  -webkit-mask-position: center;
  /* Maske zentrieren */
  mask-position: center;
  /* Maske zentrieren */
}






/***********************************************************
*
*     Content Link Fixes
*
***********************************************************/
.single .wp-block-post-content a {
  font-family: var(--wp--preset--font-family--allerta-stencil);
  text-decoration: none;
  color: var(--wp--preset--color--primary);

}

.single .wp-block-post-content a:hover {
  color: var(--wp--preset--color--secondary);
}




/***********************************************************
*
*     Old Image Fixes
*
***********************************************************/
.single .landscape img,
.single .galleryLink img {
  width:100%;
  height: auto;
}



/* X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */
/*  Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}



















.events-hex-img {
  width: 100%;
  height: auto;
}

.events-hex-img img {
  width: 100%;
  height: 150px;
  object-fit: contain;

  -webkit-mask-image: url(./assets/img/hexagonneu2.png);
  mask-image: url(./assets/img/hexagonneu2.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  /* Größe an das Bild anpassen */
  mask-size: contain;
  /* Größe an das Bild anpassen */
  -webkit-mask-position: center;
  /* Maske zentrieren */
  mask-position: center;
  /* Maske zentrieren */
}