/* Comic book speech bubble style with fun font */

/* Import fun fonts */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Bungee&family=Fredoka:wght@400;700&display=swap');

/* Apply fun font to headline text */
.headline-text {
    font-family: 'Bangers', cursive !important;  /* Comic book style font */
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 2.8em !important;  /* Slightly larger for impact */
}

/* Alternative font options - uncomment one to try different styles */
/* .headline-text { font-family: 'Bungee', cursive !important; } */  /* Chunky retro style */
/* .headline-text { font-family: 'Fredoka', sans-serif !important; } */  /* Playful rounded style */

/* Override only the ::after to change triangle arrow to diamond */
.headline::after {
    /* Reset triangle border properties from earth.css */
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    
    /* Create our diamond speech tail - moved right */
    content: '' !important;
    position: absolute !important;
    bottom: -30px !important;
    left: 70px !important;  /* Moved right from 60px */
    width: 12px !important;
    height: 12px !important;
    background: linear-gradient(135deg, #ffcc00, #ff6699) !important;
    transform: rotate(45deg) translateX(0) !important;
    z-index: 999 !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-radius: 1px !important;
    display: block !important;
}

/* Second bubble trail - moved left to be midpoint */
.earth-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -135px !important;
    left: 165px !important;  /* Moved left from 180px to be midpoint */
    width: 10px !important;
    height: 10px !important;
    background: linear-gradient(135deg, #ffcc00, #ff6699) !important;
    transform: rotate(45deg) !important;
    z-index: 998 !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-radius: 2px !important;
}

/* Third bubble trail - keep as is */
.earth-menu::after {
    content: '' !important;
    position: absolute !important;
    top: -120px !important;
    left: 195px !important;  /* Keep original position */
    width: 8px !important;
    height: 8px !important;
    background: linear-gradient(135deg, #ffcc00, #ff6699) !important;
    transform: rotate(45deg) !important;
    z-index: 997 !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
    border-radius: 1px !important;
}

/* Ensure earth-menu is positioned */
.earth-menu {
    position: relative !important;
}

/* Responsive adjustments - FIXED FOR SMOOTH LINE */
@media (max-width: 768px) {
    .headline-text {
        font-size: 2.3em !important;
    }
    
    .headline::after {
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        bottom: -35px !important;  /* Lower on mobile */
        left: 55px !important;
        width: 10px !important;
        height: 10px !important;
        background: linear-gradient(135deg, #ffcc00, #ff6699) !important;
        transform: rotate(45deg) translateX(0) !important;
    }
    
    /* Create smooth diagonal line on tablet */
    .earth-menu::before {
        top: -115px !important;  /* Adjusted for smooth line */
        left: 70px !important;   /* Progressive movement right */
        width: 9px !important;
        height: 9px !important;
    }
    
    .earth-menu::after {
        top: -100px !important;  /* Adjusted for smooth line */
        left: 85px !important;   /* Progressive movement right */
        width: 7px !important;
        height: 7px !important;
    }
}

@media (max-width: 480px) {
    .headline-text {
        font-size: 1.8em !important;
    }
    
    .headline::after {
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        bottom: -28px !important;  /* Slightly higher */
        left: 30px !important;     /* More to the left */
        width: 8px !important;
        height: 8px !important;
        background: linear-gradient(135deg, #ffcc00, #ff6699) !important;
        transform: rotate(45deg) translateX(0) !important;
    }
    
    /* Move smaller diamonds FAR to the right side */
    .earth-menu::before {
        top: -75px !important;   /* Lower position */
        left: 120px !important;  /* Far to the right */
        width: 7px !important;
        height: 7px !important;
    }
    
    .earth-menu::after {
        top: -60px !important;   /* Even lower */
        left: 135px !important;  /* Even further right */
        width: 6px !important;
        height: 6px !important;
    }
}