/*
Theme Name: Netwerk Noom FSE
Theme URI: 
Author: Graphic Invention
Author URI: 
Description: 
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: netwerk-noom-fse
Tags: 
*/

@media all and (max-width: 599px) {
  .hide-mobile {
    display: none !important;
    visibility: hidden !important;
  }
}

@media all and (min-width: 600px) {
  .hide-desktop {
    display: none !important;
    visibility: hidden !important;
  }
}

/* 1140 + 65 (sideborder) + marge */
@media all and (max-width: 1280px) {
  .entry-content.alignfull main > *:not(.alignfull) {
    margin-inline: 1rem !important;
  }
  footer.alignfull .wp-block-group,
  .entry-content.alignfull main > .alignfull {
    padding-inline: 1rem !important;
  }
}

@media all and (max-width: 1024px) {
  .wp-site-blocks > .wp-block-group {
    border-left-width: 0.5rem !important;
  }
}

.no-top-margin {
  margin-block-start: 0 !important;
}
.main-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  color: #565656;
  font-size: 1.125rem;
}

.wp-block-navigation-item__content:hover span,
.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--custom-primary) !important;
}

.main-navigation
  .wp-block-navigation__container
  > .wp-block-navigation-item.has-child
  > .wp-block-navigation-item__content {
  padding-inline-end: 1.4rem;
}

.main-navigation
  .wp-block-navigation-item.open-on-click
  .wp-block-navigation-submenu__toggle
  + .wp-block-navigation__submenu-icon {
  margin-left: -1em;

  & svg {
    stroke: var(--wp--preset--color--custom-primary);

    & > path {
      stroke-width: 2px;
    }
  }
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  white-space: nowrap;
}
/* Last submenu opens left */
.main-navigation li:not(:last-of-type) .wp-block-navigation__submenu-container {
  left: 0 !important;
  right: auto !important;
}

/* Mobile menu */
.is-menu-open #modal-1-content {
  padding-block-start: calc(1rem + 24px);

  & ul,
  & li {
    /* margin-block: 0.5rem !important; */
    width: 100%;
  }
  .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    border-block-start: 1px solid #c2c1c1;
    display: inline-block;
    /* width: 100%; */
    padding: 0.5rem 0.7rem !important;
  }

  & ul {
    align-items: flex-start;
    align-self: flex-start;

    & li {
      align-items: stretch;
    }
  }
  & .wp-block-navigation-item__content {
    font-size: 1.2rem;
  }

  & button.wp-block-navigation-item__content {
    font-size: 1rem;
    &:hover,
    &:hover span {
      color: inherit !important;
      pointer-events: none;
    }
  }

  & wp-block-navigation-submenu__toggle {
    pointer-events: none;

    &:hover,
    &:hover span {
      color: inherit !important;
    }
  }
  & .wp-block-navigation__container {
    gap: 0.2rem !important;

    & > li > a > .wp-block-navigation-item__label {
      /* color: var(--wp--preset--color--custom-primary); */
      font-size: 1.2rem;
      font-weight: bold;
    }
  }
  & .wp-block-navigation__submenu-container {
    padding: 0 1rem;
    line-height: 1.8em;
    margin-block-end: 0.5rem;
  }

  & .has-child {
    /* background-color: var(--wp--preset--color--custom-light-grey) !important; */
  }
}

.is-style-text-shadow-deep {
  --wp--preset--shadow--deep: 8px 8px 20px rgba(0, 0, 0, 0.9);
  text-shadow: var(--wp--preset--shadow--deep);
}

.onderwerpen-home-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(5rem, 100%), 1fr)
  ) !important;
}

.grid-with-sidebar {
  /* grid-template-columns: calc((var(--wp--style--global--wide-size) - (100vw - 4rem - var(--wp--style--global--content-size)))) var(--wp--style--global--content-size); */
  /* grid-template-columns: minmax(0, 1fr) minmax(
      min-content,
      var(--wp--style--global--content-size)
    ); */
  grid-template-columns: minmax(200px, 1fr) minmax(
      min-content,
      var(--wp--style--global--content-size)
    );
  gap: 2rem;

  & > .sidebar,
  & > .wp-block-spacer {
    background-color: var(--wp--preset--color--custom-light-grey);
    width: auto !important;
    position: relative;
    margin-block-start: -24px;
    height: calc(100% + 2 * 24px) !important;

    &::before {
      content: '';
      display: block;
      position: absolute;
      right: 100%;
      background-color: var(--wp--preset--color--custom-light-grey);
      /* width: calc(
        (
            100vw - var(--wp--style--global--content-size) - 65px - 100% - 32px -
              19px
          ) / 2
      ); */
      width: 100vw;
      height: 100%;
      z-index: -1;
    }
  }

  & > .sidebar {
    & a {
      color: var(--wp--preset--color--black);

      &:hover {
        color: var(--wp--preset--color--custom-secondary);
      }
    }

    & .current-cat a {
      color: var(--wp--preset--color--custom-secondary);

      &:hover {
        color: var(--wp--preset--color--custom-primary);
      }
    }
  }

  & .wp-block-buttons:has(.js--toggle-sidebar) {
    display: none;
    visibility: hidden;
  }

  @media all and (max-width: 1024px) {
    grid-template-columns: 1fr;

    & > .sidebar {
      position: absolute;
      /* left: calc(-100% - 0.5rem); */
      transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0s;
      transform: translateX(calc(-100% - 2rem));
    }
    &.sidebar-open > .sidebar {
      transform: translateX(0);
    }

    & > .wp-block-spacer {
      display: none;
      visibility: hidden;
    }

    & .wp-block-buttons:has(.js--toggle-sidebar) {
      display: block;
      visibility: visible;
    }
  }
}

.wp-block-categories-list {
  list-style: none;
  padding-inline-start: 0;
}

.grid-navigation {
  grid-template-columns: 2fr 2fr;
}
@media all and (min-width: 600px) {
  .grid-navigation {
    grid-template-columns: 1fr 3fr;
  }
}

.wp-block-query-pagination-numbers {
  gap: 1rem;
  display: flex;
}

.show-three-items-large .wp-block-post-template {
  & .wp-block-post-date a,
  & .wp-block-post-terms a {
    color: #818181;

    &:hover {
      color: var(--wp--preset--color--custom-primary);
    }
  }

  /* First 3 items */
  body:not([class*='paged-']) & li:nth-child(-n + 3) {
    & .read-more-link {
      display: none;
    }
  }

  /* Everything but the first 3 */
  body[class*='paged-'] & li,
  & li:nth-child(n + 4) {
    & .archive-content,
    & .wp-block-post-terms {
      display: none;
    }

    & .wp-block-post-title {
      font-size: var(--wp--preset--font-size--medium);

      & a {
        color: var(--wp--preset--color--black);
      }
    }

    & .wp-block-separator {
      margin-block-end: 1rem !important;
    }
  }
}

.archive-content .wp-block-post-featured-image :where(img) {
  max-height: 100% !important;
  height: initial !important;
}

@media all and (max-width: 600px) {
  .archive-content {
    grid-template-columns: 1fr;
  }

  .has-purple-orange-hard-gradient-background {
    --wp--preset--font-size--x-large: 1.5rem;
  }

  .wp-block-cover,
  .wp-block-cover-image {
    min-height: 250px;
  }
}

.wp-block-post-featured-image {
  overflow: hidden;
}

.wp-block-cb-carousel .slick-slide {
  padding-inline: 0;
}

.header-image-wrapper:not(:has(img)) {
  background-image: url(assets/images/default-header.jpg);
  background-size: cover;
}

.slick-dots {
  bottom: 1rem;
  right: 1rem;
  width: initial;

  & li button::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white);
    opacity: 1;
    box-shadow: var(--wp--preset--shadow--deep);
  }

  & li.slick-active button::before {
    background-color: var(--wp--preset--color--custom-primary);
    /* border-color: transparent; */
    opacity: 1;
  }
}

.verhalen-tile li.type-verhalen {
  display: flex;
  flex-direction: column;

  & .wp-block-group {
    display: flex;
    flex: 1;
  }

  & .wp-block-post-excerpt {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  & .wp-block-post-excerpt__more-text {
    margin-block-start: auto;
    padding-block-start: 1rem;
  }
}

.wp-block-tiptip-hyperlink-group-block {
  text-decoration: none;
}

.wp-block-tiptip-hyperlink-group-block:hover {
  text-decoration: underline;
}

.active-page {
  color: var(--wp--preset--color--custom-secondary) !important;
  font-weight: bold !important;
}

.nieuws-tile > li {
  display: flex;
  flex-direction: column;

  h2 {
    margin-block-start: 0;
  }

  & .wp-block-group {
    margin-block-start: auto !important;
  }
}