/* ===== GENERIC WYSIWYG CONTENT (About Us, Privacy Policy, and any other
   plain WordPress page rendered through .content-layout / .main-content) ===== */
.article-content{font-size:1rem;line-height:1.85;color:var(--text)}
.article-content h2{
  font-size:1.4rem;font-weight:800;margin:40px 0 16px;padding-bottom:10px;
  border-bottom:2px solid var(--border-light);
}
.article-content h2:first-child{margin-top:0}
.article-content h3{
  font-size:1.12rem;font-weight:800;margin:28px 0 12px;
  display:flex;align-items:center;gap:9px;
}
.article-content h3::before{
  content:'';width:7px;height:7px;border-radius:2px;flex-shrink:0;
  background:var(--primary);transform:rotate(45deg);
}
.article-content p{margin-bottom:18px;color:var(--text-secondary)}
.article-content p.wt-text-lg{font-size:1.3em;line-height:1.7}
.article-content p.wt-text-sm{font-size:.85em}
.article-content a{color:var(--primary);text-decoration:underline}
.article-content strong{color:var(--text);font-weight:700}
.article-content ul,.article-content ol{margin:0 0 20px;color:var(--text-secondary)}
.article-content li{margin-bottom:8px}

/* Plain bullet list — accent-colored dot instead of the default disc */
.article-content ul{list-style:none;padding-left:0}
.article-content ul > li{position:relative;padding-left:24px}
.article-content ul > li::before{
  content:'';position:absolute;left:4px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--primary-light);
}

/* Numbered list — used for "How to Use" style step-by-step guides. Each
   item's own numbered badge sits to the left; a bold lead-in phrase (e.g.
   "<strong>Choose a pattern type</strong> Select polka dots…") reads as the
   step title with the rest of the sentence as its description. */
.article-content ol{list-style:none;counter-reset:wt-step;padding-left:0}
.article-content ol > li{
  position:relative;padding:2px 0 2px 42px;counter-increment:wt-step;
}
.article-content ol > li::before{
  content:counter(wt-step);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;background:var(--primary-bg);
  color:var(--primary);font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.article-content ol > li strong:first-child{display:block;color:var(--text);margin-bottom:2px}

.article-content blockquote{
  border-left:3px solid var(--primary);padding:4px 20px;margin:20px 0;
  color:var(--text-secondary);font-style:italic;background:var(--primary-bg);border-radius:0 var(--radius-xs) var(--radius-xs) 0;
}

.article-content img{
  max-width:100%;height:auto;border-radius:var(--radius-sm);margin:20px 0;
  display:block;border:1px solid var(--border-light);
}
.article-content figure{margin:20px 0}
.article-content figure img{margin:0}
.article-content figcaption{
  text-align:center;font-size:.82rem;color:var(--text-dim);margin-top:8px;
}

.article-content code{background:var(--surface);padding:2px 6px;border-radius:4px;font-size:.85em}
.article-content pre{background:var(--text);color:#fff;padding:16px;border-radius:var(--radius-sm);overflow-x:auto;margin-bottom:18px}

.article-content hr{border:none;border-top:1px solid var(--border-light);margin:32px 0}

.article-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.92rem}
.article-content th,.article-content td{padding:10px 14px;border:1px solid var(--border-light);text-align:left}
.article-content th{background:var(--surface);font-weight:700;color:var(--text)}
.article-content tr:nth-child(even) td{background:color-mix(in srgb, var(--surface) 50%, transparent)}

/* Optional "FAQ Question" style (pick it from the Styles dropdown when
   editing a tool's Detail Page Content) — turns a heading + the paragraph
   right after it into a clean Q&A row instead of a generic sub-heading. */
.article-content h3.wt-faq-q{
  padding-top:20px;border-top:1px solid var(--border-light);margin-top:20px;
}
.article-content h3.wt-faq-q:first-of-type{border-top:none;padding-top:0;margin-top:28px}
.article-content h3.wt-faq-q::before{
  content:'Q';width:20px;height:20px;border-radius:6px;background:var(--primary);
  color:#fff;font-size:.72rem;font-weight:800;transform:none;
  display:flex;align-items:center;justify-content:center;
}
.article-content h3.wt-faq-q + p{color:var(--text-secondary);padding-left:29px}