@import url('./fonts/newsreader.css');
@import url('./fonts/instrument-serif.css');
@import url('./fonts/geist-mono.css');

/* =========================================================================
   Revelop blog — warm dark editorial restyle
   Body serif: Newsreader.  Display accent: Instrument Serif (peach italics).
   Labels/kickers: Geist Mono.  Headings/UI: theme Sora.
   Design language mirrors revelop.ai (mono uppercase kickers, peach italic
   accents, cool-grey secondary text, soft orange radial glows).
   ========================================================================= */

:root {
    --rv-bg:        #16140f;
    --rv-bg-2:      #1f1c15;
    --rv-bg-3:      #29251a;
    --rv-header-bg: #17150f;
    --rv-border:    rgba(233,225,204,.13);
    --rv-border-2:  rgba(233,225,204,.22);
    --rv-text:      #e6e3da;
    --rv-text-dim:  #a1a1a1;   /* cool neutral grey (main site --muted-foreground) */
    --rv-muted:     #7d7d79;   /* label grey */
    --rv-heading:   #fbf7ec;
    --rv-accent:    #ff6b3a;
    --rv-accent-2:  #e26a1c;
    --rv-gold:      #ecb63f;
    --rv-peach:     #f5d6c5;   /* main site --accent-soft */
    --rv-link:      #ff8f5c;
    --rv-link-hover:#ffb492;
    --rv-glow:      rgba(224,80,30,.30);
    --rv-mono:      "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
    --rv-serif:     "Newsreader", Georgia, "Times New Roman", serif;
    --rv-display:   "Instrument Serif", Georgia, serif;
}

/* ---- Base surfaces + ambient orange bloom ----------------------------- */
html, html body { background-color: var(--rv-bg); }
html body {
    color: var(--rv-text);
    background-image: radial-gradient(1200px 520px at 80% -8%, rgba(224,80,30,.10), transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.wp-site-blocks { background: transparent; }

/* Body copy → serif */
html body,
.wp-block-post-content,
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-excerpt__excerpt {
    font-family: var(--rv-serif);
    font-weight: 400;
    letter-spacing: 0;
}
.wp-block-post-content { font-size: 1.19rem; line-height: 1.78; color: var(--rv-text); counter-reset: rvsec; }
.wp-block-post-content p { margin-top: 1.1em; margin-bottom: 1.1em; }

/* Keep UI chrome in the brand sans */
.wp-block-navigation, .wp-block-button, .wp-block-post-title,
.wp-block-query-title, .rv-related-card {
    font-family: var(--wp--preset--font-family--sora), sans-serif;
    letter-spacing: -0.1px;
}

/* ---- Mono kicker/label helper (dates, terms, kickers) ---------------- */
.wp-block-post-date, .wp-block-post-date a,
.wp-block-post-terms, .wp-block-post-terms a,
.rv-related-kicker, .rv-related-end-title .rv-eyebrow {
    font-family: var(--rv-mono);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    font-weight: 500;
    color: var(--rv-muted);
    text-decoration: none;
}
.wp-block-post-terms a:hover, .wp-block-post-date a:hover { color: var(--rv-accent); }

/* ---- Headings + numbered mono kickers (mirrors "08 — CONTACT") ------- */
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
h1.wp-block-post-title,
h1.wp-block-post-title a {
    color: var(--rv-heading);
    font-family: var(--wp--preset--font-family--sora), sans-serif;
}
h1.wp-block-post-title { letter-spacing: -0.6px; line-height: 1.12; }
.wp-block-post-content h2 {
    font-weight: 600; letter-spacing: -0.4px; line-height: 1.2;
    margin-top: 2.1em; margin-bottom: .6em; padding-top: 1.5em;
    border-top: 1px solid var(--rv-border);
}
.wp-block-post-content h2::before {
    counter-increment: rvsec;
    content: counter(rvsec, decimal-leading-zero) "  —";
    display: block;
    font-family: var(--rv-mono); font-weight: 500;
    font-size: .72rem; letter-spacing: .22em; color: var(--rv-accent);
    margin-bottom: .9em;
}
.wp-block-post-content h3 { font-weight: 600; letter-spacing: -0.2px; margin-top: 1.7em; color: #f2ecdd; }

/* Lead paragraph */
.wp-block-post-content > p:first-of-type { font-size: 1.28rem; line-height: 1.7; color: #efe9dc; }

/* ---- Emphasis / links ------------------------------------------------- */
.wp-block-post-content strong,
.wp-block-post-content b { color: var(--rv-gold); font-weight: 600; }
/* Peach Instrument Serif italic accent (mirrors the main site's "bericht.") */
.wp-block-post-content em, .wp-block-post-content i {
    font-family: var(--rv-display);
    font-style: italic;
    color: var(--rv-peach);
    font-size: 1.1em;
    letter-spacing: .01em;
}

.wp-block-post-content a {
    color: var(--rv-link);
    text-decoration: underline;
    text-decoration-color: rgba(255,143,92,.4);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-color .15s ease;
}
.wp-block-post-content a:hover { color: var(--rv-link-hover); text-decoration-color: var(--rv-link-hover); }

/* ---- Lists ------------------------------------------------------------ */
.wp-block-post-content ul li::marker { color: var(--rv-accent); }
.wp-block-post-content ol li::marker { color: var(--rv-accent); font-weight: 600; }
.wp-block-post-content li { margin-bottom: .5em; }

/* ---- Tables ----------------------------------------------------------- */
.wp-block-table table {
    border-collapse: collapse; overflow: hidden; border-radius: 12px;
    border: 1px solid var(--rv-border);
    font-family: var(--wp--preset--font-family--sora), sans-serif;
    font-size: .98rem;
}
.wp-block-table thead th {
    background: linear-gradient(180deg, #2a2013, #241d13);
    color: var(--rv-heading); font-weight: 600; letter-spacing: -0.2px;
    border-bottom: 1px solid var(--rv-border-2);
}
.wp-block-table th, .wp-block-table td {
    border: 1px solid var(--rv-border); padding: .7em .95em; color: var(--rv-text);
}
.wp-block-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.018); }
.wp-block-table tbody tr:hover td { background: rgba(255,107,58,.06); }
.wp-block-table strong { color: var(--rv-gold); }

/* ---- Blockquote / code ------------------------------------------------ */
.wp-block-post-content blockquote {
    border-left: 3px solid var(--rv-accent);
    background: var(--rv-bg-2); border-radius: 0 10px 10px 0;
    padding: .8em 1.2em; color: #efe9db;
}
.wp-block-post-content :where(code, kbd) {
    background: var(--rv-bg-2); border: 1px solid var(--rv-border);
    border-radius: 6px; padding: .1em .4em; font-size: .9em; color: #ffd9a8;
    font-family: var(--rv-mono);
}

/* ---- Rank Math FAQ on dark ------------------------------------------- */
.rank-math-question { color: var(--rv-heading); }
.rank-math-answer, .rank-math-answer p { color: var(--rv-text); }
.wp-block-rank-math-faq-block .rank-math-list-item {
    border-bottom: 1px solid var(--rv-border); padding-bottom: .6em;
}

/* ---- Header (dark navbar) --------------------------------------------- */
header.wp-block-template-part {
    background: var(--rv-header-bg);
    border-bottom: 1px solid var(--rv-border);
    box-shadow: 0 14px 34px -26px rgba(0,0,0,.9);
}
header.wp-block-template-part a { color: var(--rv-text); text-decoration: none; }
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .rv-nav-link:hover { color: var(--rv-accent); }
.rv-nav-link {
    font-family: var(--wp--preset--font-family--sora), sans-serif;
    font-weight: 500; font-size: 1rem; color: var(--rv-text);
    text-decoration: none; transition: color .15s ease; white-space: nowrap;
}

/* Fix the "Ik wil een gratis demo" button + orange glow */
header.wp-block-template-part .wp-block-button .wp-block-button__link {
    background-color: var(--rv-accent) !important;
    background-image: linear-gradient(180deg, #ff7d47, #f45f2c) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 11px 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px;
    box-shadow: 0 10px 28px -8px var(--rv-glow), inset 0 1px 0 rgba(255,255,255,.25) !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
header.wp-block-template-part .wp-block-button .wp-block-button__link:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 34px -8px rgba(224,80,30,.55), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ---- Footer ----------------------------------------------------------- */
/* Core site-logo block (footer) uses the dark wordmark — swap to the light one */
.custom-logo { content: url('logo-dark.png'); }
footer.wp-block-template-part {
    background: #100f0b; border-top: 1px solid var(--rv-border);
    color: var(--rv-text-dim);
}
footer.wp-block-template-part a { color: var(--rv-text-dim); }
footer.wp-block-template-part a:hover { color: var(--rv-accent); }

/* ---- Homepage / archive ----------------------------------------------- */
.wp-block-query-title, .wp-block-query-title.wp-block-post-title {
    color: var(--rv-heading); font-family: var(--wp--preset--font-family--sora), sans-serif;
    font-weight: 600; letter-spacing: -0.5px;
}
.wp-block-post-title a { color: var(--rv-heading); transition: color .15s ease; }
.wp-block-post-title a:hover { color: var(--rv-accent); }
.wp-block-post-excerpt__excerpt { color: var(--rv-text); }
.wp-block-post-excerpt__more-text a, .more-link {
    font-family: var(--rv-mono); text-transform: uppercase; letter-spacing: .14em;
    font-size: .74rem; color: var(--rv-accent); text-decoration: none;
}
.wp-block-post-excerpt__more-text a:hover, .more-link:hover { color: var(--rv-link-hover); }
.wp-block-query-pagination a, .wp-block-query-pagination .wp-block-query-pagination-numbers { color: var(--rv-link); }

/* ---- Scroll reveal ---------------------------------------------------- */
html.rv-js .wp-block-post-content > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
html.rv-js .wp-block-post-content > *.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.rv-js .wp-block-post-content > * {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ---- Related: in-flow card grid (end of post) ------------------------ */
.rv-related-end {
    margin: 3.5rem auto 0; max-width: var(--wp--style--global--content-size, 645px);
    position: relative;
}
.rv-related-end::before {
    content: ""; position: absolute; inset: -40px -60px auto -60px; height: 200px;
    background: radial-gradient(60% 100% at 20% 0%, var(--rv-glow), transparent 70%);
    pointer-events: none; z-index: 0; opacity: .5;
}
.rv-related-end-title {
    position: relative; z-index: 1;
    font-family: var(--wp--preset--font-family--sora), sans-serif;
    color: var(--rv-heading); font-size: 1.35rem; font-weight: 600;
    letter-spacing: -0.3px; margin-bottom: 1rem; padding-top: 1.2rem;
    border-top: 1px solid var(--rv-border);
    counter-increment: none;
}
.rv-related-end-title::before { content: none !important; }
.rv-related-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.rv-related-card {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    background: var(--rv-bg-2); border: 1px solid var(--rv-border);
    border-radius: 12px; padding: .95rem 1.1rem; text-decoration: none;
    color: var(--rv-heading); font-size: .98rem; line-height: 1.35; font-weight: 500;
    transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rv-related-card:hover {
    border-color: rgba(255,107,58,.5); background: var(--rv-bg-3);
    transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--rv-glow);
}
.rv-related-card .rv-card-arrow { color: var(--rv-accent); font-size: 1.15rem; flex: none; }
@media (max-width: 600px) { .rv-related-grid { grid-template-columns: 1fr; } }

/* ---- Related: fixed left rail (ultra-wide only) ---------------------- */
.rv-related-rail { display: none; }
@media (min-width: 1780px) {
    .rv-related-rail {
        display: block; position: fixed; top: 50%; transform: translateY(-50%);
        left: calc((100vw - 1340px) / 2 - 210px); width: 190px; z-index: 5;
    }
    .rv-related-end { display: none; }
    .rv-related-inner {
        border-left: 2px solid var(--rv-border-2); padding-left: 1rem;
        max-height: 78vh; overflow-y: auto;
    }
    .rv-related-kicker { display: block; color: var(--rv-accent); margin-bottom: .9rem; }
    .rv-related-rail ul { list-style: none; margin: 0; padding: 0; }
    .rv-related-rail li { margin-bottom: .9rem; }
    .rv-related-rail a {
        color: var(--rv-text-dim); text-decoration: none; font-size: .86rem;
        line-height: 1.35; display: block; transition: color .15s ease;
        font-family: var(--wp--preset--font-family--sora), sans-serif;
    }
    .rv-related-rail a:hover { color: var(--rv-heading); }
}