/*
Theme Name: ZUK-Theme_v0.4
Theme URI: https://www.zuk-freiburg.de
Author: Gregor Renner
Author URI: https://www.kh-freiburg.de/de/contact/renner-gregor_105
Description: Theme for AAC websites
Version: 0.4
Version description: 0.2 Loads child styles if available. 0.3 minor changes. 0.4 since 2025-01-22: 
Requires at least: 0.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zuk
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns

This theme, like WordPress, is licensed under the GPL.
*/
:root {
  --primary: #bde2ef;
  --primary: #ddd;
  --dark: #333;
  --light: #fff;
  /* --shadow: 0 1px 5px rgba(104, 104, 104, 0.8); */
  --shadow: 0 2px 3px rgba(104, 104, 104, 0.8);
  --main_color: rgb(1, 0, 153);
  /* ZUK */
  /* --main_color: #0193de; BAG-BKOM */
  /* --background: #ccc;
  --background: #fff59f;
  --background: #f2f2f2; */
  --red: rgb(100%, 0%, 0%);
  --header-banner-hight: 75px;
  --header-banner-padding: 10px;
  --padding: 10px;
  /* Bootstrap-Breakpoints: bis 575 (bis hier), ab 576, ab 768, ab 992, ab 1200, ab 1400 */
  --bs-sm: 576px; 
  --bs-md: 768px; 
  --bs-lg: 992px;
  --bs-xl: 1200px; 
  --bs-xxl: 1400px; 
}

html{
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--background);
  /* max-width: var(--bs-lg); */
  margin: auto;
  line-height: 1.4;
}

header {
  background-color: var(--main_color);
  background-color: var(--light);
}

footer{
  grid-area: footer;
}
/* page-layout-end */

.header-banner {
  /* background: linear-gradient(to right, var(--main_color), var(--light)); */
  display: grid;
  grid-template-columns: calc(var(--header-banner-padding) + var(--header-banner-hight)) 1fr;
  grid-template-areas: "left main";
  grid-template-rows: var(--header-banner-hight);
  align-items: center;
  justify-self: center;
  justify-content: center;
  margin: var(--header-banner-padding);
}

header img {
  grid-area: left;
  height: var(--header-banner-hight);
  width: auto; 
}
@media (max-width: 440px) {
  .header-banner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "left";    
  }
  header img {
    grid-area: left;
    width: 100%;
    height: auto;
  }
}
.header-banner-text{
  grid-area: main;
  min-height: var(--header-banner-hight);
  display: flex;
  align-items: center;  
  background: linear-gradient(to right, var(--main_color), var(--light));  
}
.header-banner h1 {
  font-size: 1.2rem;
  padding: var(--header-banner-padding) calc(2 * var(--header-banner-padding));
  color: var(--light);
  margin-bottom: 0;
  margin-top: 0;
}
/* Bootstrap-Breakpoints: X-Small bis 575, sm ab 576, md ab 768, lg ab 992, xl ab 1200, xxl ab 1400 */
@media (min-width: 576px /* small */) {
  .header-banner h1 {
    font-size: 1.2rem;
    padding: 0.75rem; 
  }
}
@media (min-width: 768px /* medium */) {
  .header-banner h1 {
    font-size: 1.5rem;
    padding: 1rem; 
  }
}
@media (min-width: 992px /* large. xl:  */) {
  .header-banner h1 {
    font-size: 2rem;
    padding: 1.2rem; 
  }
}

.menu-item {
  list-style-type: none;
}

header .menu-topmenue {
  background-color: var(--light);
  width: 100%;
  padding: 0;
  list-style-type: none;
  grid-gap: 15px;
  margin: 15px 0 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

header .menu-topmenue ul {
  border: 0px;
  padding: 0px;
  margin-bottom: 0px;
}

header .menu-topmenue li {
  padding: 0px;
  margin: 0px;
  border: 10px solid var(--shadow);
  list-style-type: none;
}

header .menu-topmenue a {
  background: var(--primary);
  color: var(--dark);
  display: block;
  text-decoration: none;
  padding: 1rem;
  text-align: center;
  text-justify: distribute;
  font-size: 1.0rem;
  height: 2rem;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}

header .menu-topmenue a:hover {
  background: var(--main_color);
  color: var(--primary);
}

header .menu-topmenue .current_page_item a {
  background-color: var(--main_color);
  background: var(--primary);
  color: var(--light);
  color: var(--main_color);
}

header .menu-topmenue .current_page_item a:hover {
  background-color: var(--light);
  color: var(--main_color);
}

#top-menu-nav-container div {
  margin: 0;
}
#top-menu-nav-toggle {
  display: none;
}

footer{
  grid-area: footer;
  display: grid;
  grid-template-columns: 180px auto 25px 25px 25px 25px;
  grid-template-rows: 100%;
  grid-template-areas: 
    "footer-menu footer-main footer-nav1 footer-nav2 footer-nav3 footer-nav4";
  background-color: #f1f2f3;
  margin: 0;  
  align-items: end;
}

footer h6{
  font: bold 1rem "Arial";
  margin: 0;
  height: 100%;
  display: grid;
}

footer .menu-footermenu-container{
  grid-area: footer-menu;
  height: 100%;
  display: grid;
  align-content: end;
}

footer #menu-footermenu{
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  /* align-items: center; */
  grid-template-columns: auto auto;
  align-items: end;
  height: 100%;
}

footer #menu-footermenu li{
  padding: 0 5px 0 0;
  display: inline;
  height: 100%;
}

/* .menu-footermenu .menu-item a {
  text-align: center;
}

.menu-item a {
  text-decoration: none;
}
 */
@media (max-width: 760px) {
  header .menu-topmenue {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 440px) {
  header .menu-topmenue {
    grid-template-columns: repeat(2, 1fr);
  }
  .top-menu-nav {
    padding-left: var(--header-banner-padding);
    padding-top: 8px;
    padding-bottom: 15px;
    margin: 0px;
  }

  .top-menu-nav-toggle-label span,
  .top-menu-nav-toggle-label span::before,
  .top-menu-nav-toggle-label span::after {
    display: block;
    background: var(--main_color);
    height: 2px;
    width: 1em;
    border-radius: 2px;
    position: absolute;
  }

  .top-menu-nav-toggle-label span::before,
  .top-menu-nav-toggle-label span::after {
    content: "";
    position: absolute;
  }

  .top-menu-nav-toggle-label span::before {
    top: 4px;
  }

  .top-menu-nav-toggle-label span::after {
    bottom: 4px;
  }

  header .primary-menu a {
    text-align: center;
    font-size: 1rem;
    height: 1rem;
  }

  #top-menu-nav-toggle:checked~.menu-topmenu-container {
    margin-top: 0px;
    margin-left: 0;
  }

  #menu-topmenu {
    display: none;
  }

  #top-menu-nav-toggle:checked~.menu-topmenu-container>#menu-topmenu {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 1px;
    padding-bottom: 0px;
    /* funktioniert noch nicht: 
    transform: scale(1);
    transform-origin: top;
    transition: transform 4000ms ease-in-out; */
  }
}

body h1 {
  color: var(--main_color);
  font-size: 1.5rem;
  font-weight: bold;
  text-align: left;
  padding: 0;
  margin: 0;
}

body h2 {
  color: var(--main_color);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: left;
  padding: 0;
}

body p {
  font-size: 1rem;
}

body div{
  margin-left: 10px;
  margin-right: 10px;
}