@import "../fonts/Proza_Libre/font.css";

@import "patterns/group-over-image-left.css";

html {
  font-family: var(--font-family);
  line-height: 1.6;
  font-size: min(16px, .9vw);
}

body {
  color: #292929;
  background-color: white;
  font-size: var(--font-size-regular);
}

.user-login-form{
	width: 320px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding: 30px;
	margin:40px;
	border-radius:10px;
	border: 1px solid #d0d0d0;
}

.user-login-form .form-item > input:not([type="checkbox"]){
    max-width:100%;	
}


/* Das Ziel ist den Style nur im Frontend und im Gutenberg Editor zu laden.
  Der .layout-container umfasst sowohl im Backend als auch im Frontend den gesamten Content.
  Mit :not:has sage ich dass der Style nur greifen soll wenn sich der Gutenberg Editor nicht im Content
  befindet. Damit gehe ich sicher dass der Style auf Elemente im Backend nicht greift.
  Aber Achtung, zusätzlich wird der .edit-post-visual-editor__content-area ausgewählt damit in diesem Element
  die Styles wieder greifen. Das Element beinhaltet den Content des Gutenberg Editors. */
.edit-post-visual-editor__content-area,
.layout-container:not(:has(main.gutenberg-full-editor)) {

  a {
    color: var(--color-yellow);
  }

  /* Summary (Accordeon) */
  .wp-block-details {
    border-bottom: 1px solid #E6E6E6;
  }

  .wp-block-details > div {
    padding: var(--spacing-2);
  }

  .wp-block-details summary {
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-bold);
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2);
  }
  .wp-block-details[open] summary {
    color: var(--color-text-highlight);
    background-color: white;
  }
  .wp-block-details[open] > div  {
    background-color: white;
  }

  .wp-block-details summary:focus {
    outline-width: 0;
  }

  summary::marker {
    content: '';
  }
  summary::-webkit-details-marker {
    display: none;
  }
  summary::after {
    content: "";
    transition: transform .3s linear;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    margin: auto 0 auto var(--spacing-2);
    border-right: 3px var(--color-text-primary) solid;
    border-bottom: 3px var(--color-text-primary) solid;
  }
  .wp-block-details[open] summary::after {
    transform: rotate(-135deg);
  }

  /* Weisse Kurve */
  svg.weisse-kurve {
    display: block;
    width: 100%;

    /*
     * Die 'position: relative;' ist notwendig, da das SVG anscheinend
     * bei Verwendung von 'width: 100%' unten abgeschnitten wird, wenn die
     * angegebene Breite des SVG anders ist als die eingestellte Breite.
     * Dieser Fehler scheint ein Anzeige-Bug zu sein.
     */
    position: relative;
  }
  svg.weisse-kurve:first-child {
    /*
    Wenn die Kurve oben in einem Container ist dann muss sie nach oben verschoben werden.
     */
    bottom: 4px; /* 2px reichen aber 4px sind um sicher zu gehen. Man weiß ja nie. */
  }
  svg.weisse-kurve:last-child {
    /*
    Wenn die Kurve unten in einem Container ist dann muss sie nach unten verschoben werden.
     */
    top: 4px; /* 2px reichen aber 4px sind um sicher zu gehen. Man weiß ja nie. */
  }

  figure > img {
    width: 100%;
    height: 100%;
  }

  /*
  Sollte nur einem Image, welches erstes Child von einer Group ist, gegeben werden
  um diese als Background-Image für die Parent Group zu benutzen.
   */
  .group-background {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .group-background::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 41, 41, 0.6);
    border-radius: 5px;
  }
  .wp-block-group__inner-container:has(> .group-background) {
    position: relative;
  }

  /* Für die Abstände zur Seite benutzen wir margin. */
  :where(.wp-block-group.has-background) {
    padding: 0;
  }

  /* Links, Rechts, Zentrieren */
  :where(.wp-block-group:not(.alignleft):not(.alignright):not(.alignfull)) > :where(:not(.wp-block-group)){
    /* Das muss so unspezifisch sein damit der Gutenberg Editor überschreiben kann. */
    max-width: var(--content-width);
    margin-left: var(--content-margin);
    margin-right: var(--content-margin);
  }
  .wp-block-group.alignwide > .wp-block-group__inner-container{
    max-width: var(--wide-width);
  }
  .wp-block-group.alignfull > .wp-block-group__inner-container {
    max-width: 100%;
  }
  .alignright {
    margin-left: auto;
  }
  .aligncenter {
    margin-left: auto;
    margin-right: auto;
  }
  .alignfull {
    width: 100%;
  }

  /* Bild mit Text */
  .wp-block-media-text {
    display: flex;
    flex-direction: column;
  }
  .wp-block-media-text.has-media-on-the-right {
    flex-direction: column-reverse;
  }
  .wp-block-media-text > .wp-block-media-text__content {
    padding-left: 0;
    padding-right: 0;
    min-width: 100%;
  }
  .wp-block-media-text > .wp-block-media-text__media {
    padding-bottom: var(--spacing-3);
    width: 100%;
    align-self: unset;
  }
  @media (min-width: 768px) {
    .wp-block-media-text,
    .wp-block-media-text.has-media-on-the-right {
      flex-direction: row;
      align-items: flex-start;
    }
    .wp-block-media-text > .wp-block-media-text__content {
      min-width: 50%;
    }
    .wp-block-media-text > .wp-block-media-text__media {
      padding-bottom: 0;
      padding-right: var(--spacing-6);
      width: 1fr;
    }
    .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
      padding-right: 0;
      padding-left: var(--spacing-6);
    }
  }
  .wp-block-media-text > .wp-block-media-text__media > img {
    box-sizing: border-box;
    border: 5px white solid;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
  }

  .has-small-font-size {
    font-size: var(--font-size-small);
  }
  .has-regular-font-size {
    font-size: var(--font-size-regular);
  }
  .has-medium-font-size {
    font-size: var(--font-size-medium);
  }
  .has-subtitle-font-size {
    font-size: var(--font-size-subtitle);
  }
  .has-h-4-font-size {
    font-size: var(--font-size-h4);
  }
  .has-h-3-medium-font-size {
    font-size: var(--font-size-h3-medium);
  }
  .has-h-3-font-size {
    font-size: var(--font-size-h3);
  }
  .has-h-2-font-size {
    font-size: var(--font-size-h2);
  }
  .has-h-1-font-size {
    font-size: var(--font-size-h1);
  }

  /* Buttons
    Weitere Buttonstile sind unter:
    - webform.css
    - toolbar.css
  */
  .wp-block-button > .wp-block-button__link {
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
  }
  .wp-block-button.is-style-fill > .wp-block-button__link {
    background-color: var(--color-yellow);
  }
  .wp-block-button.is-style-fill > .wp-block-button__link:hover,
  .wp-block-button.is-style-fill:hover > .wp-block-button__link {
    /*box-shadow: 0 0 1em 0 rgba(0,0,0,0.64) inset;*/
	background-color: #00618d;
	color:#fff;
  }
  /* Cover Link gehört irgendwie auch zu den Buttons */
  a.cover_link {
    color: unset;
    text-decoration: unset;
  }
  a.cover_link + .wp-block-cover__inner-container {
    pointer-events: none;
  }
  a.cover_link:hover + .wp-block-cover__inner-container .wp-block-button.is-style-fill > .wp-block-button__link {
      /*box-shadow: 0 0 1em 0 rgba(0,0,0,0.64) inset;*/
  	background-color: #00618d;
  	color:#fff;
  }

  :where(p) {
    font-size: var(--font-size-regular);
    line-height: 1.667;
  }

  .gap-2 {
    gap: var(--spacing-2);
  }
  .gap-3 {
    gap: var(--spacing-3);
  }
  .gap-4 {
    gap: var(--spacing-4);
  }
  .gap-5 {
    gap: var(--spacing-5);
  }
  .gap-6 {
    gap: var(--spacing-6);
  }

  .wp-block-button__link {
    background-color: inherit;
    color: inherit;
  }

  .is-layout-flex {
    display: flex;
  }
  .is-layout-flex:not(.is-nowrap) {
    flex-wrap: wrap;
  }
}