/* =============================================================
   LegalAuto - article blocks (Elementor)
 
   Load this file ONCE, site wide. Two ways:
   1) Child theme:
      wp_enqueue_style( 'la-artikel', get_stylesheet_directory_uri().'/legalauto-artikel.css' );
   2) Elementor > Site Settings > Custom CSS (paste the contents below)
 
   This CSS replaces the Tailwind classes from the reference HTML file.
   Your site does not load Tailwind, so in the post body use only la-* classes.
 
   All comments are English. All text the visitor sees is Dutch.
   ============================================================= */
 
:root{
  --la-navy:#16163F;
  --la-navy-dark:#111827;
  --la-slate:#4B5563;
  --la-gold:#C6AE7B;
  --la-gold-dark:#A98F5F;
  --la-border:#D1D5DB;
  --la-surface:#F3F4F6;
  --la-gold-grad:linear-gradient(135deg,#C6AE7B 0%,#A98F5F 100%);
  --la-shadow:0 1px 3px rgba(17,24,39,.08),0 1px 2px rgba(17,24,39,.06);
  --la-shadow-hover:0 8px 24px rgba(17,24,39,.12);
}
 
.la-block{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;margin:2.5rem 0;}
.la-kicker{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;}
.la-gold-text{background:var(--la-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.la-rule{height:3px;background:var(--la-gold-grad);}
.la-block :focus-visible{outline:3px solid var(--la-gold);outline-offset:2px;border-radius:4px;}
 
/* ---------- 1. Figures block ("Cijfers van de RDW") ---------- */
.la-stats{border:1px solid var(--la-border);border-radius:10px;overflow:hidden;box-shadow:var(--la-shadow);}
.la-stats__body{background:linear-gradient(180deg,var(--la-navy) 0%,var(--la-navy-dark) 100%);color:#fff;padding:1.75rem;}
@media(min-width:768px){.la-stats__body{padding:2rem;}}
.la-stats__kicker{margin:0 0 1.25rem;}
.la-stats__grid{display:grid;gap:1.5rem;}
@media(min-width:640px){.la-stats__grid{grid-template-columns:repeat(2,1fr);}}
.la-stats__n{font-weight:800;letter-spacing:-.03em;font-size:2.5rem;line-height:1;margin:0 0 .5rem;
  background:var(--la-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
@media(min-width:768px){.la-stats__n{font-size:3rem;}}
.la-stats__label{margin:0;color:rgba(255,255,255,.7);font-size:.875rem;line-height:1.4;}
.la-stats__src{background:var(--la-surface);padding:.75rem 1.5rem;margin:0;font-size:12px;color:var(--la-slate);}
.la-stats__src a{color:var(--la-navy);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--la-gold);text-decoration-thickness:2px;text-underline-offset:3px;}
 
/* ---------- 2. Steps block ("Wat kunt u nu zelf doen?") ---------- */
.la-steps{border:1px solid var(--la-border);border-radius:10px;overflow:hidden;box-shadow:var(--la-shadow);background:#fff;}
.la-steps__inner{padding:1.75rem;}
@media(min-width:768px){.la-steps__inner{padding:2rem;}}
.la-steps__title{color:var(--la-navy);font-weight:800;letter-spacing:-.03em;font-size:1.5rem;margin:0 0 1.5rem;}
.la-steps__list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;}
@media(min-width:768px){.la-steps__list{grid-template-columns:repeat(3,1fr);}}
.la-steps__n{color:var(--la-gold-dark);margin:0 0 .5rem;}
.la-steps__h{color:var(--la-navy);font-weight:600;margin:0 0 .25rem;}
.la-steps__p{margin:0;font-size:.875rem;line-height:1.6;color:var(--la-slate);}
.la-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:0 1.75rem;border-radius:6px;background:var(--la-gold-grad);color:var(--la-navy);
  font-weight:600;text-decoration:none;margin-top:1.75rem;transition:filter .2s cubic-bezier(.4,0,.2,1);}
.la-btn:hover{filter:brightness(.94);color:var(--la-navy);}
 
/* ---------- 3. FAQ accordion ---------- */
.la-faq__title{color:var(--la-navy);font-weight:800;letter-spacing:-.03em;font-size:1.75rem;margin:0 0 1.5rem;}
.la-faq__list{border:1px solid var(--la-border);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--la-shadow);}
.la-faq__item+.la-faq__item{border-top:1px solid var(--la-border);}
.la-faq__q{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;padding:1.25rem 1.5rem;font-weight:600;color:var(--la-navy);}
.la-faq__q::-webkit-details-marker{display:none;}
.la-faq__q:hover{background:var(--la-surface);}
.la-faq__q::after{content:"+";color:var(--la-gold);font-size:1.25rem;line-height:1;flex-shrink:0;}
.la-faq__item[open] .la-faq__q::after{content:"\2212";}
.la-faq__a{padding:0 1.5rem 1.25rem;font-size:.9375rem;line-height:1.7;color:var(--la-slate);}
 
/* ---------- 4. Previous / next post, with featured image ---------- */
.la-prevnext{display:grid;gap:1.5rem;margin:3rem 0;}
@media(min-width:768px){.la-prevnext{grid-template-columns:repeat(2,1fr);}}
.la-pn{display:flex;border:1px solid var(--la-border);border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:var(--la-shadow);text-decoration:none;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);}
.la-pn:hover{transform:translateY(-3px);box-shadow:var(--la-shadow-hover);}
.la-pn--next{flex-direction:row;} /* on mobile: image on the left, same as the prev card */
@media(min-width:768px){.la-pn--next{flex-direction:row-reverse;text-align:right;}}
.la-pn__thumb{width:112px;flex-shrink:0;background:var(--la-surface);}
@media(min-width:640px){.la-pn__thumb{width:144px;}}
.la-pn__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.la-pn__txt{padding:1.25rem;}
.la-pn__lbl{color:var(--la-slate);margin:0 0 .5rem;font-size:10px;}
.la-pn__h{color:var(--la-navy);font-weight:600;line-height:1.35;margin:0;}
.la-pn:hover .la-pn__h{color:var(--la-gold-dark);}
 
/* ---------- 5. Key takeaways ("In het kort") ---------- */
.la-summary{border:1px solid var(--la-border);border-radius:10px;overflow:hidden;background:var(--la-surface);box-shadow:var(--la-shadow);}
.la-summary__inner{padding:1.5rem;}
.la-summary__title{color:var(--la-gold-dark);margin:0 0 1rem;}
.la-summary__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;}
.la-summary__list li{display:flex;gap:.75rem;font-size:.9375rem;line-height:1.6;color:var(--la-slate);}
.la-summary__list li::before{content:"\2713";color:var(--la-gold);font-weight:700;flex-shrink:0;}
 
@media(prefers-reduced-motion:reduce){.la-block *{transition-duration:.001ms !important;}}