/* ============================================
   Extra-small screens (< 375px)
   Fixes horizontal overflow / hero / form / captcha
   ============================================ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 374px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .homepage,
    .divorce-page,
    .sub_banner,
    .hero-section,
    .hero-container,
    .hero-content,
    .evaluation-form,
    .contact-section,
    .contact-container,
    .contact-form-card,
    .services-section,
    .services-grid,
    .trusted-section,
    .free-case-review-section,
    .free-case-review-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    /* Header / top bar */
    .sub_banner .header .container,
    .header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    .navbar-brand {
        max-width: 140px !important;
    }

    .navbar-logo {
        max-height: 36px !important;
        max-width: 140px !important;
    }

    .top-bar-nav {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .top-bar-left span,
    .location-link,
    .mobile-location-link {
        font-size: 11px !important;
        white-space: normal !important;
    }

    .locations-list {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Hero */
    .hero-section {
        padding: 48px 12px 32px !important;
        overflow-x: hidden !important;
    }

    .hero-content h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .hero-content p,
    .hero-feature-item,
    .hero-feature-item span {
        font-size: 13px !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    .what-we-offer {
        font-size: 14px !important;
    }

    .hero-content .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        padding: 12px 14px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    /* Evaluation form + captcha (304px widget overflow fix) */
    .evaluation-form {
        padding: 16px 12px !important;
        overflow: hidden !important;
    }

    .evaluation-form h3 {
        font-size: 18px !important;
    }

    .evaluation-form input,
    .evaluation-form textarea,
    .contact-form input {
        font-size: 16px !important; /* prevent iOS zoom */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .recaptcha-wrap {
        max-width: 100% !important;
        overflow: hidden !important;
        height: 56px !important;
        margin: 8px 0 10px !important;
    }

    .recaptcha-wrap .g-recaptcha,
    .evaluation-form .g-recaptcha,
    .contact-form .g-recaptcha {
        transform: scale(0.7) !important;
        transform-origin: left top !important;
        width: 304px !important;
    }

    /* Trusted / logos */
    .trusted-section {
        margin: 24px 0 0 !important;
        padding: 16px 8px 24px !important;
        border-radius: 16px !important;
    }

    .credibility-logos {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
    }

    .logos-container,
    .trusted-logos {
        gap: 8px !important;
        justify-content: center !important;
    }

    .credibility-logos img,
    .trusted-logos img {
        min-width: 0 !important;
        max-width: 56px !important;
        height: auto !important;
    }

    /* Team cards fixed widths */
    .team-member {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Contact form */
    .contact-section {
        padding: 40px 12px !important;
    }

    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .contact-form-card h3,
    .form-description {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }

    .contact-form {
        padding: 0 14px 20px !important;
    }

    .form-top-bar {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* CTA button was nowrap — overflows */
    .btn-free-review {
        white-space: normal !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .free-case-review-container {
        grid-template-columns: 1fr !important;
    }

    .free-case-review-section {
        padding: 32px 12px !important;
    }

    .lawyer-profile-card {
        margin: 0 !important;
        max-width: 100% !important;
    }

    .services-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    img,
    iframe {
        max-width: 100% !important;
        height: auto;
    }

    iframe {
        height: 220px !important;
    }
}

@media (max-width: 320px) {
    .hero-content h1 {
        font-size: 20px !important;
    }

    .recaptcha-wrap {
        height: 50px !important;
    }

    .recaptcha-wrap .g-recaptcha,
    .evaluation-form .g-recaptcha,
    .contact-form .g-recaptcha {
        transform: scale(0.62) !important;
    }

    .navbar-brand {
        max-width: 120px !important;
    }
}