/* ############################## TOP NAV ##############################*/
/* mobile -------- */
.mobilenav {

  .wp-block-site-logo img{
    width: 300px;
  }

  button.wp-block-navigation__responsive-container-open.always-shown{
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--tertiary) !important;
    width: var(--wp--style--root--padding-right);
    height: var(--wp--style--root--padding-right);
  }
  button.wp-block-navigation__responsive-container-open.always-shown svg{
    width: var(--wp--style--root--padding-right);
    height: var(--wp--style--root--padding-right);
  }

  /* popup */
  .wp-block-navigation__responsive-dialog{
    padding: var(--wp--style--root--padding-right);
  }
  .wp-block-navigation__responsive-container-close{
    width: var(--wp--style--root--padding-right);
    height: var(--wp--style--root--padding-right);
    position: relative;
    float: right;
    svg {
      width: var(--wp--style--root--padding-right);
      height: var(--wp--style--root--padding-right);
    }
  }

}

/* underlines -------- */
ul.wp-block-navigation a {
  position: relative;
  color: inherit; /* optional, keeps text color consistent */
  text-decoration: none;
}

ul.wp-block-navigation a {
  padding-bottom: 2px;
}

ul.wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 2px; /* underline thickness */
  bottom: 0;
  /* background-color: currentColor; matches link text color */
  background-color: var(--wp--preset--color--tertiary);
  transition: width 0.3s ease;
}

ul.wp-block-navigation a:hover::after ,
ul.wp-block-navigation li.current-menu-item a::after,
ul.wp-block-navigation li.current-menu-ancestor a::after,
ul.wp-block-navigation li a[data-menu="current"]::after
{
  width: 100%;
}

/* dropdown -------- */

/* Target the submenu popup */
.wp-block-navigation .wp-block-navigation__submenu-container{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(12px);
  transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms;
}

/* Show state: hover OR focus-within (keyboard friendly) */
.wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateX(0);
  transition: opacity 400ms ease, transform 400ms ease, visibility 0s;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wp-block-navigation .wp-block-navigation__submenu-container{
    transition: none;
    transform: none;
  }
}

.wp-block-navigation__submenu-container::before{  
  content: '';
  border-top: 8px solid var(--wp--preset--color--tertiary)!important;
  position: absolute;
  inset: 0;
}
.wp-block-navigation__submenu-container{  
  left: -50px!important;
  right: auto !important;
  border: none !important;
  border-top: 16px solid var(--wp--preset--color--secondary)!important;
  background: var(--wp--preset--color--primary)!important;
  font-size: var(--wp--preset--font-size--p)!important;
  text-transform: none;
  padding: calc(var(--wp--style--root--padding-right)/2) var(--wp--style--root--padding-right) var(--wp--style--root--padding-right) calc(var(--wp--style--root--padding-right)/2)!important;
  border-radius: 0 0 10px 10px;
  a{
    padding: calc(var(--wp--style--root--padding-right)/2) 0 0 0!important;
  }
a:hover{
  color: var(--wp--preset--color--tertiary)!important;
}
a::before{
  content: "";
  display: inline-block;
  min-width: 1.5em;
  width: 1.5em;
  height: 1.5em;
  margin-right: .35em;
  vertical-align: -0.15em;
  background-color: var(--wp--preset--color--tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m547.69-268.92-22.23-21.23 175.69-175.7H200v-30.77h501.15L525.23-672.54l22.23-21.23L760-481.23 547.69-268.92Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m547.69-268.92-22.23-21.23 175.69-175.7H200v-30.77h501.15L525.23-672.54l22.23-21.23L760-481.23 547.69-268.92Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}
  a::after,
  a:hover::after{
    width: 0%!important;
  }
}




/* ############################## AIMTATED STACKS ##############################*/
.wp-block-group{
  .move-in-items{
    overflow: hidden;
  }
  /* Default: entrance animation for all */
  .move-in-items > *{
    transform: translateX(20vw);
    opacity: 0;
    filter: blur(6px);
    transition: transform 800ms ease, opacity 800ms ease, filter 800ms ease;
    will-change: transform, opacity;
  }

  .move-in-items > *.is-in{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
  }

  /* Only desktop gets sticky behaviour (non-stack) */
  @media (min-width: 901px){
    .move-in-items:not(.move-in-stack) > *{
      /* position: sticky; */
      top: 2rem;
    }
  }

  /* Stack mode: always normal flow */
  .move-in-items.move-in-stack > *{
    position: static;
  }
}


/* ############################## client-storys ##############################*/

.type-client-story{
  position: relative;  
}
.type-client-story .image-container{
    /* width: 200px; */
    flex-grow: 0 !important;
    /* flex-shrink: 0 !important; */
    flex-basis: 33%!important;
    max-width: 270px;
}

.type-client-story .wp-block-read-more { 
  display: block;
  position: absolute;
  z-index: 999;
  top: 50%;
  right: 0;
  margin-top: -24px;
  height: 48px;  
  width: 48px;
  content: '';
  background: url("../images/read-more.svg");
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
  font-size: 0;
}


/* ############################## BUTTON ACTION ##############################*/
.wp-block-button .wp-block-button__link{
  position: relative;
  overflow: hidden;
  /* background: var(--wp--preset--color--tertiary); */
  color: #fff;
  z-index: 0;
}

/* The red layer */
.wp-block-button .wp-block-button__link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* initial accent height */

  background: var(--wp--preset--color--brand-pink);
  transition: height 260ms ease;
  z-index: -1;
}

/* Hover: red grows upward */
.wp-block-button .wp-block-button__link:hover::after{
  height: 100%;
}
/*  ***************************************************************  */


.has-gradient-moving-gradient-background {
    /* position:absolute; */
    position: relative;
    overflow: hidden;
    inset:0;

    background:
        radial-gradient(circle at 10% 10%, rgba(0,0,0,0.1), rgba(0,0,0,0) 80%),
        radial-gradient(circle at 70% 50%, rgba(0,80,255,1),rgba(0,80,255,1) 2%, rgba(0,80,255,0) 70%),
        radial-gradient(circle at 30% 50%, rgba(0,0,0,0.1), rgba(0,0,0,.5) 70%),
        radial-gradient(circle at 90% 20%, rgba(0,0,0,0.1), rgba(0,0,0,.9) 10%),
        linear-gradient(90deg, #000, #001b60) !important; 

    /* background-size:200% 200%; */
    background-size:200% 200%;
    animation: driftAni 4s ease-in-out infinite alternate;
}

.has-gradient-moving-gradient-background::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:#000;

    /* CSS-embedded SVG filter */
    filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='3'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.5'/></feComponentTransfer></filter></svg>#noise");

    /* mix-blend-mode:soft-light; */
    opacity:0.35;
}

@keyframes driftAni {
    0%   { background-position: 20% 50%; }
    30%   { background-position: 50% 50%; }
    30%   { background-position: 50% 100%; }
    100% { background-position: 80% 50%;  }
}