/* LocalThai custom styles */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth transitions */
[x-cloak] { display: none !important; }

/* Scroll snap for photo galleries */
.snap-x { scroll-snap-type: x mandatory; }
.snap-center { scroll-snap-align: center; }

/* Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* Prose (basic markdown styling) */
.prose h1 { font-size: 2rem; font-weight: bold; margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose a { color: #f97316; text-decoration: underline; }

/* Dark mode overrides */
.dark .bg-white { background-color: #1f2937 !important; }
.dark .bg-gray-50 { background-color: #111827 !important; }
.dark .bg-gray-100 { background-color: #1f2937 !important; }
.dark .bg-gray-200 { background-color: #374151 !important; }
.dark .border { border-color: #374151 !important; }
.dark .border-t { border-color: #374151 !important; }
.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; }
.dark .text-gray-900 { color: #f3f4f6 !important; }
.dark .text-gray-700 { color: #d1d5db !important; }
.dark .text-gray-600 { color: #9ca3af !important; }
.dark .text-gray-500 { color: #9ca3af !important; }
.dark .text-gray-400 { color: #6b7280 !important; }
.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }
.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; }
.dark input, .dark textarea, .dark select { background-color: #1f2937 !important; color: #f3f4f6 !important; border-color: #4b5563 !important; }
.dark .prose a { color: #fb923c; }

/* Skeleton loading animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}
.dark .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

/* Mobile touch targets */
@media (max-width: 768px) {
    button, a, select, input[type="checkbox"] {
        min-height: 44px;
        min-width: 44px;
    }
    select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea {
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* Hidden SEO text - visible to crawlers, invisible to users */
.seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    color: transparent;
    font-size: 0;
}