/* ============================================================
 * io-kenos-child v1.2 — IO Overrides + General Hygiene
 * ------------------------------------------------------------
 * Fixes for the May 13 bug list (A1, A2, A3) plus universal
 * heading/container hygiene rules picked up by the inspector
 * audit on 2026-05-14.
 *
 * Conditional load: enqueued only when the IO plugin is detected
 * (see inc/enqueue.php). Non-IO sites never see these rules.
 *
 * Rule prefix: `.io_*` selectors are IO plugin classes; the
 * heading-hygiene rules at the bottom are theme-wide (the
 * `:where()` wrapper keeps their specificity at 0 so the
 * underlying theme/Elementor rules win on intentional headings).
 * ============================================================ */

/* ------------------------------------------------------------
 * A1 — /rentals/ H1 + intro + section H2 render BLACK on the
 * purple/pink gradient because the page-content block carries
 * inline style="color:##7500ec" (double-## typo → invalid CSS
 * → color falls back to inherited black). The intended look
 * was clearly white-on-gradient.
 *
 * Inline styles override external CSS by default; we beat them
 * with !important on a deliberately-narrow selector that only
 * matches the centered hero block IO ships with (.page-content
 * > center > headings/p). Won't false-positive on other pages.
 * ------------------------------------------------------------ */
.page-content > center > h1.wp-block-heading,
.page-content > center > h2.wp-block-heading,
.page-content > center > p,
.page-content > center > p strong {
	color: var(--wdz-text-on-gradient, #ffffff) !important;
}

/* The same fix when IO renders its own gradient hero with these
 * wrapper classes (covers older / parallel IO templates). */
.io_all_cat h1,
.io_all_cat > p:first-of-type,
.io_landingpages h1,
.io_landingpages > p:first-of-type,
.io_category_wrapper h1.catNameIO {
	color: var(--wdz-text-on-gradient, #ffffff) !important;
}

.io_all_cat h1,
.io_landingpages h1,
.io_category_wrapper h1.catNameIO {
	font-size: var(--wdz-h1, clamp(2rem, 5vw, 3.5rem));
	line-height: var(--wdz-lh-tight, 1.2);
}

.io_all_cat > p:first-of-type,
.io_landingpages > p:first-of-type {
	font-size: var(--wdz-body, 1rem);
	line-height: var(--wdz-lh-base, 1.6);
}

/* ------------------------------------------------------------
 * A2 + A3 — Empty IO container hide.
 * IO sometimes ships wrappers that don't get populated; without
 * children they render as empty styled bubbles. Hide them.
 * ------------------------------------------------------------ */
.io_landingpages .empty-bubble,
.io_landingpages > .container:empty,
.io_landingpages > .container > *:only-child:empty,
.io_catdiv2:empty,
.io_landingpages_io_landingpages_:empty,
.io_cat_longdescription:empty {
	display: none !important;
}

/* ------------------------------------------------------------
 * A4 (2026-05-27) — single-product page lost its two-column layout.
 * IO's product shelf (.io_product_container > .simpleCart_ioShelfItem)
 * holds two inline-block children: .io_product_picbox (image, ~592px) and
 * .io_product_infobox (details/price card, ~644px). 592+644 > the ~1216px
 * container, so the card WRAPS below the image (stacked, image looks huge).
 * The intended look is image-left / card-right. Restore it with flex at
 * desktop; stays stacked on mobile. Scoped to .io_product_container, which
 * only exists on single-product pages (category pages use .io_catdiv2).
 *
 * NOTE (theme track): this is an IO/theme layout regression, not wdz-checkout
 * (verified — removing checkout CSS/JS left the page stacked). Fix lives here
 * in the child IO-overrides where A1–A3 live.
 * ------------------------------------------------------------ */
@media (min-width: 880px) {
	.io_product_container .simpleCart_ioShelfItem {
		display: flex;
		align-items: flex-start;
		gap: clamp(20px, 3vw, 40px);
	}
	.io_product_container .io_product_picbox {
		flex: 0 1 46%;
		max-width: 46%;
	}
	.io_product_container .io_product_infobox {
		flex: 1 1 54%;
		min-width: 0;
		display: block; /* was inline-block; as a flex child it shouldn't wrap */
	}
	.io_product_container .io_product_picbox img {
		max-width: 100%;
		height: auto;
	}
}

/* ------------------------------------------------------------
 * Inspector finding (2026-05-14) — empty heading suppression.
 * Universal rule: any heading element with no children gets
 * hidden. Applies to Elementor placeholder headings that ship
 * `<h3 class=""></h3>` when a widget is added but never filled.
 *
 * Specificity kept at 0 via :where() so a deliberately-empty
 * heading (one with content set via ::before pseudo or similar
 * future use case) can be re-shown by a more specific rule.
 * ------------------------------------------------------------ */
:where(h1, h2, h3, h4, h5, h6):empty {
	display: none;
}

/* ============================================================
 * Remove the redundant DESKTOP top strip (Mahmud 2026-06-04)
 * ------------------------------------------------------------
 * The wdz-sticky-cta renders as a fixed bar at the TOP on desktop
 * (>=769px), which duplicates the main header's brand/phone/Book
 * Now/Inventory. Hide it on desktop and reclaim the body padding
 * the bar reserved. The MOBILE instance (fixed BOTTOM action bar)
 * is intentionally kept — it isn't redundant with the header there.
 * ============================================================ */
@media (min-width: 769px) {
	.wdz-sticky-cta { display: none !important; }
	body { padding-top: 0 !important; }
}

/* ============================================================
 * Blog listing equal-height cards (Mahmud 2026-06-04)
 * ------------------------------------------------------------
 * /blog/ is rendered by an Elementor Posts widget (cards skin)
 * whose grid uses align-items:flex-start, so cards size to their
 * own content (uneven). Stretch them to a uniform row height and
 * let the card fill, so all cards are the same size.
 * ============================================================ */
.elementor-posts-container.elementor-posts { align-items: stretch; }
.elementor-posts--skin-cards .elementor-post,
.elementor-posts--skin-cards .elementor-post.elementor-grid-item { height: 100%; }
.elementor-posts--skin-cards .elementor-post__card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.elementor-posts--skin-cards .elementor-post__card .elementor-post__text { flex-grow: 1; }