/* ==========================================================================
   Landing Page Visual Parity — Design Refinement Layer
   Bridges the gap between custom block styling and native WP block styling
   on pages using the landing template.
   ========================================================================== */

/* ---------- Section Rhythm for Content Groups ----------
   Landing pages get their rhythm from custom blocks with built-in padding.
   Raw wp-block-group sections need the same treatment.
   ------------------------------------------------------- */
.page-landing > .wp-block-group {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Alternating background on content groups for visual separation.
   Every other group gets the cloud background to match the trust-bar / process pattern. */
.page-landing > .wp-block-group:nth-child(even of .wp-block-group) {
    /* dark bg handled by block CSS */
}

/* ---------- Content Width within Sections ----------
   Paragraphs and headings inside groups should not stretch to 1200px.
   Match the content-width constraint of the landing page blocks (720px for text). */
.page-landing > .wp-block-group > .wp-block-heading,
.page-landing > .wp-block-group > h2,
.page-landing > .wp-block-group > h3 {
    max-width: 720px;
}

.page-landing > .wp-block-group > .wp-block-paragraph,
.page-landing > .wp-block-group > p {
    max-width: 720px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text-body, #4A4F57);
}

/* ---------- Heading Refinement ----------
   Make H2/H3 in content sections match the visual weight of block headings. */
.page-landing > .wp-block-group > .wp-block-heading,
.page-landing > .wp-block-group > h2 {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    color: var(--color-navy, #0C1B33);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.page-landing > .wp-block-group > h3,
.page-landing > .wp-block-group > .wp-block-heading[class*="h3"] {
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    line-height: 1.2;
    color: var(--color-navy, #0C1B33);
    margin-bottom: 1rem;
}

/* ---------- Image Treatment in Content Sections ----------
   Inline images should match the polished look of service-card images. */
.page-landing > .wp-block-group > .wp-block-image,
.page-landing > .wp-block-group > figure {
    max-width: 900px;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(12, 27, 51, 0.06);
}

.page-landing > .wp-block-group > .wp-block-image img,
.page-landing > .wp-block-group > figure img {
    border-radius: 0.5rem;
}

.page-landing > .wp-block-group > .wp-block-image figcaption,
.page-landing > .wp-block-group > figure figcaption {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #8A8F96);
    text-align: center;
    padding: 0.75rem 0 0;
    font-style: italic;
}

/* ---------- Team Members Layout ----------
   Single team-member blocks render at 280px and look lost.
   When multiple appear in sequence, lay them out in a row. */
.page-landing > .wp-block-group .wp-block-me-blocks-team-member + .wp-block-me-blocks-team-member {
    /* Adjacent team members — handled by flex on parent */
}

/* Make the team section group a flex row when it contains team members */
.page-landing > .wp-block-group:has(.wp-block-me-blocks-team-member) {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
}

/* Team section group still needs block-level children before team members */
.page-landing > .wp-block-group:has(.wp-block-me-blocks-team-member) > .wp-block-heading,
.page-landing > .wp-block-group:has(.wp-block-me-blocks-team-member) > h2,
.page-landing > .wp-block-group:has(.wp-block-me-blocks-team-member) > p,
.page-landing > .wp-block-group:has(.wp-block-me-blocks-team-member) > .wp-block-paragraph {
    flex-basis: 100%;
}

/* ---------- Testimonial Feature Spacing ----------
   Ensure featured testimonials have breathing room matching landing page style. */
.page-landing > .wp-block-me-blocks-testimonial {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------- Service Card Spacing ----------
   Service cards on built pages sometimes stack too tightly. */
.page-landing > .wp-block-me-blocks-service-card {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Alternate service card backgrounds for rhythm */
.page-landing > .wp-block-me-blocks-service-card:nth-child(even of .wp-block-me-blocks-service-card) {
    /* dark bg handled by block CSS */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ---------- Project Showcase Enhancement ---------- */
.page-landing > .wp-block-me-blocks-project-showcase {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ---------- Process Steps Section ----------
   Ensure process blocks have consistent backgrounds. */
.page-landing > .wp-block-me-blocks-process-steps {
    /* dark bg now handled by process-steps block CSS */
    /* dark bg handled by block CSS */
}

/* ---------- Bold Text in Paragraphs ----------
   On the about page, bold intro text (e.g. "Price transparency.") serves as
   sub-headings. Give them visual distinction. */
.page-landing > .wp-block-group > p strong,
.page-landing > .wp-block-group > .wp-block-paragraph strong {
    color: var(--color-navy, #0C1B33);
    font-weight: 700;
}

/* ---------- Lists in Content Sections ---------- */
.page-landing > .wp-block-group > ul,
.page-landing > .wp-block-group > ol {
    max-width: 720px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text-body, #4A4F57);
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 768px) {
    .page-landing > .wp-block-group {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .page-landing > .wp-block-me-blocks-service-card {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .page-landing > .wp-block-group:has(.wp-block-me-blocks-team-member) {
        flex-direction: column;
        align-items: center;
    }
}

/* ---------- Manufacturer Logo Bar ----------
   The shingle-roofing page has a logo bar that should match trust-bar styling. */
.page-landing > .wp-block-group.has-background img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* ---------- First Content Group After Hero/Trust/Stats ----------
   The first wp-block-group typically follows a trust-bar or stat-counter.
   Ensure it has proper separation. */
.page-landing > .wp-block-me-blocks-trust-bar + .wp-block-group,
.page-landing > .wp-block-me-blocks-stat-counter + .wp-block-group {
    border-top: none;
}

/* ---------- Content Link Styling ----------
   Links within content sections should use the copper accent color
   to match the CTA buttons and service-card links. */
.page-landing > .wp-block-group a:not(.btn):not(.meb-scard__cta) {
    color: var(--color-copper, #C17F4E);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.25s ease;
}

.page-landing > .wp-block-group a:not(.btn):not(.meb-scard__cta):hover {
    color: var(--color-rust, #B85C3A);
}

/* ---------- List Bullet Styling ----------
   Match the copper accent for list markers. */
.page-landing > .wp-block-group > ul > li::marker {
    color: var(--color-copper, #C17F4E);
}

/* ---------- Blockquote in Content ---------- */
.page-landing > .wp-block-group > blockquote,
.page-landing > .wp-block-group > .wp-block-quote {
    max-width: 720px;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.45;
    color: var(--color-slate, #1B3A5C);
    border-left: 3px solid var(--color-copper, #C17F4E);
    padding-left: 1.5rem;
    margin: 2.5rem 0;
}

/* ---------- Smooth Transitions Between Sections ----------
   When a dark section (stats, CTA) meets a light content group,
   add a subtle visual connection. */
.page-landing > .wp-block-me-blocks-stat-counter + .wp-block-group,
.page-landing > .wp-block-me-blocks-cta-band + .wp-block-group {
    padding-top: 5rem;
}

/* ---------- Icon Feature Grid Enhancement ----------
   Make icon grids match the landing page visual language. */
.page-landing .meb-ifgrid__heading {
    font-family: 'EB Garamond', Georgia, serif;
}

.page-landing .meb-ifgrid__desc {
    font-family: 'Source Serif 4', Georgia, serif;
}

/* ---------- Stat Callout Enhancement ---------- */
.page-landing .meb-scallout {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Section Spacing Fine-Tuning ----------
   Ensure no double-padding when groups are adjacent. */
.page-landing > .wp-block-group + .wp-block-group {
    border-top: 1px solid var(--color-border-default, #DDE2E8);
}

.page-landing > .wp-block-group:nth-child(even of .wp-block-group) + .wp-block-group,
.page-landing > .wp-block-group + .wp-block-group:nth-child(even of .wp-block-group) {
    border-top: none;
}

/* ==========================================================================
   Request-Quote Page — Desktop Visual Parity Fixes
   2026-03-13: Fix alignment/sizing to match homepage visual standard
   ========================================================================== */

/* ---------- Form Embed: Wider on Desktop ----------
   520px card in 1440px page leaves too much dead space.
   Widen to match content-width rhythm. */
@media (min-width: 1024px) {
    .page-landing .meb-form__card {
        max-width: 720px;
    }
}

/* ---------- Testimonials: Constrain Width ----------
   Individual testimonials stretch to ~1361px on desktop.
   Constrain to match rest of page content rhythm. */
.page-landing > .meb-testimonial,
.page-landing > .wp-block-me-blocks-testimonial {
    max-width: var(--container-xl, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Process Steps: Widen Inner ----------
   Process steps inner at 1000px feels narrow vs 1200px container.
   Let it breathe to match other sections. */
@media (min-width: 1024px) {
    .page-landing .meb-process__inner {
        max-width: var(--container-xl, 1200px);
    }
}

/* ---------- FAQ Section: Widen Inner ----------
   720px inner in 1440px viewport is too narrow for FAQ accordions. */
@media (min-width: 1024px) {
    .page-landing .meb-faq__inner {
        max-width: 900px;
    }
}

/* ---------- CTA Band: Match Width ---------- */
@media (min-width: 1024px) {
    .page-landing .meb-cta__inner {
        max-width: 900px;
    }
}

/* ---------- Stat Counter: Consistent Padding ----------
   Stats section uses 80px top/bottom which is fine, but ensure
   the stat items are centered and spaced evenly. */
@media (min-width: 1024px) {
    .page-landing .meb-stats__inner {
        max-width: var(--container-xl, 1200px);
        margin: 0 auto;
    }
}

/* ---------- Section Padding Normalization ----------
   Normalize vertical rhythm across sections.
   Use 80px (5rem) for major sections, 48px (3rem) for minor. */
.page-landing > .meb-testimonial,
.page-landing > .wp-block-me-blocks-testimonial {
    padding-top: var(--space-10, 2.5rem);
    padding-bottom: var(--space-10, 2.5rem);
}

/* ---------- Quote Form Section: Center Content ----------
   Ensure heading and text above form are width-matched. */
.page-landing .quote-form-section > .wp-block-heading,
.page-landing .quote-form-section > h2 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.page-landing .quote-form-section > p {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ==========================================================================
   Global Content Group Alignment Fix — 2026-03-13
   wp-block-group sections had 0 horizontal padding, causing flush-left text
   while custom blocks had 24px padding. Fix: add padding + center content.
   ========================================================================== */

/* ---------- Horizontal Padding for Content Groups ---------- */
.page-landing > .wp-block-group {
    padding-left: var(--gutter, 1.5rem);
    padding-right: var(--gutter, 1.5rem);
}

/* ---------- Center Headings and Text in Content Groups ---------- */
.page-landing > .wp-block-group > .wp-block-heading,
.page-landing > .wp-block-group > h2,
.page-landing > .wp-block-group > h3 {
    margin-left: auto;
    margin-right: auto;
}

.page-landing > .wp-block-group > .wp-block-paragraph,
.page-landing > .wp-block-group > p {
    margin-left: auto;
    margin-right: auto;
}

.page-landing > .wp-block-group > ul,
.page-landing > .wp-block-group > ol {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Center Images in Content Groups ---------- */
.page-landing > .wp-block-group > .wp-block-image,
.page-landing > .wp-block-group > figure {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Service Cards in Content Groups: Center ----------
   Service cards already have max-width:1000px but need auto margins. */
.page-landing > .wp-block-group > .wp-block-me-blocks-service-card {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Wider Service Cards on Desktop ----------
   1000px service cards in 1440px viewport could be wider. Match container-xl. */
@media (min-width: 1024px) {
    .page-landing > .wp-block-group > .wp-block-me-blocks-service-card {
        max-width: var(--container-xl, 1200px);
    }
}

/* ---------- Testimonials: Ensure Centering ---------- */
.page-landing > .meb-testimonial,
.page-landing > .wp-block-me-blocks-testimonial {
    padding-left: var(--gutter, 1.5rem);
    padding-right: var(--gutter, 1.5rem);
}

/* ==========================================================================
   Width Consistency Fix — 2026-03-13 Round 6
   Align FAQ and CTA inner widths to match 1200px container standard.
   Form card stays at 720px (form fields at 1200px would look broken).
   ========================================================================== */
@media (min-width: 1024px) {
    .page-landing .meb-faq__inner {
        max-width: var(--container-xl, 1200px);
    }
    .page-landing .meb-cta__inner {
        max-width: var(--container-xl, 1200px);
    }
}

/* ==========================================================================
   Product Page Visual Parity — 2026-03-13 v1.2.0
   Improve spacing, rhythm, and visual consistency for product pages
   like /shingle-roofing/ to match homepage design language.
   ========================================================================== */

/* ---------- Project Showcase Section Rhythm ---------- */
.page-landing > .wp-block-me-blocks-project-showcase {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: var(--gutter, 1.5rem);
    padding-right: var(--gutter, 1.5rem);
}

/* Alternate bg on showcases for rhythm */
.page-landing > .wp-block-me-blocks-project-showcase:nth-child(even of .wp-block-me-blocks-project-showcase) {
    background: var(--color-bg-warm, #F7F6F3);
}

/* ---------- Badge Row / Logo Strip ---------- */
.page-landing > .wp-block-group.badge-row {
    padding: 1.5rem var(--gutter, 1.5rem);
    background: var(--color-bg-warm, #F7F6F3);
    border-bottom: 1px solid rgba(12, 27, 51, 0.06);
}

.page-landing > .wp-block-group.badge-row img {
    max-height: 40px;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: opacity 0.3s, filter 0.3s;
}

.page-landing > .wp-block-group.badge-row img:hover {
    opacity: 1;
    filter: none;
}

/* ---------- Service Cards Within Groups: Better Spacing ---------- */
.page-landing .services-detail > .wp-block-me-blocks-service-card {
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
}

/* Alternate service card backgrounds within the group */
.page-landing .services-detail article.wp-block-me-blocks-service-card:nth-of-type(even) {
    background: var(--color-bg-warm, #F7F6F3);
}

/* ---------- Intro Section Typography ---------- */
.page-landing .roofing-intro > .wp-block-heading,
.page-landing .roofing-intro > h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    margin-bottom: 1.5rem;
}

.page-landing .roofing-intro > p,
.page-landing .roofing-intro > .wp-block-paragraph {
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 720px;
}

/* ---------- Services Detail Section ---------- */
.page-landing .services-detail {
    padding-top: 0;
    padding-bottom: 0;
}

.page-landing .services-detail > .wp-block-heading {
    padding-top: 4rem;
    padding-bottom: 2rem;
    margin-bottom: 0;
}

/* ---------- Testimonial in Product Pages ---------- */
.page-landing > .wp-block-me-blocks-testimonial {
    background: var(--color-bg-warm, #F7F6F3);
}

/* ---------- Process Steps Eyebrow on Dark ---------- */
.page-landing .meb-process .meb-process__eyebrow {
    color: #c17f4e;
}

/* ==========================================================================
   Product Page Rhythm Fix — v1.2.2
   Break up the long white middle section
   ========================================================================== */

/* Intro section gets warm bg */
.page-landing > .wp-block-group.roofing-intro.wp-block-group {
    background: #EDE9E3;
}

/* Service cards: override block bg with transparent so container bg shows through */
.page-landing .services-detail > article.meb-scard {
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-width: 100%;
}

/* Restore image border-radius inside service cards */
.page-landing .services-detail > article.meb-scard .meb-scard__media {
    border-radius: 0;
}

/* Odd service cards get warm bg */
.page-landing .services-detail > article.meb-scard:nth-of-type(odd) {
    background: #EDE9E3;
}

/* Give process section full bleed within its container */
.page-landing .services-detail > .wp-block-me-blocks-process-steps {
    margin-left: calc(-1 * var(--gutter, 1.5rem));
    margin-right: calc(-1 * var(--gutter, 1.5rem));
}

/* Badge row stronger bg */
.page-landing > .wp-block-group.badge-row {
    background: #EFEEE9;
}