/* ===========================================
   Smooth scrolling
   =========================================== */
html {
    scroll-behavior: smooth;
}

/* ===========================================
   CSS Variables - Easy to customize colors
   =========================================== */
:root {
    --color-white: #ffffff;
    --color-black: #000000;
}

/* ===========================================
   Selection
   =========================================== */
::selection {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* ===========================================
   Links
   =========================================== */
.footer-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-link:hover {
    text-decoration-thickness: 2px;
}

/* ===========================================
   Service badges
   =========================================== */
.badge-advies,
.badge-implementatie {
    background-color: #F5F5F3;
}

/* ===========================================
   Testimonials - Minimal Inline Style
   =========================================== */
.testimonials-container {
    max-width: 64rem;
    margin: 0 auto;
}

.testimonial-item {
    text-align: center;
}

/* ===========================================
   Project cards - Muted gray with color accents
   =========================================== */
.project-onderwijs,
.project-zorg,
.project-finance,
.project-new {
    background-color: #F5F5F3;
}

/* ===========================================
   Project badges
   =========================================== */
.badge-onderwijs,
.badge-zorg,
.badge-finance,
.badge-new {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
}

/* ===========================================
   Notion-style inline link
   =========================================== */
.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem 0.15rem 0.35rem;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
    vertical-align: baseline;
}

.inline-link:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.inline-link-favicon {
    width: 1rem;
    height: 1rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.inline-link-text {
    font-weight: 500;
}