/* ─────────────────────────────────────────────────────────────────────────────
   NUCLEAR READABILITY OVERRIDE — v1.3
   Forces JUSTIFIED alignment and consistent font sizes globally.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --min-font-mobile: 1.05rem;
    --min-font-desktop: 1.15rem;
}

/* Justify alignment on all content containers */
.main-content, .guide-content, .blog-content, .seo-content, .rights-content, .info-section,
.main-article-content, .article-wrap, .guide-layout-wrapper, .seo-content-wrapper, .seo-header {
    text-align: left;
}

/* Force specific typography on all paragraphs and items inside content areas */
.main-content p, .guide-content p, .blog-content p, .seo-content p, .rights-content p, .info-section p,
.main-article-content p, .article-wrap p, .guide-layout-wrapper p, .seo-content-wrapper p,
.main-content li, .guide-content li, .blog-content li, .seo-content li, .rights-content li, .info-section li,
.main-article-content li, .article-wrap li, .guide-layout-wrapper li, .seo-content-wrapper li {
    text-align: left !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    font-size: clamp(var(--min-font-desktop), 2.2vw, 1.35rem) !important;
    line-height: 1.85 !important;
    color: #2D2D2D !important;
}

/* Mobile-specific forced readability — v1.4 ENFORCED */
@media (max-width: 768px) {
    .main-content p, .guide-content p, .blog-content p, .seo-content p, .rights-content p, .info-section p,
    .main-article-content p, .article-wrap p, .guide-layout-wrapper p, .seo-content-wrapper p,
    .main-content li, .guide-content li, .blog-content li, .seo-content li, .rights-content li, .info-section li,
    .main-article-content li, .article-wrap li, .guide-layout-wrapper li, .seo-content-wrapper li {
        font-size: 1.15rem !important;
        line-height: 1.85 !important;
        text-align: left !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────── */

/*
 * layout-unified.css  — v3
 * Single source of truth for cross-page consistency.
 * Loaded last on every page so it wins specificity wars cleanly.
 */

/* ─────────────────────────────────────────────
   1. FONT — force Inter everywhere
   ───────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif !important;
}

/* ─────────────────────────────────────────────
   2. TRANSITIONS — scoped to interactive elements
   ───────────────────────────────────────────── */
* { transition: none; }

a, button, .elementor-button, .claim-card, .why-item,
.review-card, .dir-item, .cat-card, .faq-item,
.faq-question, .faq-answer, .sidebar-box, .step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
                color 0.3s ease, border-color 0.3s ease,
                background 0.3s ease, opacity 0.3s ease !important;
}

.reveal-up {
    transition: opacity 0.8s ease-out,
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.reveal {
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.faq-answer {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s ease, opacity 0.4s ease !important;
}

/* ─────────────────────────────────────────────
   3. HEADING SIZES — standardised
   ───────────────────────────────────────────── */
.seo-header h1, .seo-header h1[style],
.main-content h1, .blog-content h1, .guide-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 30px !important;
    margin-top: 0 !important;
}

.hero-section h1, .hero-section h1[style] {
    font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
}

.hub-hero h1, .hub-hero h1[style] {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    line-height: 1.15 !important;
}

.hero-section h1[style*="color: #ffffff"],
.hero-section h1[style*="color:#ffffff"] {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
}

.main-content h2, .main-content h2[style],
.blog-content h2, .guide-content h2,
.seo-content h2, .seo-content h2[style],
.section-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-top: 48px !important;
    margin-bottom: 24px !important;
}
.section-title { margin-top: 0 !important; text-align: center; }

.main-content h3, .main-content h3[style],
.blog-content h3, .guide-content h3 {
    font-size: clamp(1.25rem, 3vw, 1.7rem) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
}

.main-content h4, .blog-content h4, .guide-content h4 {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin-top: 32px !important;
    margin-bottom: 14px !important;
}

/* ─────────────────────────────────────────────
   4. BODY TEXT — justified, proper spacing
   ───────────────────────────────────────────── */
.main-content p, .main-content p[style],
.blog-content p, .blog-content p[style],
.guide-content p, .guide-content p[style],
.seo-content p, .seo-content p[style] {
    font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important;
    line-height: 1.85 !important;
    margin-bottom: 28px !important;
    color: #2D2D2D !important;
    text-align: left !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

.main-content li, .blog-content li, .guide-content li {
    font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important;
    line-height: 1.8 !important;
    margin-bottom: 14px !important;
    color: #2D2D2D !important;
    text-align: left !important;
}

/* ─────────────────────────────────────────────
   5. DARK-BACKGROUND CONTAINERS — ALWAYS WHITE TEXT
   ───────────────────────────────────────────── */
.cta-box,
.cta-box *,
.stats-bar,
.stats-bar *,
.benefits-section,
.benefits-section *,
.hero-section .hero-content *,
[style*="background: #532EAA"] *,
[style*="background: #10B981"] *,
[style*="background: linear-gradient(135deg, #532EAA"] *,
[style*="background: linear-gradient(135deg, #3d1f8a"] * {
    color: inherit;
}

.cta-box p,
.cta-box li,
.cta-box h1,
.cta-box h2,
.cta-box h3,
.cta-box h4,
.guide-content .cta-box p,
.blog-content .cta-box p,
.main-content .cta-box p,
.seo-content .cta-box p,
.benefits-section p,
.benefits-section li,
.benefits-section h2,
.benefits-section h3 {
    color: #ffffff !important;
}

.stats-bar p,
.stats-bar h3,
.stats-bar .stat-item h3,
.stats-bar .stat-item p,
.hero-section .hero-content p,
.hero-section .hero-content li {
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   6. SECTION PADDING — unified vertical rhythm
   ───────────────────────────────────────────── */
.seo-header { padding: 64px 0 !important; }

.rights-section, .why-choose-us, .process-section,
.claim-for-section, .faq-section {
    padding: 80px 0 !important;
}

.google-reviews-section, .eligible-section,
.how-it-works, .stats-bar, .carousel-section {
    padding: 64px 0 !important;
}

.blog-content, .guide-content {
    padding: 48px 24px !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

.seo-content-wrapper { padding: 48px 20px 80px !important; }

/* ─────────────────────────────────────────────
   7. SEO HEADER
   ───────────────────────────────────────────── */
.seo-header {
    background: linear-gradient(135deg, #F8F9FF 0%, #EDE9F6 100%);
    text-align: center;
}
.seo-header p, .seo-header p[style] {
    font-size: clamp(0.9rem, 1.8vw, 1rem) !important;
    color: #4E4B66 !important;
    max-width: 760px !important;
    margin: 16px auto 0 !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

/* ─────────────────────────────────────────────
   8. BLOG & CARD HEADINGS
   ───────────────────────────────────────────── */
.blog-hero h1, .blog-hero h1[style], .hero h1 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
}
.blog-card h2, .post-card h2, article h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.05rem, 2.2vw, 1.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: #0E1311 !important;
}

/* ─────────────────────────────────────────────
   9. SIDEBAR
   ───────────────────────────────────────────── */
.sidebar-box h3, .cta-box h3 {
    font-size: clamp(1rem, 2vw, 1.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}
.sidebar-box p {
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
    color: #4E4B66 !important;
}

/* ─────────────────────────────────────────────
  10. STATS BAR
   ───────────────────────────────────────────── */
.stat-item h3 { font-size: clamp(2rem, 5vw, 3rem) !important; margin-bottom: 8px !important; }
.stat-item p  { font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important; }

/* ─────────────────────────────────────────────
  11. CARDS
   ───────────────────────────────────────────── */
.why-item h3, .step-card h3, .process-step h3 {
    font-size: clamp(1.05rem, 2.2vw, 1.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    color: #0E1311 !important;
}
.why-item p, .step-card p, .process-step p {
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
    line-height: 1.75 !important;
    color: #4E4B66 !important;
}
.review-text {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 1.8vw, 1.1rem) !important;
    line-height: 1.7 !important;
}
.claim-card .card-label {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────────────────
  12. FAQ
   ───────────────────────────────────────────── */
.faq-question { font-size: clamp(0.95rem, 2vw, 1.15rem) !important; font-weight: 700 !important; line-height: 1.4 !important; }
.faq-answer   { 
    font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important; 
    line-height: 1.8 !important; 
}

/* ─────────────────────────────────────────────
  13. NAVIGATION
   ───────────────────────────────────────────── */
.nav-link        { font-size: clamp(0.85rem, 1.4vw, 0.95rem) !important; }
.elementor-button{ font-size: clamp(0.85rem, 1.4vw, 1rem) !important; }

/* ─────────────────────────────────────────────
  14. SECTION SUBTITLES
   ───────────────────────────────────────────── */
.section-subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important;
    line-height: 1.65 !important;
    margin-bottom: 48px !important;
}

/* ─────────────────────────────────────────────
  15. CTA BOX — enhanced visual style
   ───────────────────────────────────────────── */
.cta-box {
    background: linear-gradient(135deg, #3d1f8a 0%, #532EAA 55%, #7B4FD8 100%) !important;
    border-radius: 24px !important;
    padding: 52px 48px !important;
    text-align: center !important;
    box-shadow: 0 20px 60px rgba(83, 46, 170, 0.35) !important;
    position: relative !important;
    overflow: hidden !important;
}
.cta-box::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    pointer-events: none;
}
.cta-box h3 {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
}
.cta-box p {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    line-height: 1.75 !important;
    color: rgba(255,255,255,0.92) !important;
    max-width: 680px !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
}
.cta-box a {
    display: inline-block !important;
    background: #10B981 !important;
    color: #ffffff !important;
    padding: 16px 44px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
    letter-spacing: 0.02em !important;
}
.cta-box .cta-fine-print {
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.65) !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

/* ─────────────────────────────────────────────
  16. MOBILE RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .seo-header { padding: 50px 0 !important; }

    .rights-section, .why-choose-us, .process-section,
    .claim-for-section, .faq-section { padding: 70px 0 !important; }

    .google-reviews-section, .eligible-section,
    .how-it-works, .stats-bar, .carousel-section { padding: 60px 0 !important; }

    .blog-content, .guide-content { padding: 40px 24px !important; }
    .seo-content-wrapper { padding: 40px 24px 70px !important; }
    .section-subtitle { margin-bottom: 40px !important; }

    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

    .cta-box { padding: 40px 28px !important; }
    .container { padding: 0 24px !important; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .blog-content, .guide-content { padding: 24px 12px !important; }
    .cta-box { padding: 28px 16px !important; }
}

/* ─────────────────────────────────────────────
  17. FINAL MOBILE STABILITY OVERRIDE (GUIDE)
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .guide-content,
    .guide-content.blog-article,
    .blog-article,
    .main-article-content,
    .article-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .guide-content p,
    .guide-content li,
    .main-article-content p,
    .main-article-content li,
    .blog-article p,
    .blog-article li {
        text-align: left !important;
        word-spacing: normal !important;
        letter-spacing: normal !important;
        hyphens: none !important;
    }

    .guide-content [style*="font-size: 1.4rem"],
    .guide-content [style*="font-size:1.4rem"],
    .guide-content [style*="font-size: 1.5rem"],
    .guide-content [style*="font-size:1.5rem"] {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .guide-content [style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .guide-content a[style*="padding: 20px 50px"],
    .guide-content a[style*="padding:20px 50px"] {
        width: 100% !important;
        max-width: 320px !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: 0.98rem !important;
        border-radius: 10px !important;
    }
}