/* ==========================================================================
   Mobile Responsive Styles - Add to each page without changing desktop design
   ========================================================================== */

/* Fix hero background for mobile - use mobile image, disable fixed attachment */
@media (max-width: 767px) {
    .hero {
        background-image: url('hero mobile.png') !important;
        background-attachment: scroll !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: 70px;
        justify-content: center;
    }
    
    .hero-content {
        padding: 2rem 1.25rem !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .hero h1 {
        font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
        line-height: 1.15 !important;
    }
    
    .hero p {
        font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0.75rem !important;
    }
    
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100% !important;
        max-width: 260px !important;
        text-align: center !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .hero-stripe {
        position: relative !important;
        padding: 0.75rem 0 !important;
    }
    
    .hero-stripe .container {
        padding: 0 1rem !important;
    }
    
    .hero-stripe .trust-signals {
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .hero-stripe .trust-signal {
        font-size: 0.7rem !important;
        padding: 0 0.5rem !important;
    }
}

/* Hide mobile CTA in nav on desktop */
.nav-cta-mobile {
    display: none !important;
}

/* Navigation mobile improvements */
@media (max-width: 767px) {
    nav {
        padding: 0.75rem 1rem !important;
    }
    
    .mobile-menu-btn {
        display: flex !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
    }
    
    .mobile-menu-btn[aria-expanded="true"] {
        background: var(--primary-orange);
        color: white;
    }
    
    .nav-links {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        flex-direction: column !important;
        padding: 1.5rem !important;
        gap: 0.5rem !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
        border-bottom: 1px solid rgba(246, 136, 53, 0.15) !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        z-index: 999 !important;
    }
    
    .nav-links.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .nav-links li {
        width: 100% !important;
    }
    
    .nav-links a {
        display: block !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
        border-radius: 8px !important;
        transition: background 0.2s !important;
    }
    
    .nav-links a:hover,
    .nav-links a:focus {
        background: var(--bg-card) !important;
        color: var(--primary-orange) !important;
    }
    
    .nav-links .dropdown-content {
        position: static !important;
        display: none !important;
        padding: 0.5rem 0 0.5rem 1rem !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        animation: none !important;
    }
    
    .nav-links .dropdown.open .dropdown-content {
        display: block !important;
    }
    
    .nav-links .dropdown-content a {
        padding: 0.5rem 0 !important;
        font-size: 1rem !important;
    }
    
    .dropdown-arrow {
        float: right !important;
        transition: transform 0.2s !important;
    }
    
    .dropdown.open .dropdown-arrow {
        transform: rotate(180deg) !important;
    }
    
    /* Hide header CTA on mobile, show inside menu */
    nav > .nav-cta {
        display: none !important;
    }
    
    .nav-cta {
        display: inline-block !important;
        margin-top: 1rem !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* Section padding on mobile */
@media (max-width: 767px) {
    section {
        padding: 2rem 1rem !important;
    }
    
    .container {
        padding: 0 1rem !important;
    }
    
    .section-header {
        margin-bottom: 1.75rem !important;
    }
    
    .section-header h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    }
    
    .section-header p {
        font-size: 0.9rem !important;
    }
}

/* About section mobile */
@media (max-width: 767px) {
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .about-image {
        height: 250px !important;
        order: -1 !important;
    }
    
    .about-content h3 {
        font-size: 1.25rem !important;
        text-align: center !important;
    }
    
    .about-content p {
        text-align: center !important;
        font-size: 0.9rem !important;
    }
    
    .about-content .btn-group {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* Loan cards grid mobile */
@media (max-width: 767px) {
    .loan-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .loan-card {
        padding: 1rem !important;
        text-align: center !important;
    }
}

/* Resources grid mobile */
@media (max-width: 767px) {
    .resources-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .resource-card {
        text-align: center !important;
        padding: 1.25rem !important;
    }
}

/* Process steps mobile */
@media (max-width: 767px) {
    .steps {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .step {
        padding: 1.25rem 0.75rem !important;
        text-align: center !important;
    }
    
    .step-number {
        margin: 0 auto 0.75rem !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }
}

/* Closed deals carousel mobile */
@media (max-width: 767px) {
    .deals-header {
        margin-bottom: 1.5rem !important;
    }
    
    .deals-header .eyebrow {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.75rem !important;
        gap: 0.35rem !important;
    }
    
    .deals-header h2 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        margin-bottom: 0.5rem !important;
    }
    
    .deals-header p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
    }
    
    .deals-carousel {
        flex-direction: column !important;
        gap: 0.75rem !important;
        position: relative !important;
    }
    
    .deals-slideshow {
        max-width: 100% !important;
        max-height: 50vh !important;
        border-radius: 10px !important;
        position: relative !important;
    }
    
    .deals-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
        z-index: 10 !important;
    }
    
    .deals-btn.prev {
        left: 0.5rem !important;
    }
    
    .deals-btn.next {
        right: 0.5rem !important;
    }
    
    .deals-btn:hover {
        background: var(--primary-orange) !important;
        color: var(--white) !important;
        border-color: var(--primary-orange) !important;
    }
    
    .deals-dots {
        margin-top: 0.5rem !important;
        gap: 0.35rem !important;
        order: 3 !important;
    }
    
    .deals-dot {
        width: 8px !important;
        height: 8px !important;
        background: var(--border-color) !important;
        border-radius: 50% !important;
    }
    
    .deals-dot.active {
        background: var(--primary-orange) !important;
        width: 20px !important;
        border-radius: 999px !important;
        transform: none !important;
        box-shadow: 0 0 0 3px rgba(246, 136, 53, 0.15) !important;
    }
}

/* Team section mobile */
@media (max-width: 767px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    
    .team-card {
        padding: 0.875rem !important;
    }
    
    .team-avatar {
        width: 52px !important;
        height: 52px !important;
    }
    
    .team-card h3 {
        font-size: 0.9rem !important;
    }
    
    .team-card p {
        font-size: 0.75rem !important;
    }
    
    .team-states {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Calculator mobile */
@media (max-width: 767px) {
    .calc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    
    .calc-layout {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .calc-summary {
        text-align: center !important;
    }
    
    .calc-summary li {
        text-align: left !important;
        font-size: 0.9rem !important;
    }
    
    .calc-input-wrapper input {
        padding: 0.875rem 2.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .calc-btn {
        padding: 0.875rem !important;
        font-size: 0.9rem !important;
    }
    
    .calc-result .result-breakdown {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .calc-result .result-breakdown div {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    #calculator {
        background-attachment: scroll !important;
    }
}

@media (max-width: 480px) {
    .calc-grid {
        grid-template-columns: 1fr !important;
    }
    
    .calc-result .result-breakdown {
        grid-template-columns: 1fr !important;
    }
}

/* CTA section mobile */
@media (max-width: 767px) {
    .cta {
        padding: 2rem 1rem !important;
    }
    
    .cta h2 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
    }
    
    .cta p {
        font-size: 0.9rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .cta .btn-primary {
        width: 100% !important;
        max-width: 260px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* Footer mobile */
@media (max-width: 767px) {
    footer {
        padding: 2rem 1rem 1.5rem !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .footer-brand .logo {
        justify-content: center !important;
    }
    
    .footer-brand .logo-img {
        height: 36px !important;
    }
    
    .footer-brand p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }
    
    .footer-brand p:last-of-type {
        font-size: 0.8rem !important;
    }
    
    .footer-brand img[alt*="Equal Housing"] {
        height: 16px !important;
        margin-right: 6px !important;
    }
    
    .footer-links h4 {
        margin-bottom: 0.75rem !important;
        font-size: 0.95rem !important;
    }
    
    .footer-links li {
        margin-bottom: 0.4rem !important;
    }
    
    .footer-links a {
        font-size: 0.9rem !important;
        word-break: break-word !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center !important;
        font-size: 0.8rem !important;
    }
    
    .footer-bottom .made-by {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .footer-bottom .made-by img {
        height: 20px !important;
    }
}

/* Apply modal mobile - bottom sheet style for all mobile sizes */
@media (max-width: 767px) {
    .apply-modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    
    .apply-modal {
        max-height: 95vh !important;
        max-height: 95dvh !important;
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15) !important;
        animation: applySlideUpMobile 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    @keyframes applySlideUpMobile {
        from { opacity: 0; transform: translateY(100%); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .apply-modal-header {
        padding: 1.25rem 1rem 0 !important;
        flex-shrink: 0 !important;
    }
    
    .apply-modal-header h2 {
        font-size: 1.25rem !important;
    }
    
    .apply-modal-header p {
        font-size: 0.9rem !important;
    }
    
    .apply-modal-header::after {
        left: 15% !important;
        right: 15% !important;
    }
    
    .apply-modal-close {
        top: 0.75rem !important;
        right: 0.75rem !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.5rem !important;
        background: rgba(255,255,255,0.9) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .apply-modal-body {
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .apply-steps {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .apply-step {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }
    
    .apply-progress {
        height: 4px !important;
        margin-bottom: 1.25rem !important;
    }
    
    .apply-step-panel h3 {
        font-size: 1.15rem !important;
        margin-bottom: 0.35rem !important;
    }
    
    .apply-field {
        margin-bottom: 1rem !important;
    }
    
    .apply-field label {
        font-size: 0.85rem !important;
    }
    
    .apply-field input,
    .apply-field select {
        padding: 1rem !important;
        font-size: 1rem !important; /* Prevents zoom on iOS */
        border-radius: 10px !important;
    }
    
    .apply-field.consent-field label {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .apply-nav {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    
    .apply-nav.submit-nav {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }
    
    .apply-btn {
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        min-width: 140px !important;
        flex: 1 !important;
        justify-content: center !important;
    }
    
    .apply-btn-prev {
        order: 1 !important;
    }
    
    .apply-btn-next,
    .apply-submit {
        order: 2 !important;
        width: 100% !important;
    }
    
    .apply-success {
        padding: 1.5rem 1rem !important;
    }
    
    .apply-success h3 {
        font-size: 1.35rem !important;
    }
    
    .apply-check {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.75rem !important;
    }
    
    .apply-equal-housing {
        margin-top: 1.25rem !important;
        padding-top: 1rem !important;
    }
    
    .apply-equal-housing img {
        height: 20px !important;
    }
    
    .apply-equal-housing span {
        font-size: 0.75rem !important;
    }
}

/* Touch target improvements */
@media (max-width: 767px) {
    a, button, input, select, .btn-primary, .btn-secondary,
    .nav-cta, .team-btn, .card-link, .resource-card a,
    .loan-card a.card-link, .deals-btn, .mobile-menu-btn {
        min-height: 40px !important;
        min-width: 40px !important;
        touch-action: manipulation !important;
    }
    
    /* Ensure form inputs don't zoom on iOS */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    .nav-links a {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
    }
    
    .nav-links .dropdown-content a {
        padding: 0.5rem 0 !important;
        font-size: 0.9rem !important;
    }
}

/* Improve text readability on mobile */
@media (max-width: 767px) {
    body {
        -webkit-text-size-adjust: 100% !important;
        text-rendering: optimizeLegibility !important;
    }
    
    p, li, span, div {
        hyphens: auto !important;
    }
}

/* Prevent horizontal scroll */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    * {
        max-width: 100% !important;
    }
    
    img, video {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Fix calculator section background on mobile */
@media (max-width: 767px) {
    #calculator {
        background-attachment: scroll !important;
    }
}

/* Fix any fixed positioning issues on mobile */
@media (max-width: 767px) {
    header.scrolled {
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
}

/* Smooth scrolling for anchor links */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Focus visible for accessibility */
@media (max-width: 767px) {
    :focus-visible {
        outline: 3px solid var(--primary-blue) !important;
        outline-offset: 2px !important;
    }
}

/* Print styles - hide mobile nav */
@media print {
    .mobile-menu-btn,
    .nav-links,
    .hero-stripe,
    .cta,
    footer,
    .apply-modal-overlay {
        display: none !important;
    }
    
    .hero {
        min-height: auto !important;
        background: none !important;
    }
    
    section {
        padding: 1rem 0 !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}