/* =========================================
   Inblock Smooth Blocks – Micro-interactions
   ========================================= */

/* ---------- Button: shared base (Firefox-safe) ---------- */
.wp-block-button.inb-arrow-right .wp-element-button,
.wp-block-button.inb-arrow-left .wp-element-button,
.wp-block-button.inb-arrow-up .wp-element-button,
.wp-block-button.inb-arrow-down .wp-element-button,
.wp-block-button.inb-arrow-external .wp-element-button{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  min-width: max-content;
}

/* Put the icon on the right by default (keeps ::after free for other effects) */
.wp-block-button.inb-arrow-right .wp-element-button::before,
.wp-block-button.inb-arrow-up .wp-element-button::before,
.wp-block-button.inb-arrow-down .wp-element-button::before,
.wp-block-button.inb-arrow-external .wp-element-button::before{
  order: 2;
}

/* Keep arrow-left on the left */
.wp-block-button.inb-arrow-left .wp-element-button::before{
  order: 0;
}

/* Arrow Right (→) */
.wp-block-button.inb-arrow-right .wp-element-button::before{
  content: "→";
  display: inline-block;
  color: var(--inb-arrow-color, currentColor);
  transition: transform .2s ease;
}
.wp-block-button.inb-arrow-right .wp-element-button:hover::before,
.wp-block-button.inb-arrow-right .wp-element-button:focus-visible::before{
  transform: translateX(4px);
}

/* Arrow Left (←) */
.wp-block-button.inb-arrow-left .wp-element-button::before{
  content: "←";
  display: inline-block;
  color: var(--inb-arrow-color, currentColor);
  transition: transform .2s ease;
}
.wp-block-button.inb-arrow-left .wp-element-button:hover::before,
.wp-block-button.inb-arrow-left .wp-element-button:focus-visible::before{
  transform: translateX(-4px);
}

/* Arrow Up (↑) - icon on the right */
.wp-block-button.inb-arrow-up .wp-element-button::before{
  content: "↑";
  display: inline-block;
  color: var(--inb-arrow-color, currentColor);
  transition: transform .2s ease;
}
.wp-block-button.inb-arrow-up .wp-element-button:hover::before,
.wp-block-button.inb-arrow-up .wp-element-button:focus-visible::before{
  transform: translateY(-4px);
}

/* Arrow Down (↓) - icon on the right */
.wp-block-button.inb-arrow-down .wp-element-button::before{
  content: "↓";
  display: inline-block;
  color: var(--inb-arrow-color, currentColor);
  transition: transform .2s ease;
}
.wp-block-button.inb-arrow-down .wp-element-button:hover::before,
.wp-block-button.inb-arrow-down .wp-element-button:focus-visible::before{
  transform: translateY(4px);
}

/* Arrow External (↗) */
.wp-block-button.inb-arrow-external .wp-element-button::before{
  content: "↗";
  display: inline-block;
  color: var(--inb-arrow-color, currentColor);
  transition: transform .2s ease;
}
.wp-block-button.inb-arrow-external .wp-element-button:hover::before,
.wp-block-button.inb-arrow-external .wp-element-button:focus-visible::before{
  transform: translate(3px,-3px);
}

/* Respect reduced motion for button icons */
@media (prefers-reduced-motion: reduce){
  .wp-block-button.inb-arrow-right .wp-element-button::after,
  .wp-block-button.inb-arrow-left .wp-element-button::before,
  .wp-block-button.inb-arrow-up .wp-element-button::after,
  .wp-block-button.inb-arrow-down .wp-element-button::after,
  .wp-block-button.inb-arrow-external .wp-element-button::after{
    transition: none;
  }

  .wp-block-button.inb-arrow-right .wp-element-button:hover::after,
  .wp-block-button.inb-arrow-right .wp-element-button:focus-visible::after,
  .wp-block-button.inb-arrow-left .wp-element-button:hover::before,
  .wp-block-button.inb-arrow-left .wp-element-button:focus-visible::before,
  .wp-block-button.inb-arrow-up .wp-element-button:hover::after,
  .wp-block-button.inb-arrow-up .wp-element-button:focus-visible::after,
  .wp-block-button.inb-arrow-down .wp-element-button:hover::after,
  .wp-block-button.inb-arrow-down .wp-element-button:focus-visible::after,
  .wp-block-button.inb-arrow-external .wp-element-button:hover::after,
  .wp-block-button.inb-arrow-external .wp-element-button:focus-visible::after{
    transform: none;
  }
}

/* =========================================
   Navigation: Smooth caret rotation effect
   ========================================= */

.wp-block-navigation.inb-smooth-rotation
.wp-block-navigation-submenu__toggle svg{
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  transform-origin: 50% 50%;
}

/* Rotate when expanded (matches WP aria-expanded behavior) */
.wp-block-navigation.inb-smooth-rotation
.wp-block-navigation-submenu__toggle[aria-expanded="true"] svg{
  transform: rotate(180deg);
}

/* Optional: also rotate on hover (desktop hover-open menus) */
.wp-block-navigation.inb-smooth-rotation
.wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle svg{
  transform: rotate(180deg);
}

/* Rotate on keyboard focus (accessibility feedback) */
.wp-block-navigation.inb-smooth-rotation
.wp-block-navigation-submenu__toggle:focus-visible svg{
  transform: rotate(180deg);
}

/* Respect reduced motion for navigation icon */
@media (prefers-reduced-motion: reduce){
  .wp-block-navigation.inb-smooth-rotation
  .wp-block-navigation-submenu__toggle svg{
    transition: none;
  }
}

/* =========================================
   Underline Reveal (Links)
   - Works on Group blocks
   - Color can be customized via --inb-underline-color
   ========================================= */

.wp-block-group.inb-underline-reveal a:not(.wp-element-button){
  /* By default we keep a visible underline (accessibility).
     The reveal effect is additive via the background underline. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
  text-decoration-color: var(--inb-underline-color, currentColor);

  background-image: linear-gradient(var(--inb-underline-color, currentColor), var(--inb-underline-color, currentColor));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .3s cubic-bezier(.4,0,.2,1);
}

.wp-block-group.inb-underline-reveal.inb-underline-no-default a:not(.wp-element-button){
  text-decoration: none;
}

.wp-block-group.inb-underline-reveal a:not(.wp-element-button):hover,
.wp-block-group.inb-underline-reveal a:not(.wp-element-button):focus-visible{
  background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce){
  .wp-block-group.inb-underline-reveal a:not(.wp-element-button){
    transition: none;
  }
}

/* =========================================
   Button: Hover shadow
   - Intentionally overrides existing shadow on hover/focus.
   - Styles: border | elevate | pressed
   ========================================= */

.wp-block-button.inb-hover-shadow .wp-element-button{
  transition: box-shadow .25s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  .wp-block-button.inb-hover-shadow .wp-element-button{
    transition: none;
  }
}

/* Border-style shadow (stroke) */
.wp-block-button.inb-hover-shadow-border .wp-element-button:hover,
.wp-block-button.inb-hover-shadow-border .wp-element-button:focus-visible{
  box-shadow: 0 0 0 var(--inb-hover-shadow-width, 2px) var(--inb-hover-shadow-color, currentColor);
}

/* Width mapping via classes (avoid inline vars like "border-width") */
.wp-block-button.inb-hover-shadow-w-1{ --inb-hover-shadow-width: 1px; }
.wp-block-button.inb-hover-shadow-w-2{ --inb-hover-shadow-width: 2px; }
.wp-block-button.inb-hover-shadow-w-3{ --inb-hover-shadow-width: 3px; }
.wp-block-button.inb-hover-shadow-w-4{ --inb-hover-shadow-width: 4px; }
.wp-block-button.inb-hover-shadow-w-5{ --inb-hover-shadow-width: 5px; }
.wp-block-button.inb-hover-shadow-w-6{ --inb-hover-shadow-width: 6px; }

/* Raise */
.wp-block-button.inb-hover-shadow-raise .wp-element-button{
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}

.wp-block-button.inb-hover-shadow-raise .wp-element-button:hover,
.wp-block-button.inb-hover-shadow-raise .wp-element-button:focus-visible{
  box-shadow: 0 10px 20px -8px rgba(0,0,0,.25);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
  .wp-block-button.inb-hover-shadow-raise .wp-element-button{
    transition: none;
  }
  .wp-block-button.inb-hover-shadow-raise .wp-element-button:hover,
  .wp-block-button.inb-hover-shadow-raise .wp-element-button:focus-visible{
    transform: none;
  }
}