/* ============================================================
   FOOTER REFINEMENT — STAGING-WIDE (approved)
   ------------------------------------------------------------
   Loaded on every staging page by tp-outcome-prototype.php,
   because footer template 752 renders site-wide.

   Presentation only: no footer content, link destination or
   menu assignment is changed here. Every selector is a
   descendant of .elementor-752 / #footer, so headers, page
   content and WooCommerce cannot be reached.

   Reversible: delete footer.css (the enqueue no-ops when the
   file is absent) to restore the stock footer presentation.
   ============================================================ */

/* --- E. Boundary: subtle top border, not a heavy divider ---- */
#footer.elementor-footer {
	border-top: 1px solid #DDE5EC;
}

/* --- A. Spacing: ~16-18% off total footer height ------------- */
/* ONLY the outer container. Deliberately not a descendant selector:
   `> .e-con > .e-con` also matches the main row and the bottom bar,
   which pushed the footer 111px TALLER instead of shorter. */
.elementor-752 .elementor-element-b50161f {
	padding-top: 72px;
	padding-bottom: 14px;
	gap: 48px;
}

/* Elementor emits literal `gap` on these containers, so setting --gap
   alone is a no-op — the gap itself has to be overridden. */
/* brand column: logo / text stack / button — was 60px */
.elementor-752 .elementor-element-8fdc1b2 {
	gap: 34px;
}

/* phone / support / email — was 10px */
.elementor-752 .elementor-element-1cd01ba {
	gap: 8px;
}

/* heading -> menu inside each nav column — was 30px */
.elementor-752 .elementor-element-554914d,
.elementor-752 .elementor-element-36580b5,
.elementor-752 .elementor-element-9ecb77f {
	gap: 20px;
}

/* menu items: was padding-bottom 16px. The7 sets this with higher
   precedence, so a scoped !important is required to tighten it. */
.elementor-752 ul.dt-nav-menu > li.menu-item {
	padding-bottom: 11px !important;
}

.elementor-752 ul.dt-nav-menu > li.menu-item:last-child {
	padding-bottom: 0 !important;
}

/* --- B. Brand column: logo presence + internal rhythm ------- */
/* The7 sizes the WRAPPER (180px) and the img fills it at max-width:100%,
   so sizing the img alone gets clamped back to 180px. 180 -> 202 = +12%. */
.elementor-752 .the7-logo-wrap.img-css-resize-wrapper {
	width: 202px;
	max-width: 100%;
}

.elementor-752 .the7-logo-wrap img {
	width: 100%;
	height: auto;
}

/* --- C. Typography + contrast ------------------------------- */
/* column headings: still teal, slightly stronger, not larger */
/* The7 emits font-weight:500 from the widget's generated CSS, so a
   scoped !important is needed to strengthen the column headings. */
.elementor-752 .the7-heading-title {
	color: #1F7A8C !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
}

/* nav + legal links: was rgba(2,18,40,.82) at 17px */
.elementor-752 ul.dt-nav-menu a,
.elementor-752 ul.dt-nav-menu .menu-text {
	color: #33455C;
}

.elementor-752 ul.dt-nav-menu a:hover .menu-text,
.elementor-752 ul.dt-nav-menu a:focus-visible .menu-text {
	color: #1F7A8C;
}

.elementor-752 ul.dt-nav-menu a:focus-visible {
	outline: 2px solid #196575;
	outline-offset: 3px;
	border-radius: 2px;
}

/* support line + email: was rgba(2,18,40,.82) */
.elementor-752 .elementor-widget-text-editor p {
	color: #33455C;
}

.elementor-752 .elementor-widget-text-editor a {
	color: #1F7A8C;
}

.elementor-752 .elementor-widget-text-editor a:hover,
.elementor-752 .elementor-widget-text-editor a:focus-visible {
	color: #196575;
}

/* copyright + tagline: was 15px rgba(2,18,40,.57) — under 4.5:1 */
.elementor-752 .elementor-element-8bc5a24 .elementor-widget-text-editor p {
	font-size: 16px;
	color: #55677C;
}

/* --- D. Grid rhythm ----------------------------------------- */
.elementor-752 .elementor-element-921b57e {
	align-items: start;
	column-gap: 56px;
}

.elementor-752 .elementor-element-921b57e > .e-con {
	align-content: start;
}

/* --- F. Button: teal, matched to the prototype button system - */
.elementor-752 a.box-button.elementor-button {
	background-color: #1F7A8C;
	color: #FFFFFF;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 700;
	padding: 14px 28px;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.elementor-752 a.box-button.elementor-button:hover,
.elementor-752 a.box-button.elementor-button:focus-visible {
	background-color: #196575;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.elementor-752 a.box-button.elementor-button:focus-visible {
	outline: 2px solid #196575;
	outline-offset: 3px;
}

/* --- G. Search + social: alignment and contrast only --------- */
.elementor-752 .the7-icon-wrapper a.elementor-icon {
	color: #425466;
	transition: color 0.18s ease;
}

.elementor-752 .the7-icon-wrapper a.elementor-icon:hover,
.elementor-752 .the7-icon-wrapper a.elementor-icon:focus-visible {
	color: #1F7A8C;
}

.elementor-752 .the7-icon-wrapper a.elementor-icon:focus-visible {
	outline: 2px solid #196575;
	outline-offset: 3px;
}

/* --- Tablet / mobile: stack cleanly, no large blank areas ---- */
@media (max-width: 1024px) {
	.elementor-752 .elementor-element-b50161f {
		padding-top: 56px;
		gap: 38px;
	}
	.elementor-752 .elementor-element-921b57e {
		column-gap: 40px;
	}
}

@media (max-width: 767px) {
	.elementor-752 .elementor-element-b50161f {
		padding-top: 44px;
		padding-bottom: 12px;
		gap: 30px;
	}
	.elementor-752 .the7-logo-wrap.img-css-resize-wrapper {
		width: 186px;
	}
	.elementor-752 .elementor-element-8fdc1b2 {
		gap: 26px;
	}
	.elementor-752 .elementor-element-8bc5a24 .elementor-widget-text-editor p {
		font-size: 15px;
	}
	/* The template already centres the footer menus on mobile but leaves the
	   Explore / Company headings left-aligned; centre them so each column reads
	   as a unit. The7 sets alignment on the widget, hence !important here. */
	.elementor-752 .elementor-element-921b57e .elementor-widget-the7-heading {
		width: 100% !important;
		align-self: stretch;
	}
	.elementor-752 .elementor-element-921b57e .elementor-widget-the7-heading .elementor-widget-container,
	.elementor-752 .elementor-element-921b57e .the7-heading-title {
		text-align: center !important;
	}
}

/* --- Focus: three footer controls ship with no visible focus ring
   (logo link, email link, search submit). Keyboard-tab audit caught
   them; give them the same 2px teal ring as everything else. ------ */
.elementor-752 a.the7-logo-wrap:focus-visible,
.elementor-752 .elementor-widget-text-editor a:focus-visible,
.elementor-752 .tp-linkedin-link:focus-visible {
	outline: 2px solid #196575 !important;
	outline-offset: 3px;
	border-radius: 2px;
}


/* ============================================================
   CONNECT COLUMN — LinkedIn
   The footer search widget was removed from template 752 itself
   (not hidden). The link is now icon-only: the "Follow Transform
   Pilot on LinkedIn" label and the "Company updates and
   transformation insights" sub-line were verbose for a footer
   utility link. The label survives as the anchor's aria-label and
   as visually-hidden text, so the accessible name is unchanged.
   Destination unchanged. No circular plate, no promotional card.
   ============================================================ */
.elementor-752 .tp-linkedin-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #33455C;
	padding: 4px;
	margin-left: -4px;   /* optical: keep the glyph on the column edge */
	transition: color 0.18s ease;
}

.elementor-752 .tp-linkedin-link:hover,
.elementor-752 .tp-linkedin-link:focus-visible {
	color: #1F7A8C;
}

.elementor-752 .tp-linkedin-link:focus-visible {
	outline: 2px solid #196575;
	outline-offset: 3px;
	border-radius: 3px;
}

/* Bare glyph — no plate, no background. */
.elementor-752 .tp-li__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	box-sizing: content-box;
	transition: color 0.18s ease;
}

.elementor-752 .tp-linkedin-link:hover .tp-li__icon,
.elementor-752 .tp-linkedin-link:focus-visible .tp-li__icon {
	background: none;
	color: #1F7A8C;
}

/* Screen-reader-only accessible name. Also defensively collapses the
   old label/sub spans if any cached markup still carries them. */
.elementor-752 .tp-li__sr,
.elementor-752 .tp-li__text,
.elementor-752 .tp-li__label,
.elementor-752 .tp-li__sub {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Connect column rebalanced now that the search field is gone. */
.elementor-752 .elementor-element-9ba2ee6 {
	width: 100%;
}

@media (max-width: 767px) {
	.elementor-752 .tp-linkedin-link {
		justify-content: center;
		text-align: left;
	}
}

/* --- Site-grid alignment -------------------------------------
   Footer row and bottom bar shipped with 60px inline padding while
   the header (and the Elementor kit default) use 40px, so at
   viewports below the 1300px cap the footer content sat 20px inside
   the header content. Matching them puts header, page body and
   footer on one grid at every width. Above 1300px both are capped
   by --container-max-width, so nothing moves there.
   ------------------------------------------------------------ */
.elementor-752 .elementor-element-ad4f6ee,
.elementor-752 .elementor-element-8bc5a24 {
	padding-inline: 40px;
}

@media (max-width: 767px) {
	.elementor-752 .elementor-element-ad4f6ee,
	.elementor-752 .elementor-element-8bc5a24 {
		padding-inline: 20px;
	}
}

/* ------------------------------------------------------------------
   Utility pages polish (login, search) — bring their spacing in line
   with the design-system pages. Scoped so nothing else is affected.
   ------------------------------------------------------------------ */
/* Login page (7460): the Elementor login widget carries a ~120px top margin
   that leaves a big empty gap under the header band. Tighten it. */
body.page-id-7460 .elementor-element-2af2432 > .elementor-widget-container { margin-top: 40px !important; }
body.page-id-7460 .the7-login-form { padding-top: 28px; }

/* Scroll-to-top button: recolor the arrow from the old bright blue (#2C74FF)
   to the design-system teal. White circle, teal arrow — no bright blue. */
.scroll-top svg,
.scroll-top svg path,
.scroll-top-elementor-icon svg,
.scroll-top-elementor-icon svg path { fill: #1F7A8C !important; color: #1F7A8C !important; }
.scroll-top { color: #1F7A8C !important; }
.scroll-top:hover svg,
.scroll-top:hover svg path { fill: #176571 !important; }