/* ==========================================================================
 * Teknodayim - cross-cutting responsive rules
 * Component-specific breakpoints live next to the component (header.css,
 * footer.css, ...). This file holds the rules that span several layers.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Sticky header on small phones
 *
 * td-mobile-polish sets `html, body { overflow-x: hidden }` below 480px.
 * With both elements hidden, <body> becomes its own scroll container and
 * position:sticky stops working - the header scrolled away on phones.
 * Same horizontal clipping, but with `clip`, which does not create a scroll
 * container, so the sticky header works again. Browsers without `clip`
 * keep the plugin behaviour.
 * ----------------------------------------------------------------------- */
@supports (overflow: clip) {
	@media (max-width: 480px) {
		:root,
		:root body {
			overflow-x: clip;
		}
	}
}

/* --------------------------------------------------------------------------
 * 2. Blog layout
 * ----------------------------------------------------------------------- */
@media (max-width: 991px) {
	.td-blog-layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.td-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.td-archive-header .page-title,
	.td-empty-state .page-title,
	.td-error-404 .page-title {
		font-size: 24px;
	}

	.single-title {
		font-size: 28px;
	}

	.search-form {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
 * 3. Touch targets on phones
 * ----------------------------------------------------------------------- */
@media (max-width: 760px) {
	form.cart button.minus,
	form.cart button.plus {
		width: 40px;
		height: 44px;
	}
}