/* ================================================
   styles.css. RecruitrLAB master site
   Light theme · premium B2B consultancy look
   ================================================ */

:root {
    /* === LIGHT THEME PALET === */
    --bg: #FAFAF7;              /* off-white / cream achtergrond */
    --bg-2: #F4F2EC;            /* iets dieper cream voor section breaks */
    --surface: #FFFFFF;         /* witte cards */
    --surface-2: #F8F7F2;       /* alt surface */
    --text: #1B1845;            /* near-black body text */
    --text-soft: #2D2D2D;
    --text-muted: #6B6B6B;      /* secondary text */
    --muted: #999999;           /* tertiary / subtle */
    --border: #E8E5DC;          /* warm grey border */
    --border-strong: #D5D1C5;   /* stronger border on hover/focus */

    /* Accent kleuren, branding behouden */
    --accent: #FEBC14;          /* yellow voor CTAs + highlights */
    --accent-dim: rgba(254, 188, 20, 0.08);
    --accent-deep: #E0A410;     /* iets dieper goud voor hover-states */
    --brand-blue: #211D71;      /* RecruitrLAB navy voor premium accent */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-serif: 'Instrument Serif', Georgia, serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
}

em {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
    font-size: 1.05em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ========================================
   CONTAINERS
   ======================================== */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}
.container-narrow {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 32px;
}
.container-tight {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ========================================
   BUTTONS. Premium clean
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px;          /* pill shape voor moderne look */
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: -0.1px;
    text-decoration: none;
    font-family: var(--font-sans);
}

.btn-primary {
    background: #1B1845;
    color: #FFFFFF !important;
    border-color: #1B1845;
}
.btn-primary:hover {
    background: var(--accent);
    color: #1B1845 !important;
    border-color: var(--accent);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover {
    background: #FFFFFF;
    border-color: var(--text);
}

.btn-large {
    padding: 16px 32px;
    font-size: 15.5px;
}

.btn-xl {
    padding: 18px 36px;
    font-size: 16px;
}

.btn-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.btn:hover .btn-arrow {
    transform: translateX(3px);
}

/* ========================================
   EMAIL FALLBACK
   ======================================== */
.cta-mail-fallback {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}
.cta-mail-fallback a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1px;
    transition: border-color 0.2s;
}
.cta-mail-fallback a:hover {
    border-bottom-color: var(--text);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 880px) {
    .container { padding: 0 28px; }
    .container-narrow { padding: 0 24px; }
    .container-tight { padding: 0 20px; }
    body { font-size: 16px; }
}
@media (max-width: 540px) {
    .container { padding: 0 20px; }
    .btn { padding: 13px 22px; font-size: 14px; }
    .btn-xl { padding: 16px 28px; font-size: 15px; }
}