/* =========================================================================
 * The orange "Testimonials" pill - on every page that carries the block
 *
 * Elementor's core stylesheet gives every container a full-width box:
 *
 *     .e-con { --margin-left:auto; --margin-right:auto;
 *              max-width: min(100%, var(--width)) }
 *
 * so the pill stretched the whole width of its card. The design has it sized
 * to the word inside, which is how production used to render: the generated
 * CSS there still carried "width: fit-content" on this element, but that
 * declaration no longer exists anywhere in the database, so it was lost the
 * moment Elementor regenerated its CSS.
 *
 * The block is duplicated on twelve pages and every copy has its own hashed
 * class - .e-6d46a3e6-2a0b781 on Home, .e-7c25c1b7-7771ccd on Contact Us and
 * so on - so the pill is matched by its position instead. The markup is
 * identical everywhere:
 *
 *     .testimonials-bg > div.e-div-block-base > div.e-div-block-base > heading
 *                                               ^ the pill
 *
 * Matching on position rather than with :has() keeps the rule working in
 * browsers with no relational selector, and it survives Elementor
 * regenerating those hashes - which is what dropped the original declaration.
 *
 * The parent is display:flex with justify-content:center, so sizing the pill
 * to its content is enough to leave it centred.
 * ====================================================================== */
.elementor .testimonials-bg > .e-div-block-base > .e-div-block-base:first-child {
	width: fit-content;
	max-width: 100%;
}

/* =========================================================================
 * FOOTER - the ICG / ICS logo on phones
 *
 * One image holds both marks (icg_ics_logos.jpg, 1445x504). On desktop it is
 * capped by .DUP_nav-brand { width: 194px }, but Elementor's own mobile rule
 * overrides that with a full-width one:
 *
 *     @media (max-width:767px) { .elementor .e-8dbb41d-295555f { width:100% } }
 *
 * which rendered it 356px wide on a 440px screen - 81% of the viewport.
 * Capping it at the same 194px the desktop uses keeps the artwork at its
 * intended size, while width:100% still lets it shrink on narrower phones.
 * ====================================================================== */
@media (max-width: 767px) {

	.elementor .e-8dbb41d-295555f {
		width: 100%;
		max-width: 194px;
		height: auto;
		margin-inline: auto;
	}

	/* The rest of the mobile footer is centred, so the logo block matches it */
	.elementor .e-9be4973-7080ebf,
	.elementor .e-090bb98 {
		text-align: center;
		align-items: center;
	}
}

/* =========================================================================
 * HEADER - menu toggle on the right on phones
 *
 * The header row holds three blocks: logo, menu, then the Connect pill. On a
 * phone the pill itself is display:none, but its wrapper keeps its width, so
 * it still occupied 263px of a 424px row - empty space sitting between the
 * toggle and the right edge, which left the toggle pinned beside the logo.
 *
 * Collapsing that empty wrapper and pushing the menu block to the end of the
 * row puts the toggle where it belongs.
 *
 * Six header templates are in use across the site (433 on Home, 1537 on What
 * We Do, 1089 on News and so on) and each one hashes its own class names, so
 * naming them would fix one group of pages and leave the rest - which is what
 * the first version of this rule did. Inside .elementor-location-header the
 * only ".e-flexbox-base > .e-flexbox-base" matches are those three blocks, in
 * that order, on every template, so position identifies them everywhere.
 * ====================================================================== */
@media (max-width: 767px) {

	/* Third block, the Connect pill wrapper, down to its own content. Ten of
	   the templates hide the pill but keep the wrapper at width:100%, so this
	   collapses it to nothing and the menu block takes the row's full width.
	   On News and Projects the pill is still shown, and there it just sizes to
	   the pill. The logo block is deliberately left alone - releasing its width
	   lets the artwork grow to its natural size and overflow the row. */
	.elementor-location-header .e-flexbox-base > .e-flexbox-base:last-child {
		width: auto;
		flex: 0 0 auto;
	}

	/* Second block holds the toggle. Sending it to the end of the row is what
	   matters on News and Projects, where all three blocks are a third of the
	   row each and the pill would otherwise sit to the right of the toggle.
	   Elementor already gives the toggle margin-inline-start:auto inside this
	   block, so once the block reaches the right edge, so does the toggle. */
	.elementor-location-header .e-flexbox-base > .e-flexbox-base:nth-child(2) {
		order: 9;
		margin-inline-start: auto;
	}
}
/* =========================================================================
 * FOOTER - the Call Us / Email Us card
 *
 * The card is authored as width:fit-content. Resolving that through four
 * nested flex levels, each carrying Elementor's own .e-div-block-base
 * min-width:30px, produced a card narrower than its own contents: the card
 * came out 381px while the email chip needs 196px inside a 164px column, so
 * the chip spilled past the card's right edge.
 *
 * A stated width removes the guesswork. The row then fills the card and the
 * two columns split it evenly, which leaves each chip room for its text.
 * ====================================================================== */
.elementor .contact-box-ft {
	box-sizing: border-box;
	width: min(480px, 100%);
	height: auto;
	min-height: 112px;
	padding: 16px 24px;
	justify-content: center;
}

/*
 * e-9e1ab93-bd53f59 = the card's wrapper. It must not shrink: the card's width
 * resolves against the space this offers.
 */
.elementor .e-9e1ab93-bd53f59 {
	flex: 0 0 auto;
	align-items: center;
}

/* e-123b1a4-f48d7fa = the Call Us / Email Us columns */
.elementor .e-123b1a4-f48d7fa {
	width: 100%;
	flex-wrap: nowrap;
	gap: 32px;
	justify-content: center;
	align-items: stretch;
}

.elementor .e-123b1a4-f48d7fa > * {
	flex: 1 1 0;
	min-width: 0;
}

/* The blue chips sit inside their own column and wrap rather than spilling */
.elementor .box-ft {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 8px;
	padding-block: 10px;
	text-align: center;
}

.elementor .box-ft .footer {
	margin: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {

	/* One column per line on a phone, card free to use the full width */
	.elementor .contact-box-ft {
		width: 100%;
	}

	.elementor .e-9e1ab93-bd53f59 {
		flex: 0 1 auto;
		width: 100%;
		max-width: 100%;
	}

	.elementor .e-123b1a4-f48d7fa {
		flex-wrap: wrap;
		gap: 12px;
	}

	.elementor .e-123b1a4-f48d7fa > * {
		flex: 1 1 100%;
	}
}

/* =========================================================================
 * FOOTER - the top row
 *
 * Memberships, Certifications, the contact card and the Connect pill sit in
 * nested flex rows that never wrap, each sized to its content. Once the card
 * above is given a real width the row no longer fits, and without wrapping the
 * blocks overlap instead of reflowing - the headings collide and the Connect
 * pill is pushed off the edge.
 *
 * Allowing these rows to wrap, with an explicit gap, drops whole blocks onto
 * the next line instead.
 * ====================================================================== */

/* e-e862ead-36b745e = outer row: the block group, then the Connect pill */
.elementor .e-e862ead-36b745e {
	flex-wrap: wrap;
	gap: 28px 40px;
	align-items: center;
	justify-content: center;
}

/* e-251ede8-8a8b0e3 = Memberships + Certifications, then the contact card */
.elementor .e-251ede8-8a8b0e3 {
	flex-wrap: wrap;
	gap: 28px 48px;
	align-items: flex-start;
	justify-content: center;
}

/*
 * e-5558105-478a1b1 = Memberships with Certifications beside it. Sized to
 * content and centred, not stretched: while it could grow it spread its two
 * columns across the whole row and left the card no room.
 */
.elementor .e-5558105-478a1b1 {
	flex: 0 1 auto;
	flex-wrap: nowrap;
	gap: 40px;
	align-items: flex-start;
	justify-content: center;
}

/* These columns must not shrink below their content or the badges wrap one per line */
.elementor .e-94e63f4-e0266a8,
.elementor .e-9493d4d-3a50c16,
.elementor .e-8e12b0c-36ddf28 {
	flex: 0 0 auto;
}

/* e-94e63f4-e0266a8 = Memberships column; its 48px right margin double-counted the gap */
.elementor .e-94e63f4-e0266a8 {
	margin-inline-end: 0;
}

/* e-22ccf4c-b29cca2 = the three certification badges, side by side */
.elementor .e-22ccf4c-b29cca2 {
	flex-wrap: nowrap;
	column-gap: 24px;
	justify-content: flex-start;
}

/* e-61e5ffa-13a74db = Connect pill wrapper; width:30% pushed it into the card */
.elementor .e-61e5ffa-13a74db {
	width: auto;
	flex: 0 0 auto;
	align-self: center;
	justify-content: center;
}

/* Squeezing the pill pushed the LinkedIn icon outside its rounded border */
.elementor .connect-pill {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 767px) {

	.elementor .e-5558105-478a1b1 {
		flex-wrap: wrap;
		gap: 24px;
		justify-content: center;
	}

	.elementor .e-22ccf4c-b29cca2 {
		flex-wrap: wrap;
		row-gap: 16px;
		justify-content: center;
	}

	/* The Memberships column stretches full width here and aligns left while
	   the Certifications column beside it is centred. */
	.elementor .e-94e63f4-e0266a8 {
		align-items: center;
		text-align: center;
	}
}

/* =========================================================================
 * CONTACT US - the enquiry form
 *
 * Client feedback: "Increase size of field to 48px height and text inside to
 * 16px. Remove padding from containers so lines up neatly fields."
 *
 * Two separate defects, both inherited defaults rather than anything authored:
 *
 * 1. Size. Elementor's atomic base classes ship
 *
 *        .e-form-input-base   { height: 36px; font-size: 12px }
 *        .e-form-select-base  { font-size: 12px }
 *        .e-form-textarea-base{ font-size: 12px }
 *
 *    and the template only raises the height, to 40px, via .form-field. The
 *    12px text was never overridden anywhere, so every control rendered four
 *    pixels short and one size too small.
 *
 * 2. Alignment. The four top fields sit inside two column flexboxes, while
 *    Message and the button are direct children of the form. The columns keep
 *    Elementor's default container padding
 *
 *        .e-con { --padding-left: var(--container-default-padding-left, 10px) }
 *
 *    so those four fields started 10px further in than Message and ended 10px
 *    further out - visible as the Message label hanging left of First name.
 *    Zeroing the columns is enough; the form and .form-container keep their
 *    own padding, which is symmetric and wanted.
 *
 * This is the only form on the site built with the atomic form element - the
 * Enquiry Request forms on Current Positions and A Balanced Employer are the
 * older Elementor Pro widget with .elementor-field markup - so scoping to
 * .e-form-base leaves those untouched.
 * ====================================================================== */
.elementor .e-form-base .form-field,
.elementor .e-form-base .e-form-input-base,
.elementor .e-form-base .e-form-select-base {
	height: 48px;
	font-size: 16px;
}

/* The textarea is sized by its rows attribute, so only the text changes */
.elementor .e-form-base .e-form-textarea-base {
	font-size: 16px;
}

/* Only the inline padding is dropped. The 10px top and bottom is what sets
   the gap between the Enquiry Type row and the Message block, and the
   complaint was about the left and right edges, not the spacing. */
.elementor .e-form-base .two-columns-flex > * {
	padding-inline: 0;
}

/* =========================================================================
 * FOOTER - breathing room under the Connect pill
 *
 * Client feedback: the button sits too close to the rule under it.
 *
 * It sat closer than that - the two boxes touched. The footer stacks as
 *
 *     .footer-flex
 *       > top row      Memberships / Certifications, the contact card, Connect
 *       > hr.divider-nav
 *       > bottom row   copyright and menu
 *
 * and nothing separated the row from the rule: measured on a 1400px viewport
 * the pill's bottom edge and the rule's top edge were both at y=887. Below
 * 1025px they were 16px apart, against 54px of space above the pill.
 *
 * The space goes on the rule rather than on the pill, because the pill is a
 * flex item on a wrapping row: a margin there would only reach the rule while
 * the pill happens to be the item that sets the last line's height, so the gap
 * would come and go with the viewport width. 38px is the gap already sitting
 * above the pill, so the button ends up evenly spaced between the card and the
 * rule - 38px at desktop widths, and 54px below 1025px where the existing gap
 * of 16px is added to it, matching the 54px above.
 *
 * One footer template (id 300) serves every page, so this needs no per-page
 * work.
 * ====================================================================== */
.elementor-location-footer .divider-nav {
	margin-block-start: 38px;
}

/* =========================================================================
 * HEADER - the menu wrapping onto a second line on laptops
 *
 * Between 1025px and about 1440px the top-level menu broke onto two lines,
 * leaving "Contact Us" alone on a second row. Measured on every header
 * template: one line at 1440px and above, two lines at 1366, 1280, 1200,
 * 1137, 1100 and 1025.
 *
 * Two things were in the way. The menu block is a flex item that sizes to its
 * content and does not grow, so it stopped at whatever width the row handed
 * it; and the block holding the Connect pill was far wider than the pill -
 * 263px against 153px at 1200px - with the difference sitting there as slack.
 * So the block is allowed to grow, the list is told not to wrap, and the pill
 * block is taken down to the pill, which returns its slack to the row.
 *
 * The menu still needs a certain width, and no amount of tightening gets under
 * it: the five labels measure 501px of text, and the dropdown arrows and the
 * items' own structure add another 177px, so 678px is the floor at zero
 * padding. What the row can offer is (viewport - 64px of page padding) minus
 * the logo, the pill and two 20px gaps - about 778px at 1280px, but only 542px
 * at 1025px. Below roughly 1280px the menu cannot be on one line beside a
 * 245px logo and the pill, whatever the padding, so the rule stops there and
 * those widths keep wrapping as they always have. Forcing it lower down only
 * traded the second line for "Contact Us" being clipped mid-word.
 *
 * Within the range that does fit, the 20px either side of each item tapers
 * with the viewport - ten gaps, so every pixel taken off buys ten - reaching
 * 10px at 1280px, which is what that width can afford.
 *
 * Only top-level items are touched; the dropdown panels keep their padding.
 * Above 1439px nothing here applies and the header is left exactly as authored.
 *
 * Same positional selector as the mobile toggle rule above: six header
 * templates are in use and each one hashes its own class names.
 * ====================================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {

	.elementor-location-header .e-flexbox-base > .e-flexbox-base:nth-child(2) {
		flex: 1 1 auto;
		min-width: 0;
	}

	.elementor-location-header .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	.elementor-location-header .e-flexbox-base > .e-flexbox-base:last-child {
		width: auto;
		flex: 0 0 auto;
	}

	.elementor-location-header .elementor-nav-menu > li > .elementor-item {
		padding-inline: calc(20px - (1440px - 100vw) / 16);
	}
}