/* Mobile Spacing and Padding Improvements */

/* Base mobile spacing adjustments */
@media (max-width: 768px) {
    /* Global container padding */
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Section spacing */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* Reduce excessive margins */
    .margin-top-0 { margin-top: 0 !important; }
    .margin-top-10 { margin-top: 0.5rem !important; }
    .margin-top-20 { margin-top: 1rem !important; }
    .margin-top-30 { margin-top: 1.5rem !important; }
    .margin-top-40 { margin-top: 2rem !important; }
    .margin-top-50 { margin-top: 2.5rem !important; }
    
    .margin-bottom-0 { margin-bottom: 0 !important; }
    .margin-bottom-10 { margin-bottom: 0.5rem !important; }
    .margin-bottom-20 { margin-bottom: 1rem !important; }
    .margin-bottom-30 { margin-bottom: 1.5rem !important; }
    .margin-bottom-40 { margin-bottom: 2rem !important; }
    .margin-bottom-50 { margin-bottom: 2.5rem !important; }
    
    /* Card spacing */
    .card {
        margin-bottom: 1.5rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Form spacing */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Button spacing */
    .btn {
        margin-bottom: 0.5rem;
    }
    
    .btn-block + .btn-block {
        margin-top: 0.5rem;
    }
    
    /* Header spacing */
    h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    h2 {
        font-size: 1.75rem;
        margin-bottom: 0.875rem;
    }
    
    h3 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    h4 {
        font-size: 1.25rem;
        margin-bottom: 0.625rem;
    }
    
    h5 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }
    
    h6 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* Paragraph spacing */
    p {
        margin-bottom: 1rem;
    }
    
    /* List spacing */
    ul, ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }
    
    li {
        margin-bottom: 0.25rem;
    }
    
    /* Table responsive wrapper */
    .table-responsive {
        margin-bottom: 1rem;
    }
    
    /* Modal spacing */
    .modal-body {
        padding: 1rem;
    }
    
    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem;
    }
    
    /* Alert spacing */
    .alert {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }
    
    /* Badge spacing */
    .badge {
        padding: 0.25rem 0.5rem;
    }
    
    /* Breadcrumb spacing */
    .breadcrumb {
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }
    
    /* Navigation spacing fixes */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .navbar-brand {
        margin-right: 0.5rem;
    }
    
    .nav-link {
        padding: 0.5rem 0.75rem;
    }
    
    /* Dropdown spacing */
    .dropdown-menu {
        padding: 0.5rem 0;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem;
    }
    
    /* Tab spacing */
    .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
    }
    
    /* Pagination spacing */
    .pagination {
        margin-bottom: 1rem;
    }
    
    .page-link {
        padding: 0.375rem 0.75rem;
    }
    
    /* Input group spacing */
    .input-group > .form-control,
    .input-group > .form-select {
        padding: 0.5rem 0.75rem;
    }
    
    /* Progress bar spacing */
    .progress {
        height: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Badge pill spacing */
    .badge.rounded-pill {
        padding: 0.35rem 0.65rem;
    }
    
    /* Specific component fixes */
    
    /* Hero sections */
    .banner3-dnaromance,
    .banner3-datemetrix,
    .banner3-genepool,
    .hero-section {
        padding: 4rem 1rem 3rem;
    }
    
    /* Feature sections */
    .features-section {
        padding: 2rem 0;
    }
    
    .feature-box {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* Testimonials */
    .testimonial-item {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* Pricing tables */
    .pricing-table {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    /* Footer */
    footer {
        padding: 2rem 0;
    }
    
    .footer-widget {
        margin-bottom: 2rem;
    }
    
    /* Blog posts */
    .blog-post {
        margin-bottom: 2rem;
    }
    
    .blog-post-meta {
        margin-bottom: 0.5rem;
    }
    
    /* Comments */
    .comment {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* User profiles */
    .profile-header {
        padding: 1.5rem;
    }
    
    .profile-stats {
        padding: 1rem;
    }
    
    /* Messages */
    .message-item {
        padding: 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* Match cards */
    .match-card {
        margin-bottom: 1.5rem;
    }
    
    .match-card-body {
        padding: 1rem;
    }
    
    /* Settings panels */
    .settings-panel {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Fix cramped mobile navigation */
    .mobile-bottom-nav {
        padding: 0.5rem 0;
    }
    
    .mobile-bottom-nav .nav-link {
        padding: 0.5rem 0.25rem;
    }
    
    /* Fix mobile menu spacing */
    .offcanvas-body {
        padding: 1rem;
    }
    
    .list-group-item {
        padding: 0.75rem 1rem;
    }
    
    /* Utility classes for mobile */
    .p-mobile-2 { padding: 0.5rem !important; }
    .p-mobile-3 { padding: 1rem !important; }
    .p-mobile-4 { padding: 1.5rem !important; }
    
    .px-mobile-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .px-mobile-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-mobile-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    
    .py-mobile-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-mobile-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-mobile-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    
    .m-mobile-2 { margin: 0.5rem !important; }
    .m-mobile-3 { margin: 1rem !important; }
    .m-mobile-4 { margin: 1.5rem !important; }
    
    .mx-mobile-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
    .mx-mobile-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
    .mx-mobile-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
    
    .my-mobile-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .my-mobile-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .my-mobile-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
}

/* Small mobile devices (max-width: 576px) */
@media (max-width: 576px) {
    /* Even tighter spacing for very small screens */
    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Reduce font sizes slightly */
    body {
        font-size: 0.875rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
    
    /* Smaller buttons on very small screens */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Reduce card padding */
    .card-body {
        padding: 0.75rem;
    }
}

/* Tablet adjustments (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container,
    .container-fluid {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Fix specific spacing issues mentioned in audit */

/* Remove excessive top margin on mobile */
@media (max-width: 768px) {
    .top-social3.margin-top-20 {
        margin-top: 0 !important;
    }
    
    /* Fix cramped form fields */
    .form-control,
    .form-select,
    .form-check-input {
        margin-bottom: 0.75rem;
    }
    
    /* Fix button spacing in forms */
    form .btn {
        margin-top: 0.5rem;
    }
    
    /* Fix social icon spacing */
    .social-icon {
        margin: 0 0.25rem;
    }
    
    /* Fix language dropdown spacing */
    .language-container-landing {
        margin: 0.5rem 0;
    }
    
    /* Fix services dropdown spacing */
    .services-dropdown {
        margin: 0.5rem 0;
    }
}

/* Ensure proper spacing for mobile navigation */
@media (max-width: 768px) {
    /* Account for fixed mobile navigation */
    body {
        padding-bottom: 70px; /* Height of bottom nav */
    }
    
    /* First content section needs extra top padding */
    main > section:first-child,
    .container:first-child,
    .container-fluid:first-child {
        padding-top: 80px; /* Height of top nav + spacing */
    }
}

/* Print media - remove unnecessary spacing */
@media print {
    * {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body {
        padding: 0 !important;
    }
    
    .container,
    .container-fluid {
        padding: 0 !important;
    }
}