/* ECIS layout corrections loaded after component styles. */

/*
 * Editable Home/landing content should remain truly full-width. Gutenberg's
 * post-content wrapper can otherwise introduce its own gap/margins.
 */
.ecis-page-home,
.ecis-page-home__content,
.ecis-landing-page,
.ecis-landing-page__content {
  width: 100%;
  max-width: none !important;
  margin-block-start: 0 !important;
  padding: 0;
}

.ecis-page-home__content > :first-child,
.ecis-landing-page__content > :first-child {
  margin-block-start: 0 !important;
}

/* Reveal animation for normal Gutenberg blocks.
 * A CSS class is used instead of custom data attributes so blocks stay valid
 * and fully editable after they are saved to post_content.
 */
.ecis-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.8,.2,1);
}

.ecis-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/*
 * Header logo is made from native Gutenberg Image blocks so both light and
 * dark assets can be replaced visually in the ECIS Header template part.
 */
.ecis-brand {
  display: grid !important;
  grid-template-areas: "logo";
  align-items: center;
  width: fit-content;
  margin: 0 !important;
  line-height: 0;
}

.ecis-brand__image {
  grid-area: logo;
  width: auto;
  margin: 0 !important;
}

.ecis-brand__image img {
  display: block;
  width: clamp(150px, 16vw, 220px);
  height: auto;
  transition: width .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

.ecis-brand__image--light { display: block; }
.ecis-brand__image--dark { display: none; }

:root[data-theme="light"] .ecis-brand__image--light { display: none; }
:root[data-theme="light"] .ecis-brand__image--dark { display: block; }
:root[data-theme="dark"] .ecis-brand__image--light { display: block; }
:root[data-theme="dark"] .ecis-brand__image--dark { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .ecis-brand__image--light { display: none; }
  :root:not([data-theme]) .ecis-brand__image--dark { display: block; }
}

.ecis-site-header.is-scrolled .ecis-brand__image img {
  width: clamp(135px, 13vw, 185px);
}

/*
 * WordPress flow-layout spacing adds block margins to every process card
 * except the first one. Inside CSS Grid that makes card 01 appear taller.
 * Reset the Gutenberg margins and let Grid stretch the whole row evenly.
 */
.ecis-process__grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr;
}

.ecis-process__grid > .process-card,
.ecis-process__grid > .process-card + .process-card {
  height: auto !important;
  min-height: 430px;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  align-self: stretch;
}

/*
 * A block-theme template part wraps the actual .ecis-site-header.
 * Sticky positioning on the inner group is constrained by that wrapper,
 * so the wrapper itself must own the sticky behaviour.
 */
header.wp-block-template-part:has(.ecis-site-header) {
  position: sticky;
  top: 0;
  z-index: 999;
  margin-block-start: 0;
}

header.wp-block-template-part:has(.ecis-site-header) > .ecis-site-header {
  position: relative !important;
  top: auto !important;
}

/* Keep the WordPress admin toolbar from covering the sticky navigation. */
body.admin-bar header.wp-block-template-part:has(.ecis-site-header) {
  top: 32px;
}

@media (max-width: 782px) {
  .ecis-brand__image img {
    width: clamp(132px, 38vw, 170px);
  }

  .ecis-site-header.is-scrolled .ecis-brand__image img {
    width: clamp(124px, 34vw, 155px);
  }

  .ecis-process__grid {
    grid-auto-rows: auto;
  }

  .ecis-process__grid > .process-card,
  .ecis-process__grid > .process-card + .process-card {
    min-height: 0;
  }

  body.admin-bar header.wp-block-template-part:has(.ecis-site-header) {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecis-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}