/*!
 * VITA Lab - responsive & UI fixes
 * Loaded by the "VITA Mobile & Performance Fix" plugin and inlined into the
 * static mirror. Every rule below fixes a defect that was measured in the
 * browser (element rectangles, tap-target sizes, overflow); nothing here is
 * a cosmetic redesign of the theme.
 */

:root {
	--vita-gutter: 20px;
	--vita-tap: 44px;
}

/* --------------------------------------------------------------------------
   1. Page-level overflow hygiene
   The WPBakery grid uses -15px row gutters, and several theme blocks add
   negative margins on top of that, so the document is a few pixels wider than
   the viewport on every page. Contain it without breaking sticky/fixed items.
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
}

.body_wrap,
.page_wrap,
.page_content_wrap,
.top_panel {
	max-width: 100%;
}

img,
svg,
video,
iframe,
table {
	max-width: 100%;
}

/* .footer_socials_wrap carries margin-right:-6px from the theme, which pushed
   the footer 6px past the right edge on every page. */
.footer_socials_wrap.socials_wrap {
	margin-right: 0;
	max-width: 100%;
}

/* .menu_mobile_nav_area is width:390px + padding-right:20px in content-box
   mode, so the mobile drawer scrolled sideways. */
.menu_mobile,
.menu_mobile_inner,
.menu_mobile_nav_area,
.menu_mobile_nav_area * {
	box-sizing: border-box;
}

.menu_mobile_nav_area {
	max-width: 100%;
}

/* The theme measures the drawer's item heights on load and freezes the nav
   area at that pixel height (`max-height:169px`). Once the links get a proper
   44px tap height the last entry - CONTACT US - fell outside that box and was
   unreachable. Let the drawer size itself against the viewport instead. */
.menu_mobile .menu_mobile_nav_area {
	height: auto !important;
	max-height: calc(100vh - 190px) !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
	.menu_mobile .menu_mobile_nav_area {
		max-height: calc(100dvh - 190px) !important;
	}
}

/* --------------------------------------------------------------------------
   2. Language switcher (TR / EN)
   The switcher is raw HTML with an inline `position:fixed; right:10px;
   top:-5px; z-index:1000000`. On mobile its box (304..335 x 15..45) landed
   exactly on top of the hamburger button (306..328 x 21..59), so tapping the
   menu opened the other language instead of the navigation. On desktop the
   negative `top` clipped the pill against the viewport edge.

   vita-fixes.js moves the link into the header row and tags it
   .vita-lang-switch; the rules below style it there. The `html:not(...)`
   fallback keeps it clear of the burger if JS never runs.
   -------------------------------------------------------------------------- */
.vita-lang-switch {
	position: static !important;
	top: auto !important;
	right: auto !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: var(--vita-tap);
	min-height: 34px;
	margin: 0 6px 0 0 !important;
	padding: 6px 12px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	background: #fff;
	color: #111 !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}

.vita-lang-switch:hover,
.vita-lang-switch:focus-visible {
	background: #f3f4f6;
	border-color: #9ca3af !important;
}

/* The container the switcher is moved into also holds the desktop nav and the
   burger; both are block-level, so it has to become a row. */
.vita-lang-host.vita-lang-host {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

/* The now-empty raw-HTML row above the header collapsed to a stray gap. */
.top_panel .vita-lang-row-empty {
	display: none !important;
}

/* Fallback: JS disabled / not loaded. Keep the original fixed pill but move it
   out of the hamburger's hit area and back inside the viewport. */
html:not(.vita-lang-moved) .top_panel .wpb_raw_html a[href*="/tr"],
html:not(.vita-lang-moved) .top_panel .wpb_raw_html a[href*="/en"],
html:not(.vita-lang-moved) .top_panel .wpb_raw_html a {
	top: 14px !important;
	right: 76px !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   3. Header row
   -------------------------------------------------------------------------- */
/* WPBakery gives every row -15px side margins so that the columns' 15px
   padding cancels out against the container. Layout rows (header bar, page
   title bar, footer bar) are full-bleed, so there is no container to cancel
   against: they hang 15px past both edges at every breakpoint, which shifts
   the title and breadcrumbs off-centre on every inner page. */
.vc_row.sc_layouts_row,
.sc_layouts_row_fixed {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

.sc_layouts_row_fixed .sc_layouts_menu_mobile_button {
	min-width: var(--vita-tap);
	min-height: var(--vita-tap);
}

.sc_layouts_row_fixed .sc_layouts_menu_mobile_button .sc_layouts_item_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* The logo used to be an <a href="#"> that went nowhere; JS repoints it and
   this keeps the image crisp at its real display size. */
.sc_layouts_logo img.logo_image {
	display: block;
	height: auto;
}

/* --------------------------------------------------------------------------
   4. Hero slider (Slider Revolution 7)
   The headline layer was positioned at left:-10px, so "Where Policy / Meets
   Technology, / Experience, and Impact" was cut off by the left edge on
   mobile and sat flush against it on desktop. It also had no contrast
   treatment over bright photography.
   -------------------------------------------------------------------------- */
sr7-module sr7-txt {
	left: 0 !important;
	right: auto !important;
	max-width: 100% !important;
	padding-left: var(--vita-gutter) !important;
	padding-right: var(--vita-gutter) !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	/* Readability over bright photography. A shadow is used rather than an
	   overlay element: Slider Revolution keeps every slide in the DOM and
	   restacks them, so a ::after scrim on the slide ends up painting over
	   the headline instead of behind it. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 2px 18px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   4b. Slider navigation
   The hero auto-advances every 9 seconds, and the bullets are how a reader
   goes back to a slide they missed or skips ahead. Slider Revolution stores
   one x-offset for the bullet strip - `translate(377px, -160px)` - and reuses
   it at every breakpoint, so on a phone the strip is pushed past the right
   edge:

     390px viewport: bullets at x = 377 / 416 / 455  -> 2 and 3 off-screen
     360px viewport: all three off-screen

   A visitor on a 360px phone could not reach two thirds of the hero at all.
   Below 768px the strip is re-anchored to the middle of the slider.
   -------------------------------------------------------------------------- */

/* Pause/play toggle, added by vita-fixes.js because the hero auto-advances
   every 9 seconds with Slider Revolution's stop-on-hover switched off. The
   button is a transparent hit area; the visible disc is the inner <span>, so
   the theme's global button styling cannot colour in the whole target. */
.vita-slider-toggle,
.vita-slider-toggle:hover,
.vita-slider-toggle:focus {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 0 0 16px;
	padding: 0;
	width: 26px;
	height: 26px;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.vita-slider-toggle > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
	transition: background-color .15s ease;
}

.vita-slider-toggle:hover > span,
.vita-slider-toggle:focus-visible > span {
	background: rgba(255, 255, 255, .6);
}

/* Two bars while playing, a triangle once paused - drawn rather than pulled
   from an icon font, so it cannot go missing. */
.vita-slider-toggle > span::before {
	content: "";
	display: block;
	box-sizing: border-box;
}

.vita-slider-toggle[data-state="playing"] > span::before {
	width: 7px;
	height: 9px;
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
}

.vita-slider-toggle[data-state="paused"] > span::before {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #fff;
}

/* The dots are 8x8 at every size. This grows the hit area without moving
   anything: the pseudo-element is transparent and out of flow. */
sr7-module sr7-bullet {
	position: relative;
}

sr7-module sr7-bullet::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
	sr7-module sr7-bullets {
		inset: auto 0 12px 0 !important;
		transform: none !important;
		display: flex !important;
		width: 100% !important;
		height: var(--vita-tap) !important;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	sr7-module sr7-bullet {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: var(--vita-tap) !important;
		height: var(--vita-tap) !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: transparent !important;
	}

	/* The visible dot, drawn at a size that reads against photography. */
	sr7-module sr7-bullet::after {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .55);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
		transition: background-color .15s ease;
	}

	sr7-module sr7-bullet.selected::after,
	sr7-module sr7-bullet:hover::after {
		background: #fff;
	}

	sr7-module sr7-bullet::before {
		width: var(--vita-tap);
		height: var(--vita-tap);
	}

	/* In the centred row the toggle is a flex item like the dots.
	   `relative`, not `static`: the slider's own bullet strip draws an
	   absolutely positioned `.custom_extra.sr7-bullets:before` overlay across
	   its whole width, and a statically positioned button paints underneath
	   it - taps landed on the overlay and never reached the button. */
	.vita-slider-toggle,
	.vita-slider-toggle:hover,
	.vita-slider-toggle:focus {
		position: relative;
		z-index: 2;
		left: auto;
		top: auto;
		transform: none;
		margin: 0 0 0 2px;
		width: var(--vita-tap);
		height: var(--vita-tap);
	}
}

/* --------------------------------------------------------------------------
   5. Tap targets
   Measured before the fix: social icons 13x13, language pill 31x30,
   breadcrumb links 45x19, "Learn more" 83x20, footer credit 63x15.
   WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable iOS/Android size.
   -------------------------------------------------------------------------- */
/* `width` is stated explicitly: as a bare flex container this box resolved to
   15px at >=768px and wrapped every icon onto its own line, hanging them past
   the right edge. */
.footer_socials_inner {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.footer_socials_inner .social_item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--vita-tap);
	min-height: var(--vita-tap);
	margin: 0;
}

.menu_mobile_nav_area li > a {
	display: flex;
	align-items: center;
	min-height: var(--vita-tap);
}

/* The submenu chevron is `position:absolute; top:0` inside the link. Once the
   link grew to 44px it stuck to the top of the row instead of lining up with
   the label, and its own box was only 18x18. */
.menu_mobile .open_child_menu {
	top: 50% !important;
	transform: translateY(-50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	border-radius: 4px;
}

/* Card and section titles are links 18-23px tall. Vertical padding on an
   inline element grows the hit area without moving anything on the page. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.sc_services_item_title a {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Icon-only header link: 17x24 before, no text to widen it. */
.sc_layouts_item_link {
	padding: 8px 12px;
}

/* --------------------------------------------------------------------------
   6. Focus visibility
   The theme removes outlines on several interactive elements.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #12b886;
	outline-offset: 2px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   7. Mobile (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body,
	html {
		max-width: 100vw;
	}

	/* The header row inherits the -15px WPBakery gutters, which shifted the
	   whole bar left and cost 15px of room on the right. */
	.sc_layouts_row_fixed {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)) !important;
		overflow: visible !important;
	}

	.sc_layouts_row_fixed > .wpb_column {
		width: auto !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		padding: 0 !important;
		float: none !important;
	}

	.sc_layouts_logo {
		display: inline-block !important;
		text-align: left !important;
	}

	.sc_layouts_logo img.logo_image {
		width: auto !important;
		height: 35px !important;
		max-width: 100% !important;
		margin-bottom: 0 !important;
	}

	/* Tagline does not fit next to the logo on a phone. */
	.sc_layouts_iconed_text_line1 {
		display: none !important;
	}

	.sc_layouts_column_align_right .vc_column-inner .wpb_wrapper .sc_layouts_item {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 4px;
	}

	.sc_layouts_menu_mobile_button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: var(--vita-tap) !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.sc_layouts_menu_mobile_button .sc_layouts_item_icon {
		font-size: 24px !important;
	}

	/* Page-title rows carry -15px margins; on a phone that is visible as a
	   sideways shift of the breadcrumb bar. */
	.page_content_wrap > .content_wrap > .vc_row.vc_row-fluid,
	.top_panel .vc_row.vc_row-fluid {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Text-style links used as buttons were 20px tall. */
	.sc_button.sc_button_simple,
	.breadcrumbs .breadcrumbs_item,
	.footer_copyright_inner a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	.footer_socials_inner {
		gap: 8px;
	}

	/* The mobile drawer's logo is the same 1022x500 asset as the header.
	   Constrain height only, so the 2.04:1 aspect ratio is preserved. */
	.menu_mobile .sc_layouts_logo img {
		width: auto;
		height: auto;
		max-height: 40px;
	}
}

/* --------------------------------------------------------------------------
   8. Small phones (<= 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
	:root {
		--vita-gutter: 16px;
	}

	.sc_layouts_logo img.logo_image {
		height: 30px !important;
	}

	.vita-lang-switch {
		min-width: 38px;
		padding: 6px 8px !important;
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   9. Tablet (768px - 1023px)
   The hamburger is still in use here, so the header needs the same
   single-row treatment without the mobile type scale.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.sc_layouts_row_fixed {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 10px 24px !important;
	}

	.sc_layouts_row_fixed > .wpb_column {
		width: auto !important;
		flex: 0 1 auto !important;
		padding: 0 !important;
	}

	.sc_layouts_logo img.logo_image {
		height: 48px !important;
		width: auto !important;
	}
}

/* --------------------------------------------------------------------------
   10. Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.vita-lang-switch {
		margin-left: 18px !important;
		margin-right: 0 !important;
	}

	.sc_layouts_row_fixed .sc_layouts_column_align_right .wpb_wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

/* --------------------------------------------------------------------------
   11. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}