/**
 * Footer layout corrections for the Elementor/HFE footer template.
 *
 * The footer is built in Elementor, so every rule here overrides generated CSS.
 * Selectors are anchored on #colophon and on structural classes (.e-con,
 * .e-parent, .e-child) rather than on .elementor-element-xxxxx ids, so a footer
 * rebuild in Elementor - which changes those ids - does not break the layout.
 * The #colophon id also gives every rule higher specificity than Elementor's
 * class-only output, so !important is not needed.
 */

/* ---------------------------------------------------------------------------
 * 1. Box each footer row to the site content width.
 * Elementor renders the rows edge to edge (10px gutters) while the page content
 * above is boxed at 1140px, which is what makes the footer read as off-centre.
 * 1188px = 1140px of content + the 24px gutters (border-box).
 * ------------------------------------------------------------------------- */
/* The full-bleed rows carry only the background; the inner row carries the box.
   Without this the CTA strip keeps Elementor's 10px gutter and sits 10px out of
   line with the columns below it. */
#colophon .e-con.e-parent {
	--padding-left: 0px;
	--padding-right: 0px;
	padding-inline: 0;
}

#colophon .e-con.e-parent > .e-con.e-child {
	width: 100%;
	max-width: 1188px;
	margin-inline: auto;
	--padding-left: 24px;
	--padding-right: 24px;
	padding-inline: 24px;
}

/* ---------------------------------------------------------------------------
 * 2. The four link columns.
 * :has(> .e-con ~ .e-con ~ .e-con) = "a row holding three or more sibling
 * containers", which matches only the column row - the CTA strip and the
 * bottom bar hold two children, and the brand column holds one.
 *
 * Fixed 4 / 2 / 1 column counts rather than auto-fit: auto-fit passes through a
 * 3-column step that leaves one column orphaned on its own row. 4 and 2 always
 * divide evenly, so the grid stays symmetric at every viewport and zoom level.
 * ------------------------------------------------------------------------- */
#colophon .e-con.e-child:has(> .e-con ~ .e-con ~ .e-con) {
	display: grid;
	/* The last column carries the 233px email token, which wraps in an equal
	   quarter once the viewport drops below ~1400px. Giving it 1.35fr keeps the
	   address on one line while the three link columns still fit comfortably. */
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
	gap: 36px 40px;
	align-items: start;
}

/* 1024px is also where the header drops to its mobile menu, so the whole page
   changes shape at one width rather than two. */
@media (max-width: 1024px) {
	#colophon .e-con.e-child:has(> .e-con ~ .e-con ~ .e-con) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	#colophon .e-con.e-child:has(> .e-con ~ .e-con ~ .e-con) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Columns are grid items now; drop the flex-grow Elementor gives them. */
#colophon .e-con.e-child:has(> .e-con ~ .e-con ~ .e-con) > .e-con {
	width: auto;
	min-width: 0;
	--padding-left: 0px;
	--padding-right: 0px;
	padding-inline: 0;
	gap: 18px;
}

/* ---------------------------------------------------------------------------
 * 3. Logo: a fixed size, not a percentage of its column.
 * Elementor sets width:90%, so the logo grew and shrank with the column - the
 * main reason the footer looked different at every zoom level. 210px against
 * the 4.29:1 source ratio renders ~49px tall, in proportion with the 40px
 * header logo.
 * ------------------------------------------------------------------------- */
#colophon .elementor-widget-image img {
	width: auto;
	max-width: 210px;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * 4. One type scale for the whole footer.
 * Was: 15px headings, 14px links, 13px contact details, 14px bottom bar.
 * ------------------------------------------------------------------------- */
#colophon .elementor-heading-title {
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.06em;
}

#colophon .elementor-icon-list-item > .elementor-icon-list-text,
#colophon .elementor-icon-list-item > a,
#colophon .elementor-widget-text-editor {
	font-size: 15px;
	line-height: 1.7;
}

/* The email address is one unbreakable 233px token; in a narrow column it
   overflowed the viewport and gave the whole page a horizontal scrollbar. */
#colophon .elementor-icon-list-text {
	overflow-wrap: anywhere;
	min-width: 0;
}

/* Even spacing between list items - the contact column used 15px, the link
   columns 10px. Elementor splits the gap across two rules, hence the halves. */
#colophon .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
	padding-block-end: 6px;
}

#colophon .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
	margin-block-start: 6px;
}

#colophon .elementor-icon-list-item > a:hover .elementor-icon-list-text {
	color: #7FD4DA;
}

/* Social row: even icon spacing, aligned with the text above it. */
#colophon .elementor-icon-list--layout-inline .elementor-icon-list-items {
	gap: 18px;
	margin-inline: 0;
}

#colophon .elementor-icon-list--layout-inline .elementor-icon-list-item {
	margin-inline: 0;
}

/* ---------------------------------------------------------------------------
 * 5. CTA strip.
 * The title carries line-height:13px on 24px text from the Elementor panel,
 * which collapses the title onto its description.
 * ------------------------------------------------------------------------- */
#colophon .elementor-icon-box-title {
	font-size: 20px;
	line-height: 1.35;
	margin-block-end: 4px;
}

#colophon .elementor-icon-box-description {
	font-size: 15px;
	line-height: 1.5;
}

/* Let the strip wrap before the buttons collide with the text. */
#colophon .e-con.e-child > .e-con {
	flex-wrap: wrap;
}

/* The strip itself is a row, not a child of one, so the rule above misses it.
   Elementor only lets it wrap at 767px. Wrapping alone is not enough: its two
   halves inherit width:100% from Elementor, so they would break onto separate
   lines at every width. Sizing them to their content first means they sit side
   by side while they fit and drop apart only when they stop fitting - at any
   window size or zoom level. */
#colophon .e-con.e-parent:first-child > .e-con.e-child {
	flex-wrap: wrap;
	gap: 16px 24px;
}

#colophon .e-con.e-parent:first-child > .e-con.e-child > .e-con {
	flex: 1 1 auto;
	width: auto;
	min-width: min(100%, 260px);
}

/* ---------------------------------------------------------------------------
 * 6. Bottom bar: copyright left, registration numbers right, same box.
 * ------------------------------------------------------------------------- */
#colophon .e-con.e-parent:last-child > .e-con.e-child {
	--padding-top: 16px;
	--padding-bottom: 16px;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

#colophon .e-con.e-parent:last-child .elementor-heading-title {
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * 7. Narrow viewports / high zoom.
 * ------------------------------------------------------------------------- */
/* The stacked columns stay left-aligned - centring them would leave the icon
   lists ragged, because Elementor renders each list item as a flex row that
   text-align cannot centre. Only the bottom bar centres. */
@media (max-width: 767px) {
	#colophon .e-con.e-parent > .e-con.e-child {
		--padding-left: 20px;
		--padding-right: 20px;
		padding-inline: 20px;
	}

	#colophon .e-con.e-parent:last-child > .e-con.e-child {
		justify-content: center;
		text-align: center;
	}

	/* CTA strip: two 159px pills floating mid-column read as leftovers of the
	   desktop row. Full width makes them the obvious next step. */
	#colophon .e-con.e-parent:first-child .elementor-widget-button,
	#colophon .e-con.e-parent:first-child .elementor-button {
		width: 100%;
	}

	#colophon .e-con.e-parent:first-child > .e-con.e-child > .e-con {
		gap: 10px;
	}

	#colophon .elementor-icon-box-title {
		font-size: 18px;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Single-column footer (<= 599px).
 * Stacked, the four columns ran to ~1050px of unbroken text with nothing to
 * mark where one section ends and the next begins. Tighter rhythm plus a
 * hairline per section makes it scannable and roughly a third shorter.
 * ------------------------------------------------------------------------- */
@media (max-width: 599px) {
	#colophon .e-con.e-parent:nth-child(2) {
		--padding-top: 26px;
		--padding-bottom: 26px;
	}

	#colophon .e-con.e-child:has(> .e-con ~ .e-con ~ .e-con) {
		gap: 24px;
	}

	#colophon .e-con.e-child:has(> .e-con ~ .e-con ~ .e-con) > .e-con + .e-con {
		padding-block-start: 24px;
		border-block-start: 1px solid rgba(255, 255, 255, 0.1);
		gap: 12px;
	}

	#colophon .elementor-heading-title {
		font-size: 13px;
		letter-spacing: 0.08em;
	}

	#colophon .elementor-icon-list-item > .elementor-icon-list-text,
	#colophon .elementor-icon-list-item > a,
	#colophon .elementor-widget-text-editor {
		font-size: 14px;
		line-height: 1.6;
	}

	/* 12px between links on a phone is dead space; 8px still clears the 44px
	   tap target because each row is 22px of text plus the gap. */
	#colophon .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
		padding-block-end: 4px;
	}

	#colophon .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
		margin-block-start: 4px;
	}

	#colophon .elementor-widget-image img {
		max-width: 180px;
	}

	#colophon .e-con.e-parent:last-child .elementor-heading-title {
		font-size: 12px;
	}
}