/*
Theme Name: Bautzen Komitee
Text Domain: bautzen-komitee
Version: 1.3
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Webpräsenz des Bautzen Komitee e.V.
Author: Thomas Kellermeier
Author URI: https://chaoste.github.io/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* On mobile no padding between paragraphs but a margin-bottom for iamges in general */
.wp-block-media-text {
  padding-bottom: 16px;
}

@media (min-width: 600px) {
  .wp-block-media-text {
    padding-bottom: 32px;
  }
}

.wp-block-media-text .wp-block-media-text__media {
  position: sticky;
  top: 60px;
  padding-top: 4px;
  padding-bottom: 16px;
  align-self: flex-start;
  text-align: center;
  overflow: hidden;
}


@media (min-width: 600px) {
  .wp-block-media-text .wp-block-media-text__media {
    padding-right: 24px;
  }

  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    padding-right: 0;
    padding-left: 24px;
  }
}

.wp-block-media-text .wp-block-media-text__media img {
  max-height: 400px;
  max-width: 100%;
  width: 350px;
}

.wp-block-media-text .wp-block-media-text__content {
  padding: 0 !important;
}

/* On mobile, the image shall always be positioned after the content */
@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) .wp-block-media-text__media {
      -ms-grid-column: 1;
          grid-column: 1;
      -ms-grid-row: 2;
          grid-row: 2;
  }
  .wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) .wp-block-media-text__content {
    -ms-grid-column: 1;
        grid-column: 1;
    -ms-grid-row: 1;
        grid-row: 1;
  }
}

body {
  font-size: 16px;
  line-height: 22px;
}

a {
  text-decoration: none !important;
}

/* --- Navigation --- */

.navigation-bar-top {
  height: 80px;
}

.navigation-bar {
  background: hsla(215, 67%, 95%, 1);
  height: 80px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: height 200ms ease-in-out;
  -o-transition: height 200ms ease-in-out;
  transition: height 200ms ease-in-out;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.navigation-bar:before, .navigation-bar:after {
  display: table;
  content: " ";
}

.navigation-bar.sticky {
  height: 42px;
}

.navigation-bar.sticky .logo-wrapper {
  padding: 2px 8px;
}

.navigation-bar .logo-wrapper {
  display: inline-block;
  text-align: center;
  height: 100%;
  padding: 8px;
  width: 80px;
  -webkit-transition: padding 200ms ease-in-out;
  -o-transition: padding 200ms ease-in-out;
  transition: padding 200ms ease-in-out;
}

.navigation-bar .logo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: width 200ms ease-in-out, height 200ms ease-in-out;
  -o-transition: width 200ms ease-in-out, height 200ms ease-in-out;
  transition: width 200ms ease-in-out, height 200ms ease-in-out;
  display: inline-block;
  height: 64px;
  width: 64px;
  border-radius: 32px;
}

.navigation-bar.sticky .logo {
  display: inline-block;
  height: 38px;
  width: 38px;
}

.navigation-bar .logo img {
  height: 100%;
  width: 100%;
  transition: transform 100ms ease-in-out, box-shadow 100ms ease-in-out;
  border-radius: 100%;
}

.navigation-bar .logo img:hover {
  transform: scale(1.1);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}


/* --- Navigation Desktop --- */

.navigation-menu {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; /* inline-block in inline-block causes space between elements */
  list-style: none;
  margin: 0;
  padding: 0 8px;
}

@-webkit-keyframes popup {
  0% {
    overflow: hidden;
    height: 0;
  }
  99% {
    overflow: hidden;
    height: 247px;
  }
  100% {
    overflow: visible;
    height: 247px;  /* TODO: height: 100vh ? */
  }
}

@keyframes popup {
  0% {
    overflow: hidden;
    height: 0;
  }
  99% {
    overflow: hidden;
    height: 247px;
  }
  100% {
    overflow: visible;
    height: 247px;  /* TODO: height: 100vh ? */
  }
}

.mobile-navigation-menu {
  padding: 0;
  display: none;
  position: absolute;
  -webkit-transform: translateY(80px);
      -ms-transform: translateY(80px);
          transform: translateY(80px);
  top: 0;
  right: 0;
  left: 0;
  background: white;
  border: 1px solid white;
  -webkit-box-shadow: 1px 20px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 20px 20px rgba(0, 0, 0, 0.2);
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  -o-transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  -webkit-animation: popup 200ms forwards ease-in-out;
          animation: popup 200ms forwards ease-in-out;
}

.navigation-bar.sticky .mobile-navigation-menu {
  -webkit-transform: translateY(42px);
      -ms-transform: translateY(42px);
          transform: translateY(42px);
}

.navigation-menu li {
  display: inline-block;
  margin: 0;
  padding: 8px 0;
  white-space: nowrap;
}

.mobile-navigation-menu li {
  display: block;
  padding: 0;
}

.navigation-menu li a {
  display: inline-block;
  padding: 12px 18px;
  line-height: 19px;
  height: 19px !important;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin: 0;
  -webkit-transition: background 200ms ease-in-out;
  -o-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
  background: hsla(215, 67%, 95%, 1);
  color: black;
}

.mobile-navigation-menu li a {
  display: block;
  border-top: 1px solid white;
  height: auto !important;
  font-size: 20px;
  line-height: 24px;
}

.navigation-menu li a:hover {
  background: hsla(215, 67%, 85%, 1);
}

.navigation-menu li.current_page_item a {
  background: hsla(215, 47%, 45%, 1);
  color: white;
}

.navigation-menu li.current_page_item a:hover {
  background: hsla(215, 47%, 30%, 1);
}

.language-switcher.desktop {
  display: inline-block;
  font-size: 12px;
  padding: 8px;
  color: #AAAAAA;
}

.language-switcher a {
  display: inline-block;
  padding: 8px 4px;
  margin: 0;
  -webkit-transition: color 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out;
  transition: color 200ms ease-in-out;
  color: #AAAAAA;
}

.language-switcher a.selected {
  color: #666666;
}

.language-switcher a:hover {
  color: black;
}

.language-switcher .divider {
  display: inline-block;
  padding: 8px 1px;
}

/* --- Navigation Mobile --- */

#mobile-menu-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-transition: padding 200ms ease-in-out;
  -o-transition: padding 200ms ease-in-out;
  transition: padding 200ms ease-in-out;
}

.navigation-bar.sticky #mobile-menu-wrapper {
  padding: 0;
}

#mobile-menu-toggle {
	border: none;
	border-radius: 0;
  position: relative;
	background: transparent;
	color: black;
  cursor: pointer;
	display: inline-block;
	text-transform: uppercase;
	-webkit-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
  font-size: 0.875em;
	padding: 14px;
  outline: none;
}

.navigation-bar.sticky #mobile-menu-toggle {
  padding: 7px;
}

#mobile-menu-toggle:focus {
  background: hsla(215, 67%, 85%, 1);
}

#mobile-menu-wrapper.opened #mobile-menu-toggle {
  background: hsla(215, 47%, 45%, 1);
  color: white;
}

#mobile-menu-wrapper.opened #mobile-menu-toggle:focus {
  background: hsla(215, 47%, 30%, 1);
}

/* Menu toggle styles. */
#mobile-menu-toggle .icon-menu-toggle {
	display: inline-block;
	fill: currentColor;
	vertical-align: middle;
	position: relative; /* Align more nicely with capital letters */
	width: 2em;
	height: 2em;
  top: 0;
}

/* Animate menu icon (lines). */
#mobile-menu-wrapper .svg-menu-toggle .line {
  opacity: 1;
  -webkit-transform: rotate(0) translateY(0) translateX(0);
      -ms-transform: rotate(0) translateY(0) translateX(0);
          transform: rotate(0) translateY(0) translateX(0);
  -webkit-transform-origin: 1em 1em;
      -ms-transform-origin: 1em 1em;
          transform-origin: 1em 1em;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 300ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -o-transition: transform 300ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 300ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 300ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 300ms ease-in-out;
}
#mobile-menu-wrapper .svg-menu-toggle .line-1 {
  -webkit-transform-origin: 1em 2.5em;
      -ms-transform-origin: 1em 2.5em;
          transform-origin: 1em 2.5em;
}
#mobile-menu-wrapper .svg-menu-toggle .line-3 {
  -webkit-transform-origin: 1em 4.5em;
      -ms-transform-origin: 1em 4.5em;
          transform-origin: 1em 4.5em;
}

#mobile-menu-wrapper.opened .svg-menu-toggle .line-1 {
  -webkit-transform: rotate(45deg) translateY(0) translateX(0);
      -ms-transform: rotate(45deg) translateY(0) translateX(0);
          transform: rotate(45deg) translateY(0) translateX(0);
}
#mobile-menu-wrapper.opened .svg-menu-toggle .line-2 {
  opacity: 0;
}
#mobile-menu-wrapper.opened .svg-menu-toggle .line-3 {
  -webkit-transform: rotate(-45deg) translateY(0em) translateX(0em);
      -ms-transform: rotate(-45deg) translateY(0em) translateX(0em);
          transform: rotate(-45deg) translateY(0em) translateX(0em);
}

/* Text meant only for screen readers. */
#mobile-menu-wrapper .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

#mobile-menu-wrapper.opened .mobile-navigation-menu {
  display: block;
}

/* Desktop Mobile Switch */

.desktop-navigation-menu {
  display: none;
}
.language-switcher.desktop {
  display: none;
}
@media (min-width: 768px) {
  .navigation-bar {
    overflow: hidden;
  }
  .desktop-navigation-menu {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .language-switcher.desktop {
    display: inline-block;
  }
  #mobile-menu-wrapper {
    display: none;
  }
  .mobile-navigation-menu {
    display: none;
  }
  .language-switcher.mobile {
    display: none;
  }
}

/* --- Title --- */

.title-banner {
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: -1;
  padding-top: 42px;
  background: white;
  overflow: hidden;
}

.title-banner:first-child {
  padding: 0;
}

.title-banner img {
  width: calc(100% + 300px);
  margin-left: -120px;
}

@media (min-width: 768px) {
  .title-banner img {
    width: 100%;
    margin-left: 0;
  }
}


/* --- Content --- */

.paper {
  position: relative;
  background: white;
  padding: 0 16px 16px;
}

@media (min-width: 600px) {
  .paper {
    padding: 32px 16px 16px;
  }
}

.paper a {
  word-break: break-word;
}

.container {
  max-width: 950px; /* 65 - 70 Chars per line */
}

.content-wrapper {
  min-height: calc(100vh - 42px);
}

/* --- Footer --- */

.footer {
  background: #ccc;
  padding: 0 16px 16px;
}

@media (min-width: 992px) {
  .footer {
    padding: 16px;
  }
}

.footer .footer-blocks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.footer .footer-blocks > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
          flex: 1 1 200px;
  padding: 24px 16px 24px 0;
  white-space: nowrap;
  display: inline-block;
}

.footer .konto {
  -ms-flex-preferred-size: 300px !important;
      flex-basis: 300px !important;
  max-width: 100vw;
}

.footer .links > a {
  display: block;
  padding: 0;
}

.footer .links a {
  -webkit-transition: color 200ms ease-in-out, -webkit-text-decoration 200ms ease-in-out;
  transition: color 200ms ease-in-out, -webkit-text-decoration 200ms ease-in-out;
  -o-transition: color 200ms ease-in-out, text-decoration 200ms ease-in-out;
  transition: color 200ms ease-in-out, text-decoration 200ms ease-in-out;
  transition: color 200ms ease-in-out, text-decoration 200ms ease-in-out, -webkit-text-decoration 200ms ease-in-out;
  color: black;
}

.footer .links a img {
  height: 16px;
  -webkit-transition: -webkit-transform 200ms ease-in-out, -webkit-filter 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out, -webkit-filter 200ms ease-in-out;
  -o-transition: transform 200ms ease-in-out, filter 200ms ease-in-out;
  transition: transform 200ms ease-in-out, filter 200ms ease-in-out;
  transition: transform 200ms ease-in-out, filter 200ms ease-in-out, -webkit-transform 200ms ease-in-out, -webkit-filter 200ms ease-in-out;
  margin-right: 4px;
}

.footer .links a:hover {
  color: hsla(215, 47%, 30%, 1);
  text-decoration: underline !important;
}

.footer .links a:hover img {
  -webkit-transform: scale(1.15) rotate(-10deg);
      -ms-transform: scale(1.15) rotate(-10deg);
          transform: scale(1.15) rotate(-10deg);
  -webkit-filter: invert(30%) sepia(50%) saturate(500%) hue-rotate(180deg) brightness(78%) contrast(100%);
          filter: invert(30%) sepia(50%) saturate(500%) hue-rotate(180deg) brightness(78%) contrast(100%);
}

.footer .title {
  text-decoration: underline;
}

.support {
  position: relative;
  text-align: center;
  padding: 8px 8px 64px;
  background: #eee;
}

@media (min-width: 992px) {
  .support {
    padding-bottom: 32px;
  }
}

.support .title {
  margin-bottom: 4px;
}

.support .logos {
  display: block;
}

.support img {
  display: inline-block;
  height: 64px;
  padding: 4px;
  margin: 4px;
  background: white;
}

.support .img-with-title {
  display: inline-block;
  height: 64px;
  margin: 4px;
  background: white;
}

.support .img-with-title img {
  height: 56px;
}

.support .img-with-title > * {
  margin: 0;
}

.support .img-with-title .support-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: white;
  height: 64px;
  padding: 8px 12px 8px 8px;
  vertical-align: top;
}

.col-xs-12 {
  padding-top: 32px;
}

.col-xs-12 p {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .col-xs-12 {
    padding-top: 0;
  }

  .col-xs-12 p {
    margin-bottom: 10px;
  }
}

.copyright {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.copyright a {
  -webkit-transition: color 200ms ease-in-out;
       -o-transition: color 200ms ease-in-out;
          transition: color 200ms ease-in-out;
  color: hsla(215, 47%, 40%, 1);
}

.copyright a:hover {
  color: hsla(215, 47%, 30%, 1);
}

/* 404 Page */
.page-error .content-container {
  padding: 3rem 0;
}

.page-error .icon-wrapper img {
  display: block;
  height: 100px;
  width: auto;
  margin: 0 auto;
}

/* When WP Admin is active, shift the nav bar */
@media (max-width: 768px) {
  .customize-support .navigation-bar {
    position: absolute;
    height: 80px;
    margin-top: 46px;
  }
}

@media (min-width: 768px) {
  .customize-support .navigation-bar {
    margin-top: 32px;
  }
  .customize-support .wp-block-media-text .wp-block-media-text__media {
    top: 92px;
  }
}


/* Responsive Steps (Same as Bootstrap):
  @media (min-width: 768px)
  @media (min-width: 992px)
  @media (min-width: 1200px)

  Extra: @media (min-width: 600px) Media with text from gutenberg editor breaks

  Extra small (<576px)    .col-
  Small (>=576px)	        .col-sm-
  Medium (>=768px)        .col-md-
  Large (>=992px)         .col-lg-
  Extra Large (>=1200px)  .col-xl
*/