/* ============================================
   FLEXIBLE PAGE CPTs (Landing Pages, Service Pages, SEO Pages)
   ============================================ */
body.single-landing_page .ast-container,
body.single-landing_page #primary,
body.single-landing_page .content-area,
body.single-landing_page article,
body.single-landing_page .entry-content,
body.single-landing_page .site-content,
body.single-service_page .ast-container,
body.single-service_page #primary,
body.single-service_page .content-area,
body.single-service_page article,
body.single-service_page .entry-content,
body.single-service_page .site-content,
body.single-seo_page .ast-container,
body.single-seo_page #primary,
body.single-seo_page .content-area,
body.single-seo_page article,
body.single-seo_page .entry-content,
body.single-seo_page .site-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.single-landing_page .ast-container,
body.single-service_page .ast-container,
body.single-seo_page .ast-container { display: block !important; }

body.single-landing_page #primary,
body.single-service_page #primary,
body.single-seo_page #primary { flex: 1 1 100% !important; }

body.single-landing_page #secondary,
body.single-service_page #secondary,
body.single-seo_page #secondary { display: none !important; }

.lp {
    font-family: var(--font-body);
    color: var(--color-body);
    background: var(--color-bg);
}

.lp-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

.lp-header {
    padding: 64px 0 32px;
}

.lp-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-heading, #0F172A);
    margin: 0;
}

.lp-content {
    padding: 0 0 64px;
}

/* Plain prose content stays readable and centered; full-width block-pattern
   sections (hero, value props, etc.) span edge to edge as their own CSS intends.
   .blp-breakout is the shared wrapper class used by the standalone HTML pages
   in /brand-landing-pages/ (e.g. pafana-supplier-dubai.html) so they can break
   out of this 800px reading column and re-center themselves at the site's
   1400px container width, matching the header. Every future brand page should
   reuse this same outer class. */
.lp-content > *:not(.wp-block-group):not(.wp-block-cover):not(.wp-block-columns):not(.blp-breakout) {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.lp-content h2 {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-heading, #0F172A);
    margin: 40px 0 16px;
}

.lp-content h3 {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: var(--color-heading, #0F172A);
    margin: 32px 0 12px;
}

.lp-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-body, #364151);
    margin: 0 0 16px;
}

.lp-content ul,
.lp-content ol {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-body, #364151);
    margin: 0 0 16px;
    padding-left: 24px;
}

.lp-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.lp-content a {
    color: var(--color-accent, #0067FF);
}

@media (max-width: 600px) {
    .lp-header { padding: 40px 0 24px; }
}