/* Typography Refinements - Prevent Orphans and Improve Readability */

/* 
 * Orphan Prevention
 * Prevents single words or very short lines at the end of paragraphs
 */

/* Modern approach: CSS text-wrap (Chrome 114+, Safari 17+) */
p, 
h1, h2, h3, h4, h5, h6,
.headline__description,
.section-text p,
.about-text p,
.content-text p {
    text-wrap: pretty; /* Balances text to prevent orphans */
}

/* Alternative: Balance for headings specifically */
h1, h2, h3, h4, h5, h6,
.headline__primary,
.headline__secondary {
    text-wrap: balance; /* Better for shorter text like headings */
    max-inline-size: 30ch; /* Optimal line length for headings */
}

/* Remove max-width constraint for body headings */
.content-section h1,
.content-section h2,
.content-section h3 {
    max-inline-size: unset;
}

/* Fallback for older browsers: Orphans & Widows control */
p {
    orphans: 2; /* Minimum 2 lines at bottom before break */
    widows: 2;  /* Minimum 2 lines at top after break */
}

/* Prevent single-word orphans in key areas */
.hero-content p,
.section-text p,
.about-text p,
.intro-text p {
    text-wrap: pretty;
    hyphens: auto; /* Allow hyphenation if needed */
    hyphenate-limit-chars: 6 3 2; /* min word length, min chars before/after hyphen */
}

/* 
 * Optimal line length for readability
 * 45-75 characters is ideal
 */
p {
    max-width: 75ch; /* 75 characters max */
}

.intro-text p,
.lead-text p {
    max-width: 65ch; /* Slightly shorter for intro text */
}

/* Remove max-width for specific layouts */
.grid p,
.columns p,
.menu-item p {
    max-width: unset;
}

/* 
 * Better hyphenation control
 */
.section-text,
.content-text,
.about-text {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-lines: 2; /* Max 2 consecutive hyphenated lines */
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 2;
}

/* Don't hyphenate headings */
h1, h2, h3, h4, h5, h6 {
    hyphens: none;
}

/* 
 * Prevent awkward breaks
 */
 
/* Keep currency amounts together */
.price,
.item-price {
    white-space: nowrap;
}

/* Keep short phrases together */
nobr,
.no-break {
    white-space: nowrap;
}

/* Prevent breaks in specific patterns */
.opening-hours,
.contact-info {
    text-wrap: pretty;
}

/* 
 * Hanging punctuation (subtle refinement)
 */
p {
    hanging-punctuation: first last;
}

/* 
 * Better spacing for readability
 */
p + p {
    margin-top: 1em; /* Better paragraph spacing */
}

/* 
 * Prevent orphans in menu descriptions
 */
.item-description,
.menu-item p,
.drink-description {
    text-wrap: pretty;
    min-width: 0; /* Allow text to shrink */
}

/* 
 * Better line height for different text sizes
 */
p {
    line-height: 1.6;
}

.lead-text,
.intro-text {
    line-height: 1.7;
}

.small-text,
.item-note {
    line-height: 1.5;
}

/* 
 * Optical margin alignment
 * Makes text look more aligned by moving punctuation into margin
 */
blockquote {
    hanging-punctuation: first last;
}

/* 
 * Prevent very short last lines in buttons/CTAs
 */
.btn,
button,
a.btn-primary {
    text-wrap: balance;
}

/* 
 * Browser Support Detection
 * Fallback for browsers that don't support text-wrap
 */
@supports not (text-wrap: pretty) {
    /* Use JavaScript-based solution or accept limitation */
    p {
        max-width: 70ch; /* Shorter lines = fewer orphans */
    }
}

/* 
 * Print styles (if needed)
 */
@media print {
    p {
        orphans: 3;
        widows: 3;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }
}

/* 
 * Mobile adjustments
 */
@media (max-width: 768px) {
    p {
        max-width: unset; /* Full width on mobile */
        text-wrap: pretty;
    }
    
    /* Tighter line height on mobile */
    .headline__secondary {
        line-height: 1.1;
    }
}

/* 
 * Specific fixes for La Rosa content
 */

/* Hero headline - prevent awkward breaks */
.hero-content .headline__primary,
.hero-content .headline__secondary {
    text-wrap: balance;
}

/* Description text */
.headline__description {
    text-wrap: balance;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
}

/* Footer text */
.footer-info p {
    text-wrap: pretty;
    text-align: center;
}

/* Menu category descriptions */
.category-subtitle,
.item-portion {
    text-wrap: pretty;
}