/* 
====================================================================
    BELLA RIVA — INDEX TEXT WRAPPING & LAYOUT FIX
    Target: index_bella.html
    Focus: Preventing bad line breaks and tight text wrapping
====================================================================
*/

/* --- 1. Global Typography Balancing --- */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance; /* Modern browser support for better line distribution */
    word-break: keep-all; /* Keep words together in headings */
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty; /* Prevent widows in paragraphs */
}

/* --- 2. Header & Main Navigation --- */
.main-menu .navigation > li {
    margin: 0px 22px !important; /* Balanced spacing */
}

.main-menu .navigation > li > a {
    white-space: nowrap; /* Never wrap menu items */
    display: block;
}

@media only screen and (max-width: 1250px) {
    .main-menu .navigation > li {
        margin: 0px 12px !important; /* Slightly tighter for mid-size screens */
    }
    .main-menu .navigation > li > a {
        font-size: 15px;
    }
}

/* --- 3. Hero Section (Banner) --- */
.banner-carousel .content-box {
    max-width: 850px; /* Room for the large Cormorant Garamond font */
}

.banner-carousel .content-box h1 {
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: 0.01em;
}

.banner-carousel .content-box p {
    max-width: 600px; /* Keep description compact and elegant */
    margin-bottom: 35px;
}

/* --- 4. Section Titles (Global) --- */
.main____title h1 {
    line-height: 1.2;
    display: inline-block;
    width: 100%;
}

.main____title h1 span {
    white-space: nowrap; /* Keep "Của Chúng Tôi", "Bella Riva", etc. together */
}

/* Specific fix for Story section title */
.about__us .main____title h1 {
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
}

/* --- 5. Content Cards & Services --- */
.food___text {
    padding-right: 20px; /* Breathe room */
}

.food___text h6 {
    white-space: nowrap;
    font-size: 22px;
    margin-bottom: 8px;
}

.food___text p {
    line-height: 1.6;
    max-width: 320px; /* Prevent text from spanning too wide in cards */
}

/* --- 6. Booking Section & Tabs --- */
.tab-btn .tab___all {
    white-space: nowrap;
    padding: 0 15px;
    display: inline-block;
}

.tab___left__data h1 {
    font-size: 48px;
    line-height: 1.1;
}

.tab___left__data h1 span {
    white-space: nowrap;
}

/* --- 7. Blog / News Titles --- */
.news-block-one .lower-content h4 a {
    display: block;
    line-height: 1.3;
    min-height: 2.6em; /* Ensure alignment between cards with different title lengths */
}

.news-block-one .lower-content .short__des p {
    line-height: 1.6;
    max-width: 90%;
}

/* --- 8. Footer Menu & Content --- */
.footer__menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 40px; /* Controlled spacing between items */
}

.footer__menu ul li {
    margin: 0 !important; /* Use gap instead */
}

.footer__menu ul li a {
    white-space: nowrap;
}

.footer___title__text p {
    line-height: 1.7;
}

/* --- 9. Mobile Responsiveness Fixes --- */
@media only screen and (max-width: 767px) {
    .banner-carousel .content-box h1 {
        font-size: 42px !important;
        max-width: 100%;
    }
    
    .main____title h1 {
        font-size: 34px !important;
    }
    
    .about__us .main____title h1 {
        max-width: 100%;
    }

    .tab___left__data h1 {
        text-align: center;
        font-size: 36px !important;
    }

    .food___text {
        text-align: center;
        padding-right: 0;
    }
    
    .food___text p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 10. Additional Spacing Insurance --- */
.theme-btn-one, .theme-btn-two {
    white-space: nowrap;
}