/*
Theme Name: Avenue KBD Theme
Author: KBD
Version: 1.0.39
Text Domain: avenue-kbd-theme 
Template: avenue-base-theme
*/

@property --header-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}



/* View Transitions API for smooth page transitions */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }
}

html.has-modal-open {
  overflow: auto  !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) {
  letter-spacing: var(--wp--custom--letter-spacing--medium);
}

.wp-block-navigation__responsive-container-open {
  font-size: 0 !important;
  svg {
    transition: rotate 0s linear;
  }
  path {
    transition: all 0.3s linear, fill var(--dark-mode-transition-duration) ease;
  }
  &:not(.is-menu-open):hover {
    svg {
      transition: rotate 0.3s linear;
      rotate: 60deg;
    }
  }
  &:has( + .is-menu-open) {
    path {
      &:not([id]) {
        opacity: 0;
      }
      &[id="nav-dot-1"] {
        transform: translateY(13px) translateX(-5px);
      }
      &[id="nav-dot-2"] {
        transform: translateX(16px);
      }
      &[id="nav-dot-3"] {
        transform: translateY(0px);
      }
    }
  }
}

.block-editor-block-list__block .wp-block-navigation__responsive-container-open {
  background-image: url(./assets/images/nav.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 24px;
  height: 24px !important;
}

.wp-block-navigation__responsive-container-close {
  font-size: 0 !important;

}

.site-header ul:is(.wp-block-navigation-submenu, .wp-block-navigation) {

  a {
    background: linear-gradient(to right, var(--wp--preset--color--accent) 0%,var(--wp--preset--color--accent) 98%);
    background-size: 0 max(4%, 2px);
    background-repeat: no-repeat;
    background-position:left 95%;
    transition:background-size 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  &:has(> li:hover) {
    a {
      opacity: 0.5;
    }
    li:hover > a{
      opacity: 1;
      background-size: 100% max(4%, 2px);
    }
  }
}

.site-header ul:is(.wp-block-navigation) {
  align-items: stretch;
  & > li {
    display: flex;
    flex-direction: row !important;
    justify-content: space-around;
    align-items: center !important;
    gap: 0.125em 0.5em;

    @media (max-width: 768px) {
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    &:hover {
      ul.wp-block-navigation-submenu {
        opacity: 1 !important;
        pointer-events: auto !important;
      }
    }
  }

  & li > ul.wp-block-navigation-submenu {
   
    @media (min-width: 768.1px) {
      pointer-events: none !important;
      opacity: 0 !important;
      transition: opacity 0.3s ease-in-out;
      display: grid !important;
      position: relative;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.125em 0.5em;
    }
  }
}


body:has(.kbd-pointer-zone:hover) {
  cursor: none !important;

  .kbd-pointer {
    transition-duration: 0.5s, 0.4s;
    width: 96px;
    cursor: none !important;
  }

  & * {
    cursor: none !important;
  }
}

body:has(.kbd-pointer-zone--left-right:hover) {
  .kbd-pointer {
    background-image: url(./assets/images/left-right.svg);
  }
}

body:has(.kbd-pointer-zone--prev-next:hover) {
  .kbd-pointer {
    rotate: 45deg;
  }

}

body:has(.kbd-pointer-zone--prev-next[data-direction="prev"]:hover) {
  .kbd-pointer {
    rotate: -135deg;
  }
}



.kbd-pointer {
  position: fixed !important;
  background-color: var(--wp--preset--color--accent-2);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
  width: 0px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  translate: -50% -50%;
  transform-origin: center center;

  transition: width .1s ease-out 0s, rotate .1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  background-image: url(./assets/images/upper-right.svg);



}


.is-style-fade-letters-in {
  .char {
    opacity: 0;
  }

  &.animate {
    .char {
      animation: fadeIn 0.33s forwards ease-in-out;
    }
  }
}


@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.is-style-fade-up { 
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.33s ease-in-out, transform 0.33s ease-in-out;
}

.is-style-fade-up.animate {
  opacity: 1;
  transform: translateY(0);
}

.kbd-underline {
  
  display: inline;
  background: linear-gradient(to right, var(--wp--preset--color--accent) 0%,var(--wp--preset--color--accent) 98%);
  background-size: 0 max(4%, 2px);
  background-repeat: no-repeat;
  background-position:left 95%;
  transition:background-size var(--kbd-underline-transition-duration, 1s) linear;

  &.kbd-underline--hover:hover {
    background-size: 100% max(4%, 2px);
  }

  &.kbd-underline--hover:hover {
    background-size: 100% max(4%, 2px);
  }
}

.kbd-underline--fast {
  --kbd-underline-transition-duration: 0.2s;
}

a.kbd-underline {
  transition-duration: var(--kbd-underline-transition-duration, 0.5s);
}

:is(.wp-block-group.is-linked, .group):hover .kbd-underline--group-hover {
    background-size: 100% max(4%, 2px);
}


:is(.animate, .is-active) span.kbd-underline:not(.kbd-underline--group-hover) {
  background-size: 100% max(4%, 2px);
}



:root body :where(.entry-content.wp-block-post-content) > * {
  margin-block-start: 0;
}

:root body .wp-site-blocks > * {
  margin-block-start: 0;
}


:root body .wp-site-blocks > *  {
  margin-block-start: 0;
}

:root body .wp-site-blocks > .site-footer {
  margin-top: -60px;
  position: sticky;
  bottom: -75%;
}

/* :root body .wp-site-blocks .entry-content:has(.is-style-pre-footer) {
  margin-bottom: -400px;
} */
.wp-site-blocks {
  position: relative;
}
:root body:not(:has(.is-root-container)) header.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0);
  z-index: 1000;
  transform: translateY(0);
  transition: transform var(--dark-mode-transition-duration) ease-in-out, background-color var(--dark-mode-transition-duration) ease-in-out;
  will-change: transform, background-color;
  
  &.wp-block-template-part > .has-background {
    transition: transform var(--dark-mode-transition-duration) ease-in-out, background-color var(--dark-mode-transition-duration) ease-in-out;
    will-change: transform, background-color;
  }
  
  /* Hide header when scrolling down */
  &.header-hidden {
    transform: translateY(-100%);
  }

  &:has(.is-menu-open) {
    bottom: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    height: calc(100vh - var(--header-height) );
    top: calc(var(--header-height) ) !important;
  }
}
:root {
  --header-height: 0px;
  scroll-padding-top: calc(var(--header-height, 0) + var(--wp-admin--admin-bar--height, 0)) !important;
  transition: --header-height 0.3s ease-in-out;
  will-change: --header-height;
}
:root body.home header.site-header {
  position: fixed;
  width: 100%;
  transform: translateY(0);
  transition: transform 0.3s linear, background-color 0.5s ease;
  will-change: transform, background-color;
  
  /* Hide header when scrolling down */
  &.header-hidden {
    transform: translateY(-100%);
  }
}
:root body.home:not(.scrolled) header.site-header {

  &.wp-block-template-part > .has-background {
    background-color: transparent !important;
    /* transition: background-color 1s linear 1s; */
  }

  &.wp-block-template-part > [style*="border-bottom"] {
    border-bottom-width: 0 !important;
    /* transition: border-bottom-width 0s linear 0s; */
  }
}

:root body.home header.site-header.wp-block-template-part > [style*="border-bottom"] {
  /* transition: border-bottom-width 0s linear 1s; */
}

/* Page Transition Circle - acts as a mask */
.page-transition-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;		
  background-image:  
    url(./assets/images/hero-circle.svg),
   radial-gradient(176.3% 133.81% at 24.79% 4.28%, var(--wp--preset--color--accent-2) 23.69%, var(--wp--preset--color--accent) 72.52%, var(--wp--preset--color--contrast) 100%) !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 0%, cover;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.5s linear, 
              height 0.5s linear,
              opacity 0.5s ease-in-out,
              background-size .5s ease-out;
  opacity: 1;
  /* Create a mask effect - everything outside the circle is hidden */
  mix-blend-mode: normal;
}

.page-transition-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(176.3% 133.81% at 24.79% 4.28%, var(--wp--preset--color--accent-2) 23.69%, var(--wp--preset--color--accent) 72.52%, var(--wp--preset--color--contrast) 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.page-transition-circle.expanding {
  width: 300vw;
  height: 300vw;
  background-size: 100%, cover;
}

.page-transition-circle.expanding::before {
  opacity: 1;
}

.page-transition-circle.fading {
  opacity: 0;
}

/* Hide page content initially during transition */
body.page-transitioning {
  overflow: hidden;
  background-size: cover, 75%, cover;
}

body.page-transitioning .wp-site-blocks {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

body.page-transitioning .wp-site-blocks.revealed {
  opacity: 1;
}

/* Create a mask effect for the new page */
.page-transition-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 300vw;
  height: 300vh;
  background-color: var(--wp--preset--color--accent-2, #000);
  pointer-events: none;
  z-index: 9998;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-transition-mask.revealing {
  clip-path: circle(300% at 50% 50%);
}

/* View Transitions API customizations */
::view-transition-old(root) {
  animation: slide-out 0.6s ease-in-out;
  
}

::view-transition-new(root) {
  animation: slide-in 0.6s ease-in-out;
}

@keyframes slide-out {
  to {
    opacity: 0;
    /* transform: scale(0.8); */
    mix-blend-mode: screen;
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    /* background-color: red; */
    /* transform: scale(0.95); */
    mix-blend-mode: screen;
  }
}

:root {
  --dark-mode-transition-duration: 0s;
}

:root body.dark-mode  {
  --wp--preset--color--base: #101617;
  --wp--preset--color--base-2: #717D81;
  --wp--preset--color--base-3: #717D81;
  --wp--preset--color--contrast: #FFFFFF;
  --wp--preset--color--contrast-2: #F3F3F3;

  .wp-block-site-logo {
    [fill~="#101617"] {
      fill: #FFFFFF;
    }
  }
}

.wp-block-site-logo [fill] {
  transition: fill var(--dark-mode-transition-duration) ease;
}

:root body.dark-mode :is(.is-style-pre-footer *, .site-footer .wp-block-group) {
  --wp--preset--color--base: #FFFFFF;
  --wp--preset--color--base-2: #FAF7F7;
  --wp--preset--color--base-3: #F3F3F3;
  --wp--preset--color--contrast: #101617;
  --wp--preset--color--contrast-2: #717D81;
}

:root body.dark-mode-header header.site-header {
  & .wp-block-site-logo {
    & [fill~="#101617"] {
      fill: #FFFFFF;
    }
  }


    --wp--preset--color--base: #101617;
    --wp--preset--color--base-2: #717D81;
    --wp--preset--color--base-3: #717D81;
    --wp--preset--color--contrast: #FFFFFF;
    --wp--preset--color--contrast-2: #F3F3F3;
    --wp--preset--color--stroke: #717D81;

}

.site-header nav.has-mobile-menu:not(:has(.is-menu-open)) {
  background-color: transparent !important;
}

.site-header:has(.is-menu-open) {
  background-color: var(--wp--preset--color--base) !important;
}

.wp-block-group, path {
  transition: background-color var(--dark-mode-transition-duration) ease, color var(--dark-mode-transition-duration) ease;
  will-change: background-color, color;
  /* transform: translateZ(0); */
}

:not(.has-text-color)   .wp-block-group {
  color: var(--wp--preset--color--contrast);
}

.has-text-color .wp-block-group:not(.has-text-color) {
  color: inherit;
}

.is-style-scrollable-carousel:not(.block-editor-block-list__block) {
  display: flex;
  overflow-x: auto;
  box-sizing: border-box;
  scroll-padding-inline-start:  var(--wp--preset--spacing--30);
  scrollbar-width: none;
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }

  & > :where(div) {
    flex: 0 1 auto;
    min-height: inherit !important;
  }
}

.is-style-scrollable-carousel.block-editor-block-list__block {
  display: flex;
  overflow-x: auto;
  box-sizing: border-box;
  scroll-padding-inline-start:  var(--wp--preset--spacing--30);

  position: relative;

    & > div {
    flex: 0 1 auto;
    min-height: inherit !important;
 
  }
}

.wp-block-group.has-global-padding .alignfull {
  margin-right: calc(var(--wp--style--root--padding-right) + var(--wp--preset--spacing--30) * -1);
  margin-left: calc(var(--wp--style--root--padding-left) + var(--wp--preset--spacing--30) * -1);
}

.site-footer {
  --kbd-underline-transition-duration: .15s;

  & p.is-style-green-dot + p {
    font-weight: 400;
    &:has(a:hover) {
      a:not(:hover) {
        opacity: 0.5;
      }
      a {
        &:hover {
          opacity: 1;
          background-size: 0% max(4%, 2px);
          &:before {
            width: .5em;
          }
        }
      }
    }
    a {

      &:before {
        content: '';
        display: block;
        width: 0;
        aspect-ratio: 1 / 1;
        background-color: currentColor;
        border-radius: 50%;
        transition-property: scale, width;
        transition-duration: var(--kbd-underline-transition-duration);
        transition-timing-function: ease;
      }

      display: flex;
      align-items: center;
      gap: 0.5em;
      transition-property: opacity, background-size;
      transition-duration: var(--kbd-underline-transition-duration);
      transition-timing-function: ease;
    }
    
    a + br {
      display: none;
    }
  }

  .wp-block-social-links {
    gap: 2em;
  }
  .wp-social-link {
    svg {
      display: none;
    }

    &:hover {
      transform: scale(1) !important; 
      background-size: 100% max(4%, 2px);
    }

    border-radius: 0 !important;
    background: linear-gradient(to right, var(--wp--preset--color--accent-2) 0%,var(--wp--preset--color--accent-2) 98%);
    background-size: 0 max(4%, 2px);
    background-repeat: no-repeat;
    background-position:left 95%;
    transition:background-size var(--kbd-underline-transition-duration, 1s) linear;
    

    .wp-block-social-link-label {
      display: block !important;
      margin: 0 !important;
      padding: 0 0 .75em !important;
    }
  }

}

.wp-block-cover__inner-container > .nk-awb-fullheight {
  position: absolute;
  inset: 0;
  min-height: 100% !important;
  box-sizing: border-box !important;
}