/* ROOT */
/*
	@import url("./globals.css");
	@import url("./fonts.css");
*/

/* LAYOUT */

  html, body {
    min-height: 100%;
    /* position: relative; */
    display: inline;
  }

  body{
    overflow: auto !important;
  }

  .wp-block-cover{
    margin-left: calc(0em - var(--wp--style--root--padding-left)) !important;
    width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)) !important;
    max-width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right)) !important;
  }

  .wp-site-blocks{
  }

  main,
  .entry-content{
    margin-block-start: 0 !important;
  }
  main > div.wp-block-group{
    margin: 0 !important;
  }
  .admin-bar body{
    margin-top: 32px !important;
  }

  /* Fix full section height on mobile to account for browser UI */
    @media (max-width: 782px) {
      .full_height {
        min-height: 100svh !important; /* Use small viewport height to exclude browser UI */
      }
      .mobile_center{
        display: flex;
        justify-content: center;
        text-align: center;
      }
      .mobile_font_xl{ 
        font-size: x-large !important;
      }
      .mobile_icon_xl svg{
        font-size: 1.5em !important; 
        width: 32px;
        height: 32px;
      }
    }

  .wp-block-cover{
    margin: 0;
  }
  .hidden{
    display: none;
  }
  header{
    width: 100%;
    padding: 1em 0;
  }


  .page-template-page-single main{
    padding: 4em 3em;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 4em);
    align-items: center;
  }

  /*
  header > .wp-block-group > .wp-block-group > .wp-block-group{
    padding: 0 !important;
  }
  */

  .wp-block-cover .wp-block-cover__inner-container, 
  .wp-block-cover-image .wp-block-cover__inner-container {
   /*   width: var(--wp--style--global--content-size); */
  }

  .wp-block-post-content {
      z-index: 1;
      position: relative;
  }

  @media (max-width: 1024px) {

    .tablet_break {
        display: flex;
        flex-direction: column;
    }
    .tablet_break > .wp-block-column{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tablet_full{
      max-width: 100% !important;
    }
    .tablet_half{
      max-width: 50% !important;
    }
    .tablet_half *,
    .tablet_full *{
      max-width: 100% !important;
    }

	}

  @media (max-width: 782px) {
    .mobile_full{
      max-width: 100% !important;
    }
    .mobile_half{
      max-width: 50% !important;
    }
    .mobile_half *,
    .mobile_full *{
      max-width: 100% !important;
    }
	}

  .grid_autofit{
  display: flex !important;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center; /* centers the last row */

  }
  .grid_autofit > * {
    box-sizing: border-box;
    flex: 0 1 calc(33.333% - 1rem); /* 3 per row */
    min-width: calc(33.333% - 1rem);
  }
  @media (max-width: 1024px) {
    .grid_autofit > * {
      flex: 0 1 calc(50% - 1rem); /* 2 per row */
      min-width: calc(50% - 1rem);
    }
  }
  @media (max-width: 782px) {
    .grid_autofit > * {
      flex: 0 1 100%; /* 1 per row */
      min-width: 100%;
    }
  }

/* TITLES */

  html .wp-block-post-title{
    margin: 0;
    margin-bottom: 2em;
  }

  html .page-template-page-single main .wp-block-post-title {
    margin-top: 2em !important;
    margin-bottom: 1em;
  }

  html .page-template-pages-title .wp-block-post-title{
    padding-right: var(--wp--style--root--padding-right) !important;
    padding-left: var(--wp--style--root--padding-left) !important;
  }

/* LINKS */
  a{
    text-decoration: none !important;
    transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
  }
  a:hover{
    color: var(--color5);
  }

/* GALLERY */
/*
  .wp-block-gallery figure {
    width: 100% !important;   
   
  }
  .wp-block-gallery img {
    width: 100% !important;  
    height: auto;     
    object-fit: contain; 
    display: block;
  }
  .wp-block-gallery.is-layout-flex {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 columns
    gap: 1rem; 
  }
*/

  /* Center the last two images */
  .wp-block-gallery.is-layout-flex .wp-block-image:nth-last-child(2),
  .wp-block-gallery.is-layout-flex .wp-block-image:last-child {
    justify-self: center;  /* center in the row */
    width: 50%;            /* optional: each takes half the row */
  }


/* BACKGROUND */
    /* body .wp-site-blocks::before{ */
    body{
      /* position: relative; */
    }
    html{
      position: relative;
    }
    
    :where(.wp-site-blocks *:focus){
      outline-width: 0px;
      outline-style: none;
    }

    footer{
      margin-top: 0;
    }

  /* HEADINGS */
  /*
    h2::before {
    content: "\00AB";
      font-size: 1.1em;
    }

    h2::after {
    content: "\00BB";
      font-size: 1.2em;
    }
  */

  /* MIX */
    .mix.color{
      --blend-mode: color;
    }
    .mix.color-burn{
      --blend-mode: color-burn;
    }
    .mix.color-dodge{
      --blend-mode: color-dodge;
    }
    .mix.color-difference{
      --blend-mode: difference;
    }
    .mix.color-exclusion{
      --blend-mode: exclusion;
    }
    .mix.hard-light{
      --blend-mode: hard-light;
    }
    .mix.color-hue{
      --blend-mode: hue;
    }
    .mix.lighten{
      --blend-mode: lighten;
    }
    .mix.multiply{
      --blend-mode: multiply;
    }
    .mix.normal{
      --blend-mode: normal;
    }
    .mix.overlay{
      --blend-mode: overlay;
    }
    .mix.plus-lighter{
      --blend-mode: plus-lighter;
    }
    .mix.saturation{
      --blend-mode: saturation;
    }
    .mix.screen{
      --blend-mode: screen;
    }
    .mix.soft-light{
      --blend-mode: soft-light;
    }

  /* OVERLAY */
    .mix .wp-block-cover__background{
      opacity: 1 !important;
      mix-blend-mode: var(--blend-mode) !important;
    }
    .wp-block-cover .wp-block-cover__image-background{
      z-index: -1;
    }
    .wp-block-cover .wp-block-cover__background{
      z-index: -1;
    } 

  /* BLOG */

    .wp-block-post-featured-image{
      width: 100% !important;
    }
    .wp-block-post-template .wp-block-post {
      gap: 1em;
    }
    .wp-block-post-template .wp-block-column > *{
      margin-block-start: 0.4rem;
    }
    body .wp-block-post-template.wp-block-post-template-is-layout-grid .wp-block-columns{
        gap: 2em !important
    }

    .taxonomy-category a[rel="tag"],
    .taxonomy-category a[rel="tag"],
    .taxonomy-post_tag a[rel="tag"],
    .taxonomy-post_tag a[rel="tag"]{
        font-weight: 400;
        padding: 0em 0.4em !important;
        border-radius: 1em;
        text-decoration: none;
    }

    .taxonomy-category a[rel="tag"],
    .taxonomy-category a[rel="tag"] {
        color: var(--color1);
        background-color: var(--color5);
        border: 1px solid var(--color5);

    }
    .taxonomy-post_tag a[rel="tag"],
    .taxonomy-post_tag a[rel="tag"] {
        color: var(--color5);
        background-color: var(--color3);
        border: 1px solid var(--color5);
    }    

    .taxonomy-category a[rel="tag"]:hover,
    .taxonomy-category a[rel="tag"]:hover,
    .taxonomy-post_tag a[rel="tag"]:hover,
    .taxonomy-post_tag a[rel="tag"]:hover {
        color: var(--color1) !important;
        background-color: var(--color2);
        border: 1px solid var(--color2);
    }

    .taxonomy-category a[rel="tag"],
    .taxonomy-category a[rel="tag"],
    .taxonomy-post_tag a[rel="tag"],
    .taxonomy-post_tag a[rel="tag"]{
        white-space: nowrap;
        padding: 0em 0.25em;
        line-height: 1.5em !important;
    }
    .wp-block-post-featured-image a img{
      border-style: solid !important;
      border-width: 2px !important;
    }
    .wp-block-post-featured-image a img:hover{
      border-color: var(--color2);
    }
    
    .wp-block-post-date::before{
        content: "[ ";
    }
    .wp-block-post-date::after{
        content: " ]";
    }
    
    .wp-block-post-author__avatar{
      height: 1.5em;
      width: 1.5em;
      margin-right: 0.5em;
    }
    .wp-block-post-author__avatar img{
      width: 100%;
      height: 100%;
    }
    .wp-block-post-author__content{
      display: flex;
      align-items: center;
    }

    #post_nav{
      position: relative;
      z-index: 0;
    }

    @media (max-width: 1024px) {
      .wp-block-post-template-is-layout-grid{
          grid-template-columns: repeat(1, 1fr);
      }
    }
    @media (max-width: 782px) {
      .wp-block-post-template .wp-block-columns{
        display: flex !important;
        flex-direction: row !important;
      }
      /*
      .wp-block-post-template .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 33% !important;
      }
      */
      .wp-block-post-template .has-post-thumbnail .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(1) {
          flex-basis: 25% !important;
      }
      .wp-block-post-template .has-post-thumbnail .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2) {
          flex-basis: 50% !important;
      }
    }


  /* CODE EDITOR */
    .wp-block-kevinbatdorf-code-block-pro{
        border: 2px dashed var(--color2) !important;
    }
    .wp-block-kevinbatdorf-code-block-pro pre{
        background-color: transparent !important;
  
    }
    body .wp-block-kevinbatdorf-code-block-pro.cbp-has-line-numbers:not(.code-block-pro-editor) pre code .line:not(.cbp-line-number-disabled):before{
        color: var(--color2) !important;
        opacity: 1 !important;
    }

    /* Scrolling */
      .wp-block-kevinbatdorf-code-block-pro{
          overflow: hidden;
          max-height: 100vh;
          overflow-y: auto !important;
      }
      .wp-block-kevinbatdorf-code-block-pro {
          scrollbar-width: thin;
          scrollbar-color: black transparent;
      }

      .wp-block-kevinbatdorf-code-block-pro::-webkit-scrollbar {
          width: 6px;
          height: 6px;
      }

      .wp-block-kevinbatdorf-code-block-pro::-webkit-scrollbar-track {
          background: transparent;
      }

      .wp-block-kevinbatdorf-code-block-pro::-webkit-scrollbar-thumb {
          background-color: black;
          border-radius: 20px;
      }

      .wp-block-kevinbatdorf-code-block-pro::-webkit-scrollbar-thumb:hover {
          background: #555;
      }

/* QUOTES */

  blockquote.wp-block-quote p{
    position: relative;
  }

  blockquote.wp-block-quote p::before {
    content: "\201C"; 
    position: relative;
    line-height: 0;
    font-size: 2em;
    vertical-align: middle;
    margin-right: 0.1em;
    position: relative;
  }
  
  blockquote.wp-block-quote p::after {
    content: "\201D";
    position: relative;
    line-height: 0;
    font-size: 2em;
    vertical-align: text-bottom;
    bottom: -0.2em;
    margin-left: 0.1em;
  }

/* IMAGES */

    .saturation-fade{
      filter: saturate(0);
      transition: filter 0.25s linear;
    }

    .post.active .saturation-fade,
    .saturation-fade.active,
    .saturation-fade:hover{
      filter: saturate(1);
    }
    

/* LISTS */

    ul, ol{
        padding-left: 1.25em;
    }

/* VIDEO */

    .wp-block-video{
      aspect-ratio: 3 / 1.66;
      background-color: #000;
    }

/* MUSIC PLAYER */

    :root{
        --mplayer-color1: #ffffff;
        --mplayer-color2: var(--color6a_80);
        --mplayer-color3: var(--color5);
        --mplayer-color4: var(--color6a_80);
    }

    @media only screen and (max-width: 781px){
        .sonaar_album {
            width: calc(50% - 2em);
            padding: 1em;
            float: left;
            margin: 0;
        }
        .sonaar_album .blanks {
            width: calc(100% - 2em);
            height: calc(100% - 2em);
            margin: 1em;
        }
    }

/* EFFECTS */
  .shadow_white img{
    filter: drop-shadow(0px 1px 2px white);
  }
  .shadow_white{
    text-shadow: 0px 0px 3px white;
  }
  .shadow_black img{
    filter: drop-shadow(0px 1px 2px black);
  }
  .shadow_black{
    text-shadow: 0px 0px 3px black;
  }
/* LANGUAGE SWITCHER */

  .multilang-flags{
    background-color: transparent !important;
  }

/* LIGHTBOX */

  .wp-lightbox-overlay .scrim{
    opacity: 0.9 !important;
  }

/* MARQUEE */

  .mgb-marquee-text{
    font-size: 5em;
    color: black;
    text-shadow: 0px 0px 3px white;
    text-transform: uppercase;
  }

/* MAST SOCIAL */
  .splash_social .wp-block-social-links{
    position: absolute;
    bottom: 1em;
  }

/* FOOTER */

  footer{
    position: relative;
    z-index: 0;
  }

  footer .wp-block-search__input{
      border-radius: 0.5em;
      background-color: transparent;
      border-color: var(--color1);
      color: var(--color1);
  }