/* Mobile-specific improvements for Petição Brasil */

/* Ensure proper viewport behavior */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Improve touch targets on mobile */
@media (max-width: 640px) {
    button, a, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent horizontal scroll on mobile */
body {
    overflow-x: hidden;
}

/* Line clamp utility for truncating text */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Improve form inputs on mobile */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    font-size: 16px; /* Prevent iOS zoom on focus */
}

/* Better spacing for mobile cards */
@media (max-width: 640px) {
    .petition-card {
        margin-bottom: 1rem;
    }
}

/* Improve table responsiveness if any tables exist */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Hamburger menu animation */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Smooth transitions for hover effects on mobile */
@media (hover: none) {
    .hover\:shadow-xl:hover,
    .hover\:shadow-lg:hover {
        box-shadow: inherit;
    }
    
    .transform:hover {
        transform: none;
    }
}

/* Better spacing for mobile messages */
@media (max-width: 640px) {
    .messages {
        margin: 0.5rem;
    }
}

/* Improve button wrapping on mobile */
@media (max-width: 640px) {
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .button-group > * {
        width: 100%;
    }
}

/* Better text wrapping */
.break-word {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Sticky header improvement for mobile */
@media (max-width: 1024px) {
    header {
        position: sticky;
        top: 0;
        z-index: 50;
    }
}

/* Improve modal/dialog on mobile if needed */
@media (max-width: 640px) {
    .modal, .dialog {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
}

/* Better emoji sizing on mobile */
@media (max-width: 640px) {
    .emoji-large {
        font-size: 2rem;
    }
}

/* Improve hero gradient on mobile */
@media (max-width: 640px) {
    .hero-gradient {
        background-size: cover;
        background-position: center;
    }
}

/* Safe area insets for iOS devices with notches */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Improve scrollbar on mobile webkit browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Improve image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Better spacing for mobile navigation */
@media (max-width: 1024px) {
    nav a, nav button {
        padding: 0.5rem 0;
    }
}