/**
 * TPO Text Wrapping & Spacing Fix
 * Ensures proper word wrapping without mid-word breaks
 * and fixes letter spacing issues in hero text
 */

/* Fix hero heading letter spacing - prevent letters from touching */
.c-hero-xl .hero_main .main_heading {
    letter-spacing: -0.02em !important; /* Less tight than default -0.03em */
    word-spacing: 0.05em !important; /* Add slight space between words */
    
    /* Fix clipped descenders (g, y, p, q) - Option 4: Combination approach */
    line-height: 1.08em !important; /* Slightly more room for descenders */
    overflow: visible !important; /* Ensure nothing is clipped */
    padding-bottom: 5px !important; /* Extra breathing room at bottom */
}

/* Prevent font loading flash (FOUT - Flash of Unstyled Text) */
.c-hero-xl .hero_main .main_heading {
    font-display: block !important; /* Block rendering until font loads */
    opacity: 0 !important; /* Start hidden */
    transition: opacity 0.3s ease-in !important;
}

/* Show text only when fonts are ready */
html.fonts-loaded .c-hero-xl .hero_main .main_heading {
    opacity: 1 !important;
}

/* Fallback: Show after 1 second even if fonts not loaded */
.c-hero-xl .hero_main .main_heading {
    animation: revealText 0.3s ease-in 1s forwards !important;
}

@keyframes revealText {
    to { opacity: 1 !important; }
}

/* Ensure smooth text rendering */
.c-hero-xl .hero_main .main_heading {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Fix text wrapping in scrolling hero section "What we do" */
.c-hero-xl .hero_scroller .main_item p {
    /* Prevent words from breaking mid-word */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    
    /* Use balanced text wrapping for better readability */
    text-wrap: balance !important;
    
    /* Proper hyphenation for long words (if needed) */
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    
    /* Ensure proper line height for readability */
    line-height: 1.2em !important;
}

/* Alternative: If you don't want any hyphenation at all */
.c-hero-xl .hero_scroller .main_item p.no-hyphens {
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* Ensure text fits container properly */
.c-hero-xl .hero_scroller .main_item {
    max-width: 100% !important;
    overflow: visible !important;
}

/* Make sure the container has proper width constraints */
.c-hero-xl .hero_scroller .content_main {
    width: 100% !important;
}

/* ===================================
   FOOTER LOGO SECTION
   =================================== */

/* Make footer position relative for background positioning */
.c-footer {
    position: relative !important;
    overflow: hidden !important;
}

/* Footer background image */
.c-footer .footer_background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Footer content above background */
.c-footer .block_inner {
    position: relative !important;
    z-index: 1 !important;
}

/* Footer logo styling - smaller, left-aligned */
.c-footer .footer_logo {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 60px !important;
    padding: 40px 0 60px 0 !important;
    /* Remove side padding - let it inherit from parent */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.c-footer .footer_logo .logo_text {
    font-family: 'Funnel Display', sans-serif !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2em !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important; /* No padding - pure alignment */
    text-align: left !important;
    text-transform: lowercase !important;
    opacity: 0.95 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .c-footer .footer_logo {
        padding-top: 20px !important;
        padding-bottom: 40px !important;
        margin-top: 40px !important;
    }
    
    .c-footer .footer_logo .logo_text {
        font-size: clamp(24px, 6vw, 32px) !important;
    }
}