/*
 * We gebruiken Tailwind via CDN (zie layout.php <script src="https://cdn.tailwindcss.com">).
 * Dit bestand bevat alleen custom accenten die boven Tailwind komen.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

/* Voorkom FOUC (Flash of Uncloaked Content): elementen met x-cloak blijven verborgen
 * tot Alpine init klaar is, daarna verwijdert Alpine het attribute. */
[x-cloak] { display: none !important; }

/* Editorial-sfeer voor gegenereerde hero's */
.prose-editorial h1,
.prose-editorial h2 {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* Subtiele houtstructuur op wood-achtergronden */
.bg-wood-grain {
    background-image:
        radial-gradient(rgba(147,110,61,0.08) 1px, transparent 1px),
        radial-gradient(rgba(147,110,61,0.04) 1px, transparent 1px);
    background-size: 24px 24px, 48px 48px;
    background-position: 0 0, 12px 12px;
}

/* Reasoning-paneel — pulserend accent tijdens streaming */
@keyframes pulse-soft {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
.reasoning-active {
    animation: pulse-soft 1.8s ease-in-out infinite;
}

/* Spinner ringen voor lange AI-calls */
@keyframes spin-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner-ring {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(147, 110, 61, 0.25);
    border-top-color: #5e4425;
    border-radius: 50%;
    animation: spin-ring 0.9s linear infinite;
}

/* Indeterminate progress bar */
@keyframes indeterminate-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
.progress-indeterminate {
    position: relative;
    height: 3px;
    background: rgba(147, 110, 61, 0.12);
    overflow: hidden;
    border-radius: 2px;
}
.progress-indeterminate::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 25%;
    background: linear-gradient(90deg, transparent, #79572f, transparent);
    animation: indeterminate-bar 1.6s ease-in-out infinite;
}

/* Knipperende cursor tijdens markdown-streaming */
@keyframes cursor-blink-anim {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.cursor-blink {
    display: inline-block;
    color: #cdb284;
    font-weight: bold;
    animation: cursor-blink-anim 1s steps(1) infinite;
}

/* Markdown-bron monospace blok */
.markdown-source pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

/* Search-results container — uniforme spacing tussen AI-gegenereerde blokken.
 * Componenten brengen elk hun eigen my-X mee; we neutraliseren die en zetten
 * één consistent ritme op de container, zodat opeenvolgende sections niet
 * cumulatief uitlopen op te veel verticale ruimte. */
#wva-search-results > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#wva-search-results > * + * {
    margin-top: 2.5rem !important;  /* ~40px tussen blokken */
}