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

[x-cloak] {
    display: none;
}



/* Target Tiptap code blocks and Highlight.js */
.prose pre,
.prose code,
.prose pre code.hljs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

/* Prevent overflow and ensure responsiveness */
.prose pre {
    overflow-x: auto; /* Add scrollbar for long code */
    white-space: pre-wrap; /* Optional: wrap long lines */
    padding: 1rem; /* Improve readability */
}

/* Remove any fixed widths from Highlight.js */
.hljs {
    width: 100% !important;
    max-width: 100% !important;
}

/* Restore readable width for desktop */
@media (min-width: 768px) {
    .prose pre,
    .prose code {
        max-width: 65ch !important; /* Match prose default */
    }
}
/* resources/css/app.css */

/* Import Tailwind base, components, and utilities */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import Font Awesome for icons (optional) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Root variables for theming */
:root {
    --content-bg: #ffffff;
    --content-text: #1f2937;
    --content-border: #e5e7eb;
    --code-bg: #1f2937;
    --code-text: #e5e7eb;
    --strong-color: #1f2937;
    --link-color: #2563eb;
    --blockquote-border: #d1d5db;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
    --content-bg: #1f2937;
    --content-text: #e5e7eb;
    --content-border: #4b5563;
    --code-bg: #111827;
    --code-text: #d1d5db;
    --strong-color: #e5e7eb;
    --link-color: #60a5fa;
    --blockquote-border: #6b7280;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Content container */
.tiptap-content {
    @apply max-w-full mx-auto py-8 px-4 sm:px-6 lg:px-8;
    background: var(--content-bg);
    color: var(--content-text);
    transition: background 0.3s, color 0.3s;
}

/* Prose base styling */
.tiptap-content .prose {
    @apply max-w-4xl mx-auto;
}

/* Typography */
.prose h1 {
    @apply text-4xl sm:text-5xl font-extrabold text-[var(--content-text)] mt-10 mb-6 leading-tight;
}

.prose h2 {
    @apply text-3xl sm:text-4xl font-bold text-[var(--content-text)] mt-8 mb-4;
}

.prose h3 {
    @apply text-2xl sm:text-3xl font-semibold text-[var(--content-text)] mt-6 mb-3;
}

.prose p {
    @apply text-base sm:text-lg text-[var(--content-text)] leading-relaxed my-4;
}

/* Links */
.prose a {
    @apply text-[var(--link-color)] hover:underline hover:text-[var(--link-color)] transition-colors duration-200;
}

/* Lists */
.prose ul,
.prose ol {
    @apply pl-6 my-6;
}

.prose li {
    @apply text-base sm:text-lg text-[var(--content-text)] my-2;
}

.prose ul li::marker {
    @apply text-[var(--link-color)];
}

/* Blockquotes */
.prose blockquote {
    @apply border-l-4 border-[var(--blockquote-border)] pl-4 italic text-gray-600 dark:text-gray-300 my-6 text-lg;
}

/* Fix code block fixed-width issue */
.prose pre,
.prose code,
.prose pre code.hljs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.prose pre {
    @apply bg-[var(--code-bg)] text-[var(--code-text)] p-4 sm:p-6 rounded-lg overflow-x-auto shadow-md my-6;
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.5;
}

.hljs {
    @apply w-full max-w-full block font-mono;
}

/* Inline code */
.prose code:not(pre code) {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1.5 py-0.5 rounded-md text-sm;
}

/* Fix <strong> styling */
.prose strong,
.prose b {
    @apply font-bold text-[var(--strong-color)] !important;
}

.prose strong.custom-color {
    @apply text-[var(--strong-color)];
}

/* Images */
.prose img {
    @apply max-w-full h-auto rounded-lg my-6 shadow-lg transition-transform duration-300 hover:scale-105;
}

/* Image captions */
.prose figure {
    @apply my-6;
}

.prose figcaption {
    @apply text-sm text-gray-500 dark:text-gray-400 text-center mt-2;
}

/* Tables */
.prose table {
    @apply w-full my-6 border-collapse;
}

.prose th,
.prose td {
    @apply border border-[var(--content-border)] px-4 py-2 text-[var(--content-text)];
}

.prose th {
    @apply bg-gray-100 dark:bg-gray-700 font-semibold;
}

/* Horizontal rule */
.prose hr {
    @apply border-t border-[var(--content-border)] my-8;
}

/* Responsive adjustments */
@media (min-width: 1024px) {
    .tiptap-content .prose {
        @apply max-w-5xl;
    }

    .prose pre,
    .prose code {
        @apply max-w-[65ch];
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tiptap-content .prose {
        @apply max-w-3xl;
    }
}

@media (max-width: 767px) {
    .tiptap-content {
        @apply px-4 py-6;
    }

    .prose h1 {
        @apply text-3xl;
    }

    .prose h2 {
        @apply text-2xl;
    }

    .prose h3 {
        @apply text-xl;
    }

    .prose p,
    .prose li {
        @apply text-base;
    }

    .prose pre {
        @apply p-4;
    }
}

/* Animations */
.prose img:hover {
    @apply shadow-xl;
}

.prose a:hover {
    @apply text-opacity-80;
}

/* Dark mode toggle */
.theme-toggle {
    @apply fixed bottom-4 right-4 p-3 bg-[var(--content-bg)] text-[var(--content-text)] rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition;
}