/* ══════════════════════════════════════════════════════════════════════
   Hoeki.tech huisstijl
   Wordt na de pagina-eigen stijlen geladen en overschrijft de gedeelde
   kleurvariabelen, zodat alle pagina's dezelfde uitstraling krijgen.
   ══════════════════════════════════════════════════════════════════════ */
html:root {
    --hx-navy: #001f47;
    --hx-blue: #4969ed;
    --hx-blue-dk: #3553d6;
    --hx-blue-lt: #e7ecfd;
    --hx-orange: #ffa801;
    --hx-orange-dk: #f29400;
    --hx-sand: #f5f4ef;
    --hx-text: #4d5865;

    /* bestaande variabelen die door de pagina's gebruikt worden */
    --navy: var(--hx-navy);
    --yellow: var(--hx-orange);
    --yellow-dk: var(--hx-orange-dk);
    --teal: var(--hx-blue);
    --teal-dk: var(--hx-blue-dk);
    --teal-dark: var(--hx-blue-dk);
    --teal-light: var(--hx-blue-lt);
    --muted: #6b7684;
    --text-muted: #6b7684;
    --border: #e3e1d9;
}

body { font-family: 'Rubik', 'Segoe UI', -apple-system, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: inherit; }

/* ── Header ───────────────────────────────────────────────────────────── */
.lp-header { box-shadow: 0 1px 0 rgba(0,31,71,.04); }
.lp-brand-name { color: var(--hx-navy); }
.lp-actions .btn-support { border-color: var(--hx-navy); color: var(--hx-navy); }
.lp-actions .btn-support:hover { background: var(--hx-navy); color: #fff; }

/* ── Paginabanners (hero) in donkerblauw ─────────────────────────────── */
body .hp-hero, body .dn-hero, body .oo-hero, body .c-hero, body .st-hero,
body .pr-hero, body .dc-hero, body .hero {
    position: relative;
    overflow: hidden;
    background: var(--hx-navy);
    color: #fff;
}
body .hp-hero::after, body .dn-hero::after, body .oo-hero::after, body .c-hero::after,
body .st-hero::after, body .pr-hero::after, body .dc-hero::after, body .hero::after {
    content: '';
    position: absolute;
    width: 620px; height: 620px;
    border-radius: 50%;
    top: -280px; right: -160px;
    background: radial-gradient(circle, rgba(73,105,237,.5), rgba(73,105,237,0) 70%);
    pointer-events: none;
}
body .c-hero::before { display: none; }
body .hp-hero > *, body .dn-hero > *, body .oo-hero > *, body .c-hero > *, body .st-hero > *,
body .pr-hero > *, body .dc-hero > *, body .hero > * { position: relative; z-index: 1; }

body .hp-hero h1, body .dn-hero h1, body .oo-hero h1, body .c-hero h1, body .st-hero h1,
body .pr-hero h1, body .dc-hero h1, body .hero h1 { color: #fff; font-weight: 800; }

body .hp-hero p, body .dn-hero p, body .oo-hero p, body .c-hero p, body .st-hero p,
body .pr-hero p, body .dc-hero p, body .hero p { color: #c9d4ea; }

body .hp-hero-icon-box { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--hx-orange); }
body .hp-hero-text .wp-badge { background: var(--hx-orange); color: var(--hx-navy); }
body .hp-hero-cta a:first-child { background: var(--hx-orange); color: var(--hx-navy); }
body .hp-hero-cta a:first-child:hover { background: var(--hx-orange-dk); }
body .hp-hero-cta a:not(:first-child) { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
body .hp-hero-cta a:not(:first-child):hover { background: #fff; color: var(--hx-navy); }
body .hero-badge { background: rgba(255,168,1,.14); border-color: rgba(255,168,1,.4); color: var(--hx-orange); }

/* ── Knoppen ──────────────────────────────────────────────────────────── */
.btn-order, .btn-submit, .btn-check, .plan-order-btn { border-radius: 6px; }

/* ── Footer (includes/public-footer.php) ─────────────────────────────── */
.hx-footer { background: var(--hx-navy); color: #a9b6cf; padding: 72px 0 28px; font-size: .92rem; line-height: 1.6; }
.hx-footer .hx-footer-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hx-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.hx-footer h5 { color: #fff; font-size: 1rem; font-weight: 600; margin: 0 0 16px; }
.hx-footer ul { list-style: none; padding: 0; margin: 0; }
.hx-footer li { margin-bottom: 9px; }
.hx-footer a { color: #a9b6cf; text-decoration: none; }
.hx-footer a:hover { color: #fff; }
.hx-footer p { margin: 0 0 12px; }
.hx-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hx-footer-brand .b-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--hx-orange); color: var(--hx-navy); display: grid; place-items: center; font-weight: 800; }
.hx-footer-brand strong { color: #fff; font-size: 1.1rem; }
.hx-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .84rem; }
@media (max-width: 991px) { .hx-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .hx-footer-grid { grid-template-columns: 1fr; } }