/* ===================================================================
   RESPONSIVE FIXES v2 — Phase 3: Full Responsive Audit Overrides
   These rules are declared LAST and intentionally override earlier
   conflicting declarations in responsive.css
   ===================================================================
   Load order: style.css → responsive.css → responsive-fixes.css → mobile-nav.css
   =================================================================== */

/* -------------------------------------------------------------------
   A. NAVBAR — Remove legacy conflicting height rules
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar {
        height: auto !important;
        min-height: auto !important;
        padding: 8px 0 !important;
    }

    /* Remove display:contents that broke the flexbox layout */
    .navbar>.container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }

    /* Bootstrap collapse nav — hidden on mobile (drawer handles it) */
    .navbar-collapse {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* -------------------------------------------------------------------
   B. HTML / BODY — No horizontal scroll
   ------------------------------------------------------------------- */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Prevent rows from causing overflow */
@media (max-width: 991.98px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* -------------------------------------------------------------------
   C. PY-6 UTILITY (Bootstrap 5 doesn't define py-6 by default)
   ------------------------------------------------------------------- */
.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

@media (max-width: 991.98px) {
    .py-6 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (max-width: 767.98px) {
    .py-6 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .py-6 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* -------------------------------------------------------------------
   D. HERO SECTION — Modern hero responsive scaling
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero-section-modern .display-4 {
        font-size: 2.6rem;
        line-height: 1.2;
    }

    .hero-section-modern .lead.fs-5 {
        font-size: 1rem !important;
    }

    .hero-section-modern .hero-quick-info {
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 1rem;
    }

    .hero-section-modern .main-image-container img {
        min-height: auto !important;
        max-height: 420px;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 767.98px) {
    .hero-section-modern .display-4 {
        font-size: 2rem;
        line-height: 1.25;
    }

    /* Swap: image above, text below */
    .hero-section-modern .col-lg-6:first-child {
        order: 2;
    }

    .hero-section-modern .col-lg-6:last-child {
        order: 1;
    }

    .hero-section-modern .main-image-container img {
        max-height: 260px;
    }

    .hero-section-modern .hero-quick-info {
        font-size: 0.82rem;
        gap: 8px;
    }

    /* Stack CTA buttons */
    .hero-section-modern .d-flex.gap-3.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .hero-section-modern .d-flex.gap-3.flex-wrap .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .hero-section-modern .display-4 {
        font-size: 1.75rem;
    }

    .hero-section-modern p.lead {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 390px) {
    .hero-section-modern .display-4 {
        font-size: 1.55rem;
    }
}

/* -------------------------------------------------------------------
   E. TYPOGRAPHY — Scale display headings for mobile
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .display-5 {
        font-size: 1.85rem !important;
    }

    .display-6 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .display-5 {
        font-size: 1.6rem !important;
    }

    .display-6 {
        font-size: 1.35rem !important;
    }
}

/* -------------------------------------------------------------------
   F. TRUST STRIP — 2×2 grid on small mobile
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .trust-strip .row.g-4 {
        gap: 0.75rem !important;
    }

    .trust-strip .col-6 .d-flex {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .trust-strip .fw-semibold.small {
        font-size: 0.75rem;
    }
}

/* -------------------------------------------------------------------
   G. SERVICE / CONDITION / STEP CARDS — Responsive grid
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .col-md-6.col-lg-4,
    .col-md-6.col-lg-3 {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* Service card image */
@media (max-width: 767.98px) {
    .service-thumb-wrapper {
        height: 180px;
        overflow: hidden;
    }

    .service-thumb-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Condition cards */
@media (max-width: 575.98px) {
    .condition-card-modern {
        padding: 1.25rem !important;
    }

    .condition-icon-circle {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Step cards */
@media (max-width: 575.98px) {
    .step-card {
        text-align: center;
        padding: 1.25rem;
    }

    .step-icon {
        font-size: 1.75rem !important;
    }
}

/* -------------------------------------------------------------------
   H. BUTTONS — Tap-friendly minimums
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-lg {
        font-size: 1rem !important;
        padding: 0.65rem 1.4rem !important;
    }
}

/* -------------------------------------------------------------------
   I. DOCTOR / ABOUT SECTION
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .doctor-img-wrapper {
        max-height: 380px;
        overflow: hidden;
    }

    .doctor-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    .doctor-features-list .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .doctor-section .d-flex.gap-3 {
        flex-direction: column;
        align-items: stretch;
        gap: 10px !important;
    }

    .doctor-section .d-flex.gap-3 .btn {
        text-align: center;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------
   J. ACCESS / REASONS SECTION
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .access-section.section-wrapper {
        padding: 40px 0 !important;
    }

    .access-card {
        padding: 1.25rem 1rem !important;
    }

    .benefits-list li {
        font-size: 0.92rem;
        margin-bottom: 8px;
        line-height: 1.5;
    }
}

/* -------------------------------------------------------------------
   K. BACK TO TOP — Responsive positioning
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .btn-back-to-top {
        bottom: 80px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
    }
}

body.disclaimer-bar-visible .btn-back-to-top {
    bottom: 120px !important;
}

@media (max-width: 767.98px) {
    body.disclaimer-bar-visible .btn-back-to-top {
        bottom: 105px !important;
    }
}

/* -------------------------------------------------------------------
   L. TESTIMONIALS
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .testimonial-section {
        padding: 40px 0 !important;
    }

    .testimonial-card-3d {
        padding: 18px 14px !important;
        min-height: auto !important;
    }

    .testimonial-quote-3d {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .testimonial-3d-container {
        gap: 15px !important;
    }
}

/* -------------------------------------------------------------------
   M. FOOTER
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 6px;
    }

    .footer-copy {
        justify-content: center !important;
    }
}

/* -------------------------------------------------------------------
   N. DISCLAIMER BAR — Mobile improvements
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .disclaimer-popup-bar {
        padding: 10px 14px !important;
    }

    .disclaimer-popup-container {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .disclaimer-popup-text {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .disclaimer-popup-close {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
    }

    body.disclaimer-bar-visible {
        padding-bottom: 100px !important;
    }
}

/* Keep disclaimer below mobile overlay */
body.mobile-menu-open .disclaimer-popup-bar {
    z-index: 1035 !important;
}

/* -------------------------------------------------------------------
   O. INNER PAGES (conditions, treatments, area, blog, contact)
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Inner page hero section */
    .page-hero-section,
    .inner-page-hero,
    .hero-section-inner {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Contact page map */
    .map-container iframe,
    .contact-map iframe,
    iframe[src*="google.com/maps"] {
        height: 220px !important;
        width: 100% !important;
    }

    /* Blog cards */
    .blog-card,
    .blog-post-card {
        margin-bottom: 1.5rem;
    }
}

/* -------------------------------------------------------------------
   P. LARGE DROPDOWN MENU — keep on screen at tablet widths
   ------------------------------------------------------------------- */
@media (max-width: 1200px) and (min-width: 992px) {
    .navbar .dropdown-menu-large {
        min-width: auto;
        width: 600px;
        right: 0;
        left: auto;
    }
}

@media (max-width: 1100px) and (min-width: 992px) {
    .navbar .dropdown-menu-large {
        width: 500px;
    }
}