/* =========================================
   HERO TYPOGRAPHY (UNDERLINE + ALIGNMENT FIX)
   ========================================= */

/* --- CONTAINER --- */
.hero-text-wrapper {
    text-align: left;
}

/* --- 1. MAIN HEADLINE (H1) --- */
.hero-text-wrapper .hero-main-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.9 !important;
    text-transform: none !important;
    font-family: 'Delight', sans-serif !important;
}

/* "Bali Laundry" - With Pink Underline */
.hero-text-wrapper .line-1 {
    display: block !important;
    font-size: 65px !important; 
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -1px;
    margin-bottom: 1px !important;
    
    /* PINK DECORATION */
    text-decoration: underline !important;
    text-decoration-color: #ff4f81 !important;
    text-decoration-thickness: 5px !important;
    text-underline-offset: 4px !important;
}

/* "Service Near Me" - No Underline */
.hero-text-wrapper .line-2 {
    display: block !important;
    font-size: 65px !important; 
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -1px;
    margin-bottom: -10px !important;
}

/* --- 2. SUB HEADLINE (H2) --- */
.hero-text-wrapper .hero-sub-title {
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
}

.hero-text-wrapper .promise-text {
    display: block !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-top: 0px !important;
    line-height: 1.1 !important;
}

/* --- 3. ROTATION ROW --- */
.hero-text-wrapper .location-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important; 
    gap: 8px !important;
    margin-top: 0px !important;
    flex-wrap: nowrap !important; 
}

/* "In" Word - MANUAL BASELINE ALIGNMENT */
.hero-text-wrapper .word-in {
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: -16px !important; /* Aligns with capital letters (a,b,c not y,j) */
}

/* Rotating Words Container */
.hero-text-wrapper .rotating-words {
    position: relative !important;
    display: inline-block !important;
    height: 65px !important;
    width: 350px !important;
    min-width: 320px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

/* The Rotating Word (BRAND BLUE) */
.hero-text-wrapper .rotating-words .word {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-size: 65px !important; 
    font-weight: 800 !important; 
    line-height: 1 !important;
    color: #7D8DFF !important; 
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s !important;
    z-index: 1 !important;
}

/* Force hide all words that don't have is-visible class */
.hero-text-wrapper .rotating-words .word:not(.is-visible) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ONLY show when explicitly marked visible */
.hero-text-wrapper .rotating-words .word.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.6s ease, visibility 0s linear 0s !important;
    z-index: 2 !important;
}

/* --- TABLET RESPONSIVE --- */
@media (max-width: 1024px) {
    .hero-text-wrapper .line-1, 
    .hero-text-wrapper .line-2,
    .hero-text-wrapper .rotating-words .word { 
        font-size: 50px !important; 
    }
    
    .hero-text-wrapper .line-1 {
        margin-bottom: 0px !important;
        text-decoration-thickness: 4px !important;
    }
    
    .hero-text-wrapper .line-2 {
        margin-bottom: -8px !important;
    }
    
    .hero-text-wrapper .promise-text { 
        font-size: 28px !important; 
    }
    
    .hero-text-wrapper .rotating-words {
        height: 55px !important;
    }
    
    .hero-text-wrapper .word-in {
        font-size: 20px !important;
        top: -15px !important; /* Adjusted proportionally for tablet */
    }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 767px) {
    .hero-text-wrapper { 
        align-items: flex-start !important;
        text-align: left !important;
        padding-right: 20px !important;
    }
    
    .hero-text-wrapper .line-1 { 
        font-size: 32px !important; 
        line-height: 1.0 !important; 
        margin-bottom: -3px !important;
        text-decoration-thickness: 3px !important;
        text-underline-offset: 3px !important;
    }
    
    .hero-text-wrapper .line-2 { 
        font-size: 32px !important; 
        line-height: 1.0 !important; 
        margin-bottom: -8px !important;
    }
    
    .hero-text-wrapper .promise-text { 
        font-size: 16px !important; 
        margin-top: 5px !important;
    }
    
    .hero-text-wrapper .location-row {
        justify-content: flex-start !important;
    }
    
    .hero-text-wrapper .word-in { 
        font-size: 20px !important;
        line-height: 1 !important;
        top: -16px !important; /* Adjusted proportionally for mobile */
    }
    
    .hero-text-wrapper .rotating-words {
        height: 45px !important; 
        width: 200px !important;
        overflow: hidden !important;
    }
    
    .hero-text-wrapper .rotating-words .word { 
        font-size: 35px !important; 
        left: 0 !important;
        transform: none !important;
    }
}