/* ==========================================================================
   List It Global - long-form article components
   TOC, key takeaways, step cards, callouts, pull quotes, checklists,
   comparison tables, stat strips, FAQ, CTA blocks.
   ========================================================================== */

:root{
  --lig-red:#F03113; --lig-ink:#1B1A19; --lig-muted:#6B6763;
  --lig-line:#E7E3E0; --lig-soft:#FBF9F8; --lig-mint:#0E7C66; --lig-amber:#B45309;
}

.entry-content, .listivo-post, .listivo-post-inner{ font-size:1.05rem; line-height:1.75; }
.entry-content h2, .listivo-post h2, .listivo-post-inner h2{ margin:52px 0 18px; font-size:1.85rem; line-height:1.25; scroll-margin-top:150px; }
.entry-content h3, .listivo-post h3, .listivo-post-inner h3{ margin:34px 0 12px; font-size:1.32rem; line-height:1.3; }
.entry-content p, .listivo-post-inner p{ margin:0 0 18px; }
.entry-content img, .listivo-post-inner img{ border-radius:12px; }

/* --- lede --- */
.lig-lede{ font-size:1.22rem; line-height:1.68; color:var(--lig-ink); font-weight:500;
  padding-bottom:22px; border-bottom:1px solid var(--lig-line); }

/* --- table of contents --- */
.lig-toc{ margin:32px 0; padding:24px 28px; background:var(--lig-soft);
  border:1px solid var(--lig-line); border-radius:14px; }
.lig-toc h4{ margin:0 0 12px; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--lig-muted); }
.lig-toc ol{ margin:0; padding-left:20px; columns:2; column-gap:34px; }
.lig-toc li{ margin-bottom:7px; break-inside:avoid; }
.lig-toc a{ text-decoration:none; border-bottom:1px solid transparent; }
.lig-toc a:hover{ border-bottom-color:var(--lig-red); }
@media(max-width:700px){ .lig-toc ol{ columns:1; } }

/* --- key takeaways --- */
.lig-key{ margin:34px 0; padding:26px 30px; border-radius:14px;
  background:linear-gradient(180deg,#FFF7F5 0%,#FFFFFF 100%);
  border:1px solid #F6D5CD; border-left:6px solid var(--lig-red); }
.lig-key h4{ margin:0 0 14px; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--lig-red); }
.lig-key ul{ margin:0; padding-left:0; list-style:none; }
.lig-key li{ position:relative; padding-left:30px; margin-bottom:11px; }
.lig-key li:before{ content:""; position:absolute; left:6px; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--lig-red); }

/* --- callouts --- */
.lig-note, .lig-warn, .lig-tip{ margin:30px 0; padding:20px 24px; border-radius:12px;
  border-left:5px solid; font-size:.99rem; }
.lig-note{ background:#F4F8FC; border-color:#2563EB; }
.lig-warn{ background:#FEF7EC; border-color:var(--lig-amber); }
.lig-tip{ background:#F0FAF6; border-color:var(--lig-mint); }
.lig-note strong, .lig-warn strong, .lig-tip strong{ display:block; margin-bottom:5px; }
.lig-note p:last-child, .lig-warn p:last-child, .lig-tip p:last-child{ margin-bottom:0; }

/* --- pull quote --- */
.lig-pull{ margin:40px 0; padding:0 0 0 30px; border-left:5px solid var(--lig-red);
  font-size:1.42rem; line-height:1.45; font-weight:600; color:var(--lig-ink); }

/* --- numbered step cards --- */
.lig-steps{ counter-reset:ligstep; margin:32px 0; padding:0; list-style:none; }
.lig-steps>li{ counter-increment:ligstep; position:relative; margin:0 0 16px;
  padding:22px 26px 22px 78px; background:#fff; border:1px solid var(--lig-line); border-radius:14px; }
.lig-steps>li:before{ content:counter(ligstep); position:absolute; left:24px; top:22px;
  width:36px; height:36px; border-radius:50%; background:var(--lig-ink); color:#fff;
  font-weight:800; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.lig-steps h4{ margin:0 0 7px; font-size:1.1rem; }
.lig-steps p{ margin:0; color:#4b4744; }

/* --- checklist --- */
.lig-check{ margin:28px 0; padding:24px 28px; background:var(--lig-soft);
  border:1px solid var(--lig-line); border-radius:14px; list-style:none; }
.lig-check li{ position:relative; padding-left:34px; margin-bottom:12px; }
.lig-check li:last-child{ margin-bottom:0; }
.lig-check li:before{ content:"\2713"; position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:6px; background:var(--lig-mint); color:#fff;
  font-size:.8rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* --- charts --- */
.lig-chart{ margin:36px 0; padding:8px; border:1px solid var(--lig-line);
  border-radius:16px; background:#fff; }
.lig-chart img{ width:100%; height:auto; display:block; border-radius:10px; }
.lig-caption{ margin:12px 8px 6px; font-size:.85rem; color:var(--lig-muted); line-height:1.5; }

/* --- stat strip --- */
.lig-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:34px 0; }
.lig-stats>div{ padding:22px 16px; border-radius:14px; background:var(--lig-ink); text-align:center; }
.lig-stats span{ display:block; font-size:2rem; font-weight:800; color:#fff; line-height:1.1; }
.lig-stats small{ display:block; margin-top:7px; font-size:.8rem; color:#B9B4B0; }
@media(max-width:700px){ .lig-stats{ grid-template-columns:repeat(2,1fr); } }

/* --- tables --- */
.entry-content table, .listivo-post table, .listivo-post-inner table{ width:100%; border-collapse:separate; border-spacing:0;
  margin:32px 0; font-size:.97rem; border:1px solid var(--lig-line); border-radius:14px; overflow:hidden; }
.entry-content th, .listivo-post th, .listivo-post-inner th{ background:var(--lig-ink); color:#fff; text-align:left;
  padding:14px 16px; font-size:.9rem; letter-spacing:.02em; }
.entry-content td, .listivo-post td, .listivo-post-inner td{ padding:14px 16px; border-bottom:1px solid var(--lig-line); vertical-align:top; }
.entry-content tbody tr:last-child td, .listivo-post-inner tbody tr:last-child td{ border-bottom:0; }
.entry-content tbody tr:nth-child(even), .listivo-post tbody tr:nth-child(even), .listivo-post-inner tbody tr:nth-child(even){ background:var(--lig-soft); }
.lig-yes{ color:var(--lig-mint); font-weight:700; }
.lig-no{ color:var(--lig-red); font-weight:700; }

/* --- FAQ --- */
.lig-faq{ margin:32px 0; }
.lig-faq details{ border:1px solid var(--lig-line); border-radius:12px; margin-bottom:12px; background:#fff; }
.lig-faq summary{ cursor:pointer; padding:17px 22px; font-weight:700; list-style:none; }
.lig-faq summary::-webkit-details-marker{ display:none; }
.lig-faq summary:after{ content:"+"; float:right; color:var(--lig-red); font-size:1.3rem; line-height:1; }
.lig-faq details[open] summary:after{ content:"\2013"; }
.lig-faq details>p{ margin:0; padding:0 22px 20px; color:#4b4744; }

/* --- CTA --- */
.lig-cta{ margin:44px 0; padding:30px 34px; border-radius:16px;
  background:var(--lig-ink); color:#fff; border-left:6px solid var(--lig-red); }
.lig-cta h3{ margin:0 0 9px; color:#fff; font-size:1.4rem; line-height:1.3; }
.lig-cta p{ margin:0 0 16px; color:#D8D3CF; line-height:1.6; }
.lig-cta p:last-child{ margin-bottom:0; }
.lig-btn{ display:inline-block; padding:14px 30px; border-radius:999px;
  background:var(--lig-red); color:#fff!important; font-weight:700;
  text-decoration:none!important; transition:transform .15s ease, filter .15s ease; }
.lig-btn:hover{ transform:translateY(-1px); filter:brightness(1.09); }
.lig-cta--wide{ text-align:center; border-left:0; border-top:6px solid var(--lig-red); }

/* --- lists --- */
.entry-content ol li, .entry-content ul li, .listivo-post-inner ol li, .listivo-post-inner ul li{ margin-bottom:11px; line-height:1.7; }

/* ==========================================================================
   Table hardening
   Listivo renders post content inside .listivo-post-inner (not .entry-content),
   so table styling has to target that wrapper explicitly.
   ========================================================================== */
.listivo-post-inner table,
.listivo-post .listivo-post-inner table{
  width:100%; border-collapse:separate; border-spacing:0; margin:32px 0;
  font-size:.97rem; border:1px solid var(--lig-line); border-radius:14px;
  overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.listivo-post-inner table thead th{
  background:var(--lig-ink)!important; color:#fff!important; text-align:left;
  padding:14px 16px; font-size:.9rem; font-weight:700; border:0;
}
.listivo-post-inner table td{
  padding:14px 16px; border:0; border-bottom:1px solid var(--lig-line);
  vertical-align:top; line-height:1.55;
}
.listivo-post-inner table tbody tr:last-child td{ border-bottom:0; }
.listivo-post-inner table tbody tr:nth-child(even){ background:var(--lig-soft); }
.listivo-post-inner table td:first-child{ font-weight:600; color:var(--lig-ink); }

/* stat strip + charts inside the real wrapper */
.listivo-post-inner .lig-chart{ border:1px solid var(--lig-line); border-radius:16px; background:#fff; padding:8px; }
.listivo-post-inner .lig-chart img{ border-radius:10px; display:block; width:100%; height:auto; }

@media(max-width:760px){
  .listivo-post-inner table{ display:block; overflow-x:auto; white-space:nowrap; }
}


/* homepage cross-link inside CTA */
.lig-cta-alt{margin:14px 0 0!important;font-size:.94rem;line-height:1.6;opacity:.92}
.lig-cta-alt a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.lig-cta-alt a:hover{opacity:.75}

/* === CATEGORY MENU ICONS ===
   Font Awesome glyph before each top-level category in the header menu.
   Per-item classes are set in Appearance > Menus (lig-cat--<slug>).
   Swap the unicode below for any Font Awesome 5 Solid code. */

/* left-align every submenu entry (theme centres them by default) */
.listivo-menu-v2__submenu .listivo-menu-v2__item > a,
.listivo-menu-v2__submenu-inner .listivo-menu-v2__item > a {
  justify-content:flex-start !important;
  text-align:left !important;
}

.lig-cat > a {
  display:flex !important;
  align-items:center;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:11px;
}
.lig-cat > a:before {
  font-family:"Font Awesome 5 Free"; font-weight:900;
  flex:0 0 19px; width:19px; text-align:center;
  font-size:14px; line-height:1; color:#FFB300;
  transition:color .15s ease;
}
.lig-cat > a:hover:before { color:#243B4A; }

.lig-cat--vehicles > a:before { content:"\f1b9"; }
.lig-cat--real-estate > a:before { content:"\f015"; }
.lig-cat--electronics > a:before { content:"\f3cd"; }
.lig-cat--home-garden > a:before { content:"\f4b8"; }
.lig-cat--fashion > a:before { content:"\f553"; }
.lig-cat--jobs > a:before { content:"\f0b1"; }
.lig-cat--services > a:before { content:"\f7d9"; }
.lig-cat--baby > a:before { content:"\f77d"; }
.lig-cat--pets > a:before { content:"\f1b0"; }
.lig-cat--sports > a:before { content:"\f1e3"; }
.lig-cat--business > a:before { content:"\f275"; }
.lig-cat--community > a:before { content:"\f0c0"; }

/* push the chevron to the far right, text stays left */
.lig-cat > a svg { margin-left:auto; flex:0 0 auto; }

@media (max-width:1024px){
  .lig-cat > a { gap:10px; }
  .lig-cat > a:before { font-size:13px; flex:0 0 18px; width:18px; }
}
/* === END CATEGORY MENU ICONS === */