/* 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: color-mix(in srgb, var(--bde-background-color) 70%, transparent) !important;
  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: var(--bde-background-color) !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: var(--bde-background-color);
}
.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: var(--bde-body-text-color);
}
/* 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; 
}

/* Ensure tab panel typography inherits site globals, not page presets */
.breakdance .feature-tabs [data-panel-content] {
  font-family: var(--bde-body-font-family);
  color: var(--bde-body-text-color);
}

.breakdance .feature-tabs [data-panel-content] .bde-heading {
  font-family: var(--bde-heading-font-family) !important;
  color: var(--bde-headings-color) !important;
}

.breakdance .feature-tabs [data-panel-content] .bde-text {
  font-family: var(--bde-body-font-family) !important;
  color: var(--bde-body-text-color) !important;
}

.breakdance .feature-tabs [data-panel-content] a {
  color: var(--bde-links-color);
}

.breakdance .feature-tabs [data-panel-content] a:hover {
  color: var(--bde-links-color-hover);
}