/*
 * Synaesis responsive layout. Loaded by synaesis-responsive.php after the Customizer "Additional CSS".
 * 1. content width and side gutters  2. desktop header  3. sticky header  4. mobile and tablet
 */

/* 1. Content width and side gutters ------------------------------------ */
:root { --syn-gutter: 40px; --syn-max: 1300px; }
@media (max-width: 1024px) { :root { --syn-gutter: 32px; } }
@media (max-width: 680px)  { :root { --syn-gutter: 20px; } }

html body .qodef-content-grid {
	width: min(var(--syn-max), 100% - 2 * var(--syn-gutter)) !important;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}
/* A grid nested in a grid must not shrink twice. */
html body .qodef-content-grid .qodef-content-grid { width: 100% !important; }

/* Elementor sections stretched to the viewport keep their full-width background;
   their boxed content gets the same gutter (its own max-width still applies). */
html body .elementor-section.elementor-section-stretched > .elementor-container {
	width: calc(100% - 2 * var(--syn-gutter));
	margin-left: auto;
	margin-right: auto;
}

/* 2. Desktop header: logo left, five links right ------------------------ */
@media (min-width: 1025px) {
	#qodef-page-header #qodef-page-header-inner { justify-content: flex-start; padding-left: 0; padding-right: 0; }
	/* Same logo size on every template: posts and archives use the theme's "height not set" variant, which shrinks the image to 16px. */
	#qodef-page-header .qodef-header-logo-link { display: flex !important; align-items: center; margin: 0; height: 46px !important; padding: 0; flex: 0 0 auto; }
	#qodef-page-header .qodef-header-logo-link img { width: auto !important; height: 100% !important; max-height: 100% !important; }
	#qodef-page-header .qodef-widget-holder { display: none !important; }
	#qodef-page-header .qodef-header-navigation { margin: 0 0 0 auto !important; flex: 0 1 auto; }
	#qodef-page-header .qodef-header-navigation > ul > li.menu-item-1277,
	#qodef-page-header .qodef-header-navigation > ul > li.menu-item-1251,
	#qodef-page-header .qodef-header-navigation > ul > li.menu-item-1842 { display: block !important; }
	#qodef-page-header .qodef-header-navigation > ul > li { margin: 0 0 0 clamp(20px, 3.2vw, 56px) !important; }
	#qodef-page-header .qodef-header-navigation > ul > li:first-child { margin-left: 0 !important; }
	#qodef-page-header .qodef-header-navigation > ul > li > a { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	#qodef-page-header .qodef-header-navigation > ul > li > a > .qodef-menu-item-text { font-size: 16px; }
}

/* 3. Sticky header (desktop and mobile) -------------------------------- */
/* The theme wrapper clips with overflow:hidden, which turns it into the sticky container. "clip" clips the same way without that side effect. */
#qodef-page-wrapper { overflow-x: clip; overflow-y: visible; }
#qodef-page-header,
#qodef-page-mobile-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #fff;
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}
body.admin-bar #qodef-page-header,
body.admin-bar #qodef-page-mobile-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar #qodef-page-mobile-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar #qodef-page-mobile-header { top: 0; } }

/* 4. Components ---------------------------------------------------------- */
/* Homepage services carousel: the arrows sit 80px outside the track, which is off screen below ~1480px. Pull them onto the track edge. */
@media (max-width: 1480px) {
	.carousel-wrapper #prevBtn { left: -24px; }
	.carousel-wrapper #nextBtn { right: -24px; }
}
@media (max-width: 680px) {
	.carousel-wrapper #prevBtn { left: -14px; }
	.carousel-wrapper #nextBtn { right: -14px; }
	.carousel-wrapper .carousel-arrow { width: 40px; height: 40px; font-size: 20px; }
}
/* Contact form: first and last name share a row down to 45% each; on phones give each field the full row. */
@media (max-width: 680px) {
	.wpcf7-form div[style*="flex-wrap"] > div { min-width: 100% !important; }
}
/* Mobile menu: Careers was hidden by the Customizer CSS on every screen size. */
#qodef-page-mobile-header .qodef-mobile-header-navigation > ul > li.menu-item-1842 { display: block !important; }

/* 5. Tablet and small laptop --------------------------------------------- */
/* Mobile header (shown up to 1024px): same logo size and the same side gutter as the content on every template. */
@media (max-width: 1024px) {
	#qodef-page-mobile-header .qodef-mobile-header-logo-link.qodef-height--not-set img { max-height: 100% !important; }
	#qodef-page-mobile-header #qodef-page-mobile-header-inner:not(.qodef-content-grid) { padding-left: var(--syn-gutter); padding-right: var(--syn-gutter); }
}
/* Homepage hero: the two buttons sit in 38%/62% columns, so they collide once the text column gets narrow. Lay them out by their own width. */
@media (min-width: 768px) and (max-width: 1440px) {
	.elementor-element-d8f4ff4 > .elementor-container { flex-wrap: wrap; gap: 12px 16px; }
	.elementor-element-d8f4ff4 > .elementor-container > .elementor-column { width: auto !important; }
	.elementor-element-d8f4ff4 .elementor-button { white-space: nowrap; }
}
/* Homepage hero: a full-bleed split (black text column, image column) on a black-to-white gradient. Insetting
   its container shows the gradient's white beside the image on the right (and on phones beside the black
   column), so this one keeps its original full-width container at every size. Its columns already pad the
   text (100px on desktop, 20px on phones). */
html body .elementor-element-f453993.elementor-section-stretched > .elementor-container { width: 100%; }
/* Above 1600px the hero container keeps its 1600px maximum, so a strip of the section's pure white showed to the right
   of the image's warm off-white. Paint the right half in the image's right-edge colours instead (sampled: #fdf6f3 down
   to about three quarters, then the grey of its reflection, #e7e8e3), so the image reads as running to the edge.
   The left half stays black. Below 1600px the image already reaches the edge; there the section stays as it was. */
@media (min-width: 1601px) {
	html body .elementor-element-f453993.elementor-section-stretched {
		background-image: linear-gradient(90deg, #000 50%, transparent 50%), linear-gradient(180deg, #fdf6f3 0%, #fdf6f3 72%, #e7e8e3 90%, #e7e8e3 100%) !important;
	}
}
/* Homepage hero: 230px/100px padding leaves a 150px text column on tablets. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-f453993 .elementor-element-4573348 > .elementor-element-populated { padding: 120px 48px !important; }
}
@media (min-width: 768px) and (max-width: 880px) {
	.elementor-element-f453993 .elementor-element-4573348 > .elementor-element-populated { padding: 90px 32px !important; }
}

/* 6. Phones: readable hero titles and touch targets ------------------------ */
@media (max-width: 767px) {
	/* Hero titles were 40-48px, about 2 words per line over 4-7 lines. 32px is the size the legal pages
	   already use. One widget per hero: home, the 10 service pages, Who We Are / Global Offices / Insights,
	   Our People, Our Services, Contact Us, and the post title of the single-post template (all articles). */
	.elementor-element-f84692c .elementor-heading-title,
	.elementor-element-b4bea4c .elementor-heading-title,
	.elementor-element-d87ff48 .elementor-heading-title,
	.elementor-element-6a69eb5 .elementor-heading-title,
	.elementor-element-43ebbe3 .elementor-heading-title,
	.elementor-element-0f0a9d0 .elementor-heading-title,
	.elementor-element-2b1fab8 .post-title { font-size: 32px !important; line-height: 1.2 !important; }

	/* Footer links were 16-26px tall: give each a 44px touch target. Text and icons keep their size. */
	#qodef-page-footer a.footer-link,
	#qodef-page-footer a.footer-bottom-link,
	#qodef-page-footer a.qodef-custom-underline { display: inline-flex; align-items: center; min-height: 44px; }
	#qodef-page-footer a.footericon-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

	/* Our People intro was the only body text under 16px. */
	.elementor-element-506fd77 p { font-size: 16px; }

	/* Homepage hero buttons stack on phones with no space between them (they touched). 12px, above the 8px
	   minimum between touch targets. */
	.elementor-element-d8f4ff4 > .elementor-container { row-gap: 12px; }
	/* Same buttons, same style, now one width: each was as wide as its own label (175 / 188px), so the stack looked
	   ragged. Full column width, label centred, as stacked call-to-action buttons usually are on phones. */
	.elementor-element-d8f4ff4 .elementor-widget { width: 100% !important; max-width: 100% !important; }
	/* The second button's widget has a 10px left margin (its spacing when the buttons sit side by side); stacked, it
	   pushed "Explore Services" 10px to the right of "Say Hello!". */
	.elementor-element-d8f4ff4 .elementor-widget > .elementor-widget-container { margin-left: 0 !important; margin-right: 0 !important; }
	.elementor-element-d8f4ff4 .elementor-button { display: flex; justify-content: center; width: 100%; }
}