/*
 * Site-wide layout fixes found by the 2026-10-09 three-width scan (docs/layout_scan.py).
 *
 * Enqueued on every page by docs/nav-first-paint-block.php with a "bv-" id, so AirLift never
 * delays it: these rules exist precisely to stop content from poking out of a phone screen on
 * first paint. Keep it small; everything here is a correction, not a design.
 */

/* 1. Content tables wider than a phone scroll inside themselves instead of scrolling the page.
 *    display:block on the table keeps thead/tbody as a real table inside an auto-width box, so
 *    the columns keep their natural widths and the box scrolls. 35 pages (glossary + one post). */
@media (max-width: 760px) {
	.elementor-widget-text-editor table,
	.elementor-widget-theme-post-content table,
	.entry-content table,
	.terminology-content table,
	.library-content table,
	.science-content table,
	.pp-content table,
	table.spec-table,
	article table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 2. Embedded videos keep their 16:9 shape at any width (two posts carried a 560x315 YouTube
 *    frame that ran 600px past a phone screen). The lazy-load class is AirLift's. */
.elementor-widget-container iframe[src*="youtu"],
.elementor-widget-container iframe[data-src*="youtu"],
.elementor-widget-container iframe.bv-lazyload-iframe,
.entry-content iframe[src*="youtu"] {
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* 3. Captioned images inside an Elementor text editor inherited max-width: 640% from a
 *    stale rule and overflowed phones by up to 426px. */
.elementor-widget-text-editor .wp-caption img,
.elementor-widget-text-editor figure img,
.elementor-widget-theme-post-content figure img {
	max-width: 100% !important;
	height: auto;
}

/* 4. JetEngine sliders pull their slide track 8px past each edge for the gutter; the parent
 *    must clip it or every width gets an 8px sideways scroll (/case-studies-clients/,
 *    /solutions/plastics-laser-marking/laser-marking-nylon/). clip, not hidden: no new
 *    scroll container, so drag-to-slide is unaffected. */
.jet-listing-grid__slider,
.jet-listing-grid__slider .slick-list {
	overflow-x: clip;
}

/* 5. Elementor nested tabs on phones: until AirLift restores the delayed widget stylesheet the
 *    tab buttons are content-width and the longest runs 140px off screen. These two lines are
 *    what the delayed stylesheet settles on, applied from first paint. */
@media (max-width: 767px) {
	.e-n-tabs-heading { flex-wrap: wrap; }
	.e-n-tab-title { max-width: 100%; }
	.e-n-tab-title-text { white-space: normal; }
}

/* 6. The five industry-application pages (aerospace, automotive, electronics, industrial, medical)
 *    pin a dark info bar to the bottom of the screen. Its paragraph wraps to eight lines on a phone
 *    and the bar covers a third of the screen until dismissed; keep the title and the close button. */
@media (max-width: 760px) {
	#sticky-info-modal { padding: 10px 14px; }
	#sticky-info-modal h2 { font-size: 1rem; line-height: 1.3; }
	#sticky-info-modal p { display: none; }
}

/* 7. Titles made of one long word ("Ingenieurdienstleistungen", "Kunststoffverarbeitung", a
 *    parenthesised SNOWLEOPARD® in Japanese) cannot break on a phone and pushed the German and
 *    Japanese pages 70-140px wider than the screen. Hyphenate where the language allows it,
 *    otherwise break the word; neither rule changes a heading that already fits. */
@media (max-width: 760px) {
	h1, h2, h3, .entry-title { overflow-wrap: anywhere; }
	html[lang^="de"] h1, html[lang^="de"] h2, html[lang^="de"] h3,
	html[lang^="pl"] h1, html[lang^="pl"] h2, html[lang^="pl"] h3,
	html[lang^="tr"] h1, html[lang^="tr"] h2, html[lang^="tr"] h3 { hyphens: auto; }
}

/* 8. /about/ mission quote: the decorative Font Awesome quote marks (Customizer CSS, #mission::before
 *    / ::after) hang 40px outside the box on both sides. On a phone the right one pokes 6px past the
 *    screen and the page scrolls sideways. Keep them, tuck them to the box edges. */
@media (max-width: 760px) {
	#mission::before { left: -6px !important; }
	#mission::after { right: -6px !important; }
}

/* 9. An Elementor image widget whose "Width" control was set above 100% (one library post carries
 *    max-width: 640%) runs 266px past a phone screen. Images never exceed their column on phones. */
@media (max-width: 760px) {
	.elementor-widget-image img,
	.elementor-widget-image .elementor-widget-container { max-width: 100% !important; width: auto; height: auto; }
}