/*
 * Legajoist — Custom Responsive Stylesheet
 * Covers: Mobile (≤575px), Tablet (576–991px), Desktop (992px+)
 */

/* ═══════════════════════════════════════════════════════════
   1. GLOBAL
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
   2. HEADER (Floating Pill)
═══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .header-inner { padding: 8px 8px 8px 20px; }
    .header-nav > li > a { padding: 8px 12px; font-size: 0.82rem; }
    .header-cta a { padding: 12px 18px; font-size: 0.75rem; }
}

@media (max-width: 991px) {
    #site-header { padding: 0 14px; top: 10px; }
    .header-inner { padding: 8px 8px 8px 16px; justify-content: space-between !important; }
    .header-logo img { height: 42px; }
    .header-nav, .header-cta { display: none !important; }
    .header-toggle { display: block !important; }
}

@media (max-width: 575px) {
    #site-header { padding: 0 10px; top: 8px; }
    .header-inner { padding: 6px 6px 6px 12px; border-radius: 40px; }
    .header-logo img { height: 36px; }
    #popup { padding: 22px 15px 21px; max-width: calc(100vw - 24px); }
    #popup .disclaimer-pp h5 { font-size: 1.1rem; margin-bottom: 14px; }
    #popup .disclaimer-pp p { font-size: 0.65rem; }
}

/* ═══════════════════════════════════════════════════════════
   3. HERO CAROUSEL
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #hero-carousel { height: 100vh; min-height: 500px; }
    #hero-carousel .hero-text { padding: 80px 5% 0 6%; }
    #hero-carousel .hero-title { font-size: 2.4rem !important; }
    #hero-carousel .hero-subtitle { font-size: 0.92rem; }
    #hero-carousel .hero-scroll { display: none; }
}

@media (max-width: 575px) {
    #hero-carousel { height: 100svh; min-height: 480px; }
    #hero-carousel .hero-text { padding: 70px 5% 0 5%; max-width: 100%; }
    #hero-carousel .hero-title { font-size: 1.9rem !important; line-height: 1.12 !important; }
    #hero-carousel .hero-subtitle { font-size: 0.87rem; margin-bottom: 28px; }
    #hero-carousel .hero-welcome { font-size: 0.6rem; padding: 5px 12px; }
    #hero-carousel .hero-btn,
    #hero-carousel .hero-btn-ghost { padding: 12px 22px; font-size: 0.72rem; }
    #hero-carousel .hero-btns { gap: 10px; }
    /* Carousel indicators */
    #hero-carousel .carousel-indicators { padding-left: 5% !important; }
}

/* ═══════════════════════════════════════════════════════════
   4. SECTION PADDING (global fix — !important overrides inline styles)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    section:not(#hero-carousel) { padding-top: 50px !important; padding-bottom: 50px !important; }
    .container { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 575px) {
    section:not(#hero-carousel) { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ═══════════════════════════════════════════════════════════
   5. ABOUT SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .pq-about-box { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    .pq-about-img-section { margin-bottom: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   6. SERVICES MARQUEE
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .svc-marquee-outer { padding: 10px 44px 0; }
    .svc-arrow { width: 36px; height: 36px; font-size: 1.5rem; }
    .svc-prev { left: 4px; }
    .svc-next { right: 4px; }
    .svc-card { width: 230px; }
    .svc-card-img { height: 200px; }
}

@media (max-width: 575px) {
    .svc-marquee-outer { padding: 10px 40px 0; }
    .svc-card { width: 200px; }
    .svc-card-img { height: 180px; }
    .svc-card-title { font-size: 0.875rem; }
}

/* ═══════════════════════════════════════════════════════════
   7. HOW WE WORK
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hw-card { margin-bottom: 20px; }
    .hw-heading { font-size: 1.6rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   8. CLIENTS MARQUEE
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .cli-logo-item { padding: 8px 18px; }
    .cli-logo-item img { max-height: 38px; max-width: 90px; }
}

/* ═══════════════════════════════════════════════════════════
   9. TESTIMONIALS MARQUEE
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .testi-card { width: 300px; padding: 24px 20px 20px; }
    .testi-marquee-track { animation-duration: 26s; }
}

@media (max-width: 575px) {
    .testi-card { width: 260px; padding: 20px 16px 18px; }
    .testi-text { font-size: 0.875rem; }
    .testi-marquee-track { animation-duration: 20s; }
}

/* ═══════════════════════════════════════════════════════════
   10. FOOTER
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    footer .ft-title { margin-top: 24px; }
    footer .col-lg-3,
    footer .col-lg-2,
    footer .col-lg-4 { margin-bottom: 10px; }
}

@media (max-width: 575px) {
    footer { font-size: 0.875rem; }
    .ft-social a { width: 34px; height: 34px; font-size: 0.8rem; }
    footer .col-md-6.text-md-end { text-align: center !important; }
}

/* ═══════════════════════════════════════════════════════════
   11. BREADCRUMB PAGES (About, Blog, Contact etc.)
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .pq-breadcrumb { padding-top: 100px !important; padding-bottom: 40px !important; }
    .pq-breadcrumb-title h1 { font-size: 2rem !important; }
}

@media (max-width: 575px) {
    .pq-breadcrumb { padding-top: 90px !important; padding-bottom: 30px !important; }
    .pq-breadcrumb-title h1 { font-size: 1.6rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   12. SECTION TITLES (all pages)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pq-section-title.pq-style-1 .pq-section-main-title { font-size: 1.7rem; }
    h2:not([style]) { font-size: 1.7rem; }
    h3:not([style]) { font-size: 1.35rem; }
}

@media (max-width: 575px) {
    .pq-section-title.pq-style-1 .pq-section-main-title { font-size: 1.45rem; }
    h2:not([style]) { font-size: 1.45rem; }
}

/* ═══════════════════════════════════════════════════════════
   13. BLOG CARDS
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pq-blog-post { margin-bottom: 28px; }
}

/* ═══════════════════════════════════════════════════════════
   14. TEAM CARDS
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pq-team-block, .pq-team { margin-bottom: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   15. CONTACT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .ct-form { padding: 24px 16px !important; }
    .ct-info-card { margin-bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   16. BACK TO TOP
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    #back-to-top { width: 40px; height: 40px; bottom: 20px; right: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   17. FLOATING APPOINTMENT WIDGET
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    #appt-fab { width: 50px; height: 50px; bottom: 20px; left: 16px; }
    #appt-panel { width: calc(100vw - 16px); left: 8px; bottom: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   18. STAT COUNTERS
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .pq-counter-number { font-size: 2.2rem !important; }
    .pq-counter-info { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   19. PRACTICE AREA / SERVICE DETAIL
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .sd-sidebar { margin-top: 36px; }
    .pq-service-box { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   20. CAREERS / INTERNSHIP
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .career-card, .job-card { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   21. DISCLAIMER POPUP
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    #popup { padding: 28px 18px 24px; max-width: calc(100vw - 24px); }
    #popup .disclaimer-pp h5 { font-size: 1.35rem; margin-bottom: 18px; }
    #popup .disclaimer-pp p { font-size: 0.83rem; line-height: 1.75; }
}

/* ═══════════════════════════════════════════════════════════
   22. OVERFLOW FIX (prevents horizontal scroll)
═══════════════════════════════════════════════════════════ */
body { overflow-x: hidden; }
.row { margin-left: 0; margin-right: 0; }

/* ═══════════════════════════════════════════════════════════
   23. MOBILE NAV OVERLAY
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    #mobile-nav a { font-size: 1.2rem; }
    #mobile-nav .mob-cta { padding: 12px 28px; font-size: 0.85rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   24. LegalHQ AD SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #legalhq-ad .row { flex-direction: column; text-align: center; }
    #legalhq-ad .col-md-4 { margin-top: 20px; }
}

/* ═══════════════════════════════════════════════════════════
   25. HOME — CLIENTS SECTION (150px inline padding override)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #our-clients { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* ═══════════════════════════════════════════════════════════
   26. HOME — ABOUT SECTION IMAGE WRAP
═══════════════════════════════════════════════════════════ */
/* Tablet: tighten the offset padding so images don't feel cramped */
@media (max-width: 991px) {
    #about-us-home [style*="padding-bottom:40px"] {
        padding-right: 26px !important;
        padding-bottom: 26px !important;
    }
}
/* Mobile: hide the overlap image and bring the badge back on-screen */
@media (max-width: 767px) {
    #about-us-home img[style*="position:absolute"] { display: none !important; }
    #about-us-home [style*="padding-bottom:40px"] {
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }
    #about-us-home [style*="left:-20px"] {
        left: 8px !important;
        top: 8px !important;
        padding: 10px 12px !important;
    }
    #about-us-home [style*="left:-20px"] span { font-size: 0.65rem !important; }
    #about-us-home h2[style] { font-size: 1.7rem !important; }
}
@media (max-width: 390px) {
    #about-us-home h2[style] { font-size: 1.45rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   27. HOME — HOW WE WORK
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hw-step { padding: 28px 22px 24px !important; }
    .hw-num { font-size: 3.5rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   28. ABOUT — IMAGE WRAP (au-img-wrap)
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .au-img-wrap { padding-left: 0 !important; padding-right: 40px !important; padding-bottom: 40px !important; }
    .au-img-main { height: 340px !important; }
}
@media (max-width: 767px) {
    .au-img-wrap { padding: 0 !important; }
    .au-img-main { height: 240px !important; }
    .au-img-overlap { display: none !important; }
    .au-heading { font-size: 1.55rem !important; }
}
@media (max-width: 390px) {
    .au-img-main { height: 200px !important; }
    .au-heading { font-size: 1.35rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   29. ABOUT — FEATURED TEAM MEMBER (tm-featured)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .tm-featured {
        flex-direction: column !important;
        padding: 28px 20px !important;
        gap: 20px !important;
        align-items: center !important;
    }
    .tm-featured-img-wrap {
        width: 160px !important;
        height: 175px !important;
        margin: 0 auto !important;
        flex-shrink: 0;
    }
    .tm-featured-body { text-align: center; }
    .tm-featured-name { font-size: 1.5rem !important; }
    .tm-featured-tags { justify-content: center !important; }
    .tm-featured-creds { font-size: 0.78rem; }
    .tm-featured-bio { font-size: 0.88rem; }
}
@media (max-width: 390px) {
    .tm-featured { padding: 22px 14px !important; }
    .tm-featured-img-wrap { width: 130px !important; height: 145px !important; }
    .tm-featured-name { font-size: 1.3rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   30. ABOUT — CARDS & AWARDS
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .au-vm-card { padding: 28px 20px !important; }
    .au-award-item { padding: 16px 14px !important; }
    .au-stat-num { font-size: 2rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   31. PRACTICE AREA — CARDS & HEADING
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pa-heading { font-size: 1.6rem !important; }
    .pa-card-img { height: 170px !important; }
    .pa-card-body { padding: 30px 18px 22px !important; }
}
@media (max-width: 390px) {
    .pa-heading { font-size: 1.4rem !important; }
    .pa-card-img { height: 150px !important; }
    .pa-card-body { padding: 26px 14px 20px !important; }
}

/* ═══════════════════════════════════════════════════════════
   32. SERVICE DETAIL — CONTENT CARD & SIDEBAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .sd-content-card { padding: 28px 26px !important; }
}
@media (max-width: 767px) {
    .sd-content-card { padding: 22px 18px !important; }
    .sd-content-title { font-size: 1.3rem !important; }
    .sd-hero-img img { height: 200px !important; }
    .sd-nav-btns { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sd-sidebar-card { margin-bottom: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   33. CTA STRIP — COMPACT ON MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bl-cta-title { font-size: 1.2rem !important; }
    .bl-cta-btn { padding: 11px 24px !important; font-size: 0.88rem !important; }
}

/* ═══════════════════════════════════════════════════════════
   34. FOOTER — INLINE PADDING OVERRIDE
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #pq-footer > div:first-child { padding-top: 36px !important; padding-bottom: 28px !important; }
}

/* ═══════════════════════════════════════════════════════════
   35. BLOG SECTION (home) — CARD IMAGE HEIGHT
═══════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .blog-card-img { height: 180px !important; }
}