/**
 * Mobile & accessibility fixes (mobile audit, Oct 2026).
 * Item numbers (M01...) refer to task/mobile-audit/mobile-todos.csv.
 * Breakpoints follow Divi: tablet <= 980px, phone <= 767px.
 */

/* ---------- All screen sizes ---------- */

/* M40 Skip link: hidden until focused */
.alx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #c32535;
	color: #fff !important;
	font-weight: 700;
	border-radius: 0 0 8px 0;
}
.alx-skip-link:focus {
	left: 0;
}

/* Visible keyboard focus on controls that were not focusable before */
.mobile_menu_bar:focus-visible,
.alx-submenu-toggle:focus-visible,
.select-selected:focus-visible,
.select-items div:focus-visible {
	outline: 3px solid #c32535;
	outline-offset: 2px;
}

/* M10 Gravity Forms (Orbital theme): brand red pill buttons instead of default blue.
   !important beats the per-form colour variables GF prints inline on the wrapper. */
.gform-theme--framework {
	--gf-color-primary: #c32535 !important;
	--gf-color-primary-rgb: 195, 37, 53 !important;
	--gf-color-primary-darker: #9e1d2a !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-ctrl-btn-bg-color-primary: #c32535 !important;
	--gf-ctrl-btn-bg-color-hover-primary: #9e1d2a !important;
	--gf-ctrl-btn-radius: 150px !important;
}
.gform-theme--framework .gform_footer .gform_button,
.gform-theme--framework .gform_page_footer .gform_button {
	background-color: #c32535 !important;
	color: #fff !important;
	padding: 14px 32px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 150px !important;
	min-height: 48px;
}

/* M11 reCAPTCHA (invisible): hide the floating badge; the notice is printed under the button */
.grecaptcha-badge {
	visibility: hidden !important;
}
.alx-recaptcha-note {
	flex-basis: 100%;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #63666a;
}
.alx-recaptcha-note a {
	color: inherit;
	text-decoration: underline;
}

/* M37 Footer body text: #9f9f9f on #f6f6f6 -> readable grey (tagged in mobile.js) */
.et-l--footer .alx-footer-muted,
.et-l--footer .alx-footer-muted a {
	color: #555 !important;
}

/* M26 PMO landing: before Slick starts, all stats slides stack and push the H1 down
   (slow LCP + layout jump). Show only the first slide until the slider is ready. */
.pmo-consulting__carousel:not(.slick-initialized) > *:not(:first-child) {
	display: none;
}

/* Mobile menu: collapsible sub-menus and Contact/Call at the top (M06) */
.et_mobile_menu.alx-mobile-menu li.alx-collapsible {
	position: relative;
}
.et_mobile_menu.alx-mobile-menu li.alx-collapsible > a {
	padding-right: 56px !important;
}
.et_mobile_menu.alx-mobile-menu li.alx-collapsible > ul.sub-menu {
	display: none !important;
}
.et_mobile_menu.alx-mobile-menu li.alx-collapsible.alx-open > ul.sub-menu {
	display: block !important;
}
.alx-submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 47px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #c32535;
}
.alx-submenu-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform .2s;
}
.alx-open > .alx-submenu-toggle::before {
	transform: translate(-50%, -30%) rotate(-135deg);
}
.et_mobile_menu.alx-mobile-menu li.alx-menu-cta {
	display: inline-block;
	width: calc(50% - 6px);
	margin: 0 0 12px;
	vertical-align: top;
}
.et_mobile_menu.alx-mobile-menu li.alx-menu-cta + li.alx-menu-cta {
	margin-left: 12px;
}
.et_mobile_menu.alx-mobile-menu li.alx-menu-cta > a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 8px 12px !important;
	border-radius: 150px;
	background: #c32535 !important;
	color: #fff !important;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}
.et_mobile_menu.alx-mobile-menu li.alx-menu-cta + li.alx-menu-cta > a {
	background: #181818 !important;
}

/* ---------- Tablet and phone (<= 980px) ---------- */
@media (max-width: 980px) {

	/* M16 Compact sticky header so the menu stays reachable on long pages */
	.et-l--header {
		position: sticky;
		top: 0;
		z-index: 9999;
		background-color: #fff;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
	}
	.et-l--header .et_pb_section--with-menu {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
	.et-l--header .et_pb_section--with-menu .et_pb_row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Open menu scrolls inside the screen instead of running off the bottom */
	.et-l--header .et_mobile_menu {
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* M39 Hamburger: 44x44 tap area (icon size unchanged) */
	.et-l--header .mobile_menu_bar {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* M36 Body copy no smaller than 16px on tablets and phones */
	#et-main-area .et_pb_text_inner p,
	#et-main-area .et_pb_text_inner li,
	#et-main-area .et_pb_blurb_description p,
	#et-main-area .et_pb_text_inner:not(:has(p, h1, h2, h3, h4, h5, h6, ul, ol, div)) {
		font-size: max(16px, 1em);
	}
	/* Body text that was enlarged to 16px but kept a cramped pixel line-height (tagged in mobile.js) */
	#et-main-area .alx-roomy {
		line-height: 1.6 !important;
	}

	/* Post thumbnail links wrap an image; make the link the size of the image */
	.post-thumbnail > a {
		display: block;
	}

	/* M09 Form fields at 16px stop iOS zooming in on focus */
	.gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
	.gform_wrapper select,
	.gform_wrapper textarea,
	input.dpcf-search-input {
		font-size: 16px !important;
	}

	/* M27 Contact pages: the hero photo's horizontal line ran through the intro text */
	.page-id-252514 #et-main-area .et_pb_section:first-child,
	.page-id-257795 #et-main-area .et_pb_section:first-child {
		background-image: linear-gradient(101deg, #181818 0%, #000 100%) !important;
	}

	/* M52 Insights hero text over the red diagonal graphic */
	.page-hero .et_pb_text_inner {
		text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
	}
}

/* ---------- Phone (<= 767px) ---------- */
@media (max-width: 767px) {

	/* M02 Homepage hero video row was 410px wide and caused sideways scrolling */
	.hero-animation-mobile {
		max-width: 100% !important;
	}
	.hero-animation-mobile video {
		max-width: 100%;
		height: auto;
	}

	/* M23 Service-page heroes: heading + CTA first, image after */
	.page-hero__row {
		display: flex !important;
		flex-direction: column;
	}
	.page-hero .page-hero__row .page-hero__col-left {
		order: 1 !important;
	}
	.page-hero .page-hero__row .page-hero__col-right {
		order: 2 !important;
		margin-top: 30px !important;
		margin-bottom: 0 !important;
	}
	.page-hero__col-right .et_pb_image {
		max-width: 260px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* M44 Mobile heading scale (max H1 32 / H2 28 / H3 22) is applied as a cap in mobile.js,
	   so headings designed smaller are never enlarged. */

	/* M45 Long centred paragraphs (6+ lines, tagged in mobile.js) read better left-aligned */
	#et-main-area .alx-long-centred {
		text-align: left !important;
	}

	/* M24 Decorative lines beside headings overlap wrapped text */
	.alx-title-line::after {
		display: none !important;
	}

	/* M42 Timeline icons and progress line crowd the narrow layout */
	.timeline__row::before,
	.timeline__progress-row {
		display: none !important;
	}

	/* M22 In-page anchor nav (.step-guide) is sticky on phones; as a stacked list it covered
	   up to 500px of the screen while scrolling. Make it one row of swipeable chips. */
	.step-guide {
		padding: 0 !important;
		margin-bottom: 0 !important;
	}
	.step-guide .secondary-nav__list,
	.step-guide .et_pb_text_inner:not(:has(nav, p)),
	.step-guide .et_pb_text_inner > p {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 8px;
		overflow-x: auto;
		padding: 8px 16px !important;
		margin: 0 !important;
		list-style: none !important;
		scrollbar-width: none;
		text-align: left !important;
	}
	.step-guide .secondary-nav__list::-webkit-scrollbar,
	.step-guide .et_pb_text_inner::-webkit-scrollbar,
	.step-guide .et_pb_text_inner > p::-webkit-scrollbar {
		display: none;
	}
	.step-guide .secondary-nav__list li {
		flex: 0 0 auto;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.step-guide .secondary-nav__list li::before {
		display: none !important;
	}
	.step-guide br {
		display: none;
	}
	.step-guide a.ps2id {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 16px !important;
		margin: 0 !important;
		border: 1px solid #d6d6d6;
		border-radius: 150px;
		background: #fff;
		font-size: 14px !important;
		white-space: nowrap;
	}

	/* M25 Slider dots and arrows: 44px tap targets.
	   Slick listens for clicks on the <li>, so enlarge that and keep the dot itself as designed. */
	.slick-dots li {
		min-width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.slick-arrow {
		width: 44px !important;
		height: 44px !important;
	}

	/* M41 M46 M48 Small text links: at least 44px tall to tap */
	.et_pb_blurb .et_pb_module_header a,
	.et_pb_text_inner a[href^="tel:"],
	.et_pb_text_inner a[href^="mailto:"],
	a.read-more,
	a.dpcf-read-more,
	.et-l--footer .et_pb_text_inner a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* M48 Insights cards: the whole card opens the post */
	article.dpcf-post-item {
		position: relative;
	}
	article.dpcf-post-item a.dpcf-read-more::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	/* M18 Testimonial slides grow with their text instead of clipping it */
	.testimonials__carousel .slick-track,
	.testimonials__carousel .slick-slide,
	.testimonials__carousel .testimonials__item {
		height: auto !important;
	}
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
	/* M02 Remove the 370px cap set in the hero video modules */
	.hero-animation-mobile {
		max-width: 100% !important;
	}
}