/* ==========================================================================
   SITE-WIDE RESPONSIVE SAFETY NET
   Loaded last, after main.css / redesign.css / robotics.css / group-menu.css
   / faqs.css / goc.css, which already carry the bulk of the theme's own
   breakpoints. This file only closes the small, generic gaps that any
   component could hit — a wide table, an unconstrained image, a fixed-width
   embed — rather than re-styling anything those files already own.
   ========================================================================== */

/* Justified body copy, on every screen size. Only <p> tags are targeted —
   single-line paragraphs (eyebrows, captions, button wrappers) are
   unaffected by justify since there's no wrapped line to distribute space
   across, so this only visibly changes actual multi-line paragraphs. */
p {
	text-align: justify;
	text-justify: inter-word;
}



img, svg, video, iframe, embed, object, canvas {
	max-width: 100%;
	height: auto;
}

/* Tables in editor content (the_content) don't get the app's own grid
   treatment, so give any that appear their own scroll rail instead of
   pushing the viewport wide. */
.prose table,
.entry-content table,
article table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Long unbroken strings (URLs, tracking codes, long SKUs) in body copy. */
.prose, .entry-content, article, .fq-a, .goc-card__p {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Code blocks scroll rather than overflow. */
pre, code { max-width: 100%; overflow-x: auto; }

/* Buttons and pill links wrap onto a second line instead of clipping. */
.btn, .button, a[class*="btn-"], a[class*="cta"] {
	white-space: normal;
	word-break: break-word;
}

/* Any container using a fixed pixel width falls back to 100% under it. */
@media (max-width: 480px) {
	.container { padding-left: 16px; padding-right: 16px; }
}

/* Form fields under 16px make iOS Safari zoom the whole page in the moment
   a field is focused, and it does not zoom back out — a well-known mobile
   form bug. This previously only lived in group-menu.css, which loads on
   pages using the group-navigation feature; every form on every page
   needs this, so it's repeated here (loaded last, so it still wins over
   any earlier stylesheet's smaller input font-size). */
@media (max-width: 900px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
		min-height: 46px;
	}

	textarea { min-height: 120px; }
}

/* The same applies to a handful of touch-target min-heights that were also
   only defined in the conditionally-loaded group-menu.css, for elements
   that appear on every page (the footer, breadcrumbs, contact details,
   any list of links) regardless of whether that feature is on. */
@media (max-width: 900px) {
	.site-footer li > a,
	.footer-col a,
	.footer-nav a,
	main li > a:only-child,
	.sitemap a,
	.rb-acc__list a,
	.rb-dir a,
	.crumbs a,
	.contact-list a,
	.contact-card a,
	li > a[href^="tel:"],
	li > a[href^="mailto:"],
	.showing_jobs a,
	a.rss_link {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/* Large desktop monitors: keep line length readable instead of stretching
   prose full-bleed on ultra-wide screens. */
@media (min-width: 1800px) {
	.prose--page, .prose--article, .container--narrow { max-width: 1120px; margin-left: auto; margin-right: auto; }
}

/* Several slider dot controls across the site are styled as thin visual
   bars/small circles (4–9px tall) — fine to look at, too small to reliably
   tap. This adds an invisible expanded hit area centred on each dot
   without touching its visible size, color or animation. */
.hero__dot,
.rb-dot,
.collab-slider__dot {
	position: relative;
}

.hero__dot::after,
.rb-dot::after,
.collab-slider__dot::after {
	content: "";
	position: absolute;
	inset: -16px -3px;
}

/* The client-logo carousel's dots (.rb-carousel__dot) get the same 32px
   touch-friendly treatment as group-menu.css already gives them — but
   group-menu.css only loads when the group-navigation feature is enabled,
   while this carousel itself is unconditional. Repeating the fix here
   (loaded on every page, after robotics.css) means the dots are always
   easy to tap regardless of that toggle. Harmless if group-menu.css is
   also present — the two rule sets match. */
.rb-carousel__dot {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border-radius: 50%;
}

.rb-carousel__dot::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rb-line, rgba(15, 23, 42, .18));
	transition: background-color .16s ease, transform .16s ease;
}

.rb-carousel__dot.is-active::before { background: var(--rb-ink-2, #475569); transform: scale(1.25); }
.rb-carousel__dots { gap: 0; flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
.rb-carousel__dots .rb-carousel__dot { flex: 0 0 32px; }

/* Native momentum scrolling for the carousel's touch-swipe track on older
   iOS Safari versions (modern browsers already do this by default). */
.rb-carousel__track { -webkit-overflow-scrolling: touch; }