/* ==========================================================================
   Datafort — mobile chrome fixes
   ImmersLand child theme · assets/mobile-fixes/css/mobile-fixes.css

   Loaded site-wide (see inc/mobile-fixes.php) but every rule is either inside
   a max-width media query or namespaced to the Mobile Menu plugin's own
   classes, so nothing above 1024px changes except the header-logo
   de-duplication, which only ever applied below 1024px anyway.

   No bare element selectors. No Divi global overrides.
   ========================================================================== */


/* ==========================================================================
   1. Doubled "DATAFORT DATAFORT" logo in the mobile header bar
   ==========================================================================
   The Mobile Menu plugin's generated stylesheet (dynamic-mobmenu.css) ships
   three rules that disagree with each other:

     @media (max-width:1024px) { .mob-standard-logo { display:inline-block } }
     @media (min-resolution:192dpi) { .mob-standard-logo { display:none !important } }
     .mob-menu-logo-holder .mob-retina-logo { display:inline-block }   <- no media query

   On a 2x screen the retina query matches, the standard copy is hidden, and
   one logo renders. On a 1x screen the retina query never matches, so the
   unconditional third rule keeps the retina copy visible *and* the 1024px
   rule shows the standard copy next to it — two wordmarks side by side.

   That is why this reproduces on a Windows laptop or a 1x Android tablet at
   tablet width but not on an iPhone. It is resolution-driven, not width-
   driven.

   Both <img> elements point at the same file, DATAFORT-blue.logo_.svg, and
   an SVG needs no 2x variant, so the retina copy has no job at all.
   -------------------------------------------------------------------------- */

.mob-menu-logo-holder .mob-retina-logo {
	display: none !important;
}

.mob-menu-logo-holder .mob-standard-logo {
	display: inline-block !important;
	position: static !important;
	top: auto !important;
	height: 20px !important;
	width: auto !important;
	max-width: calc(100vw - 140px); /* never collide with the two 44px buttons */
}

/* The holder was 60px tall starting at y=15, so it hung 15px below a 60px
   bar. Centre it properly instead. */
.mob-menu-header-holder .mob-menu-logo-holder {
	top: 0 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.mob-menu-header-holder .mob-menu-logo-holder .headertext {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}

/* mobile-fixes.js wraps the logo in a link to the home page. */
.mob-menu-logo-holder .mobfix-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}


/* ==========================================================================
   2. Tap targets in the header bar
   ==========================================================================
   The phone button and the hamburger were under 44x44. The close button
   inside the open panel was 42x30 and sat flush at y=0, which puts it under
   the status bar / notch on an iPhone.
   -------------------------------------------------------------------------- */

.mob-menu-header-holder .mobmenul-container > a,
.mob-menu-header-holder .mobmenur-container > a {
	min-width: 44px;
	min-height: 44px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.mobmenu-panel .mobmenu-left-bt,
.mobmenu-panel .mobmenu-right-bt {
	min-width: 44px;
	min-height: 44px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	top: calc(env(safe-area-inset-top, 0px) + 4px) !important;
	right: 4px !important;
}

.mobmenu-panel .mobmenu-left-bt {
	right: auto !important;
	left: 4px !important;
}


/* ==========================================================================
   3. The slide-out panel
   ========================================================================== */

@media only screen and (max-width: 767px) {

	/* 270px fixed left third-level items only 162px wide, which is why
	   "AI Development" wrapped onto two lines. Keep the tap-to-close peek
	   of the page, but give the menu room to breathe. */
	.mobmenu-panel.mobmenu-right-panel,
	.mobmenu-panel.mobmenu-left-panel {
		width: 86vw !important;
		max-width: 320px !important;
	}
}

/* Clear the home-indicator strip so the last menu item stays reachable. */
.mobmenu-panel .mobmenu-content {
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}


/* ==========================================================================
   4. Menu rows and submenus
   ==========================================================================
   dynamic-mobmenu.css applies

       .mobmenu-right-panel li { padding-left:10%; padding-right:10% }

   to *every* li, so the indent compounds at each level: the second level
   rendered as a dark #3a3a3a block floating inside the white panel with a
   gap on both sides, and the third level was narrower still.

   Zero the li padding so every row is full-bleed (and the whole row is
   tappable), then do the indenting on the <a> instead.
   -------------------------------------------------------------------------- */

.mobmenu-panel .mobmenu-content li {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.mobmenu-panel .wp-mobile-menu li > a {
	min-height: 48px;
	display: flex !important;
	align-items: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.mobmenu-panel .mobmenu-content .wp-mobile-menu > li > a {
	padding-left: 20px !important;
	padding-right: 8px !important;
}

/* Level 2 */
.mobmenu-panel .wp-mobile-menu ul.sub-menu {
	width: 100% !important;
	margin: 0 !important;
	background-color: #eef1f5 !important;
}

.mobmenu-panel .mobmenu-content .wp-mobile-menu ul.sub-menu > li > a {
	color: #243a5e !important;      /* 9.4:1 on #eef1f5 */
	padding-left: 38px !important;
	padding-right: 8px !important;
	font-size: 15px !important;
}

/* Level 3 */
.mobmenu-panel .wp-mobile-menu ul.sub-menu ul.sub-menu {
	background-color: #e3e8ef !important;
}

.mobmenu-panel .mobmenu-content .wp-mobile-menu ul.sub-menu ul.sub-menu > li > a {
	padding-left: 56px !important;
}

/* The plugin draws rgba(0,0,0,.83) hairlines between every item, which reads
   as heavy black rules once the nested levels are tinted. */
.mobmenu-panel .wp-mobile-menu ul.sub-menu li {
	border-bottom-color: rgba(36, 58, 94, 0.14) !important;
}

/* Mark the current page — there was no indication of where you are. */
.mobmenu-panel .wp-mobile-menu li.current-menu-item > a,
.mobmenu-panel .wp-mobile-menu li.current_page_item > a {
	box-shadow: inset 3px 0 0 #0e2586;
	font-weight: 600;
}

/* Expand/collapse chevron: was a 35x26 target floated mid-row. Right-align
   it in the flex row and give it 56x48. */
.mobmenu-panel .mobmenu-content li > a .mob-expand-submenu {
	width: 56px !important;
	height: 48px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin-left: auto !important;
	float: none !important;
	position: static !important;
}

.mobmenu-panel .mob-expand-submenu i {
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
}

/* The panel had no visible keyboard focus state at all. */
.mobmenu-panel a:focus-visible,
.mob-menu-header-holder a:focus-visible {
	outline: 3px solid #2ea3f2;
	outline-offset: -3px;
}


/* ==========================================================================
   5. Hero slider — content was being cut off
   ==========================================================================
   The slider module carries a hard height from its Divi settings:

       .et_pb_slider { height:601px; max-height:601px; overflow:hidden }

   Slide copy needs 642-849px at phone width and 663-753px at 1280px, so the
   bottom of every slide was clipped — on the homepage the third slide ended
   mid-sentence at "...flawlessly aligned with" and ran straight into
   "Serving UK business since 2000".

   Release the height below 1024px so the slider sizes to its slide.

   NOTE: this clipping also happens at desktop widths. The right fix there is
   to clear the fixed Height on the Slider module in the Divi Builder rather
   than to force it in CSS — see README-MOBILE-FIXES.md.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

	.et_pb_slider,
	.et_pb_slider .et_pb_slides,
	.et_pb_slider .et_pb_slide,
	.et_pb_slider .et_pb_slide .et_pb_container {
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	.et_pb_slider {
		overflow: visible !important;
	}
}

@media only screen and (max-width: 767px) {

	/* The prev/next arrows are absolutely positioned at the vertical centre
	   with left:0 / right:0. On a phone the slide description is full width,
	   so the two 48px glyphs land on top of the headline — at 320px they sit
	   directly on the letters of "applications in".
	   Divi sliders respond to touch swipe, and the dots below are now a
	   usable size, so the arrows are redundant here. */
	.et_pb_slider .et-pb-slider-arrows {
		display: none !important;
	}

	.et_pb_slider .et_pb_slide_description {
		padding-top: 40px !important;
		padding-bottom: 76px !important; /* room for the dots */
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Dots were 7x7 — under the 24px minimum in WCAG 2.5.8. Keep the dot
	   small but give it a 24px hit area, and outline the inactive ones so
	   they are visible against a light slide. */
	.et_pb_slider .et-pb-controllers {
		height: auto !important;
		bottom: 26px !important;
		line-height: 0 !important;
	}

	.et_pb_slider .et-pb-controllers a {
		width: 24px !important;
		height: 24px !important;
		margin: 0 2px !important;
		border-radius: 50% !important;
		background-color: transparent !important;
		position: relative;
	}

	.et_pb_slider .et-pb-controllers a::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10px;
		height: 10px;
		margin: -5px 0 0 -5px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.45);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
	}

	.et_pb_slider .et-pb-controllers a.et-pb-active-control::after {
		background-color: #ffffff;
	}
}


/* ==========================================================================
   6. Forms — stop iOS Safari zooming the page on focus
   ==========================================================================
   Safari zooms the viewport whenever a focused control is under 16px. The
   contact form's fields are 15px, so every tap into a field zoomed the page
   and left the user pinching back out.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 782px) {

	.gform_wrapper input[type="text"],
	.gform_wrapper input[type="email"],
	.gform_wrapper input[type="tel"],
	.gform_wrapper input[type="url"],
	.gform_wrapper input[type="number"],
	.gform_wrapper input[type="password"],
	.gform_wrapper input[type="search"],
	.gform_wrapper textarea,
	.gform_wrapper select,
	.et_pb_contact_form input,
	.et_pb_contact_form textarea,
	#main-content input[type="text"],
	#main-content input[type="email"],
	#main-content input[type="tel"],
	#main-content textarea,
	#main-content select {
		font-size: 16px !important;
	}

	.gform_wrapper .gform_footer input[type="submit"],
	.gform_wrapper .gform_footer button {
		min-height: 48px;
	}
}


/* ==========================================================================
   7. Contact-page map
   ==========================================================================
   A 450px Google Maps iframe on a 375px screen swallows vertical swipes —
   you try to scroll the page and you pan the map instead. mobile-fixes.js
   wraps it and blocks pointer events until it is tapped; this is the visual
   half.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.mobfix-map-shell {
		position: relative;
	}

	.mobfix-map-shell iframe {
		height: 260px !important;
		min-height: 0 !important;
	}

	.mobfix-map-shell.is-locked::after {
		content: "Tap the map to interact";
		position: absolute;
		left: 50%;
		bottom: 12px;
		transform: translateX(-50%);
		padding: 6px 14px;
		border-radius: 999px;
		background: rgba(14, 37, 134, 0.88);
		color: #ffffff;
		font-size: 13px;
		line-height: 1.3;
		white-space: nowrap;
		pointer-events: none;
	}
}