/*
Theme Name: Inkoop
Description: Minimaal thema voor telinkoop.nl.
Version: 1.1.0
Text Domain: inkoop
*/
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url(fonts/plus-jakarta-sans.woff2) format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
:root {
    --pfi-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pfi-ink: #14121f;
    --pfi-muted: #5f6577;
    --pfi-bg: #f5f4fb;
    --pfi-card: #fff;
    --pfi-line: #e5e3f1;
    --pfi-brand: #5b3df5;
    --pfi-brand-dark: #4529d6;
    --pfi-brand-2: #22b8e6;
    --pfi-brand-ink: #fff;
    --pfi-brand-zacht: #f0eefb;
    --pfi-gradient: linear-gradient(135deg, #1c1446 0%, #4a2fe8 55%, #22b8e6 100%);
    --pfi-success: #15a36b;
    --pfi-danger: #c0392b;
    --pfi-whatsapp: #25d366;
    --pfi-snapchat: #fffc00;
    --pfi-radius: 18px;
    --pfi-radius-sm: 12px;
    --pfi-shadow: 0 2px 6px rgba(20, 18, 31, .06), 0 16px 40px rgba(76, 47, 232, .10);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
    margin: 0;
    background: var(--pfi-bg);
    color: var(--pfi-ink);
    font: 16px/1.55 var(--pfi-font);
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
a { color: var(--pfi-brand); }
a, button, label, input, select, textarea { touch-action: manipulation; }
img { max-width: 100%; height: auto; }

.site-header { height: 64px; border-bottom: 1px solid var(--pfi-line); background: #fff; }
.site-header .container { display: flex; align-items: center; max-width: 1040px; height: 100%; margin: 0 auto; padding: 0 16px; }
.site-logo { display: inline-flex; align-items: center; color: var(--pfi-ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.site-logo:hover { opacity: .85; }
.site-logo::before { content: ""; width: 12px; height: 12px; margin-right: 9px; border-radius: 50%; background: var(--pfi-gradient); }
body.home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; border: 0; background: transparent; }
body.home .site-logo { color: #fff; }
body.home .site-logo::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

.site-main { position: relative; }
.site-main .container { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
.site-footer { padding: 32px 16px; color: var(--pfi-muted); font-size: 14px; text-align: center; }
.site-footer p { margin: 0; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); word-wrap: normal !important; border: 0; }
.screen-reader-text:focus { top: 5px; left: 5px; z-index: 100000; display: block; width: auto; height: auto; padding: 15px 23px; background: #fff; color: var(--pfi-ink); clip: auto !important; font-size: 14px; font-weight: 700; line-height: normal; text-decoration: none; }