/*
 * WordPress-only adjustments on top of app.css (the untouched Tailwind build).
 * Keep this file small: anything visual should already be in app.css.
 */

/* Block theme root = the original <div class="min-h-screen flex flex-col bg-background text-foreground">. */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-background); color: var(--color-foreground); }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group.flex-1 { flex: 1 1 0%; }

/* Fixed navbar below the admin bar for logged-in users. */
.admin-bar #yfx-nav { top: 32px; }
.admin-bar #mobile-navigation { top: calc(4rem + 32px); }
@media (min-width: 768px) { .admin-bar #mobile-navigation { top: calc(5rem + 32px); } }
@media (max-width: 782px) {
	.admin-bar #yfx-nav { top: 46px; }
	.admin-bar #mobile-navigation { top: calc(4rem + 46px); }
}

/* Core block wrappers inside articles behave like the original plain elements. */
.article-content .wp-block-image img { display: block; }
.article-content .wp-block-group { margin: 0; }
.article-content figure.wp-block-image { margin: 2.5rem 0; }

/* Tool app mount point must not affect layout (the original rendered the section directly). */
[data-yfx-tool] { display: contents; }

/* Block theme "Skip to content" link: hidden until focused (core's own CSS is dequeued with the block styles). */
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link.screen-reader-text:focus { background: #fff; clip-path: none; color: #111; display: block; font-size: 1rem; height: auto; left: 6px; padding: 15px 23px 14px; top: 7px; width: auto; z-index: 100000; }

/* Floating WhatsApp button (YogaFX Settings → Conversion). Bottom-left: back-to-top and the sticky bar live on the right/bottom. */
.yfx-wa-float { position: fixed; left: 1rem; bottom: 5.5rem; z-index: 45; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 9999px; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); transition: transform .2s ease; }
.yfx-wa-float:hover { transform: scale(1.06); color: #fff; }
@media (min-width: 640px) { .yfx-wa-float { bottom: 6.5rem; left: 1.5rem; } }