@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
}

.font-bebas {
    font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
}

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #fcad31;
    border-radius: 4px;
}

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

/* Article content styling for modal */
.prose {
    color: #374151;
    line-height: 1.7;
}

.prose h1,
.prose h2,
.prose h3 {
    color: #111827;
    font-weight: 600;
    line-height: 1.4;
}

.prose p {
    margin-bottom: 1rem;
}

.prose a {
    color: #fcad31;
    text-decoration: underline;
    text-decoration-color: rgba(252, 173, 49, 0.3);
    text-underline-offset: 2px;
}

.prose a:hover {
    color: #f2748e;
    text-decoration-color: rgba(242, 116, 142, 0.5);
}

/* Collapse animation for Alpine.js */
[x-collapse] {
    transition: height 0.3s ease-out;
}

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


/* Modal responsive fixes */
.modal-responsive {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
}

@media (max-width: 640px) {
    .modal-responsive {
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh;
    }
}

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

/* Improved scrolling on mobile */
@media (max-width: 768px) {
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }
    
    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Better touch targets and modal on mobile */
@media (max-width: 640px) {
    /* Touch targets */
    button {
        min-height: 44px;
    }
    
    /* Full screen modal on mobile */
    .modal-mobile-fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    
    /* Prevent text selection on mobile modal */
    .modal-content {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: text;
    }
    
    /* Better text wrapping in modal */
    .modal-content p {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}