/*
Theme Name: BSM Kancelaria
Author: Cyberpack.pl
Description: BSM Kancelaria
Version: 1.0
Template: twentytwentyfive
*/

html {
  scroll-behavior: smooth;
}

b,
strong {
  font-weight: 700;
}

/* 4K  */
main {
  min-height: calc(100dvh - 335px);
}

/* Gap hack on ENG homepage */
div.wp-site-blocks>main:has(.have-slider-eng) {
margin-block-start: 0;
}
/* Footer remove margin */
footer.wp-block-template-part {
  margin-top: 0;
  border-top: 3px solid var(--wp--preset--color--accent-1);
}

/* Header - sticky menu */
header:has(.sticky_menu) {
  position: fixed;
  top: 0;
  width: 100dvw;
  z-index: 99;
  box-shadow: 0px -5px 20px var(--wp--preset--color--accent-2);
}

/* NAV MENU */
header nav li.current-menu-item>a {
  color: var(--wp--preset--color--accent-1) !important;
  font-weight: 900;
}

/* HOMEPAGE - HERO SLIDER */
.slider {
  --slider-width: 100dvw;
  position: relative;

  figure.slider-holder {
    position: relative;
    width: var(--slider-width, 100dvw);
    aspect-ratio: 16/9;
    z-index: 1;
    overflow: hidden;

    >figure.wp-block-image {
      position: absolute !important;
      top: 0;
      left: 0;
      width: var(--slider-width, 100dvw) !important;
      aspect-ratio: 16/9;
      opacity: 0;
      transform: scale(1) rotate(0deg);
      transition: opacity 1s ease-in-out, transform 10s linear;

      >img {
        object-fit: cover;
      }

      @media(max-width: 1024px) {
        aspect-ratio: 4/5;
        height: 100%;

        >img {
          aspect-ratio: 4/5;
          height: 100%;
        }
      }

      &.active {
        opacity: 1;
      }

      &.anim {
        transform: scale(1.3) rotate(4deg);
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background: #0008;
    }
  }

  .slider-title {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90dvw;
    width: 100%;
  }
}

/* HOMEPAGE - BLOG */
.homepage-blog-tease {
  li {
    border-radius: 4px;
    padding: 1rem 1.5rem 2rem;
    background: var(--wp--preset--color--accent-2);
    box-shadow: 0 0 10px var(--wp--preset--color--accent-2);

    .wp-block-latest-posts__post-title {
      color: var(--wp--preset--color--accent-1);
      font-size: 1.4rem;
      text-decoration: none;
      font-weight: 500;
      display: block;
      line-height: 1.2;
    }

    .wp-block-latest-posts__post-date {
      color: var(--wp--preset--color--accent-1);
    }

    .wp-block-latest-posts__post-excerpt {
      font-size: 1.125rem;
      line-height: 1.2;
    }
  }
}

/* BLOG - Sticky sidebar */
.sticky-sidebar {
  position: sticky;
  top: 150px;
  box-shadow: 0 0 5px var(--wp--preset--color--accent-2);

  @media(max-width: 781px) {
    position: relative;
    top: unset;
  }
}

/* BLOG - Sidebar recent posts */
.blog-sidebar-recent {
  margin-bottom: -1rem !important;

  >li {
    position: relative;
    margin-inline: -1rem;
    padding: 1rem;
    /*border-left: 4px solid var(--wp--preset--color--accent-1);*/

    &::after {
      content: '';
      position: absolute;
      height: 100%;
      width: 4px;
      transition: width .5s ease-in-out;
      background-color: var(--wp--preset--color--accent-1);
      top: 0;
      left: 0;
      z-index: -1;
    }

    >* {
      transition: color .3s ease-in-out;
      color: #FFF;
    }

    &:hover {
      >* {
        color: #000;
      }

      &::after {
        width: 100%;
      }
    }
  }
}

/* BTN SHADOW */
.btn-shadow-accent-1>a {
  box-shadow: 0 0 5px var(--wp--preset--color--accent-1);
}

.btn-shadow-accent-2>a {
  box-shadow: 0 0 5px var(--wp--preset--color--accent-2);
}

/* OTHER LANG SWITCHER */
.lang-switcher {
  >a {
    width: 36px;
    position: relative;

    >span {
      position: absolute;
      opacity: 0;
    }

    &::before {
      width: 36px;
      height: 27px;
      display: block;
      transition: transform .1s ease-in-out;
    }

    &:hover::before {
      transform: scale(1.1);
    }
  }

  &.lang-switcher-eng>a::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="%23012169" d="M0 0h640v480H0z"/><path fill="%23FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/><path fill="%23C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/><path fill="%23FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/><path fill="%23C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/></svg>');
  }

  &.lang-switcher-pl>a::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="%23fff" d="M0 0h640v240H0z"/><path fill="%23dc143c" d="M0 240h640v240H0z"/></g></svg>');
  }
}

/* BLOG PAGINATION */
nav.blog-pagination {
  .wp-block-query-pagination-numbers {
    display: flex;
    gap: .5rem;
    font-size: 1.5rem;

    .page-numbers {
      padding: .125rem .25rem;
      aspect-ratio: 1;
      height: 30px;
      width: 30px;
      text-align: center;
      vertical-align: center;
      line-height: 1;
      text-decoration: none;

      &:not(.dots) {
        background-color: var(--wp--preset--color--accent-1);

      }

      &.current {
        color: #FFF;
        background-color: var(--wp--preset--color--accent-2);
      }
    }
  }

  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next {
    aspect-ratio: 1;
    height: 30px;
    width: 30px;
    text-align: center;
    vertical-align: center;
    line-height: 1;
    font-size: 1.5rem;

    >span {
      margin: 0;
    }
  }
}

/* HOMEPAGE - hidden button */
.hidden-button {
  transition: all .3s ease-in-out;
  border: 4px solid transparent;

  &:hover {
    /*transform: scale(1.1);*/
    border-color: var(--wp--preset--color--accent-1);
  }
}

/* CARD links*/
.card-links {
  position: relative;

  p:has(>a) {
    margin: 0;
  }

  p>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
    font-size: 0;
    color: transparent;
  }
}

.text-align-justify{
  text-align: justify;
}

.text-decoration-none>a{
  text-decoration: none;
}