/**
 * app.css — Custom styles for Arfak Tekno Digital
 *
 * Minimal custom CSS that complements TailwindCSS CDN.
 * Handles: SPA loading bar, transitions, scrollbar, TinyMCE fixes, spinner.
 */

/* ── SPA Loading Bar ──────────────────────────────────────────────────────── */
#spa-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    z-index: 9999;
    transition: width 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

#spa-loader.active {
    opacity: 1;
    width: 70%;
    animation: spa-bar 1.5s ease-in-out infinite;
}

@keyframes spa-bar {
    0% { width: 10%; }
    50% { width: 70%; }
    100% { width: 90%; }
}

/* ── Page Transitions ─────────────────────────────────────────────────────── */
#main-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Custom Scrollbar (WebKit) ────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ── TinyMCE Container Fixes ──────────────────────────────────────────────── */
.tox-tinymce {
    border-radius: 0.5rem !important;
    border-color: #e2e8f0 !important;
}

.tox .tox-toolbar__primary {
    border-bottom-color: #e2e8f0 !important;
}

/* ── Line Clamp Utility (fallback for older browsers) ─────────────────────── */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.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;
}

/* ── Loading Spinner ──────────────────────────────────────────────────────── */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Prose Typography Enhancements ────────────────────────────────────────── */
.prose img {
    border-radius: 0.75rem;
}

.prose a {
    color: #2563eb;
    text-decoration: none;
}

.prose a:hover {
    text-decoration: underline;
}

/* ── Stretched Link Helper ────────────────────────────────────────────────── */
.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* ── Smooth Scroll Behavior ───────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Selection Color ──────────────────────────────────────────────────────── */
::selection {
    background-color: #dbeafe;
    color: #1e40af;
}