/* hide all expanded panels by default */
.row-expanded [data-panel-content]{
  display: none ;
}

/* show the active one */
.row-expanded [data-panel-content].is-active{
    display: flex;
}

/* make cards feel clickable */
.card, .tab-card:hover{
  cursor: pointer; 
}


/* tab behavior */

.tab-card{
  position: relative;
  background: rgb(255, 255, 255, 70% )!important; /* light tan */
  transition: background-color .15s ease;
}

/* underline is a visual element, not a border */
.tab-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--bde-links-color);
  transition: height .15s ease;
}

/* active = thin underline */
.tab-card.is-active{
  background: #ffffff!important;
}
.tab-card.is-active::after{
  height: 8px;
}

/* active + hover = thick underline */
.tab-card.is-active.is-hover::after{
  height: 16px;
}

/* hovered (becomes active via JS) should also go thick immediately */
.tab-card.is-hover{
  background: #ffffff;
}
.tab-card.is-hover::after{
  height: 16px;
}

/*alternate tab*/

/* default underline (already exists) */
.tab-card::after{
  background: var(--bde-links-color);
}

/* dark variant underline */
.tab-card.darktab::after{
  background: #000;
}
/* Breakdance sets .bde-columns to display:flex, override it for tab panels */
.breakdance .feature-tabs .row-expanded [data-panel-content] {
  display: none;   
}

.breakdance .feature-tabs .row-expanded [data-panel-content].is-active {
  display: flex; 
}