:root{
  --edge: 60px;
  --dot: 72px;

  --gap: 14px;
  --pearl: 36px;

  --nav-cover: 120px;
  --active-ring: rgba(120,120,120,0.55);

  --green: #2f8f00;
  --pink:  #f6a0c4;
  --blue:  #0a8fb8;
  --yellow:#f0ef6a;
  --pulse: #b8b8b8;
}

.eva-home{
  min-height: 100vh;
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* Landing background image */
.eva-landing::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("./bg.png") center/cover no-repeat;
  z-index: 0;
  transition: opacity .6s ease;
}
/* Once opened (overview or iframe), fade background away */
body.eva-open .eva-landing::before{ opacity: 0; pointer-events: none; }

/* Overview (WordPress content) */
.eva-overview{
  position: relative;
  z-index: 1;
  display: none;
  padding: 120px 24px;
}
body.eva-open .eva-overview{ display:block; }
body.eva-iframe .eva-overview{ display:none; }

.eva-overview-inner{
  max-width: 980px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.6;
  color: #222;
}
.eva-overview-inner h1{ font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 18px; line-height: 1.15; }
.eva-overview-inner h2{ font-size: clamp(20px, 2.2vw, 28px); margin: 26px 0 10px; line-height: 1.2; }
.eva-overview-inner h3{ font-size: 20px; margin: 22px 0 10px; line-height: 1.2; }
.eva-overview-inner p{ margin: 0 0 14px; color:#333; }
.eva-overview-inner a{ color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.eva-overview-inner .wp-block-image img{ border-radius: 0; }

/* iFrame layer */
.eva-iframe-layer{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 160px; /* desktop side safe */
  background: #fff;
}
.eva-iframe-layer.is-open{ display:block; }
.eva-iframe-layer iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* White band covering Evagic top nav (only when iframe visible) */
.eva-topband{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 0;
  background: #fff;
  z-index: 2; /* above iframe */
  pointer-events: none;
  transition: height .35s ease;
}
body.eva-iframe .eva-topband{
  height: var(--nav-cover);
  pointer-events: auto; /* blocks clicks only inside band */
}

/* Overlay container does NOT block iframe; only dots are clickable */
.eva-overlay{
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Dots */
.eva-corner{
  position: absolute;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  pointer-events: auto;
  border: 0;
  padding: 0;
  cursor: pointer;

  transition:
    top 600ms ease,
    right 600ms ease,
    bottom 600ms ease,
    left 600ms ease,
    width 600ms ease,
    height 600ms ease,
    transform 600ms ease,
    box-shadow 200ms ease,
    opacity 200ms ease;
  will-change: top,right,bottom,left,width,height,transform;
}

/* No hover/focus ring */
.eva-corner:hover{ box-shadow: none; }
.eva-corner:focus, .eva-corner:focus-visible{ outline: none; box-shadow: none; }

/* Active ring (now reliable again) */
.eva-corner.is-active{
  box-shadow: 0 0 0 6px var(--active-ring);
}

/* Corner positions */
.tl{ top: var(--edge); left: var(--edge); }
.tr{ top: var(--edge); right: var(--edge); }
.bl{ bottom: var(--edge); left: var(--edge); }
.br{ bottom: var(--edge); right: var(--edge); }

/* Colors */
.green{ background: var(--green); }
.pink{ background: var(--pink); }
.blue{ background: var(--blue); }
.yellow{ background: var(--yellow); }

/* Disable dots until opened (landing) */
.eva-landing .eva-dot{
  pointer-events: none;
  opacity: .92;
}
body.eva-open .eva-dot{
  pointer-events: auto;
  opacity: 1;
}

/* Grey center dot (strong pulse) */
.eva-center-btn{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--pulse);
  border: none;
  cursor: pointer;
  z-index: 4;
  animation: pulseStrong 1.2s ease-out infinite;
}
.eva-center-btn::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  box-shadow: 0 0 0 0 rgba(184,184,184,.75);
  animation: pulseRing 1.2s ease-out infinite;
}
@keyframes pulseStrong{
  0%{ transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
  45%{ transform: translate(-50%,-50%) scale(1.08); filter: brightness(1.07); }
  100%{ transform: translate(-50%,-50%) scale(1); filter: brightness(1); }
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(184,184,184,.75); opacity: 1; }
  70%{ box-shadow:0 0 0 30px rgba(184,184,184,0); opacity: .15; }
  100%{ box-shadow:0 0 0 0 rgba(184,184,184,0); opacity: 0; }
}
.eva-center-btn.is-hidden{ display:none; }

/* Mobile: pearl chain on top (yellow rightmost). iFrame full width. */
@media (max-width: 768px){
  .eva-iframe-layer{ padding: 0; }

  body.eva-open .eva-corner{
    width: var(--pearl);
    height: var(--pearl);
    top: var(--gap);
    bottom: auto !important;
    left: auto !important;
  }

  body.eva-open .tl,
  body.eva-open .tr,
  body.eva-open .bl,
  body.eva-open .br{
    left: auto !important;
    bottom: auto !important;
  }

  /* right-to-left: yellow, blue, pink, green */
  body.eva-open .br{ right: var(--gap); }
  body.eva-open .bl{ right: calc(var(--gap) + 1*(var(--pearl) + var(--gap))); }
  body.eva-open .tr{ right: calc(var(--gap) + 2*(var(--pearl) + var(--gap))); }
  body.eva-open .tl{ right: calc(var(--gap) + 3*(var(--pearl) + var(--gap))); }

  /* Give overview content some top breathing room so it doesn't sit under pearls */
  .eva-overview{ padding-top: calc(var(--nav-cover) + 24px); }
}


/* --- TYPO TUNING (Evagic-like) --- */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.eva-overview{
  background:#fff;
}

.eva-overview-inner{
  max-width: 980px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: #2a2a2a;
}

.eva-overview-inner h1,
.eva-overview-inner h2{
  color:#222;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.eva-overview-inner h1{
  font-size: clamp(30px, 3.6vw, 48px);
  margin: 0 0 18px;
}

.eva-overview-inner h2{
  font-size: clamp(22px, 2.4vw, 32px);
  margin: 36px 0 12px;
}

.eva-overview-inner h3{
  color: var(--green);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  margin: 30px 0 12px;
}

.eva-overview-inner p{
  margin: 0 0 16px;
  color:#2f2f2f;
}

.eva-overview-inner a{
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.eva-overview-inner ul,
.eva-overview-inner ol{
  padding-left: 1.2em;
  margin: 0 0 16px;
}

.eva-overview-inner li{ margin: 0 0 6px; }

.eva-overview-inner .wp-block-image{
  margin: 0 0 22px;
}

.eva-overview-inner .wp-block-image img{
  width: 100%;
  height: auto;
  display:block;
}

/* Gutenberg button block -> Evagic pill */
.eva-overview-inner .wp-block-button__link{
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.eva-overview-inner .wp-block-button__link:hover{
  filter: brightness(0.97);
}


/* --- COLOR SYSTEM (Site Colors) --- */
:root{
  --green: #2f8f00;
  --pink:  #f6a0c4;
  --blue:  #0a8fb8;
  --yellow:#f0ef6a;
}

/* Headings always green */
.eva-overview-inner h1,
.eva-overview-inner h2,
.eva-overview-inner h3{
  color: var(--green);
}

/* Button base */
.eva-overview-inner .wp-block-button__link{
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  color:#222;
}

/* Color variants via block styles */
.eva-overview-inner .wp-block-button.is-style-green .wp-block-button__link{ background: var(--green);  color:#fff; }
.eva-overview-inner .wp-block-button.is-style-pink .wp-block-button__link{ background: var(--pink);   }
.eva-overview-inner .wp-block-button.is-style-blue .wp-block-button__link{ background: var(--blue);   color:#fff; }
.eva-overview-inner .wp-block-button.is-style-yellow .wp-block-button__link{ background: var(--yellow); }

.eva-overview-inner .wp-block-button__link:hover{
  filter: brightness(0.96);
}

/* HEADINGS GREEN ENFORCE */
.eva-overview-inner h1,
.eva-overview-inner h2,
.eva-overview-inner h3,
.eva-overview-inner .wp-block-heading{
  color: var(--green) !important;
}

/* BUTTON STYLE FALLBACK */
.eva-overview-inner .is-style-green .wp-block-button__link{ background: var(--green); color:#fff; }
.eva-overview-inner .is-style-pink .wp-block-button__link{ background: var(--pink); color:#222; }
.eva-overview-inner .is-style-blue .wp-block-button__link{ background: var(--blue); color:#fff; }
.eva-overview-inner .is-style-yellow .wp-block-button__link{ background: var(--yellow); color:#222; }

/* --- DESKTOP OVERVIEW LAYOUT (between dots, Evagic-like max width) --- */
@media (min-width: 769px){
  /* leave the same "safe zone" as the iframe so dots never overlap */
  .eva-overview{
    padding-left: 160px;
    padding-right: 160px;
  }
  /* Evagic-like centered content width */
  .eva-overview-inner{
    max-width: 1040px;
  }
}

/* HEADINGS GREEN ENFORCE v2 (override editor-set colors) */
.eva-overview-inner h1,
.eva-overview-inner h2,
.eva-overview-inner h3,
.eva-overview-inner .wp-block-heading,
.eva-overview-inner .wp-block-heading *{
  color: var(--green) !important;
}