/* === Tegeloverzicht.nl blog post readability — added 2026-04 === */
  /* Scope: only inside .amblog-content (Amasty Blog post body), so other
     pages and modules are unaffected. */


 /* .amblog-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }*/
.amblog-post-view .amblog-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Restore list markers that the Tailwind/Hyvá preflight reset removed.
     We only want this inside blog post bodies, not in navigation menus. */
  .amblog-content ul,
  .amblog-content ol {
    list-style-position: outside;
    padding-left: 1.5em;
    margin: 0.75em 0 1em;
  }
  .amblog-content ul { list-style-type: disc; }
  .amblog-content ol { list-style-type: decimal; }
  .amblog-content li { margin: 0.35em 0; }


  /* TLDR / "Korte samenvatting" callout. The writer wraps the article
     summary in <div class="tldr">. */
  .amblog-content .tldr {
    background: #fff7ed;
    border-left: 4px solid #ed7b17;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 24px 0;
  }
  .amblog-content .tldr > strong:first-child,
  .amblog-content .tldr > p:first-child > strong:first-child {
    display: block;
    margin-bottom: 8px;
    font-size: 1.05em;
  }
  .amblog-content .tldr ul,
  .amblog-content .tldr ol {
    margin: 0;
  }


  /* Generic callout / pull-quote block that the writer uses inside long
     sections. Also reuse for "Tip:" / "Let op:" boxes. */
  .amblog-content .callout {
    background: #f4f9ff;
    border-left: 4px solid #2b6cb0;
    border-radius: 4px;
    padding: 14px 18px;
    margin: 18px 0;
  }
  .amblog-content .callout--warning {
    background: #fff8e6;
    border-left-color: #d97706;
  }


  /* Table of contents block — placed near the top of long articles. */
  .amblog-content .blog-toc {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 14px 20px;
    margin: 24px 0;
    font-size: 0.95em;
  }
  .amblog-content .blog-toc strong {
    display: block;
    margin-bottom: 8px;
  }
  .amblog-content .blog-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .amblog-content .blog-toc li { margin: 3px 0; }
  .amblog-content .blog-toc a {
    color: #ed7b17;
    text-decoration: none;
  }
  .amblog-content .blog-toc a:hover { text-decoration: underline; }


  /* Tables — give them visible structure and zebra striping. */
  .amblog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95em;
  }
  .amblog-content table th {
    background: #fef3e8;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #ed7b17;
    font-weight: 600;
  }
  .amblog-content table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
  }
  .amblog-content table tbody tr:nth-child(even) {
    background: #fafafa;
  }


  /* Inline product card (writer emits these from Doofinder results). */
  .amblog-content .blog-product-card {
    display: inline-block;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px;
    margin: 8px 8px 8px 0;
    max-width: 240px;
    vertical-align: top;
  }
  .amblog-content .blog-product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .amblog-content .blog-product-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
  }
  .amblog-content .blog-product-card .title {
    margin-top: 8px;
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.3;
  }
  .amblog-content .blog-product-card .meta {
    margin-top: 4px;
    font-size: 0.82em;
    color: #666;
  }


  /* Slightly tighter paragraph spacing for long-form readability. */
  .amblog-content p {
    margin: 0.75em 0;
  }


  /* H2 / H3 spacing inside blog content. The current theme uses a strong
     uppercase orange H2 — keep that, just give it room to breathe. */
  .amblog-content h2 {
    margin-top: 2em;
    margin-bottom: 0.6em;
    scroll-margin-top: 80px; /* so #anchor jumps don't hide under sticky header */
  }
  .amblog-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.4em;
    scroll-margin-top: 80px;
  }


  /* Mobile: drop the column constraint, the viewport already constrains us. */
/*  @media (max-width: 820px) {
    .amblog-content { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  }*/
  @media (max-width: 820px) {
    .amblog-post-view .amblog-content { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  }
  /* === Blog post content typography — scoped to .amblog-post-view === */
/* Replaces per-post inline <style> blocks once deployed. */
 
.amblog-post-view .post-content,
.amblog-content,
.amblog-text {
  max-width: 100% !important;
}
 
.amblog-post-view .post-content {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}
 
/* Headings */
.amblog-post-view .post-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #ed7b17;
  line-height: 1.3;
}
 
.amblog-post-view .post-content h2:first-of-type {
  margin-top: 1.5rem;
}
 
.amblog-post-view .post-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 2rem 0 0.5rem;
  line-height: 1.35;
}
 
.amblog-post-view .post-content h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin: 1.5rem 0 0.4rem;
}
 
/* Paragraphs & inline */
.amblog-post-view .post-content p {
  margin: 0.7rem 0 1.1rem;
}
 
.amblog-post-view .post-content strong {
  color: #1a1a1a;
  font-weight: 600;
}
 
.amblog-post-view .post-content a {
  color: #ed7b17;
  text-decoration: none;
}
 
.amblog-post-view .post-content a:hover {
  text-decoration: underline;
}
 
/* Lists */
.amblog-post-view .post-content ul,
.amblog-post-view .post-content ol {
  padding-left: 1.5em;
  margin: 0.75rem 0 1.25rem;
}
 
.amblog-post-view .post-content ul { list-style-type: disc; }
.amblog-post-view .post-content ol { list-style-type: decimal; }
 
.amblog-post-view .post-content li {
  margin: 0.3rem 0;
}
 
/* Tables */
.amblog-post-view .post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.95rem;
}
 
.amblog-post-view .post-content table th {
  background: #fef3e8;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #ed7b17;
  font-weight: 600;
}
 
.amblog-post-view .post-content table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
 
.amblog-post-view .post-content table tbody tr:nth-child(even) {
  background: #fafafa;
}
 
/* FAQ (definition lists) */
.amblog-post-view .post-content dl {
  margin: 1rem 0 1.5rem;
  padding: 0;
}
 
.amblog-post-view .post-content dt {
  font-weight: 600;
  color: #1a1a1a;
  margin: 1rem 0 0.3rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.4;
}
 
.amblog-post-view .post-content dt:first-of-type {
  margin-top: 0.5rem;
}
 
.amblog-post-view .post-content dt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ed7b17;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5rem;
  transform: translateY(-2px);
}
 
.amblog-post-view .post-content dd {
  margin: 0 0 0.6rem;
  padding: 0;
  color: #333;
  line-height: 1.6;
}
 
/* Media */
.amblog-post-view .post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}
 
/* Blockquotes */
.amblog-post-view .post-content blockquote {
  border-left: 3px solid #ed7b17;
  padding: 0.5rem 1rem;
  margin: 1.25rem 0;
  background: #faf7f3;
  color: #555;
  font-style: italic;
}
 
/* Mobile */
@media (max-width: 768px) {
  .amblog-post-view .post-content h2 { font-size: 1.35rem; }
  .amblog-post-view .post-content h3 { font-size: 1.1rem; }
  .amblog-post-view .post-content table { font-size: 0.85rem; }
  .amblog-post-view .post-content table th,
  .amblog-post-view .post-content table td { padding: 8px; }
}



/* === Blog post content typography — scoped to .amblog-post-container.-post-page === */
/* Replaces per-post inline <style> blocks once deployed. */
 
.amblog-post-container.-post-page .amblog-content,
.amblog-content,
.amblog-text {
  max-width: 100% !important;
}
 
.amblog-post-container.-post-page .amblog-content {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}
 
/* Headings */
.amblog-post-container.-post-page .amblog-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #ed7b17;
  line-height: 1.3;
}
 
.amblog-post-container.-post-page .amblog-content h2:first-of-type {
  margin-top: 1.5rem;
}
 
.amblog-post-container.-post-page .amblog-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 2rem 0 0.5rem;
  line-height: 1.35;
}
 
.amblog-post-container.-post-page .amblog-content h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin: 1.5rem 0 0.4rem;
}
 
/* Paragraphs & inline */
.amblog-post-container.-post-page .amblog-content p {
  margin: 0.7rem 0 1.1rem;
}
 
.amblog-post-container.-post-page .amblog-content strong {
  color: #1a1a1a;
  font-weight: 600;
}
 
.amblog-post-container.-post-page .amblog-content a {
  color: #ed7b17;
  text-decoration: none;
}
 
.amblog-post-container.-post-page .amblog-content a:hover {
  text-decoration: underline;
}
 
/* Lists */
.amblog-post-container.-post-page .amblog-content ul,
.amblog-post-container.-post-page .amblog-content ol {
  padding-left: 1.5em;
  margin: 0.75rem 0 1.25rem;
}
 
.amblog-post-container.-post-page .amblog-content ul { list-style-type: disc; }
.amblog-post-container.-post-page .amblog-content ol { list-style-type: decimal; }
 
.amblog-post-container.-post-page .amblog-content li {
  margin: 0.3rem 0;
}
 
/* Tables */
.amblog-post-container.-post-page .amblog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.95rem;
}
 
.amblog-post-container.-post-page .amblog-content table th {
  background: #fef3e8;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #ed7b17;
  font-weight: 600;
}
 
.amblog-post-container.-post-page .amblog-content table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
 
.amblog-post-container.-post-page .amblog-content table tbody tr:nth-child(even) {
  background: #fafafa;
}
 
/* FAQ (definition lists) */
.amblog-post-container.-post-page .amblog-content dl {
  margin: 1rem 0 1.5rem;
  padding: 0;
}
 
.amblog-post-container.-post-page .amblog-content dt {
  font-weight: 600;
  color: #1a1a1a;
  margin: 1rem 0 0.3rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.4;
}
 
.amblog-post-container.-post-page .amblog-content dt:first-of-type {
  margin-top: 0.5rem;
}
 
.amblog-post-container.-post-page .amblog-content dt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #ed7b17;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5rem;
  transform: translateY(-2px);
}
 
.amblog-post-container.-post-page .amblog-content dd {
  margin: 0 0 0.6rem;
  padding: 0;
  color: #333;
  line-height: 1.6;
}
 
/* Media */
.amblog-post-container.-post-page .amblog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1rem 0;
}
 
/* Blockquotes */
.amblog-post-container.-post-page .amblog-content blockquote {
  border-left: 3px solid #ed7b17;
  padding: 0.5rem 1rem;
  margin: 1.25rem 0;
  background: #faf7f3;
  color: #555;
  font-style: italic;
}
 
/* TLDR / summary box */
.amblog-post-container.-post-page .amblog-content .tldr {
  background: #fff7ed;
  border-left: 4px solid #ed7b17;
  border-radius: 4px;
  padding: 16px 20px;
  margin: 24px 0;
}
 
/* Callout / tip box */
.amblog-post-container.-post-page .amblog-content .callout {
  background: #f4f9ff;
  border-left: 4px solid #2b6cb0;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 18px 0;
}
 
/* Product cards */
.amblog-post-container.-post-page .amblog-content .blog-product-card {
  display: inline-block;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px;
  margin: 8px 8px 8px 0;
  max-width: 240px;
  vertical-align: top;
}
 
.amblog-post-container.-post-page .amblog-content .blog-product-card a {
  text-decoration: none;
  color: inherit;
  display: block;
}
 
.amblog-post-container.-post-page .amblog-content .blog-product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
 
.amblog-post-container.-post-page .amblog-content .blog-product-card .title {
  margin-top: 8px;
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.3;
}
 
/* Table of contents */
.amblog-post-container.-post-page .amblog-content .blog-toc {
  background: #f8f8f8;
  border-radius: 6px;
  padding: 14px 20px;
  margin: 24px 0;
  font-size: 0.95em;
}
 
.amblog-post-container.-post-page .amblog-content .blog-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.amblog-post-container.-post-page .amblog-content .blog-toc a {
  color: #ed7b17;
  text-decoration: none;
}
 
/* Lees ook box */
.amblog-post-container.-post-page .amblog-content .lees-ook {
  background: #f8f6f3;
  border-left: 4px solid #d97706;
  padding: 18px 20px;
  margin: 32px 0;
  border-radius: 6px;
}
 
/* Mobile */
@media (max-width: 768px) {
  .amblog-post-container.-post-page .amblog-content h2 { font-size: 1.35rem; }
  .amblog-post-container.-post-page .amblog-content h3 { font-size: 1.1rem; }
  .amblog-post-container.-post-page .amblog-content table { font-size: 0.85rem; }
  .amblog-post-container.-post-page .amblog-content table th,
  .amblog-post-container.-post-page .amblog-content table td { padding: 8px; }
}