:root{--blog-bg:#f8fafc;--blog-card-bg:#ffffff;--blog-text-main:#0f172a;--blog-text-muted:#334155;--blog-border:#cbd5e1;--blog-accent:#0369a1;--blog-hero-badge-bg:#e0f2fe;--blog-hero-badge-text:#0369a1;--card-shadow:0 4px 6px -1px rgba(0,0,0,0.05);--card-hover-shadow:0 10px 15px -3px rgba(0,0,0,0.1);}
[data-theme="dark"],body.theme-dark{--blog-bg:#0f172a;--blog-card-bg:#1e293b;--blog-text-main:#ffffff;--blog-text-muted:#cbd5e1;--blog-border:#334155;--blog-accent:#38bdf8;--blog-hero-badge-bg:#1e293b;--blog-hero-badge-text:#38bdf8;--card-shadow:0 4px 6px -1px rgba(0,0,0,0.3);--card-hover-shadow:0 10px 15px -3px rgba(0,0,0,0.4);}
.category{color:#0369a1 !important;font-weight:700 !important;}
[data-theme="dark"] .category,body.theme-dark .category{color:#38bdf8 !important;font-weight:700 !important;}
body{background-color:var(--blog-bg);color:var(--blog-text-main);}
.blog-container,.article-page,.signs-container{max-width:1200px;margin:80px auto 40px;padding:0 20px;}
.blog-hero,.signs-hero,.article-header{text-align:center;padding:60px 0;max-width:800px;margin:0 auto 60px;}
.hero-tag,.hero-badge,.article-meta{display:inline-block;background:var(--blog-hero-badge-bg);color:var(--blog-hero-badge-text);padding:6px 16px;border-radius:20px;font-size:0.9rem;font-weight:600;margin-bottom:20px;}
.article-meta{background:transparent;color:var(--blog-text-muted);font-weight:normal;padding:0;}
.blog-hero h1,.signs-hero h1,.article-header h1{font-size:3rem;font-weight:800;line-height:1.1;margin-bottom:20px;color:var(--blog-text-main);}
.blog-hero p,.signs-hero p,.article-intro{font-size:1.25rem;color:var(--blog-text-muted);line-height:1.6;}
.gradient-text{background:linear-gradient(135deg,#3b82f6,#ef4444);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.article-content{max-width:800px;margin:0 auto;background:var(--blog-card-bg);padding:40px;border-radius:16px;box-shadow:var(--card-shadow);border:1px solid var(--blog-border);}
.article-header{border-bottom:1px solid var(--blog-border);margin-bottom:40px;padding-bottom:40px;padding-top:0;margin-top:0;}
.article-body h2{font-size:1.8rem;color:var(--blog-text-main);margin-top:40px;margin-bottom:15px;font-weight:700;}
.article-body p,.article-body ul,.article-body ol{font-size:1.1rem;color:var(--blog-text-muted);line-height:1.8;margin-bottom:20px;}
.article-body ul{padding-left:20px;}
.article-body li{margin-bottom:10px;}
.article-body strong{color:var(--blog-text-main);}
.article-body a{color:var(--blog-accent);text-decoration:underline;text-decoration-color:rgba(59,130,246,0.3);text-underline-offset:4px;transition:all 0.2s ease;}
.article-body a:hover{color:#2563eb;text-decoration-color:#2563eb;}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:60px;}
.post-card{background:var(--blog-card-bg);border:1px solid var(--blog-border);border-radius:16px;overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;height:100%;}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--card-hover-shadow);border-color:var(--blog-accent);}
.post-card.featured{grid-column:1 / -1;flex-direction:row;}
.post-card.featured .card-image{flex:0 0 40%;min-height:300px;}
.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%;width:100%;}
.post-card.featured .card-link{flex-direction:row;}
.card-image{background:#e2e8f0;height:200px;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;}
.thumb-tips{background-image:url('../assets/image/blog/thumbnails/tips-thumbnail.png');}
.thumb-signs{background-image:url('../assets/image/blog/thumbnails/signs-thumbnail.png');}
.thumb-priority{background-image:url('../assets/image/blog/thumbnails/priority-thumbnail.png');}
.thumb-hazard{background-image:url('../assets/image/blog/thumbnails/hazard-thumbnail.png');}
.thumb-eco{background-image:url('../assets/image/blog/thumbnails/eco-thumbnail.png');}
.thumb-mistakes{background-image:url('../assets/image/blog/thumbnails/mistakes-thumbnail.png');}
.thumb-faalangst{background-image:url('../assets/image/blog/thumbnails/faalangst-thumbnail.png');}
.thumb-rotonde{background-image:url('../assets/image/blog/thumbnails/rotonde-thumbnail.png');}
.thumb-discount{background-image:url('../assets/image/blog/thumbnails/failed_thumbnail.png');}
.thumb-calendar{background-image:url('../assets/image/blog/calendar_icon.png');}
.thumb-gas{background-image:url('../assets/image/blog/thumbnails/gas_price_illustration_v2.png');}
.thumb-cbr-questions{background-image:url('../assets/image/blog/thumbnails/cbr-example-questions-thumbnail.png?v=2');}
.thumb-free-theory{background-image:url('../assets/image/blog/thumbnails/free-theory-exam-thumbnail.png?v=2');}
.thumb-cbr-2026{background-image:url('../assets/image/blog/thumbnails/cbr-theorie-examen-2026-thumbnail.png');}
.thumb-hoe-slaag-ik{background-image:url('../assets/image/blog/thumbnails/hoe-slaag-ik-voor-mijn-auto-theorie-thumbnail.png');}
.thumb-slagingskans{background-image:url('../assets/image/blog/thumbnails/auto-theorie-slagingskans-thumbnail.png');}
.thumb-verkeersborden-database{background-image:url('../assets/image/blog/thumbnails/verkeersborden-database-gratis-thumbnail.png');}
.thumb-summer-discount{background-image:url('../assets/image/blog/thumbnails/summer_discount_2026-thumbnail.png');}
.thumb-google-play-app{background-image:url('../assets/image/blog/thumbnails/google-play-app-thumbnail.png?v=20260820');}
.thumb-cbr-adas-update{background-image:url('../assets/image/blog/thumbnails/cbr-adas-thumbnail.png');}
.placeholder-bg-1{background:linear-gradient(135deg,#fecaca,#fca5a5);}
.placeholder-bg-2{background:linear-gradient(135deg,#bfdbfe,#93c5fd);}
.thumb-tips .emoji-icon,.thumb-signs .emoji-icon,.thumb-priority .emoji-icon,.thumb-hazard .emoji-icon,.thumb-eco .emoji-icon,.thumb-mistakes .emoji-icon,.thumb-faalangst .emoji-icon,.thumb-rotonde .emoji-icon,.thumb-discount .emoji-icon,.thumb-calendar .emoji-icon,.thumb-gas .emoji-icon,.thumb-cbr-questions .emoji-icon,.thumb-free-theory .emoji-icon,.thumb-cbr-2026 .emoji-icon,.thumb-cbr-adas-update .emoji-icon,.thumb-hoe-slaag-ik .emoji-icon,.thumb-slagingskans .emoji-icon,.thumb-verkeersborden-database .emoji-icon,.thumb-summer-discount .emoji-icon,.thumb-google-play-app .emoji-icon{display:none;}
.card-content{padding:24px;flex:1;display:flex;flex-direction:column;}
.card-meta{display:flex;gap:12px;font-size:0.85rem;color:var(--blog-text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}
.post-card h2{font-size:1.5rem;margin-bottom:12px;color:var(--blog-text-main);line-height:1.3;}
.post-card p{color:var(--blog-text-muted);line-height:1.6;margin-bottom:20px;flex-grow:1;}
.read-more{display:flex;align-items:center;gap:8px;color:var(--blog-accent);font-weight:600;margin-top:auto;}
.btn-text{background:none;border:none;color:var(--blog-text-muted);font-size:0.9rem;padding:0;cursor:default;}
@media (max-width:768px){.post-card.featured,.post-card.featured .card-link{flex-direction:column;}
.post-card.featured .card-image{min-height:200px;flex:none;}
}
.blog-cta,.quiz-cta,.article-cta-box{background:linear-gradient(135deg,#1e293b,#0f172a) !important;color:#ffffff !important;border-radius:20px;padding:40px 30px;text-align:center;margin:3rem 0;box-shadow:0 15px 30px -5px rgba(0,0,0,0.2);border:1px solid rgba(56,189,248,0.25);}
.blog-cta h2,.blog-cta h3,.quiz-cta h2,.article-cta-box h3{color:#ffffff !important;font-size:1.5rem !important;font-weight:700 !important;margin-top:0 !important;margin-bottom:12px !important;}
.blog-cta p,.quiz-cta p,.article-cta-box p{color:#e2e8f0 !important;font-size:1.05rem !important;margin-bottom:25px !important;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6 !important;}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn-lg{padding:12px 30px;font-size:1.1rem;}
.btn-outline{border:2px solid rgba(255,255,255,0.6) !important;color:#ffffff !important;background:rgba(255,255,255,0.08) !important;padding:12px 26px;border-radius:999px;font-weight:600;text-decoration:none !important;transition:all 0.2s ease;}
.btn-outline:hover{background:#ffffff !important;color:#0f172a !important;border-color:#ffffff !important;}
@media (max-width:768px){.blog-hero h1,.signs-hero h1{font-size:2.5rem;}
.article-content{padding:20px;}
}
.btn-primary{background-color:var(--blog-accent) !important;color:#ffffff !important;border:none;padding:12px 30px;border-radius:8px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:background 0.2s,transform 0.2s;}
.btn-primary:hover{background-color:#2563eb !important;color:#ffffff !important;transform:translateY(-2px);}
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(4px);}
.modal-content{background-color:var(--blog-card-bg);margin:15% auto;padding:30px;border:1px solid var(--blog-border);width:90%;max-width:500px;border-radius:12px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);position:relative;animation:modalSlideIn 0.3s ease-out;}
@keyframes modalSlideIn{from{transform:translateY(-50px);opacity:0;}
to{transform:translateY(0);opacity:1;}
}
.close-modal{color:var(--blog-text-muted);float:right;font-size:28px;font-weight:bold;cursor:pointer;line-height:1;}
.close-modal:hover,.close-modal:focus{color:var(--blog-text-main);text-decoration:none;}
.terms-link{display:block;text-align:center;margin-top:15px;font-size:0.85rem;color:var(--blog-text-muted);text-decoration:underline;cursor:pointer;}
.modal h3{margin-top:0;color:var(--blog-text-main);margin-bottom:20px;}
.modal ul{padding-left:20px;margin-bottom:0;}
.modal li{margin-bottom:10px;color:var(--blog-text-muted);}
/* ==========================================================================GOOGLE PREFERRED SOURCE CALLOUT BADGE (BLOG ARTICLES)========================================================================== */.blog-google-preferred-box{background:linear-gradient(135deg,rgba(2,132,199,0.08) 0%,rgba(59,130,246,0.12) 50%,rgba(147,51,234,0.08) 100%);border:1px solid rgba(56,189,248,0.35);border-radius:16px;padding:1.5rem 1.75rem;margin:2.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;box-shadow:0 4px 20px -2px rgba(2,132,199,0.12);transition:transform 0.2s ease,box-shadow 0.2s ease;}
[data-theme="dark"] .blog-google-preferred-box,body.theme-dark .blog-google-preferred-box{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border:1px solid rgba(56,189,248,0.25);box-shadow:0 4px 20px -2px rgba(0,0,0,0.4);}
.blog-google-preferred-content{display:flex;align-items:center;gap:1.25rem;}
.blog-google-preferred-icon{flex-shrink:0;width:48px;height:48px;background:#ffffff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.blog-google-preferred-text h4{margin:0 0 0.35rem 0;font-size:1.15rem;color:var(--blog-text-main);font-weight:700;}
.blog-google-preferred-text p{margin:0;font-size:0.92rem;color:var(--blog-text-muted);line-height:1.5;}
.blog-google-preferred-action{display:flex;align-items:center;gap:0.75rem;flex-shrink:0;}
.blog-google-preferred-btn{display:inline-flex !important;align-items:center;gap:0.6rem;background:linear-gradient(135deg,#0284c7,#2563eb);color:#ffffff !important;font-size:0.92rem;font-weight:700;padding:0.65rem 1.35rem;border-radius:999px;text-decoration:none !important;white-space:nowrap;box-shadow:0 4px 14px rgba(2,132,199,0.35);transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;cursor:pointer;z-index:5;}
.blog-google-preferred-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#0369a1,#1d4ed8);box-shadow:0 6px 20px rgba(2,132,199,0.5);color:#ffffff !important;text-decoration:none !important;}
@media (max-width:768px){.blog-google-preferred-box{flex-direction:column;align-items:flex-start;padding:1.25rem;gap:1.25rem;}
.blog-google-preferred-content{flex-direction:column;align-items:flex-start;gap:0.75rem;}
.blog-google-preferred-action{width:100%;justify-content:center;}
.blog-google-preferred-btn{width:100%;justify-content:center;}
}
.signs-article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:25px 0 35px;}
.sign-article-card,.sign-card{background:var(--blog-card-bg);border:1px solid var(--blog-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--card-shadow);transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;}
.sign-article-card:hover,.sign-card:hover{transform:translateY(-3px);box-shadow:var(--card-hover-shadow);border-color:var(--blog-accent);}
.sign-article-visual,.sign-visual{background:#ffffff !important;padding:20px;display:flex;align-items:center;justify-content:center;height:140px;border-bottom:1px solid var(--blog-border);}
.sign-article-visual img,.sign-visual img{max-height:100px;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.1));}
.sign-article-info,.sign-info{padding:16px;display:flex;flex-direction:column;flex:1;}
.sign-article-info h3,.sign-article-info h4,.sign-info h3,.sign-info h4{margin:0 0 6px 0;font-size:1.05rem;color:var(--blog-text-main);font-weight:700;}
.sign-article-info p,.sign-info p{margin:0;font-size:0.92rem !important;line-height:1.5 !important;color:var(--blog-text-muted) !important;}
.sign-category{margin-bottom:35px;}
.category-header h2,.category-header h3{font-size:1.35rem;margin-bottom:4px;color:var(--blog-text-main);font-weight:700;}
.category-header p{font-size:0.95rem !important;color:var(--blog-text-muted) !important;margin-bottom:15px !important;}
.signs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:15px;}
