.feature-boxes .wp-block-column > .wp-block-group,
.feature-boxes .wp-block-group.alignwide > .wp-block-group {
    border: 1.5px solid #E2E8F0;
    border-radius: 22px !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.feature-boxes .wp-block-column > .wp-block-group:hover,
.feature-boxes .wp-block-group.alignwide > .wp-block-group:hover {
    transform: translateY(-4px);
    border-color: var(--wp--preset--color--primary, #0265DC) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
}

/* Icon Block Styles */


/* SVG color transitions */
.feature-boxes .wp-block-column > .wp-block-group .icon-container svg {
    transition: fill 0.3s ease;
}
.feature-boxes .wp-block-column > .wp-block-group:hover .icon-container svg {
    fill: #FFFFFF !important;
}

/* Tint Button Styles */
.wp-block-button.is-style-secondary-button .wp-block-button__link {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Increase gap between Navigation items */
.wp-block-navigation__container {
    gap: 2rem !important; /* Forces wider spacing between links */
}

/* Make navigation links larger and bolder */
.wp-block-navigation .wp-block-navigation-item__content {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Brand Alt Button Style (White background, Blue border, Blue text) */
.wp-block-button.is-style-button-brand-alt .wp-block-button__link {
    background-color: #ffffff !important;
    border: 2px solid var(--wp--preset--color--primary, #5344F4) !important;
    color: var(--wp--preset--color--primary, #5344F4) !important;
    transition: all 0.3s ease;
}

.wp-block-button.is-style-button-brand-alt .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary, #5344F4) !important;
    color: #ffffff !important;
}

/* Custom Grid Cell Transparency (20% Opacity) */
/* Option 1: Add this to the parent Grid block to affect all children */
.transparent-grid-cells > * {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Option 2: Add this to individual grid cells (white background 20% opacity) */
.bg-white-20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Option 3: Add this to individual grid cells (brand blue background 20% opacity) */
.bg-brand-20 {
    background-color: rgba(83, 68, 244, 0.2) !important;
}

/* Option 4: Make ANY background color you set in the editor look 20% transparent */
.bg-opacity-20 {
    position: relative;
    z-index: 1;
    isolation: isolate; /* Creates a stacking context */
}
.bg-opacity-20::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ffffff; /* Page background color */
    opacity: 0.8; /* Blocks 80% of the color behind it, leaving 20% */
    z-index: -1;
    border-radius: inherit; /* Matches your block's border radius */
    pointer-events: none;
}

/* ========================================= */
/* The Merlin Difference Section (5-columns) */
/* ========================================= */

.merlin-difference-section {
    position: relative;
    background-color: transparent !important;
}

/* Utility class for positioning decorative background shapes at the bottom right of the 1200px content area */
.bg-shape-bottom-right {
    background-size: 256px !important; /* Size reduced */
    background-position: right calc(50vw - 1000px) bottom -40px !important;
    background-repeat: no-repeat !important;
}

.bg-shape-top-right {
    background-size: 256px !important;
    background-position: right calc(50vw - 1000px) top -40px !important;
    background-repeat: no-repeat !important;
}

.bg-shape-bottom-left {
    background-size: 256px !important; /* Size reduced */
    background-position: left calc(50vw - 1000px) bottom -40px !important;
    background-repeat: no-repeat !important;
}

/* Utility class for the Merlin Cup section to raise it */
.bg-merlin-cup {
    position: relative;
    z-index: 99 !important;
}

/* Force the image in the right column to fill the entire height and remaining width */
.bg-merlin-cup .wp-block-column:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.bg-merlin-cup .wp-block-column:last-child .wp-block-image {
    display: flex !important;
    flex-grow: 1 !important;
    margin: 0 !important;
    height: 100% !important;
}

.bg-merlin-cup .wp-block-column:last-child .wp-block-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-top-right-radius: var(--wp--preset--border-radius--lg) !important;
    border-bottom-right-radius: var(--wp--preset--border-radius--lg) !important;
    /* Smooth fade transition on the left edge */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%) !important;
    mask-image: linear-gradient(to right, transparent 0%, black 25%) !important;
}

/* Utility classes to align background image without stretching (Applies to Desktop only to prevent mobile deformation) */
@media (min-width: 768px) {
    .bg-right-no-stretch,
    .bg-right-no-stretch .wp-block-cover__image-background {
        background-repeat: no-repeat !important;
        background-position: right center !important;
        background-size: auto 100% !important;
    }
    .bg-right-no-stretch img.wp-block-cover__image-background {
        width: auto !important;
        height: 100% !important;
        object-position: right center !important;
        left: auto !important;
        right: 0 !important;
    }

    .bg-left-no-stretch,
    .bg-left-no-stretch .wp-block-cover__image-background {
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: auto 100% !important;
    }
    .bg-left-no-stretch img.wp-block-cover__image-background {
        width: auto !important;
        height: 100% !important;
        object-position: left center !important;
        right: auto !important;
        left: 0 !important;
    }
}

/* Utility class to create a seamless gradient fade over a background image, matching the Secondary color */
.bg-fade-secondary {
    position: relative;
}

.bg-fade-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradient from solid secondary color on the left to transparent on the right */
    background: linear-gradient(to right, var(--wp--preset--color--secondary) 45%, transparent 85%);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* Ensure the text and content stay above the gradient fade */
.bg-fade-secondary > * {
    position: relative;
    z-index: 1;
}

/* Utility classes to fade out the edges of a Cover block's background image */
.bg-mask-fade-left .wp-block-cover__image-background {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%) !important;
    mask-image: linear-gradient(to right, transparent 0%, black 30%) !important;
}

.bg-mask-fade-right .wp-block-cover__image-background {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 30%) !important;
    mask-image: linear-gradient(to left, transparent 0%, black 30%) !important;
}

/* Utility class to dim Cover block background images on mobile (20% opacity / 80% coverage) for better text readability */
@media (max-width: 767px) {
    .mobile-cover-dim .wp-block-cover__image-background {
        opacity: 0.2 !important;
    }
}

/* Utility classes to fade out the edges of a standard Image block */
.image-fade-right img {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 25%) !important;
    mask-image: linear-gradient(to left, transparent 0%, black 25%) !important;
}

.image-fade-left img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%) !important;
    mask-image: linear-gradient(to right, transparent 0%, black 25%) !important;
}

/* Alternative organic blob background (used for Curriculum / How each lesson works) */
.blob-shape-alt {
    position: relative;
    background-color: transparent !important;
}

.blob-shape-alt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1%;
    right: 1%;
    bottom: 0;
    z-index: -2;
    background-color: var(--wp--preset--color--secondary, #F5F7F6);
    /* A new organic, hand-drawn blob shape slightly different from merlin-difference */
    border-radius: 90px 180px 70px 150px / 150px 70px 180px 90px;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
}

/* Remove default underline from all navigation links */
.wp-block-navigation-item__content {
    text-decoration: none !important;
}

/* Hand-drawn active menu underline using SVG */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation-item.is-active-page > .wp-block-navigation-item__content,
.wp-block-navigation-item.current_page_parent > .wp-block-navigation-item__content,
body.single-post .wp-block-navigation-item a[href*="/blog/"] {
    position: relative;
    display: inline-block;
}

.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after,
.wp-block-navigation-item.is-active-page > .wp-block-navigation-item__content::after,
.wp-block-navigation-item.current_page_parent > .wp-block-navigation-item__content::after,
body.single-post .wp-block-navigation-item a[href*="/blog/"]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -5%;
    width: 110%;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15' preserveAspectRatio='none'%3E%3Cpath d='M2 10 Q 20 2, 40 8 T 75 5 T 98 12' fill='none' stroke='%23799881' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* ==========================================================================
   Merlin Story Collage (Visual Collage for Right Column)
   ========================================================================== */

.merlin-story-collage {
    position: relative;
    /* Use clamp for responsive height: max 620px, min 400px on smaller screens */
    min-height: clamp(400px, 50vw, 620px);
}

.merlin-story-photo-main {
    position: absolute;
    top: 10px; /* Shifted slightly up */
    left: 20px;
    width: 62%;
    border-radius: 24px;
    overflow: hidden;
    z-index: 3;
}

.merlin-story-photo-secondary {
    position: absolute;
    right: 20px;
    top: 45%; /* Use top percentage to guarantee it climbs up and overlaps the first image */
    width: 60%;
    border-radius: 22px;
    overflow: hidden;
    z-index: 4;
    /* Added a soft white shadow to the top-left edge to make the overlapping layer stand out visually */
    box-shadow: -15px -15px 40px rgba(255, 255, 255, 0.6);
}

/* Ensure images inside figure fill the rounded borders without stretching */
.merlin-story-photo-main img,
.merlin-story-photo-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merlin-story-quote {
    position: absolute;
    top: 65px;
    right: 10px;
    width: 170px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f8f8f3;
    border: 1px solid #d9dfda;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    text-align: center;
    z-index: 5;
}

.merlin-story-message {
    position: absolute;
    left: 0;
    bottom: 45px;
    width: 190px;
    min-height: 220px;
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 26px;
    text-align: center;
    z-index: 5;
}

/* Mobile responsive fallback: remove absolute positioning and stack nicely */
@media (max-width: 781px) {
    .merlin-story-collage {
        min-height: 0;
        display: grid;
        gap: 20px;
    }

    .merlin-story-photo-main,
    .merlin-story-photo-secondary,
    .merlin-story-quote,
    .merlin-story-message {
        position: static;
        width: 100%;
    }

    .merlin-story-quote {
        aspect-ratio: auto;
        border-radius: 20px;
    }
}

/* Organic peanut/blob shape background using Brand Accent (#E8F0ED) */
.bg-shape-organic-blob {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E8F0ED' d='M90,20 C130,10 170,20 185,60 C195,90 180,120 150,140 C130,155 120,160 100,175 C70,195 20,185 10,145 C0,110 20,80 40,60 C60,40 70,25 90,20 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent !important;
}

.merlin-difference-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1%;
    right: 1%;
    bottom: 0;
    z-index: -2;
    background-color: #F6F9F3; /* Slightly stronger green tint for visibility */
    /* Hand-drawn organic blob shape */
    border-radius: 60px 140px 40px 160px / 160px 60px 140px 40px;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
}

/* Push any SVG images in this section to the bottom */
.merlin-difference-section svg {
    position: relative;
    z-index: -1 !important;
}



/* 5 Column Grid Layout */
@media (min-width: 1024px) {
    .merlin-difference-columns {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1.5rem !important;
    }
}

/* Icon Styling */
.merlin-diff-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
}

.merlin-diff-icon svg {
    width: 100%;
    height: 100%;
    stroke: #2E5834; /* Dark green stroke */
    z-index: 2;
    position: relative;
}

/* The offset light green blob shadow for the icons */
.merlin-diff-icon::before {
    content: "";
    position: absolute;
    top: 15%;
    left: 25%;
    width: 70%;
    height: 70%;
    background-color: #E2ECD8; /* Light green shadow */
    border-radius: 50%;
    z-index: 1;
    transition: all 0.3s ease;
}

.merlin-difference-section .wp-block-column:hover .merlin-diff-icon::before {
    transform: translate(-10%, -10%) scale(1.1);
    background-color: #D4E3C5;
}