/**
 * OnOff — site-wide mobile foundations
 *
 * All layout/typography rules are scoped to max-width: 899px only.
 * Desktop styles in main.css and component sheets are unchanged.
 *
 * References: MDN responsive design, web.dev viewport basics,
 * Google Chrome modern CSS guidance (touch targets, dvh, clamp, text-wrap).
 */

@media (max-width: 899px) {
	/* ------------------------------------------------------------------ */
	/* Document shell — prevent horizontal scroll                         */
	/* ------------------------------------------------------------------ */

	html {
		overflow-x: hidden;
		max-width: 100%;
		overscroll-behavior-x: none;
	}

	body {
		overflow-x: hidden;
		width: 100%;
		max-width: 100%;
		min-block-size: var(--onoff-viewport-height, 100dvh);
		overscroll-behavior-x: none;
	}

	/* Top-level layout shells (homepage sections sit outside #page) */
	.site-header,
	.hero,
	.hero-bar,
	.home-page-section,
	.footer-whatsapp-cta,
	.site-footer,
	#page.site {
		width: 100%;
		max-width: 100%;
	}

	.site-footer,
	.site-footer__top,
	.site-footer__middle,
	.site-footer__bottom,
	.hero-bar,
	.home-page-section {
		max-width: 100%;
	}

	.hero {
		overflow-x: clip;
	}

	.hero__inner,
	.hero__container {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.hero__title {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* Notched / home-indicator safe areas on full-width chrome */
	.site-header__inner,
	.site-footer__top-inner,
	.site-footer__middle-inner,
	.site-footer__bottom-inner,
	.hero__inner {
		padding-inline-start: max(var(--onoff-gutter), env(safe-area-inset-left, 0px));
		padding-inline-end: max(var(--onoff-gutter), env(safe-area-inset-right, 0px));
	}

	.site-footer__bottom-inner {
		padding-block-end: max(var(--onoff-gap-md), env(safe-area-inset-bottom, 0px));
	}

	/* ------------------------------------------------------------------ */
	/* Content width — keep media and wide blocks inside the viewport       */
	/* ------------------------------------------------------------------ */

	.site-main,
	.entry-content,
	.woocommerce,
	.site-header__inner,
	.site-main > * {
		max-width: 100%;
		min-width: 0;
	}

	.entry-content img,
	.entry-content video,
	.entry-content iframe,
	.entry-content svg,
	.wp-block-image img,
	figure img {
		max-width: 100%;
		height: auto;
	}

	.entry-content table,
	.woocommerce table.shop_table,
	.woocommerce-table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ------------------------------------------------------------------ */
	/* Mobile typography — fluid sizes, improved wrapping                   */
	/* ------------------------------------------------------------------ */

	h1,
	.entry-title,
	.page-title {
		font-size: clamp(1.625rem, 1.35rem + 1.25vw, 2.25rem);
		text-wrap: balance;
	}

	h2 {
		font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
		text-wrap: balance;
	}

	h3 {
		font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
		text-wrap: balance;
	}

	p,
	.entry-content li {
		text-wrap: pretty;
	}

	/* ------------------------------------------------------------------ */
	/* Touch & pointer — WCAG-friendly targets on coarse pointers           */
	/* ------------------------------------------------------------------ */

	@media (pointer: coarse) {
		button,
		input[type='button'],
		input[type='submit'],
		input[type='reset'],
		select,
		.nav-toggle,
		.header-utilities__link,
		.main-navigation a,
		.woocommerce a.button,
		.woocommerce button.button,
		.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
		.woocommerce nav.woocommerce-pagination ul.page-numbers li span {
			min-block-size: var(--onoff-touch-target-min, 2.75rem);
		}

		.main-navigation a,
		.header-utilities__link,
		.nav-toggle {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		input[type='checkbox'],
		input[type='radio'] {
			inline-size: 1.25rem;
			block-size: 1.25rem;
			min-block-size: 1.25rem;
		}

		a[href],
		button,
		input,
		select,
		textarea,
		label,
		summary {
			touch-action: manipulation;
		}
	}

	button,
	a,
	.nav-toggle,
	input,
	select {
		-webkit-tap-highlight-color: rgba(242, 251, 4, 0.25);
	}

	/* ------------------------------------------------------------------ */
	/* Motion — respect user preference on small screens                  */
	/* ------------------------------------------------------------------ */

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	/* ------------------------------------------------------------------ */
	/* Homepage — 50% less vertical space between sections                */
	/* ------------------------------------------------------------------ */

	body.home .home-page-section {
		padding-block-start: 24px;
	}

	body.home .home-page-section__inner {
		padding-block: 1.25rem;
		padding-inline: var(--onoff-gutter);
	}

	body.home .shop-by-category,
	body.home .shop-by-brand {
		padding-block-end: 24px;
	}

	body.home .shop-by-category__categories {
		padding-block-start: 24px;
	}

	body.home .shop-by-brand__brands,
	body.home .home-product-section__grid {
		padding-block-end: 1.25rem;
	}

	body.home .category-grid-embed__actions,
	body.home .brand-grid-embed__actions {
		margin-block-start: 12px;
	}

	body.home .why-onoff__features {
		padding-block-start: 24px;
	}

	body.home .home-promos {
		padding-block: 24px;
	}

	body.home .site-main--front {
		padding-block-start: calc(var(--onoff-gap-lg) * 0.5);
	}
}

@media (max-width: 640px) {
	body.home .why-onoff__features {
		padding-block-start: 16px;
	}
}