/*
 * NAJ Themes ONLY 1 responsive polish
 * Keep oversized display words and CTA buttons intact without changing
 * the visual design of the starter layouts.
 */

/* Large showcase/display headings: shrink fluidly instead of breaking words. */
.naj-display-word,
.naj-photo-word,
.naj-photo-portfolio h1,
.naj-photo-portfolio h2,
.naj-photo-portfolio .wp-block-heading {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.naj-photo-portfolio .naj-display-word,
.naj-photo-portfolio .naj-photo-word {
    font-size: clamp(2.65rem, 10vw, 9rem);
    line-height: .88;
    max-width: 100%;
}

/* CTA buttons should remain buttons, not stacks of broken words. */
.naj-business .wp-block-button,
.naj-business .wp-block-button__link,
.naj-business-cta .wp-block-button,
.naj-business-cta .wp-block-button__link {
    max-width: 100%;
}

.naj-business .wp-block-button__link,
.naj-business-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: min(15rem, 100%);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-align: center;
    line-height: 1.15;
}

@media (max-width: 600px) {
    .naj-photo-portfolio .naj-display-word,
    .naj-photo-portfolio .naj-photo-word {
        font-size: clamp(2.25rem, 14vw, 5rem);
        letter-spacing: -.04em;
    }

    .naj-business .wp-block-button,
    .naj-business-cta .wp-block-button {
        width: 100%;
    }

    .naj-business .wp-block-button__link,
    .naj-business-cta .wp-block-button__link {
        width: 100%;
        padding-inline: 1.15rem;
        font-size: clamp(.95rem, 4.2vw, 1.1rem);
    }
}


/* the Business closing CTA is a direct wp-element-button link. */
.naj-business-cta > a.wp-element-button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

@media (max-width: 600px) {
    .naj-business-cta > a.wp-element-button {
        display: flex;
        width: 100%;
    }
}