<?php
/**
 * Custom CSS - Riksa Uji K3 Website
 * Supplementary styles that work alongside Tailwind CSS
 */

/* ========================
   PROSE / ARTICLE STYLES
======================== */
.prose h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
    border-left: 4px solid rgb(208,4,4);
    padding-left: 0.75rem;
}
.prose h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #333333;
}
.prose p {
    margin-bottom: 1.25rem;
    line-height: 1.9;
    color: #4b5563;
}
.prose ul, .prose ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.prose ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
    line-height: 1.75;
    color: #4b5563;
}
.prose ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
    line-height: 1.75;
    color: #4b5563;
}
.prose blockquote {
    border-left: 4px solid rgb(208,4,4);
    background: #fff5f5;
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-style: italic;
    color: #555;
}
.prose a {
    color: rgb(208,4,4);
    text-decoration: underline;
}
.prose a:hover {
    color: rgb(160,0,0);
}
.prose img {
    border-radius: 12px;
    margin: 1.5rem auto;
    max-width: 100%;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.prose table th {
    background: rgb(208,4,4);
    color: white;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
}
.prose table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: #4b5563;
}
.prose table tr:hover td {
    background: #f9fafb;
}

/* ========================
   ANIMATIONS
======================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }

/* ========================
   LINE CLAMP UTILITIES
======================== */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ========================
   SCROLLBAR CUSTOM
======================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #d00404; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a00000; }

/* ========================
   LOADING SCREEN
======================== */
#page-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#page-loader.hide {
    opacity: 0;
    visibility: hidden;
}
.loader-ring {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid rgb(208,4,4);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================
   FAQ ACCORDION
======================== */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer.open {
    max-height: 500px;
}
.faq-btn.open .faq-icon {
    transform: rotate(45deg);
}
.faq-icon {
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* ========================
   CLIENTS MARQUEE
======================== */
.clients-marquee {
    display: flex;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
}
.clients-marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}