/* 
   hero-style.css
*/

/* ============================================
   UTILITIES
   ============================================ */

/* --- Hero Section Outer Container --- */
.merlin-hero {
  position: relative !important;
  border-radius: 0 !important; 
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: #f5f7f6; /* Base background color */
  overflow: hidden !important; /* Clips the overflowing circles */
  padding-bottom: 90px !important; /* Adjusted for lowered wave */
}

/* Clear z-index trapping on columns container so children participate in hero stacking */
.merlin-hero > *,
.merlin-hero .wp-block-columns {
  position: relative !important;
  z-index: auto !important;
}

/* Layer 1: Sage Green Blob on the Left (Relative to columns - Background layer) */
.merlin-hero .wp-block-columns::before {
  content: "";
  position: absolute;
  bottom: 0; /* Aligned to the very bottom */
  left: -400px;
  width: 900px;
  height: 900px;
  background: rgba(121, 152, 129, 0.15); /* Soft sage green overlay */
  border-radius: 50%; /* Perfect circle, half hidden off the left edge */
  z-index: 1 !important; /* Bottom background layer */
  pointer-events: none !important;
}

/* Layer 1.5: Light Green 800px Circle (Relative to columns - Background layer) */
.merlin-hero .wp-block-columns::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%; /* Moved right by 5% */
  transform: translate(-33%, -64%);
  width: 1100px;
  height: 1100px;
  background: #e9f0ed75; /* Lighter layered circle */
  border-radius: 50%; /* Perfect circle */
  z-index: 2 !important; /* Bottom background layer */
  pointer-events: none !important;
}

/* Layer 2: Right Column (Image): Below the White Wave (z-index 15) so the wave smoothly overlaps the bottom edge */
.merlin-hero .wp-block-columns .wp-block-column:last-child {
  position: relative !important;
  z-index: 5 !important; /* Strictly below the white wave (15) */
  margin-bottom: -30px !important; /* Extend image downwards so the wave slightly overlaps its bottom edge */
}

.merlin-hero .wp-block-columns .wp-block-column:last-child img,
.merlin-hero .wp-block-columns .wp-block-column:last-child figure,
.merlin-hero .wp-block-columns .wp-block-column:last-child .wp-block-group {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: 0 !important;
  display: block;
}

/* Layer 3: White S-Curve Wave Divider (ABOVE RIGHT IMAGE, BELOW LEFT TEXT) - Lowered by 50px */
.merlin-hero::after {
  content: "";
  position: absolute;
  bottom: -50px; /* Lowered by 50px */
  left: 0;
  width: 100%;
  height: 140px; /* Height of the wave */
  /* SVG Path: Low on left, curves high in middle, medium on right */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,120 L0,90 C400,90 400,10 750,10 C1000,10 1100,50 1200,50 L1200,120 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 15 !important; /* ABOVE right image (5), BELOW left text (30) */
  pointer-events: none !important;
}

/* Layer 4: Left Column (Text): On Top of background shapes and wave */
.merlin-hero .wp-block-columns .wp-block-column:first-child {
  position: relative !important;
  z-index: 30 !important;
}

.merlin-hero .wp-block-columns .wp-block-column:first-child .wp-block-group,
.merlin-hero .wp-block-columns .wp-block-column:first-child h1,
.merlin-hero .wp-block-columns .wp-block-column:first-child p {
  position: relative !important;
  z-index: 30 !important;
}

/* Layer 5: Hero Buttons: Topmost layer with guaranteed clickability */
.merlin-hero .wp-block-buttons,
.merlin-hero .wp-block-button,
.merlin-hero .wp-block-button__link {
  position: relative !important;
  z-index: 99 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* --- Hero Image Layout --- */
.merlin-hero-image {
  position: relative !important;
  border-radius: 0 0 30% 30% !important; /* Bottom-left and bottom-right are 30% */
  z-index: 0 !important; /* Stacking context for the underlay glow */
}

/* Glowing accent circle peeking from the left */
.merlin-hero-image::before {
  content: "";
  position: absolute;
  top: 25%;
  left: -30px;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(232, 240, 237, 0.4); /* #E8F0ED faded */
  box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.5); /* Softer white glow */
  z-index: 20; /* Placed over the image */
  pointer-events: none;
}

/* Top and Left glow/halo overlay over the image */
.merlin-hero-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Seamless left fade into background */
    linear-gradient(90deg, 
      #f5f7f6 0%, 
      rgba(245, 247, 246, 0.8) 10%, 
      rgba(245, 247, 246, 0.3) 25%, 
      transparent 45%
    ),
    /* Top glow */
    radial-gradient(100% 60% at top center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%),
    /* Bottom glow */
    radial-gradient(100% 40% at bottom center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%); 
  pointer-events: none;
  z-index: 10;
}

.merlin-hero-image img {
  border-radius: 0 0 30% 30% !important;
}