/* Stijl voor de server-gerenderde SEO-pagina's (categorieën, bedrijfsprofielen,
   huurgidsen). Mobiel eerst, geen client-JS nodig, zelfde huisstijl als de app
   (zie public/site-polish.css): navy #102f4b, oranje #d94d08. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.seo-body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#20344a; background:#f5f8fb; line-height:1.55; font-size:17px; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:#164f80}
h1,h2,h3{color:#102f4b; line-height:1.25; font-weight:800}
h1{font-size:clamp(1.7rem,5vw,2.3rem); margin:.2em 0 .4em}
h2{font-size:clamp(1.25rem,3.5vw,1.5rem); margin:1.4em 0 .5em}
h3{font-size:1.1rem; margin:1em 0 .3em}
p{margin:0 0 1em}

.seo-wide{max-width:1120px; margin:0 auto; padding:0 16px}
.seo-main{max-width:1120px; margin:0 auto; padding:16px 16px 48px}

/* Kop */
.seo-header{background:#fff; border-bottom:1px solid #dfe6ed; position:sticky; top:0; z-index:5}
.seo-header .seo-wide{display:flex; align-items:center; gap:16px; padding-block:10px; flex-wrap:wrap}
.seo-brand img{height:32px; width:auto}
/* Mobiel: het menu als tweede, horizontaal scrollbare regel onder logo en knoppen. */
.seo-nav{display:flex; order:3; width:100%; overflow-x:auto; white-space:nowrap; border-top:1px solid #eef2f6; padding-top:4px; scrollbar-width:none}
.seo-nav a{color:#20344a; text-decoration:none; font-weight:600; padding:8px 0; margin-right:18px}
.seo-nav a:hover{color:#164f80}
.seo-actions{margin-left:auto; display:flex; gap:8px}
.seo-btn{display:inline-block; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none; min-height:40px; line-height:20px}
.seo-btn-orange{background:#d94d08; color:#fff}
.seo-btn-orange:hover{background:#bf4105}
.seo-btn-outline{border:1px solid #b8c8d7; color:#173e61}
.seo-btn-outline:hover{background:#f1f6fa}
.seo-cta{margin:14px 0}
.seo-cta-row{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}

@media (min-width:860px){
  .seo-nav{order:0; width:auto; border-top:0; padding-top:0}
}
@media (max-width:420px){ .seo-actions .seo-btn-outline{display:none} }

/* Kruimelpad */
.seo-breadcrumbs{font-size:.85rem; color:#586c80; margin:14px 0}
.seo-breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0}
.seo-breadcrumbs li:not(:last-child)::after{content:"›"; margin-left:6px; color:#8fa1b3}
.seo-breadcrumbs a{color:#586c80; text-decoration:none}
.seo-breadcrumbs a:hover{text-decoration:underline}

/* Tekst */
.seo-lede{max-width:760px; font-size:1.05rem; color:#3a4c60}
.seo-eyebrow{text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; font-weight:700; color:#d94d08; margin:0 0 .3em}

/* Statistieken */
.seo-stats{display:flex; flex-wrap:wrap; gap:10px 24px; list-style:none; padding:0; margin:16px 0}
.seo-stats li{background:#fff; border:1px solid #e4e9ef; border-radius:10px; padding:10px 16px; font-size:.92rem; color:#586c80}
.seo-stats strong{display:block; font-size:1.3rem; color:#102f4b}

/* Kaartraster */
.seo-grid{display:grid; grid-template-columns:1fr; gap:14px; margin:14px 0}
@media (min-width:600px){ .seo-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .seo-grid-cat{grid-template-columns:repeat(3,1fr)} .seo-grid-company{grid-template-columns:repeat(3,1fr)} }

.seo-card{display:block; background:#fff; border:1px solid #e4e9ef; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .15s ease, transform .15s ease}
.seo-card:hover{box-shadow:0 10px 24px rgba(16,47,75,.12); transform:translateY(-1px)}
.seo-card-body{padding:14px 16px}
.seo-card h2,.seo-card h3{margin:.1em 0 .3em; font-size:1.05rem}
.seo-cat-card img{aspect-ratio:16/10; object-fit:cover; width:100%}
.seo-company-meta{color:#586c80; font-size:.9rem; margin:0 0 .3em}
.seo-rating{display:inline-block; color:#b3710a; font-weight:700; font-size:.92rem}
.seo-rating-count{color:#586c80; font-weight:500}
.seo-rating-line{font-weight:700; color:#b3710a}

/* Lijsten met plaatsen/categorieën */
.seo-place-list{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0}
.seo-place-list a{text-decoration:none}
.seo-place-list a:hover{text-decoration:underline}
.seo-chip{display:inline-block; background:#eef3f8; color:#164f80; border-radius:999px; padding:5px 12px; font-size:.85rem; text-decoration:none; margin:2px 4px 2px 0}
.seo-chip:hover{background:#dfe9f2}
.seo-company-categories{margin:0 0 10px}

/* Lijst- en FAQ-blokken */
.seo-list-block ul{padding-left:1.2em}
.seo-faq details{border:1px solid #e4e9ef; border-radius:10px; padding:10px 14px; margin:8px 0; background:#fff}
.seo-faq summary{cursor:pointer; font-weight:700; color:#102f4b}
.seo-faq p{margin:.6em 0 0}

.seo-benefits{padding-left:1.2em}
.seo-contact{margin:10px 0}
.seo-contact dt{font-weight:700; color:#586c80; font-size:.85rem; margin-top:.5em}
.seo-contact dd{margin:0}

.seo-side-box{background:#fff; border:1px solid #e4e9ef; border-radius:12px; padding:16px; margin:20px 0}
.seo-guide-group ul{list-style:none; padding:0}
.seo-guide-group li{padding:6px 0; border-bottom:1px solid #eef2f6}
.seo-related-guides ul{list-style:none; padding:0}
.seo-related-guides li{padding:4px 0}

/* Artikelen (huurgidsen): leesbare kolom */
.seo-main :is(h2,h3,p,ul,ol){max-width:760px}
.seo-main .tip{background:#fff3e7; border:1px solid #f0c99a; border-radius:10px; padding:12px 14px}

/* Voet */
.seo-footer{background:#102f4b; color:#cfe0f0; margin-top:48px}
.seo-footer .seo-wide{padding-block:32px}
.seo-footer-grid{display:grid; grid-template-columns:1fr; gap:24px}
@media (min-width:700px){ .seo-footer-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .seo-footer-grid{grid-template-columns:2fr repeat(4,1fr)} }
.seo-footer-col h4{color:#fff; font-size:.9rem; margin:0 0 .6em}
.seo-footer-col a{display:block; color:#cfe0f0; text-decoration:none; padding:3px 0; font-size:.92rem}
.seo-footer-col a:hover{color:#fff}
.seo-footer p{color:#a9c1d8; font-size:.9rem}
.seo-copyright{color:#8fa8c2; font-size:.82rem; margin-top:20px}