/* ECIS targeted layout fixes.
 * Kept separate so homepage/design tweaks can continue without regressions.
 */

/* Prevent decorative elements and full-width effects from creating a page-level
 * horizontal scrollbar. `clip` avoids creating a new scroll container, which
 * keeps sticky positioning reliable.
 */
html,
body,
.wp-site-blocks {
  max-width: 100%;
  overflow-x: clip;
}

/* Header and footer content should use the exact same shell as homepage sections.
 * Their outer wrappers remain full width for backgrounds/borders, while the
 * actual content aligns with the page grid.
 */
.ecis-site-header__inner,
.ecis-site-footer__inner {
  width: min(var(--ecis-shell), calc(100vw - 64px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

.ecis-site-header__actions {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.ecis-site-header .wp-block-navigation {
  width: auto;
  max-width: 100%;
  margin-inline-start: auto;
}

/* The animated energy line in the sticky header used to scale past the viewport
 * when scrolled. Let the gradient motion provide the animation without changing
 * its physical width.
 */
.ecis-site-header::after,
.ecis-site-header.is-scrolled::after {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
}

/* Width percentages on these cards/nodes must include their padding and borders,
 * especially on mobile where 100% + padding otherwise causes overflow.
 */
.ecis-system-node,
.ecis-investment-card {
  box-sizing: border-box;
  max-width: 100%;
}

/* =========================================================
   ROBUST THEME-OWNED ICONS
   Decorative SVG saved inside page content can be stripped by WordPress KSES.
   These masks live in the theme, so the editable copy stays safe and the icons
   are always available on the frontend.
========================================================= */

.process-card__icon > svg,
.ecis-lifecycle-item__dot > svg {
  display: none !important;
}

.process-card__icon::before,
.ecis-lifecycle-item__dot::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-image: var(--ecis-icon-mask);
  mask-image: var(--ecis-icon-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.process-card__icon::before {
  width: 34px;
  height: 34px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.process-card:hover .process-card__icon::before,
.process-card.is-pointer-active .process-card__icon::before {
  transform: scale(1.06);
}

.ecis-process__grid > .process-card:nth-child(1) .process-card__icon {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 35V28L14 20L21 25L29 13L36 18L42 9M7 40H42'/%3E%3Ccircle cx='14' cy='20' r='2'/%3E%3Ccircle cx='29' cy='13' r='2'/%3E%3Ccircle cx='42' cy='9' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.ecis-process__grid > .process-card:nth-child(2) .process-card__icon {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='11' width='25' height='29' rx='4'/%3E%3Cpath d='M18 7H27M16 19H29M16 25H29M16 31H25M35 18L41 14M35 26H42M35 34L41 38'/%3E%3C/g%3E%3C/svg%3E");
}

.ecis-process__grid > .process-card:nth-child(3) .process-card__icon {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='15' width='12' height='18' rx='3'/%3E%3Cpath d='M8 24H18M30 24H40M24 7V15M24 33V41'/%3E%3Ccircle cx='8' cy='24' r='2'/%3E%3Ccircle cx='40' cy='24' r='2'/%3E%3Ccircle cx='24' cy='7' r='2'/%3E%3Ccircle cx='24' cy='41' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.ecis-process__grid > .process-card:nth-child(4) .process-card__icon {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 18A15 15 0 0 0 12 14M12 14V7M12 14H19M10 30A15 15 0 0 0 36 34M36 34V41M36 34H29M18 25L22 29L31 19'/%3E%3C/g%3E%3C/svg%3E");
}

.ecis-lifecycle-item__dot::before {
  width: 23px;
  height: 23px;
}

.ecis-lifecycle-track > .ecis-lifecycle-item:nth-child(1) .ecis-lifecycle-item__dot {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19V3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ecis-lifecycle-track > .ecis-lifecycle-item:nth-child(2) .ecis-lifecycle-item__dot {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M6 7v10h12V7M9 11h6M9 14h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ecis-lifecycle-track > .ecis-lifecycle-item:nth-child(3) .ecis-lifecycle-item__dot {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ecis-lifecycle-track > .ecis-lifecycle-item:nth-child(4) .ecis-lifecycle-item__dot {
  --ecis-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7a8 8 0 1 0 1 7M20 7v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   LIFECYCLE ALIGNMENT + ENERGY MOTION
========================================================= */

/* Gutenberg's flow layout adds a top margin to every sibling except the first.
 * Once the lifecycle wrapper becomes CSS Grid, that margin shifts items 2-4
 * downward. Reset it so all four icons, headings and descriptions share one row.
 */
.ecis-lifecycle-track {
  align-items: start;
}

.ecis-lifecycle-track > .ecis-lifecycle-item,
.ecis-lifecycle-track > .ecis-lifecycle-item + .ecis-lifecycle-item {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  align-self: start;
}

/* Animate only the energy line, never the layout itself. */
.ecis-lifecycle-track::before {
  background: linear-gradient(
    90deg,
    var(--ecis-energy-blue),
    var(--ecis-system-blue),
    var(--ecis-energy-green),
    var(--ecis-energy-blue)
  ) !important;
  background-size: 220% 100% !important;
  animation: ecis-lifecycle-energy-flow 5.5s linear infinite;
}

.ecis-lifecycle-item__dot {
  position: relative;
  isolation: isolate;
}

.ecis-lifecycle-item__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid rgba(74,202,116,.32);
  border-radius: inherit;
  opacity: 0;
  animation: ecis-lifecycle-pulse 3.2s ease-out infinite;
}

.ecis-lifecycle-item:nth-child(2) .ecis-lifecycle-item__dot::after { animation-delay: -.8s; }
.ecis-lifecycle-item:nth-child(3) .ecis-lifecycle-item__dot::after { animation-delay: -1.6s; }
.ecis-lifecycle-item:nth-child(4) .ecis-lifecycle-item__dot::after { animation-delay: -2.4s; }

/* Keep each lifecycle item's internal rhythm deterministic instead of inheriting
 * WordPress block-gap values that can vary between editor/global-style settings.
 */
.ecis-lifecycle-item > .ecis-lifecycle-item__dot {
  margin-block-start: 0 !important;
  margin-block-end: 24px !important;
}

.ecis-lifecycle-item > h3 {
  margin-block-start: 0 !important;
  margin-block-end: 10px !important;
}

.ecis-lifecycle-item > p {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

@keyframes ecis-lifecycle-energy-flow {
  from { background-position: 200% 50%; }
  to { background-position: -20% 50%; }
}

@keyframes ecis-lifecycle-pulse {
  0% { opacity: .55; transform: scale(.92); }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}

@media (max-width: 782px) {
  .ecis-site-header__inner,
  .ecis-site-footer__inner {
    width: min(var(--ecis-shell), calc(100vw - 36px)) !important;
  }
}

@media (max-width: 620px) {
  .ecis-system-node,
  .ecis-investment-card {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecis-lifecycle-track::before,
  .ecis-lifecycle-item__dot::after {
    animation: none !important;
  }
}