/**
 * Fillvox Page Builder — front-end fallback styles.
 *
 * The block render output uses Tailwind utility classes for layout. When the
 * Fillvox theme is active, Tailwind is already loaded. When a non-Fillvox
 * theme is active, the plugin loads Tailwind via CDN as a fallback (see
 * fillvox_builder_maybe_enqueue_lucide()).
 *
 * This stylesheet adds a few non-Tailwind tweaks the blocks rely on:
 *   - the dotted background pattern used by the image-text placeholder
 *   - sensible typography fallback
 *   - light hover transitions
 */

.fillvox-block {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dotted-pattern background used by the image-text block placeholder + hero. */
.fillvox-block .dotted-bg {
	background-image: radial-gradient( circle, rgba( 255, 255, 255, .25 ) 1px, transparent 1px );
	background-size: 22px 22px;
}

/* Smooth interactive transitions on cards / buttons. */
.fillvox-block a,
.fillvox-block .pain-card,
.fillvox-block .tier-card {
	transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
}

/* Pricing tier hover lift */
.fillvox-pricing-tier .tier-card:hover {
	transform: translateY( -2px );
}

/* Make sure rounded utility class respects user's Customizer "radius" choice
   when the theme is active (the theme exposes --fillvox-radius). */
.fillvox-block .rounded-2xl,
.fillvox-block .rounded-xl {
	border-radius: var( --fillvox-radius, 1rem );
}

/* Ensure SVG / icon size doesn't collapse before Lucide replaces the <i>. */
.fillvox-block i[ data-lucide ] {
	display: inline-block;
	width: 1em;
	height: 1em;
}

/* Prevent overlapping when blocks are stacked directly. */
.fillvox-block + .fillvox-block {
	margin-top: 0;
}