/* static/css/base.css */

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Skip to main content */
.skip-to-main {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 9999;
    background: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.skip-to-main:focus {
    top: 1rem;
    left: 1rem;
}

/* Navigation */
.nav-link {
    transition: color 0.2s ease;
}

.nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mobile menu */
.mobile-menu {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Message animations */
.message-slide {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Message progress bar */
.message-progress-bar {
    transition: width 5s linear;
}

/* Footer links */
.footer-link {
    transition: color 0.2s ease;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Reduced motion */
.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles */
:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .mobile-menu {
        animation: slideDown 0.2s ease-out;
    }
    
    .message-slide {
        max-width: calc(100vw - 2rem);
    }
}

/* Print styles */
@media print {
    .skip-to-main,
    .nav-link,
    .mobile-menu,
    .message-slide,
    footer {
        display: none !important;
    }
}

/* Add these improvements to your base.css */

/* Improve responsive container constraints */
#messages-container {
    max-width: min(calc(100vw - 2rem), 28rem);
    width: auto;
}

/* Better mobile menu responsiveness */
@media (max-width: 768px) {
    .mobile-menu {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-menu a {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Improve text containment */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Better focus states for touch devices */
@media (hover: none) and (pointer: coarse) {
    .nav-link:hover,
    .footer-link:hover {
        text-decoration: none;
    }
    
    .upload-method-btn:hover {
        transform: none;
        background-color: initial;
    }
}

/* Improve touch target sizes for mobile */
@media (max-width: 768px) {
    button, 
    .upload-btn,
    .nav-link,
    .footer-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
}

/* Prevent text overflow in cards */
.card-content * {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Better scrolling for modals on mobile */
.modal-content {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}