/**
 * AC Legacy Redirect — hub-site "Legacy Transition Popup" styling.
 *
 * EXACT visual match to the "tmcw" welcome-popup live on
 * ascentialtech.com/catalog (Adam's explicit reference, 2026-07-09):
 * dark glassmorphic modal (rgba(12,12,20,.85) + backdrop-filter blur),
 * purple (#5522dd) glow border/shadow, Inter typography, and the
 * signature clip-path orange (#dd7722) CTA button. Values below were
 * read directly from that page's live stylesheet (browser devtools
 * console — CSSStyleSheet.cssRules), not eyeballed from a screenshot.
 *
 * Structural differences from the source (by design, not oversight):
 *  - Source shows a strip of 6 partner-brand logos white-silhouetted
 *    (filter: brightness(0) invert(1)) as one unified brand family.
 *  - This popup shows exactly 2 logos (old brand / new brand) in their
 *    natural color with small "Formerly" / "Now" labels, because the
 *    semantic purpose here is "here's what changed", not "here's our
 *    family of brands" — natural color makes the before/after legible.
 *  - Everything else (modal chrome, overlay, typography scale, spacing,
 *    close button, CTA button) is copied 1:1.
 */

.ac-legacy-popup-overlay {
	display: none !important;
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 2147483000 !important;
	background: rgba(0, 0, 0, 0.7) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
	opacity: 0 !important;
	transition: opacity 0.3s !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding: 4vh 20px 20px !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
}

.ac-legacy-popup-overlay.ac-legacy-popup-overlay--visible {
	display: flex !important;
	opacity: 1 !important;
}

/* Inline in-admin preview variant: render as a normal block instead of a
   fixed fullscreen overlay, so it can be embedded directly in the
   Settings → Legacy Redirect page without covering the whole screen. */
.ac-legacy-popup-overlay--preview {
	position: static !important;
	inset: auto !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
}

.ac-legacy-popup-overlay--preview .ac-legacy-popup {
	position: static !important;
	width: 100% !important;
	margin: 0 auto !important;
}

.ac-legacy-popup {
	display: block !important;
	position: relative !important;
	width: 92% !important;
	max-width: 640px !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
	margin: 0 !important;
	background: rgba(12, 12, 20, 0.85) !important;
	-webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
	backdrop-filter: blur(30px) saturate(1.4) !important;
	border: 1.5px solid #5522dd !important;
	border-radius: 16px !important;
	box-shadow: rgba(85, 34, 221, 0.35) 0 0 60px, rgba(85, 34, 221, 0.12) 0 0 120px !important;
	padding: 48px 40px 40px !important;
	box-sizing: border-box !important;
	text-align: center !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	opacity: 0 !important;
	transition: opacity 0.4s !important;
}

.ac-legacy-popup-overlay--visible .ac-legacy-popup {
	opacity: 1 !important;
}

.ac-legacy-popup__close {
	display: block !important;
	position: absolute !important;
	top: 14px !important;
	right: 18px !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.5) !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: color 0.2s !important;
}

.ac-legacy-popup__close:hover,
.ac-legacy-popup__close:focus {
	color: #ffffff !important;
	background: none !important;
	outline: none !important;
}

.ac-legacy-popup__eyebrow {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 2.5px !important;
	text-transform: uppercase !important;
	color: #5522dd !important;
	margin: 0 0 10px !important;
}

.ac-legacy-popup__headline {
	display: block !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 32px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	color: #ffffff !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-wrap: balance !important;
	-webkit-hyphens: none !important;
	hyphens: none !important;
}

.ac-legacy-popup__body {
	display: block !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.75) !important;
	margin: 0 auto 28px !important;
	padding: 0 !important;
	max-width: 520px !important;
	font-weight: 400 !important;
	text-wrap: balance !important;
}

.ac-legacy-popup__logos {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px 10px !important;
	margin: 0 0 24px !important;
	padding: 20px 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ac-legacy-popup__logo-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
}

/* Logo assets are admin-uploaded (any legacy/new brand's own file) and
   frequently designed for a WHITE page background — dark subtext,
   colored wordmarks with a transparent PNG background, etc. On this
   popup's near-black modal that content can disappear. Give both logo
   slots a light chip so ANY uploaded logo stays legible regardless of
   its own colors/background. */
.ac-legacy-popup__logo-chip {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #ffffff !important;
	border-radius: 6px !important;
	padding: 12px 18px !important;
}

.ac-legacy-popup__logo {
	display: block !important;
	max-width: 100% !important;
	height: 34px !important;
	max-height: 34px !important;
	width: auto !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	opacity: 1 !important;
	transition: opacity 0.2s !important;
}

/* This plugin's shipped default "old logo" asset (D&K Engineering's own
   white/transparent wordmark, meant for a dark hero background) would be
   invisible on the white chip above without this — invert it to render
   dark-on-white instead. This is a default-asset accommodation, not a
   guaranteed fix for every possible future upload: an admin swapping in
   a DIFFERENT logo whose natural colors already read on white should also
   toggle this off via the "Invert old logo colors" checkbox in Settings. */
.ac-legacy-popup__logo--old.ac-legacy-popup__logo--invert {
	filter: invert(1) !important;
}

.ac-legacy-popup__logo-wrap:hover .ac-legacy-popup__logo {
	opacity: 1 !important;
}

.ac-legacy-popup__logo-label {
	display: block !important;
	font-size: 11px !important;
	font-weight: 600 !important;

	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.45) !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.ac-legacy-popup__arrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #dd7722 !important;
	line-height: 1 !important;
	flex: 0 0 auto !important;
	margin: 0 2px 22px !important;
}

.ac-legacy-popup__arrow-svg {
	display: block !important;
	width: 46px !important;
	height: 16px !important;
	color: #dd7722 !important;
}

.ac-legacy-popup__tagline {
	display: block !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-style: italic !important;
	color: rgba(255, 255, 255, 0.5) !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.ac-legacy-popup__cta {
	display: inline-block !important;
	cursor: pointer !important;
	min-width: 150px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	text-decoration: none !important;
	position: relative !important;
	border: 0 !important;
	background-color: #dd7722 !important;
	background-image: none !important;
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 20px) !important;
	font-family: Inter, "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 40px !important;
	min-height: 40px !important;
	max-width: 100% !important;
	margin: 0 !important;
	color: #000000 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: 0.2s ease-in-out !important;
}

.ac-legacy-popup__cta:hover,
.ac-legacy-popup__cta:focus {
	background-color: #5522dd !important;
	background-image: none !important;
	color: #ffffff !important;
	transform: translateX(10px) !important;
	transition: 0.2s ease-in-out !important;
}

@media (max-width: 600px) {
	/* Compress the whole modal vertically so the CTA clears a bottom-docked
	   cookie/consent banner from a separate plugin. Every block loses margin,
	   padding, and font-size so the card fits in the space above the banner. */
	.ac-legacy-popup-overlay {
		padding: 2vh 12px 12px !important;
	}
	.ac-legacy-popup {
		padding: 28px 20px 24px !important;
		max-height: 96vh !important;
	}
	.ac-legacy-popup__close {
		top: 10px !important;
		right: 12px !important;
		font-size: 26px !important;
	}
	.ac-legacy-popup__eyebrow {
		margin: 0 0 6px !important;
	}
	.ac-legacy-popup__headline {
		font-size: 21px !important;
		line-height: 1.12 !important;
		margin: 0 0 10px !important;
	}
	.ac-legacy-popup__body {
		font-size: 13px !important;
		line-height: 1.5 !important;
		margin: 0 auto 16px !important;
	}
	.ac-legacy-popup__tagline {
		font-size: 13px !important;
		margin: 0 0 14px !important;
	}
	.ac-legacy-popup__logos {
		gap: 10px 12px !important;
		margin: 0 0 16px !important;
		padding: 12px 0 !important;
	}
	.ac-legacy-popup__logo-chip {
		padding: 8px 12px !important;
	}
	.ac-legacy-popup__logo {
		height: 26px !important;
		max-height: 26px !important;
	}
	.ac-legacy-popup__logo-label {
		font-size: 10px !important;
		letter-spacing: 1px !important;
	}
	.ac-legacy-popup__arrow {
		margin: 0 2px 18px !important;
	}
	.ac-legacy-popup__arrow-svg {
		width: 32px !important;
		height: 14px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-legacy-popup,
	.ac-legacy-popup-overlay {
		transition: none !important;
	}
	.ac-legacy-popup__close,
	.ac-legacy-popup__cta {
		transition: none !important;
	}
	.ac-legacy-popup__cta:hover {
		transform: none !important;
	}
}

/* ---- T&M overrides, verbatim from the approved demo (build_demo.py TM_CHIP_CSS) ---- */

.ac-legacy-popup__logo-chip{
  background-color:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  padding:14px 18px !important;
  /* flex-basis is the DESIGN size, max-width the ceiling, min-width:0 the
     permission to shrink. Using max-width alone made the chip behave as a
     fixed 230px box (the img is width:100%, so the chip had no smaller
     content size to fall back to) and the two-chip row stayed 36px over a
     558px card. */
  flex:0 1 auto !important;
  width:auto !important;max-width:230px !important;min-width:0 !important;
  overflow:hidden !important;
}
.ac-legacy-popup__logo{
  /* Cap by HEIGHT for the look, but never let that height dictate an
     un-shrinkable width. A fixed height on a wide wordmark (UB is 300x29, so
     26px tall => 192px wide => a 230px chip) is what pushed the two-chip row
     to 630px inside a 558px card. width:100% + height:auto lets the mark scale
     down with its chip; max-height keeps it from ever growing too tall. */
  width:auto !important;max-width:100% !important;
  height:26px !important;max-height:26px !important;
  object-fit:contain !important;
}
.ac-legacy-popup__logo--old.ac-legacy-popup__logo--invert{filter:none !important;}
/* tmlogo-1.svg ships black+purple; ascentialtech.com's own header whitens it
   with brightness(0) invert(1) for dark backgrounds. Same treatment here. */
.ac-legacy-popup__logo--tms{filter:brightness(0) invert(1) !important;}
.ac-legacy-popup__logos{gap:4px 14px !important;}
/* Combined multi-brand message: several legacy marks sit SIDE BY SIDE under one
   shared "Formerly" label, so the popup reads "A and B are now C" and the logo
   row stays the same height as every single-brand popup (a vertical stack made
   that row 184px vs 120px, which is what made the popups different heights).

   The stack is a grid sized to max-content: its width becomes the widest chip
   and every chip stretches to fill it. The previous flex + `width:100%` was
   circular sizing -- the stack shrank to 95px while the chip computed 133px and
   overflowed to the right, putting the chip centre 19px off the label centre on
   every single-brand popup (measured chip.cx 287 vs label.cx 268). */
.ac-legacy-popup__oldstack{
  display:flex !important;flex-direction:row !important;
  gap:8px !important;align-items:stretch !important;justify-content:center !important;
  margin:0 auto !important;min-width:0 !important;max-width:100% !important;}
/* `width:max-content` fixed the centring but refused to SHRINK: the two chips
   demanded 347px inside a 558px row on desktop and 330px inside 238px on
   mobile, overflowing 3 rows at both breakpoints. Flex with a shrinkable basis
   keeps the chips centred as a group AND lets them give way in a narrow card. */
.ac-legacy-popup__oldstack > .ac-legacy-popup__logo-chip{
  flex:0 1 auto !important;min-width:0 !important;}
.ac-legacy-popup__logos > *{min-width:0 !important;}
.ac-legacy-popup__logos > .ac-legacy-popup__arrow{flex:0 0 auto !important;}

/* A multi-brand row carries THREE chips instead of two, so at design size it
   needs 622px inside a 558px card (230 + 8 + 109 stack, + 46 arrow, + 205 new,
   + 32 gaps) and overflowed by 36px. Nothing above can fix that -- it is an
   arithmetic shortfall, not a shrink-permission bug. Give only the multi rows
   a smaller logo/chip budget so all three fit at any card width. */
.ac-legacy-popup__logos--multi .ac-legacy-popup__logo-chip{
  max-width:168px !important;padding:12px 14px !important;}
.ac-legacy-popup__logos--multi .ac-legacy-popup__logo{
  height:21px !important;max-height:21px !important;}
.ac-legacy-popup__logos--multi{gap:4px 10px !important;}
.ac-legacy-popup__logos--multi .ac-legacy-popup__oldstack{gap:6px !important;}

/* Logo-row geometry, applied to EVERY popup so single- and multi-brand cards
   share one layout. Each wrap is a 2-row grid: row 1 holds the chip(s) and
   flexes, row 2 holds the label. Stretching both wraps to the tallest puts the
   labels on a shared baseline and centres every chip in its own row, so the
   arrow only has to clear the label block to sit on the chip centreline. */
.ac-legacy-popup__logos{align-items:stretch !important;
  /* Pin the logo-row height so a multi-brand row (smaller chips, see the budget
     rule below) cannot make its popup 9px shorter than the rest. 120px is the
     single-brand row's natural height, measured. */
  min-height:120px !important;}
.ac-legacy-popup__logo-wrap{
  display:grid !important;grid-template-rows:1fr auto !important;
  align-items:center !important;justify-items:center !important;gap:8px !important;
  /* Flex items default to min-width:auto and refuse to shrink below content.
     On a 558px card the two wraps + arrow + gaps demanded 630px and the row
     overflowed 36px. min-width:0 lets them give way; the chip caps keep the
     marks from ever growing past their design size. */
  min-width:0 !important;}
.ac-legacy-popup__logo-wrap > .ac-legacy-popup__logo-chip,
.ac-legacy-popup__logo-wrap > .ac-legacy-popup__oldstack{align-self:center !important;}
.ac-legacy-popup__logo-label{align-self:end !important;margin:0 !important;}
.ac-legacy-popup__arrow{align-self:center !important;margin:0 2px 21px !important;}

/* Uniform popup height: the headline is the only remaining variable block
   (measured 37px at one line, 74 at two, 110 at three). Reserve the tallest so
   the logo row, arrow and CTA land at the same Y in every popup. */
.ac-legacy-popup__headline{
  min-height:110px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;}
@media(max-width:640px){
  /* Arithmetic, not vibes. At 390px the row is 238px, but a fixed logo HEIGHT
     lets a wide wordmark compute a huge width -- UB is 300x29, so at 18px tall
     it still demanded 185px, and row scrollWidth hit 310. Height-capping cannot
     fix a width problem. So on mobile constrain by WIDTH: give each wrap an
     equal flex share of the row, let the chip fill it, and let the image scale
     its height to whatever that width implies (max-height only as a ceiling). */
  .ac-legacy-popup__logos{gap:4px 8px !important;flex-wrap:nowrap !important;}
  .ac-legacy-popup__logo-wrap{flex:1 1 0 !important;min-width:0 !important;}
  .ac-legacy-popup__logo-chip{
    width:100% !important;max-width:100% !important;min-width:0 !important;
    padding:8px 8px !important;}
  .ac-legacy-popup__logo{
    width:100% !important;max-width:100% !important;
    height:auto !important;max-height:22px !important;
    object-fit:contain !important;}
  .ac-legacy-popup__arrow{flex:0 0 auto !important;margin:0 0 18px !important;}
  .ac-legacy-popup__arrow-svg{width:20px !important;}
  .ac-legacy-popup__logo-label{font-size:9px !important;letter-spacing:.8px !important;}
}

/* ---- production-only ---- */
/* Sit just UNDER the cookie-consent banner (.acconsent-banner, z 2147483000) so consent
   controls always stay usable; still far above the fixed header (z 214748364). */
.ac-legacy-popup-overlay{z-index:2147482990 !important;}
/* The theme styles every h2 at 48px !important; keep the popup's own headline size. */
.ac-legacy-popup .ac-legacy-popup__headline{font-size:32px !important;line-height:1.15 !important;}
@media (max-width:600px){.ac-legacy-popup .ac-legacy-popup__headline{font-size:21px !important;line-height:1.12 !important;}}
@media (max-width:640px){.ac-legacy-popup .ac-legacy-popup__headline{min-height:0 !important;}}
.ac-legacy-popup img{box-shadow:none !important;border-radius:0 !important;}
/* v1.0.2 (Adam 2026-09-29): on phones the combined UB + Cimat row squeezed both old logos into
   one small slot. UB's wordmark is 10:1, so at ~41px wide it drew ~4px tall. Phones only: give
   the "Formerly" side more of the row and stack the two old logos, so each gets the full width. */
@media (max-width:640px){
  .ac-legacy-popup__logos--multi .ac-legacy-popup__logo-wrap--old{flex:1 1 0 !important;}
  .ac-legacy-popup__logos--multi .ac-legacy-popup__logo-wrap--new{flex:1 1 0 !important;}
  .ac-legacy-popup__logos--multi .ac-legacy-popup__oldstack{flex-direction:column !important;align-items:stretch !important;
    justify-self:stretch !important;width:100% !important;gap:4px !important;}
  .ac-legacy-popup__logos--multi .ac-legacy-popup__oldstack > .ac-legacy-popup__logo-chip{
    width:100% !important;max-width:100% !important;padding:6px 8px !important;}
  .ac-legacy-popup__logos--multi .ac-legacy-popup__logo{max-height:20px !important;}
}
/* v1.0.3 generic popup: one destination mark, no label, chip sized to the logo at every width. */
.ac-legacy-popup__logos--generic{min-height:0 !important;}
.ac-legacy-popup__logos--generic .ac-legacy-popup__logo-wrap{flex:0 0 auto !important;grid-template-rows:auto !important;}
.ac-legacy-popup__logos--generic .ac-legacy-popup__logo-chip{width:auto !important;max-width:260px !important;padding:14px 22px !important;}
.ac-legacy-popup__logos--generic .ac-legacy-popup__logo{width:auto !important;height:26px !important;max-height:26px !important;}
@media (max-width:640px){
  .ac-legacy-popup__logos--generic .ac-legacy-popup__logo-wrap{flex:0 0 auto !important;}
  .ac-legacy-popup__logos--generic .ac-legacy-popup__logo-chip{width:auto !important;max-width:220px !important;padding:10px 16px !important;}
  .ac-legacy-popup__logos--generic .ac-legacy-popup__logo{width:auto !important;height:22px !important;max-height:22px !important;}
}