/*
Theme Name: Glaslokaal
Theme URI: 
Author: GI - Merijn
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glaslokaal
Tags: 
*/

* {
  box-sizing: border-box;
}

.stramien {
  display: grid;
  grid-template-columns: 1fr;

  & .site-header {
    background-image: url(assets/images/glaslokaal-mobiel-header.jpg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-blend-mode: multiply;
    background-size: auto 100%;
    mix-blend-mode: multiply;

    @media all and (min-width: 1100px) {
      background-image: url(assets/images/header-white.png);
      margin: 0;
    }
  }

  & .header-background {
    background-color: var(--wp--preset--color--custom-primary) !important;
    z-index: -1;
    border-radius: 0 10px 10px 0;

    @media all and (min-width: 1100px) {
    }

    &::before {
      content: ' ';
      display: block;
      background-color: white;
      position: absolute;
      rotate: 47.5deg;

      height: 404px;
      width: 370px;
      top: -211px;
      left: -110px;

      @media all and (min-width: 1100px) {
        height: 404px;
        width: 370px;
        top: -211px;
        left: -110px;
      }
    }
  }

  @media all and (max-width: 1099px) {
    padding-inline: 2rem;

    & .sluit-je-aan {
      order: 5;

      & .wp-block-button__link {
        border-radius: 10px !important;
      }
    }

    & .navigation-wrapper {
      order: 6;

      & .main-navigation {
        display: none;
      }
    }

    & .right-side {
      order: 7;
      display: none;
    }

    & .left-side {
      order: 5;
      display: none;
    }

    /* & .mid-side::before {
      content: '';
      display: block;
      height: 100%;
      width: 9999rem;
      background-color: var(--wp--preset--color--custom-primary);
      position: absolute;
      right: 100%;
      top: 0;
    } */

    & > main {
      order: 4;
    }

    & .meta-box {
      order: 3;
    }
    & .site-header,
    & .header-background {
      grid-area: 1 / 1;
      order: 1;
      padding: 1rem;
      min-height: 300px;
      margin-inline: -2rem 0;
      padding-inline-end: 2rem;

      & h2 {
        font-size: 38px !important;
      }
      & p {
        font-size: 13px;
      }
    }
    & .header-background::before {
      left: -292px;
    }
  }

  @media all and (min-width: 1100px) {
    grid-template-columns: 1fr 3fr 1fr 1fr;
    grid-template-rows: 60px 200px 80px min-content;

    & .site-header {
      grid-area: 1 / 1 / 3 / 3;
    }

    & .header-background {
      grid-area: 2 / 1 / 3 / 3;
      z-index: -1;
    }
    & .site-header,
    & .header-background {
      margin: 0;
    }

    & .sluit-je-aan {
      grid-area: 1 / 3 / 2 / 4;
    }

    & .navigation-wrapper {
      grid-area: 2 / 3 / 4 / 4;

      & > nav {
        padding-block: 2rem;
      }
    }

    & .right-side {
      grid-area: 2 / 4 / 3 / 5;
    }

    & .left-side {
      grid-area: 4 / 1 / 5 / 2;

      & > div::before {
        content: '';
        display: block;
        height: 100%;
        width: 9999rem;
        background-color: var(--wp--preset--color--custom-primary);
        position: absolute;
        right: 100%;
        top: 0;
      }
    }

    & > main {
      grid-area: 4 / 2 / 5 / 3;
    }

    & .meta-box {
      grid-area: 3 / 2 / 4 / 3;
    }
  }
}

.wp-block-navigation-item.has-child {
  flex-wrap: wrap;
}

.current-menu-ancestor .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container {
  width: 100% !important;
  position: relative !important;

  & .wp-block-navigation-item a {
    padding-inline: var(--wp--preset--spacing--50) !important;
  }
}

.current-menu-ancestor .wp-block-navigation__submenu-container {
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

.current-menu-item span {
  /* text-decoration: underline; */
  font-weight: bold;
}

.main-navigation {
  & > li > button {
    padding-inline: var(--wp--preset--spacing--50) !important;
    padding-block: var(--wp--preset--spacing--40);
    flex: 1;
  }
  .wp-block-navigation__submenu-icon {
    margin-right: 1rem;
  }
}

/* .wp-block-navigation-submenu__toggle:focus-visible,
.wp-block-navigation-submenu__toggle:focus {
  outline-width: 0 !important;
  outline: none;
} */

.using-mouse .wp-block-navigation-submenu__toggle:focus,
.using-mouse .wp-block-navigation-submenu__toggle:focus-visible {
  outline: none;
}

.mobile-menu {
  padding: 1rem 1rem 0 1rem;

  @media all and (min-width: 1100px) {
    display: none !important;
  }
}

.mobile-navigation {
  margin-block-start: 2rem !important;

  & .has-child > a {
    font-weight: bold;
  }

  & .wp-block-navigation__submenu-container {
    margin-inline-start: 0;
    padding-inline-start: 0 !important;
  }
}

.wp-block-navigation__submenu-container {
  & > *:first-child {
    padding-block-start: 0.5rem !important;
  }
  & > *:last-child {
    padding-block-end: 0.8rem !important;
  }
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-block: 0.2rem !important;
}

.wp-block-navigation-submenu__toggle {
  padding-block: 0.8rem 0.2rem !important;
}

.forminator-row {
  margin-block-end: 1rem !important;
}

.forminator-design--basic {
  & input,
  & textarea {
    padding: 0.5rem 1rem;
  }
}

.forminator-button {
  background-color: var(--wp--preset--color--custom-primary);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 0.5rem 1rem;
  border: none;
  color: var(--wp--preset--color--white);
  text-align: center;
  font-style: normal;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    background-color: black;
  }
}