/* Responsive Styles for Common Components */

/* Header and Navigation */
@media (max-width: 768px) {
    /* Make nav links more touchable */
    .nav-link {
        padding: 0.75rem 1rem;
        margin: 0.25rem 0;
    }
    
    /* Logo adjustments */
    .logo-img {
        height: 2rem;
        width: auto;
    }
    
    /* Mobile menu button */
    #mobile-menu-button {
        padding: 0.5rem;
        transition: background-color 0.2s ease;
    }
    
    #mobile-menu-button:active {
        background-color: rgba(107, 114, 128, 0.3);
    }
    
    #mobile-menu-button svg {
        width: 1.5rem;
        height: 1.5rem;
        transition: transform 0.2s ease;
    }
    
    #mobile-menu-button[aria-expanded="true"] svg {
        transform: scale(1.1);
    }
    
    /* Mobile menu container */
    #mobile-menu {
        position: fixed;
        top: 64px; /* Adjust based on your header height */
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        overflow-y: auto;
        max-height: calc(100vh - 64px);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, 0.95);
        z-index: 40;
    }
    
    #mobile-menu:not(.hidden) {
        opacity: 1;
        transform: translateY(0);
    }
    
    #mobile-menu .container {
        padding: 1rem;
    }
    
    #mobile-menu .space-y-4 {
        margin-top: 0.5rem;
    }
    
    /* Mobile menu links */
    #mobile-menu a {
        display: block;
        width: 100%;
        font-size: 1.125rem;
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    #mobile-menu a:active {
        background-color: rgba(107, 114, 128, 0.3);
    }
    
    #mobile-menu a.active {
        color: #8b5cf6;
        background-color: rgba(139, 92, 246, 0.1);
        font-weight: 500;
    }
}

/* Footer */
@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    footer .flex {
        flex-direction: column;
        align-items: center;
    }
    
    footer .flex > div {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    footer .space-x-4 {
        justify-content: center;
        margin-top: 1rem;
    }
    
    footer .text-right {
        text-align: center;
    }
    
    /* Social media icons */
    .social-icons {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .social-icon {
        margin: 0 0.5rem;
    }
    
    /* Footer links */
    .footer-links {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-links a {
        margin: 0.5rem 0;
    }
}

/* Cards */
@media (max-width: 768px) {
    .card, .service-card, .blog-card, .project-card {
        margin-bottom: 1.5rem;
    }
    
    .card:hover, .service-card:hover {
        transform: translateY(-5px);
    }
    
    /* Card content padding */
    .card-body, .card-content {
        padding: 1.25rem;
    }
    
    /* Card images */
    .card-img {
        height: auto;
        max-height: 200px;
        object-fit: cover;
    }
    
    /* Card titles */
    .card-title {
        font-size: 1.25rem;
        line-height: 1.5;
    }
    
    /* Card description */
    .card-text {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* Buttons */
@media (max-width: 768px) {
    .btn, .button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Button group */
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    /* Primary button */
    .btn-primary {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Outlined button */
    .btn-outline {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Forms */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1rem;
    }
    
    input, textarea, select {
        padding: 0.75rem;
        font-size: 16px;
    }
    
    label {
        margin-bottom: 0.5rem;
        display: block;
    }
    
    /* Multi-column form layouts */
    .form-row {
        flex-direction: column;
    }
    
    .form-row > div {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    /* Form validation messages */
    .form-error {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    
    /* Form input with icons */
    .form-input {
        height: auto;
        min-height: 44px;
    }
    
    /* Enhance touch targets for mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea {
        min-height: 44px;
    }
    
    /* Improved submit buttons */
    button[type="submit"] {
        min-height: 48px;
    }
}

/* Modals and Dialogs */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem auto;
        padding: 1rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    /* Close button */
    .modal-close {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.5rem;
    }
}

/* Tabs */
@media (max-width: 768px) {
    .tabs {
        flex-wrap: wrap;
    }
    
    .tab {
        flex: 1 0 50%;
        text-align: center;
        padding: 0.5rem;
    }
    
    /* Tab content */
    .tab-content {
        padding: 1rem;
    }
}

/* Alerts and Notifications */
@media (max-width: 768px) {
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .alert-icon {
        margin-right: 0.5rem;
    }
    
    /* Toast notifications */
    .toast {
        width: 90%;
        margin: 0.5rem auto;
        padding: 0.75rem 1rem;
    }
}

/* Breadcrumbs */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
        font-size: 0.75rem;
        white-space: nowrap;
        overflow-x: auto;
    }
    
    .breadcrumb-item {
        margin: 0 0.25rem;
    }
}

/* Tags and Badges */
@media (max-width: 768px) {
    .tag, .badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    /* Tag groups */
    .tags {
        flex-wrap: wrap;
    }
}

/* Progress Bars */
@media (max-width: 768px) {
    .progress {
        height: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .progress-label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
}

/* Accordions */
@media (max-width: 768px) {
    .accordion-header {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .accordion-content {
        padding: 0.75rem;
    }
    
    .accordion-icon {
        width: 1rem;
        height: 1rem;
    }
}

/* Pagination */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-item {
        margin: 0.25rem;
    }
    
    .pagination-link {
        min-width: 2rem;
        min-height: 2rem;
        font-size: 0.875rem;
    }
}

/* Tooltips */
@media (max-width: 768px) {
    .tooltip {
        max-width: 200px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}