/*
 * Mobile hardening.
 *
 * Loaded last, so it can correct anything earlier. Everything here fixes a
 * defect that actually shows on a phone, not a hypothetical one.
 */

/* ==================================================================
 * 1. Horizontal overflow
 *
 * --vw is measured from clientWidth by app.js. 100vw INCLUDES the scrollbar,
 * so any full-bleed element built from it is about 15px wider than the
 * viewport and forces a horizontal scrollbar. That is the single most common
 * cause of a page that "wobbles" sideways on a phone.
 * ================================================================== */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* A long unbroken string — a URL, a part number, a reference code — is the
   other cause, and no amount of container work prevents it. */
.cq-prose,
.cq-copy,
.cq-v-two__c,
.qb-legal__t,
.cq-acc__in,
.cq-kitem__d,
.cq-card__d,
.cq-v-card__d,
.cq-mega__iD {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Anything that could be wider than its parent. */
img, svg, video, iframe, table, pre, code { max-width: 100%; }
pre { overflow-x: auto; }

/* ==================================================================
 * 2. Viewport height
 *
 * vh on iOS Safari measures the viewport WITHOUT the browser chrome, so a
 * 100vh hero is taller than the visible area and its buttons sit under the
 * toolbar. dvh tracks the real height; the vh line stays as the fallback.
 * ================================================================== */
@supports (height: 100dvh) {
	.cq-hero { min-height: max(var(--hero-h-min), 78dvh); }
	.cq-hero--home { min-height: max(var(--hero-h-min), 92dvh); }
	.qb-hh { min-height: 88dvh; }
	.cq-mm__panel { height: 100dvh; }
}

/* ==================================================================
 * 3. Touch targets
 *
 * A 26px control is hittable with a mouse and a coin toss with a thumb. The
 * hit area is expanded with a pseudo-element instead of by resizing, so the
 * design keeps its proportions and nothing reflows.
 * ================================================================== */
@media (hover: none) and (pointer: coarse) {

	.cq-iconbtn,
	.cq-burger,
	.cq-mm__toggle,
	.cq-mm__close,
	.qb-wwd__toggle,
	.qb-car__nav,
	.cq-acc__ico,
	.cq-top,
	.qb-roles__f,
	.cq-ni__toggle {
		position: relative;
	}

	.cq-iconbtn::after,
	.cq-burger::after,
	.cq-mm__toggle::after,
	.cq-mm__close::after,
	.qb-wwd__toggle::after,
	.qb-car__nav::after,
	.cq-top::after,
	.cq-ni__toggle::after {
		content: "";
		position: absolute;
		inset: 50% 50% 50% 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
		margin: 0;
	}

	/* The accordion button already spans the row, so only its icon needs the
	   extra reach — and the row itself is the real target. */
	.cq-acc__q { min-height: 56px; }
	.cq-v-slat__spine { min-height: 56px; }
	.qb-roles__f { min-height: 44px; }
	.cq-dd__a { min-height: 46px; }
	.cq-mega__i { min-height: 52px; }
	.cq-ft__menu a,
	.cq-ft__legalMenu a { padding-block: 4px; }
	.cq-util__menu a { padding-block: 8px; }
}

/* No lingering grey flash on tap. */
a, button, [role="button"], input, label, summary {
	-webkit-tap-highlight-color: rgba(105,185,75,.16);
}

/* ==================================================================
 * 4. Hover states on touch
 *
 * A device with no hover leaves :hover styles stuck on after a tap, so an
 * element stays lifted until something else is tapped. Transform-based lifts
 * are disabled where there is no real hover.
 * ================================================================== */
@media (hover: none) {
	.cq-card:hover,
	.cq-post:hover,
	.cq-v-card:hover,
	.cq-v-ghost__c:hover,
	.qb-bl__card:hover,
	.qb-contact__c:hover,
	.qb-grid--filled .qb-grid__c:hover,
	.qb-car__item:hover,
	.cq-btn--p:hover,
	.cq-btn--s:hover,
	.qb-hh__b1:hover,
	.qb-ban__btn:hover { transform: none; }

	/* Anything only reachable by hover has to be visible instead. */
	.cq-card__link,
	.cq-v-card__link,
	.cq-v-index__arw,
	.qb-grid__arw,
	.cq-mega__iArw { opacity: 1; transform: none; }

	.cq-v-car__d { max-height: none; opacity: 1; }
	.cq-card__aura { display: none; }
}

/* ==================================================================
 * 5. Safe areas
 *
 * On a notched phone in landscape the side insets are real, and a fixed
 * element sitting at inset 0 lands under the rounded corner.
 * ================================================================== */
@supports (padding: max(0px)) {
	.cq-in {
		padding-inline-start: max(var(--gut), env(safe-area-inset-left));
		padding-inline-end: max(var(--gut), env(safe-area-inset-right));
	}
	.cq-top {
		inset-block-end: max(14px, env(safe-area-inset-bottom));
		inset-inline-end: max(14px, env(safe-area-inset-right));
	}
	.cq-mm__panel {
		padding-block-end: env(safe-area-inset-bottom);
	}
	.cq-mm__foot { padding-block-end: max(20px, env(safe-area-inset-bottom)); }
}

/* ==================================================================
 * 6. Phone layout corrections
 * ================================================================== */
@media (max-width: 620px) {

	/* Type that was sized for a wide column. */
	.cq-display { font-size: clamp(28px, 8.4vw, 40px); letter-spacing: -0.02em; }
	.cq-h2 { font-size: clamp(21px, 6.4vw, 28px); }
	.cq-sub, .cq-lede { font-size: 14.5px; }
	.cq-eyebrow { font-size: 10px; letter-spacing: .16em; margin-bottom: 14px; }
	.cq-eyebrow::before { width: 22px; }

	/* Section rhythm — the desktop clamp floor is still generous on a phone. */
	:root { --sec-y: clamp(44px, 11vw, 64px); }

	/* Buttons stack and fill, which is the only reliable target on a phone. */
	.cq-btns { flex-direction: column; align-items: stretch; gap: 10px; }
	.cq-btns .cq-btn { width: 100%; justify-content: center; }
	.cq-btns--center { align-items: stretch; }

	/* Tables cannot reflow, so they scroll — with a hint that they do. */
	.cq-prose table,
	.qb-legal__t table { display: block; overflow-x: auto; white-space: nowrap; }

	/* Oversized ghost numerals crowd a narrow cell. */
	.cq-v-explore__n { font-size: 62px; inset-inline-end: 10px; }
	.cq-v-cols__n { font-size: 46px; }
	.cq-v-bento__ghost { font-size: 48px; }
	.cq-v-ghost__n { font-size: 56px; }

	/* The footer trust strip runs to four lines of uppercase at this width. */
	.cq-ft__trust p { font-size: 10px; letter-spacing: .06em; line-height: 1.7; }

	/* Breadcrumbs wrap rather than push the hero wide. */
	.cq-crumb { font-size: 10.5px; gap: 6px; }

	/* The search overlay was positioned for a desktop viewport. */
	.cq-so__panel { margin-block-start: 12vh; }
	.cq-so__field input { font-size: 22px; }
	.cq-so__close { top: 14px; inset-inline-end: 14px; }

	/* A sticky sidebar has nothing to stick beside in one column. */
	.cq-faq__aside,
	.qb-legal__toc { position: static; top: auto; }

	/* Stat figures at desktop scale overflow their cell. */
	.cq-stat__n { font-size: clamp(28px, 9vw, 38px); }
	.cq-hero__stat strong { font-size: 22px; }
}

/* Very narrow devices — 320px still exists. */
@media (max-width: 380px) {
	:root { --gut: 16px; }
	.cq-display { font-size: clamp(24px, 8vw, 32px); }
	.cq-brand__word { font-size: 16px; }
	.cq-brand__mark { width: 28px; height: 28px; }
	.cq-util__menu { gap: 10px; }
	.cq-util__menu a { font-size: 9px; letter-spacing: .06em; }
	.cq-util__pill { padding: 5px 11px; font-size: 9.5px; }
	.qb-legal__h { font-size: 16px; }
}

/* ==================================================================
 * 7. Landscape on a phone
 *
 * Short and wide: a 78vh hero leaves no room for anything else, and a
 * full-height mobile menu cannot scroll to its own footer.
 * ================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
	.cq-hero,
	.cq-hero--home,
	.qb-hh { min-height: 0; }
	.cq-hero__in { padding-block: 64px 32px; }
	.cq-hero__cue { display: none; }
	.cq-mm__nav { max-height: none; }
	.cq-mm__head { padding-block: 12px; }
}

/* ==================================================================
 * 8. Print
 *
 * The legal pages are the ones people actually print.
 * ================================================================== */
@media print {
	.cq-head-wrap, .cq-mega, .cq-mega__scrim, .cq-mm, .cq-so,
	.cq-top, .cq-progress, .cq-ctab, .cq-ft__map { display: none !important; }
	body { background: #fff; color: #000; }
	.cq-sec, .cq-sec--dark, .cq-sec--void { background: #fff !important; padding-block: 12pt; }
	.cq-h2, .cq-display, .qb-legal__h, .cq-prose h2, .cq-prose h3 { color: #000 !important; }
	.cq-prose p, .qb-legal__t p, .cq-copy p { color: #222 !important; }
	.qb-legal__toc { display: none; }
	a { color: #000; text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}