/*
 * Responsive Typography & Layout Fix
 * Fixes oversized "zoomed-in" font sizes on Guide Article pages and Blog pages
 * Overrides inline styles with !important where necessary
 */

/* =============================================
   BASE FONT SCALING — establish a proper root
   ============================================= */
html {
    font-size: 15px; /* Slightly reduced root — pulls all rem units down proportionally */
}

@media (max-width: 1024px) {
    html { font-size: 14.5px; }
}

@media (max-width: 768px) {
    html { font-size: 14px; }
}

@media (max-width: 480px) {
    html { font-size: 13.5px; }
}

/* =============================================
   GUIDE ARTICLE PAGE — HERO SECTION
   ============================================= */
.hero-section {
    padding: 48px 0 !important;
}

/* Guide page H1 — was hardcoded 1.8rem inline, now properly scaled */
.hero-section h1[style],
.hero-section h1 {
    font-size: clamp(1.35rem, 3vw, 1.7rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 16px !important;
}

/* Guide page hero subtitle paragraph */
.hero-section > .container > p,
.hero-section p[style] {
    font-size: clamp(0.85rem, 1.8vw, 0.95rem) !important;
    line-height: 1.65 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

/* =============================================
   GUIDE ARTICLE — ARTICLE BODY CONTENT
   ============================================= */
.guide-content {
    padding: 40px 20px !important;
    max-width: 1100px !important;
}

/* Main H2 headings inside article — was 1.5rem inline */
.guide-content h2[style],
.main-article-content h2 {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.3px !important;
}

/* H3 headings inside article — was 1.25rem inline */
.guide-content h3[style],
.main-article-content h3 {
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
    margin-bottom: 18px !important;
    line-height: 1.4 !important;
}

/* H4 headings inside repair timeframe boxes — was 1.3rem inline */
.guide-content h4[style],
.main-article-content h4 {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem) !important;
    margin-bottom: 10px !important;
}

/* Body paragraphs — was 0.95rem inline (fine) but ul/ol were 1.1rem */
.guide-content p[style],
.main-article-content p {
    font-size: clamp(0.82rem, 1.6vw, 0.9rem) !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
}

/* Unordered & ordered lists — were 1.1rem which is too big */
.guide-content ul[style],
.guide-content ol[style],
.main-article-content ul,
.main-article-content ol {
    font-size: clamp(0.82rem, 1.6vw, 0.9rem) !important;
    line-height: 1.7 !important;
}

/* Emergency box text */
.emergency-box p[style] {
    font-size: 0.875rem !important;
}

/* CTA section inside article */
.guide-content [style*="background: linear-gradient"] h3,
.guide-content .cta-section h3 {
    font-size: clamp(1rem, 2vw, 1.2rem) !important;
}

.guide-content [style*="background: linear-gradient"] p,
.guide-content .cta-section p {
    font-size: 0.875rem !important;
}

/* CTA button in article */
.guide-content a[style*="padding: 20px 50px"] {
    padding: 14px 36px !important;
    font-size: 0.95rem !important;
}

/* Sidebar widget inside article */
.guide-content [style*="Check Your Eligibility"] h3 {
    font-size: 1rem !important;
}

/* =============================================
   BLOG INDEX PAGE — HERO
   ============================================= */
.hero-section .hero-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    line-height: 1.2 !important;
}

.hero-section .hero-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
}

/* =============================================
   BLOG — ARTICLE CARDS & HEADINGS
   ============================================= */

/* "Latest Housing Disrepair Articles" H2 — was 2.5rem inline */
article[style] + div h2,
[style*="font-size: 2.5rem; font-weight: 900"] {
    font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
}

/* "Featured Articles" / "Recent Articles" section H3 — was 1.8rem inline */
[style*="font-size: 1.8rem; font-weight: 800"] {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
}

/* Blog article card H4 — was 1.3rem for featured, 1.1rem for recent */
article[style] h4[style*="font-size: 1.3rem"],
article[style] h4[style*="font-size: 1.1rem"] {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

/* Blog article card paragraph */
article[style] p[style] {
    font-size: clamp(0.8rem, 1.5vw, 0.88rem) !important;
    line-height: 1.6 !important;
}

/* Category headings in blog */
[style*="font-size: 1.1rem; font-weight: 700; color: #532EAA"] {
    font-size: 0.95rem !important;
}

/* Newsletter section heading — was 1.5rem */
[style*="font-size: 1.5rem; font-weight: 800"] {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
}

/* =============================================
   GUIDES HUB INDEX PAGE
   ============================================= */
.hub-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    letter-spacing: -1px !important;
}

.hub-hero p {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
}

/* =============================================
   GLOBAL INLINE STYLE OVERRIDES
   (catch remaining large inline font sizes)
   ============================================= */

/* Logo text */
[style*="font-size: 1.6rem; color: #532EAA"] {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 768px) {
    .hero-section {
        padding: 32px 0 !important;
    }

    .guide-content {
        padding: 30px 16px !important;
    }

    .hero-section h1[style],
    .hero-section h1 {
        font-size: 1.25rem !important;
    }

    .guide-content h2[style],
    .main-article-content h2 {
        font-size: 1.1rem !important;
        margin-top: 30px !important;
    }

    .guide-content h3[style],
    .main-article-content h3 {
        font-size: 1rem !important;
    }

    .guide-content p[style],
    .guide-content ul[style],
    .guide-content ol[style],
    .main-article-content p,
    .main-article-content ul,
    .main-article-content ol {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section h1[style],
    .hero-section h1 {
        font-size: 1.15rem !important;
    }

    .guide-content h2[style],
    .main-article-content h2 {
        font-size: 1rem !important;
    }

    .guide-content p[style],
    .main-article-content p {
        font-size: 0.82rem !important;
    }
}

/* =============================================
   BLOG ARTICLE PAGES — .blog-content wrapper
   ============================================= */
.blog-content {
    padding: 40px 20px !important;
    max-width: 1100px !important;
}

/* seo-content block H2s — were 2rem inline */
.seo-content h2[style],
.blog-content .seo-content h2 {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem) !important;
    margin-top: 32px !important;
    margin-bottom: 14px !important;
}

/* seo-content paragraphs — were 1.15rem inline */
.seo-content p[style],
.blog-content p[style] {
    font-size: clamp(0.82rem, 1.6vw, 0.92rem) !important;
    line-height: 1.75 !important;
}

/* Blog featured card image icon */
.blog-content [style*="font-size: 3rem"] {
    font-size: 2rem !important;
}

/* =============================================
   SECTION PADDING REDUCTIONS
   (less extreme white space = less "zoomed" feel)
   ============================================= */
.comprehensive-info-section {
    padding: 50px 0 !important;
}

.comprehensive-info-section > div > div {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* =============================================
   MOBILE FINAL PASS
   ============================================= */
@media (max-width: 768px) {
    .blog-content {
        padding: 24px 16px !important;
    }

    .seo-content h2[style] {
        font-size: 1.05rem !important;
    }

    .seo-content p[style],
    .blog-content p[style] {
        font-size: 0.85rem !important;
        line-height: 1.65 !important;
    }

    .comprehensive-info-section {
        padding: 32px 0 !important;
    }
}

@media (max-width: 480px) {
    .seo-content h2[style] {
        font-size: 0.98rem !important;
    }

    .seo-content p[style],
    .blog-content p[style] {
        font-size: 0.82rem !important;
    }
}