/*
 * WOWCLOUD iO 0.4.7.5.2 "Easier on phones": phone-width comfort layer, loaded after every other sheet.
 * Sizing, spacing and wrapping only (no colours, logo, hero heading or tagline changes).
 * Everything sits inside @media (max-width:782px), so wider screens are untouched.
 * The ":root body:is(#wc-m,body)" prefix carries id-level weight so it outranks the skin/Stage 2 rules.
 */
@media (max-width: 782px) {

	/* 1. Tap targets: at least 44x44 px. */
	:root body:is(#wc-m, body) :is(button, summary, select, [role=button], input[type=submit], input[type=button], input[type=reset]):not(.screen-reader-text):not([hidden]):not(.wc2-box__tg):not(.wc-hs__btn),
	:root body:is(#wc-m, body) :is(input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], input[type=number], input[type=tel]):not([hidden]) {
		min-height: 44px !important;
		box-sizing: border-box !important;
	}
	:root body:is(#wc-m, body) :is(button, summary, [role=button], input[type=submit], input[type=button], input[type=reset]):not(.screen-reader-text):not([hidden]):not(.wc2-box__tg):not(.wc-hs__btn) {
		min-width: 44px !important;
	}
	:root body:is(#wc-m, body) summary:not(.wc-hs__btn) { align-content: center; }
	:root body:is(#wc-m, body) .wc-on__tg {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center;
	}

	/* Links that act as controls (not links inside running text). */
	:root body:is(#wc-m, body) :is(
		.wp-block-social-link-anchor,
		.wc-jh__in, .wc-sb__help, a.wc-btn, a.wc2-btn, a.wc2-act, .wc2-jump, .wc2-mini__p, .wc2-post__no,
		.wc2-fb__t, .wc2-last__t, .wc-tk__main > a, .wc-tk__meta a, .wc2-last__by a, .wc-rw__who a, .wc-wx-post__who a,
		.wc2-mini__name a, .wc-on__name, .wc-ap__t, .wc-ap__m a, .wc-ptabs a, .wc-wall__tabs a, .wc-wx-menu__p a,
		.wc-wx-menu__p .wc-um-link, .wc-um-f .wc-um-link, .wc-rep__f .wc-um-link, .wc-post-page__back a, .wc-um-guest__m a,
		.wc-about__empty a, .wc-tag__act a, .wc-um-pager a, .wc2-minipages a, .wc-rw__t
	) {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 44px !important;
		min-width: 44px !important;
		box-sizing: border-box !important;
	}
	:root body:is(#wc-m, body) :is(.wc-rw__t, .wc2-fb__t, .wc-ap__t, .wc2-last__t) {
		display: block !important;
		align-content: center;
	}
	:root body:is(#wc-m, body) :is(.wp-block-social-link-anchor, .wc2-jump, .wc2-post__no) {
		justify-content: center !important;
	}
	:root body:is(#wc-m, body) :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px !important;
		min-height: 44px !important;
	}
	/* Same look, bigger hit area: an invisible layer around the header logo, menu links, header search and module toggles. */
	:root body:is(#wc-m, body) :is(.wowcloud-logo-link, .wp-block-navigation-item__content, .wc-hs > summary) { position: relative; }
	:root body:is(#wc-m, body) :is(.wowcloud-logo-link, .wp-block-navigation-item__content, .wc-hs > summary)::after {
		content: ""; position: absolute; inset: -10px -6px; min-height: 44px;
	}
	:root body:is(#wc-m, body) .wc2-box__tg::after { inset: -9px -2px !important; }

	/* Check boxes and radio buttons: the whole label is the target. */
	:root body:is(#wc-m, body) :is(.wc-poll__pick, label:has(> input[type=checkbox]), label:has(> input[type=radio])) {
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
	}
	:root body:is(#wc-m, body) label.wc-wx-chip {
		min-height: 44px !important;
	}

	/* At least 8 px between neighbouring targets. */
	:root body:is(#wc-m, body) :is(
		.wc-srch-form, .wc2-btns, .wc2-post__f, .wc-rx, .wc2-editor__bar, .wc2-editor__f, .wc-rep__f, .wc-tag__act,
		.wc-ptabs, .wc-wall__tabs, .wc-wx-menu__p, .wc-wx-comp__bar, .wc-wall__cf, .wct-form, .wc-sk__i, .wc-um-jump,
		.wc-poll__foot, .wc-um-f, .wc-um-pager, .wc2-minipages, .wp-block-social-links, .wc-wx-post__bar, .wc-um-social
	) {
		gap: 8px !important;
		flex-wrap: wrap;
	}
	/* The older coarse-pointer padding/negative-margin hit areas would overlap now that these links are 44 px tall. */
	:root body:is(#wc-m, body) :is(.wc2-fb__t, .wc2-last__t, .wc2-last__by a, .wc-tk__main a, .wc-tk__meta a, .wc-um-guest__m a, a.wc-name, a.wc-on__name) { margin-block: 0 !important; padding-block: 0 !important; }
	:root body:is(#wc-m, body) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item { margin-top: 4px !important; }
	:root body:is(#wc-m, body) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { inset: -9px -6px; }
	:root body:is(#wc-m, body) .wc-poll__pick + .wc-poll__pick { margin-top: 8px !important; }
	:root body:is(#wc-m, body) :is(.wc-rw__who, .wc2-mini__name, .wc-wx-post__who, .wc2-last__by, .wc-tk__meta) { display: block; margin-block: 8px !important; }
	:root body:is(#wc-m, body) .wc2-last__main { gap: 8px !important; }
	:root body:is(#wc-m, body) .wc2-editor__bar { margin-bottom: 8px !important; }
	:root body:is(#wc-m, body) .wc-ap__m:not(.wc-wx-post__s) { display: block; margin-top: 8px !important; }
	:root body:is(#wc-m, body) .wc-ap__i:not(.wc-wx-post) + .wc-ap__i:not(.wc-wx-post), :root body:is(#wc-m, body) .wc-on__m + .wc-on__m { margin-top: 8px !important; }
	:root body:is(#wc-m, body) dt:has(> .wc-on__tg) { margin-block: 0 8px !important; }
	:root body:is(#wc-m, body) .wc-rx__b + .wc-rx__b, :root body:is(#wc-m, body) .wc2-act + .wc2-act { margin-left: 0 !important; }

	/* 2. Readability: form fields at 16 px (no zoom-on-focus), running text at 15 px or more. */
	:root body:is(#wc-m, body) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), textarea, select) {
		font-size: 16px !important;
	}
	:root body:is(#wc-m, body) :is(
		.wc-rw__t, .wc2-fb__d, .wct-note, .wct-mine__i, .wc-sk__bal, .wc-um-guest__s, .wc-um-none, .wc-on__rec,
		.wc-um-quote, .wc-about__empty, .wc-hero__meta li, .wc-on__list > li, .wc-on__xlist > li
	) {
		font-size: 15px !important;
	}

	/* 3. Layout: nothing wider than the screen. */
	:root body:is(#wc-m, body) :is(.wc2-post__b, .wc-wall__body, .wc-wx-post__text, .wc-rw__t, .wc-sb__msg, .wc-um-quote, main p, main li, main td, main dd) {
		overflow-wrap: anywhere;
		word-break: normal;
		min-width: 0;
	}
	:root body:is(#wc-m, body) main :is(img, video, iframe, embed, object, svg:not(.wc-ic)) { max-width: 100%; }
	:root body:is(#wc-m, body) main :is(img, video) { height: auto; }
	:root body:is(#wc-m, body) main table:not(.wc-keep) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	:root body:is(#wc-m, body) main :is(pre, code) { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
	:root body:is(#wc-m, body) .wc-hs__pop { max-width: calc(100vw - 24px); box-sizing: border-box; }
}