/*
Theme Name: Dr Mir
Theme URI: 
Author: GI Merijn
Author URI: https://graphicinvention.nl
Description: 
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 8
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drmir
Tags: grid-layout, two-columns, four-columns, featured-images, full-site-editing, maatwerk
*/

* {
  box-sizing: border-box;
}

:root {
  --global--font-primary: 'din-2014', sans-serif;
  --global--font-secondary: 'din-2014-narrow', sans-serif;
  /* --global--font-secondary: 'degular', sans-serif; */
  --border-radius: 1rem;
}

body {
  font-family: var(--global--font-primary);
  background: rgb(243, 243, 249);
}

.home-navigation-columns .wp-block-column {
  display: flex;
  flex-direction: column;

  & .wp-block-buttons {
    margin-block-start: auto;
  }
}

.home-navigation-columns h2 a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.main-navigation {
  /* position: absolute; */
  z-index: 10;
  width: 100%;
  min-height: 2rem;
  padding-inline-end: 2rem;

  & .current-menu-item {
    position: relative;

    &::before {
      content: '';
      width: 100%;
      height: 4px;
      background-color: var(--wp--preset--color--mir-teal);
      position: absolute;
      top: -5px;
    }
  }
}

@media all and (max-width: 1032px) {
  .main-menu-container > .wp-block-group {
    padding-inline: 1rem 0 !important;
  }
}
@media all and (max-width: 599px) {
  .main-menu-container .main-menu-wrapper {
    margin-inline-start: auto;
  }
  .main-navigation {
    padding-inline-end: 1rem;
  }
}

.wp-block-column p {
  margin-block-start: 1em;
}

.wp-block-column h3 + p {
  margin-block-start: 0;
}

.entry-content {
  position: relative;
}

.no-margin {
  margin: 0;
}

.drmir-contact-figure,
.drmir-homepage-figure {
  position: absolute;
  bottom: -16px;
  right: -120px;
  z-index: -1;
}

.drmir-contact-figure {
  bottom: -16px;
  right: 0;
}
.drmir-contact-figure img,
.drmir-homepage-figure img {
  height: 620px;
  width: auto;
}

@media all and (max-width: 781px) {
  .hide-mobile {
    display: none !important;
    visibility: hidden !important;
  }
  .drmir-contact-figure,
  .drmir-homepage-figure {
    display: none !important;
    visibility: hidden !important;
  }
}

@media all and (max-width: 1200px) {
  .drmir-contact-figure {
    display: none !important;
    visibility: hidden !important;
  }
}

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

/* .external-link:not(.wp-block-heading)::before, */
a[target='_blank']::after {
  content: '';
  display: inline-block;
  background-color: currentColor;
  width: 15px;
  height: 15px;
  margin-inline-start: 0.5ch;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='blue' d='M220-153q-27.637 0-47.319-19.681Q153-192.363 153-220v-520q0-27.638 19.681-47.319Q192.363-807 220-807h257v67H220v520h520v-257h67v257q0 27.637-19.681 47.319Q767.638-153 740-153H220Zm168.5-188L341-388.5 692.5-740H568v-67h239v239h-67v-124.5L388.5-341Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='blue' d='M220-153q-27.637 0-47.319-19.681Q153-192.363 153-220v-520q0-27.638 19.681-47.319Q192.363-807 220-807h257v67H220v520h520v-257h67v257q0 27.637-19.681 47.319Q767.638-153 740-153H220Zm168.5-188L341-388.5 692.5-740H568v-67h239v239h-67v-124.5L388.5-341Z'/%3E%3C/svg%3E");
}

a[target='_blank']:has(img)::after,
.is-style-next-button a[target='_blank']::after {
  mask-image: initial;
  -webkit-mask-image: initial;
  background-color: initial;
  content: unset;
}

.no-underline a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.wp-block-media-text .wp-block-media-text__content {
  padding-inline-start: 0;
}

@media all and (max-width: 781px) {
  .br-start-start {
    border-start-start-radius: var(--border-radius);
  }
  .br-end-start {
    border-end-start-radius: var(--border-radius);
  }
  .br-end-end {
    border-end-end-radius: var(--border-radius);
  }
  .br-start-end {
    border-start-end-radius: var(--border-radius);
  }
}

@media all and (min-width: 782px) {
  .br-md-start-start {
    border-start-start-radius: var(--border-radius);
  }
  .br-md-end-start {
    border-end-start-radius: var(--border-radius);
  }
  .br-md-end-end {
    border-end-end-radius: var(--border-radius);
  }
  .br-md-start-end {
    border-start-end-radius: var(--border-radius);
  }
}