/**
 * Ravenna Homes — class-driven tabs.
 *
 * Deliberately minimal. The tab buttons stay whatever Avada makes them; this
 * file only handles show/hide and the fade. Style the active state yourself —
 * the script adds .is-active to the current tab button.
 */

/* The [hidden] attribute is what actually hides a panel. Avada sets
   `display: flex` on container elements, which beats the browser's default
   [hidden] rule, so it has to be stated with weight here. */
.rh-panel[hidden] {
	display: none !important;
}

.rh-panel {
	opacity: 1;
	transition: opacity var(--rh-tab-fade, 180ms) ease;
}

/* Outgoing panel on its way out, and the incoming one before it's revealed.
   The script removes .is-entering on the next frame, which triggers the fade. */
.rh-panel.is-leaving,
.rh-panel.is-entering {
	opacity: 0;
}

@media ( prefers-reduced-motion: reduce ) {

	.rh-panel {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Tab buttons
 *
 * A gentle default so the inactive tab reads as inactive before you style it.
 * Override or delete freely — style .rh-tab.is-active in Avada's Custom CSS
 * for the real treatment.
 * ---------------------------------------------------------------------- */

.rh-tab {
	cursor: pointer;
	transition: opacity 150ms ease;
}

.rh-tab:not(.is-active) {
	opacity: var(--rh-tab-inactive-opacity, 0.65);
}

.rh-tab.is-active {
	opacity: 1;
}

/* Keyboard users need to see which tab has focus. */
.rh-tab:focus-visible {
	outline: 2px solid var(--rh-navy, #063d5d);
	outline-offset: 3px;
}