/*
 * Local SEO Builder — Frontend Page Styles
 *
 * Scoped to .lsb-* classes so nothing bleeds into the theme.
 * Overridable via CSS custom properties on :root or any ancestor.
 */

:root {
    --lsb-accent:        #1a56db;   /* primary button / link colour */
    --lsb-accent-dark:   #1042b5;
    --lsb-accent-text:   #ffffff;
    --lsb-cta-bg:        #1a2b4a;   /* CTA section background */
    --lsb-cta-text:      #ffffff;
    --lsb-card-bg:       #f8f9fc;
    --lsb-card-border:   #e4e7ef;
    --lsb-why-bg:        #f1f5fb;
    --lsb-section-gap:   3rem;
    --lsb-radius:        8px;
    --lsb-font-base:     inherit;   /* falls back to theme font stack */
}

/* ── Hero image ────────────────────────────────────────────────────── */
.lsb-hero {
    margin: 0 0 2.5rem;
    padding: 0;
    border-radius: var(--lsb-radius);
    overflow: hidden;
    line-height: 0; /* collapse figure whitespace */
}

.lsb-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--lsb-radius);
}

/* ── Base section spacing ──────────────────────────────────────────── */
.lsb-section {
    margin-bottom: var(--lsb-section-gap);
    font-family: var(--lsb-font-base);
}

.lsb-section h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* ── Intro ─────────────────────────────────────────────────────────── */
.lsb-intro h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.lsb-intro__lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #444;
    max-width: 72ch;
    margin-top: 0;
}

/* ── Services grid ─────────────────────────────────────────────────── */
.lsb-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.lsb-service-card {
    background: var(--lsb-card-bg);
    border: 1px solid var(--lsb-card-border);
    border-radius: var(--lsb-radius);
    padding: 1.25rem 1.5rem;
}

.lsb-service-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.lsb-service-card p {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.6;
    color: #555;
}

/* ── Why choose us ─────────────────────────────────────────────────── */
.lsb-why-us {
    background: var(--lsb-why-bg);
    border-radius: var(--lsb-radius);
    padding: 2rem;
}

.lsb-why-us__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.lsb-why-us__item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lsb-why-us__item strong {
    font-size: 0.95rem;
    color: #1a2b4a;
}

.lsb-why-us__item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.lsb-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1rem;
    border-top: 1px solid var(--lsb-card-border);
}

.lsb-faq__item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--lsb-card-border);
}

.lsb-faq__question {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.lsb-faq__answer {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.7;
    color: #555;
}

/* ── CTA ───────────────────────────────────────────────────────────── */
.lsb-cta {
    background: var(--lsb-cta-bg);
    border-radius: var(--lsb-radius);
    padding: 3rem 2rem;
    text-align: center;
    color: var(--lsb-cta-text);
}

.lsb-cta h2 {
    color: var(--lsb-cta-text);
    margin-bottom: 0.75rem;
    font-size: 1.6rem;
    line-height: 1.3;
}

.lsb-cta__sub {
    margin: 0 auto 1.75rem;
    max-width: 54ch;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9) !important;
}

.lsb-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
/*
 * Scoped to .lsb-cta to beat theme selectors without !important.
 * Themes targeting generic 'a' or '.button' won't override these.
 */
.lsb-cta .lsb-btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: calc(var(--lsb-radius) / 2);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    box-shadow: none;
}

.lsb-cta .lsb-btn--primary {
    background: var(--lsb-accent) !important;
    color: #ffffff !important;
    border: 2px solid var(--lsb-accent) !important;
}

.lsb-cta .lsb-btn--primary:hover,
.lsb-cta .lsb-btn--primary:focus {
    background: var(--lsb-accent-dark) !important;
    border-color: var(--lsb-accent-dark) !important;
    color: #ffffff !important;
}

.lsb-cta .lsb-btn--secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.lsb-cta .lsb-btn--secondary:hover,
.lsb-cta .lsb-btn--secondary:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lsb-why-us {
        padding: 1.5rem;
    }

    .lsb-cta {
        padding: 2rem 1.25rem;
    }

    .lsb-cta h2 {
        font-size: 1.3rem;
    }

    .lsb-cta__actions {
        flex-direction: column;
        align-items: center;
    }

    .lsb-btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}