/* ==========================================================================
   10. Tabs Block
   ========================================================================== */

.wp-block-ermisch-block-tabs-block {
  margin-top: var(--wp--preset--spacing--xl-128-r, inherit) !important;
  margin-bottom: var(--wp--preset--spacing--xl-128-r, inherit) !important;
  padding-top: var(--wp--preset--spacing--md-48-r, inherit) !important;
  padding-bottom: var(--wp--preset--spacing--md-48-r, inherit) !important;
}

.wp-block-ermisch-block-tabs-block .tab-title {
  --tab-title-font:
    Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --tab-title-font-size: clamp(0.875rem, 0.699rem + 0.751vw, 1.375rem);
  --tab-title-font-weight: 300;
  --tab-title-text-transform: uppercase;
  --tab-title-line-height: 1.1;
  background-color: var(--tab-title-bg-color, inherit);
  color: var(--tab-title-text-color, inherit);
  font-family: var(--tab-title-font, inherit);
  font-size: var(--tab-title-font-size, inherit);
  font-weight: var(--tab-title-font-weight, inherit);
  line-height: var(--tab-title-line-height, inherit);
  text-transform: var(--tab-title-text-transform, inherit);
}

.wp-block-ermisch-block-tabs-block .tab-heading {
  --heading-font:
    --tab-title-font: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --heading-font-size: clamp(2.25rem, 1.986rem + 1.127vw, 3rem);
  --heading-font-weight: 300;
  --heading-text-transform: uppercase;
  --heading-line-height: 1.1;
  --heading-text-color: #0f6dbf;
  background-color: var(--heading-bg-color, inherit);
  color: var(--wp--preset--color--primary, #0f6dbf);
  display: flex;
  font-family: var(--heading-font, inherit);
  font-size: var(--heading-font-size, inherit);
  font-weight: var(--heading-font-weight, inherit);
  justify-content: var(--justifyContentHeading-desktop, initial);
  line-height: var(--heading-line-height, inherit);
  text-transform: var(--heading-text-transform, inherit);
}

.wp-block-ermisch-block-tabs-block .tab-sidebar {
  --sidebarMobile-bg-color: var(--wp--preset--color--background);
  align-self: flex-start;
  background-color: var(
    --sidebarMobile-bg-color,
    var(--sidebar-bg-color, inherit)
  );
  gap: var(
    --gapHeadingTab-right-mobile,
    var(
      --gapHeadingTab-right-tablet,
      var(--gapHeadingTab-right-desktop, initial)
    )
  );
  max-height: 100vh;
  top: var(
    --gapTop-right-mobile,
    var(--gapTop-right-tablet, var(--gapTop-right-desktop, initial))
  );
  z-index: 4;
}

@media (max-width: 640px) {
  .wp-block-ermisch-block-tabs-block .tab-header-buttons {
    align-items: center;
  }
}

/* Tabs – active and hover state */
.wp-block-ermisch-block-tabs-block .tab-header-buttons button:hover {
  color: var(--wp--preset--color--primary, #0f6dbf);
}

.wp-block-ermisch-block-tabs-block .tab-header-buttons button.active:hover {
  color: var(--wp--preset--color--foreground, #333333);
}

.wp-block-ermisch-block-tabs-block
  .tab-header-buttons
  button.active
  .tab-title {
  font-weight: 600;
}

/* Tab button arrow (desktop only) */
@media (min-width: 641px) {
  .wp-block-ermisch-block-tabs-block
    .tab-header-buttons
    button:not(.active)
    .tab-title::before {
    content: "";
    display: inline-flex;
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.2rem;
    vertical-align: sub;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
  }

  .wp-block-ermisch-block-tabs-block
    .tab-header-buttons
    button:not(.active):hover
    .tab-title::before {
    filter: brightness(0) saturate(100%) invert(20%) sepia(96%) saturate(1352%)
      hue-rotate(211deg) brightness(118%) contrast(101%);
  }
}

/* Smooth transitions for sticky sidebar state */
.wp-block-ermisch-block-tabs-block .tab-heading,
.wp-block-ermisch-block-tabs-block
  .tab-sidebar.is-stuck
  .tab-header
  .tab-header-buttons
  .tab-title,
.wp-block-ermisch-block-tabs-block
  .tab-sidebar.is-stuck
  .tab-header
  .tab-header-buttons
  .tab-label {
  transition: font-size 0.2s ease-in-out;
}

.wp-block-ermisch-block-tabs-block .tab-sidebar {
  transition: gap 0.1s ease-in-out;
  transition: padding 0.1s ease-in-out;
}

.wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck {
  padding-top: 1.5rem;
}

@media (max-width: 640px) {
  .wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck .tab-heading {
    font-size: 1rem;
  }

  .wp-block-ermisch-block-tabs-block
    .tab-sidebar.is-stuck
    .tab-header
    .tab-header-buttons
    .tab-title,
  .wp-block-ermisch-block-tabs-block
    .tab-sidebar.is-stuck
    .tab-header
    .tab-header-buttons
    .tab-label {
    font-size: 0.8rem !important;
  }

  .wp-block-ermisch-block-tabs-block .tab-sidebar.is-stuck {
    gap: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    opacity: 0.98;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}