/* HJ Tools - Shared SEO Content Components */
/* Link: <link rel="stylesheet" href="/css/seo.css"> */

.content-section{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:28px;margin-bottom:16px;}
.content-section h2{font-size:15px;font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);color:var(--text);}
.content-section h3{font-size:13px;font-weight:700;color:var(--accent);margin:18px 0 8px;letter-spacing:.5px;}
.content-section p{font-size:13px;color:#c5d3e8;line-height:1.9;margin-bottom:10px;}
.content-section ul,.content-section ol{font-size:13px;color:#c5d3e8;line-height:1.85;padding-left:1.5em;margin-bottom:12px;}
.content-section li{margin-bottom:5px;}
.content-section strong{color:var(--text);font-weight:700;}

/* How-to numbered steps */
.how-to-steps{counter-reset:step;list-style:none;padding:0;margin:0;}
.how-to-steps li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border);font-size:13px;color:#c5d3e8;line-height:1.7;}
.how-to-steps li:last-child{border-bottom:none;padding-bottom:0;}
.how-to-steps li::before{content:counter(step);min-width:26px;height:26px;background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.4);border-radius:50%;color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.how-to-steps li strong{color:var(--text);}

/* FAQ Accordion (details/summary) */
.faq-accordion{display:flex;flex-direction:column;gap:8px;}
.faq-accordion details{background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .2s;}
.faq-accordion details[open]{border-color:rgba(0,212,255,0.35);}
.faq-accordion summary{padding:14px 16px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text);display:flex;justify-content:space-between;align-items:center;list-style:none;-webkit-user-select:none;user-select:none;gap:12px;}
.faq-accordion summary::-webkit-details-marker{display:none;}
.faq-accordion summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--accent);line-height:1;flex-shrink:0;transition:transform .2s;}
.faq-accordion details[open] summary::after{transform:rotate(45deg);}
.faq-accordion .faq-body{padding:0 16px 14px;font-size:13px;color:#c5d3e8;line-height:1.85;border-top:1px solid var(--border);}
.faq-accordion .faq-body p{margin:10px 0 0;}
.faq-q-mark{color:var(--accent);font-family:var(--mono);font-weight:700;margin-right:4px;flex-shrink:0;}

/* Related tools grid */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;}
.related-item{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px 14px;text-decoration:none;display:block;transition:all .2s;}
.related-item:hover{border-color:var(--accent);background:rgba(0,212,255,.05);}
.related-name{font-size:13px;color:var(--text);font-weight:600;margin-bottom:2px;}
.related-desc{font-size:11px;color:var(--muted);}

/* Keyword badge strip */
.kw-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.kw-badge{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-family:var(--mono);font-size:11px;color:var(--muted);}

@media(max-width:600px){
  .content-section{padding:20px 16px;}
  .related-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}