/* SEO audit front-end fixes (scoopempire.com + Arabic, SmartMag). Loaded by 23-scoop-seo-frontend.php. */

/* 1. Category archive, mobile: the Elementor container around the 4-tile featured grid is a column
   flex with wrap (--flex-wrap-mobile: wrap). In a wrapping column the container is sized from each item's
   flex base size, and the grid's tiles size from a percent padding-top ratio that is 0 in that intrinsic
   pass, so the widget measured ~545px for 1600px of tiles. The overflow then painted over the H1 and the
   list cards below. nowrap sizes it from real layout. */
@media (max-width: 767px) {
	body.category .e-con:has(> .elementor-widget-smartmag-featgrid) {
		flex-wrap: nowrap;
	}
}

/* 2. Tap targets (WCAG 2.2 AA 2.5.8; 44px for header icons). The hit box grows, the layout does not:
   min-width adds the area and an equal negative margin gives the footprint back; padding does the same for text links. */
@media (max-width: 940px) {
	/* Hit box grows toward the logo / empty space; the icon stays flush to its original edge (logical
	   properties + flex-start/end, so RTL mirrors). The negative margin keeps the layout footprint. */
	.smart-head-mobile .items .offcanvas-toggle {
		box-sizing: border-box;
		min-width: 44px;
		margin-inline-end: -18px;
		justify-content: flex-start;
	}
	.smart-head-mobile .items .search-icon {
		box-sizing: border-box;
		min-width: 44px;
		margin-inline-start: -23.3px;
		justify-content: flex-end;
	}
	.breadcrumbs a,
	.post-meta a[rel="author"] {
		display: inline-block;
		padding-block: 6px;
		margin-block: -6px;
	}
	/* Category chips can carry a background, so extend with a transparent overlay instead of padding. */
	.post-meta .post-cat a,
	.cat-labels a {
		position: relative;
	}
	.post-meta .post-cat a::after,
	.cat-labels a::after {
		content: "";
		position: absolute;
		inset: -4px;
	}
}

/* 4. Homepage text H1 (the logo no longer carries it). Matches core's .screen-reader-text. */
.scoop-sr-h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}