/* Public website refinements. Loaded only by the reviewed website pages. */

/* Keep the existing heading style while giving long titles more reading width. */
body:is(.hero-page-blog-article, .hero-page-case-study) .hero-premium-full .hero-title-premium.layout-long-heading {
    max-width: min(100%, 28ch);
    font-size: clamp(2.25rem, 4.25vw, 4rem);
    line-height: 1.08;
}

/* Comparable action links share padding; their colours and emphasis stay intact. */
body:is(.hero-page-home, .hero-page-solar, .hero-page-solar-local, .hero-page-blog-article, .hero-page-case-study, .hero-page-faq) :is(.hero-actions-premium, .proof-cta-premium) :is(.btn-premium-primary, .btn-premium-secondary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    max-width: 100%;
    padding: 14px 28px;
    text-align: center;
}

body:is(.hero-page-home, .hero-page-solar, .hero-page-solar-local, .hero-page-blog-article, .hero-page-case-study) .hero-actions-premium {
    gap: 16px;
}

/* An open answer must fit its content, including at zoomed text sizes. */
body.hero-page-faq .faq-item-premium.active .faq-answer-premium {
    max-height: none;
}

@media (max-width: 768px) {
    body.hero-page-faq .faq-premium-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.hero-page-faq .faq-grid-premium {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hero-page-faq .faq-item-premium {
        min-width: 0;
        padding: 24px 20px;
    }

    body.hero-page-faq .faq-question-premium {
        gap: 16px;
        min-height: 44px;
    }

    body.hero-page-faq .faq-answer-premium {
        overflow-wrap: break-word;
    }

    body.hero-page-faq .faq-item-premium.active .faq-answer-premium {
        padding-top: 16px;
    }
}