/* WP SEO Content Engine — Frontend Content Styles */

/* ── Table of Contents ──────────────────────────────────────────────────────── */
.wpsce-toc {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 1.5em 0 2em;
    font-size: .93em;
}
.wpsce-toc h2 { font-size: 1em; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em; color: #555; }
.wpsce-toc ol { margin: 0; padding-left: 20px; }
.wpsce-toc li { padding: 3px 0; }
.wpsce-toc a  { color: #0073aa; text-decoration: none; }
.wpsce-toc a:hover { text-decoration: underline; }

/* ── Quick Answer / GEO box ─────────────────────────────────────────────────── */
.wpsce-quick-answer {
    background: #e8f4fd;
    border: 1px solid #b3d7f5;
    border-left: 5px solid #0073aa;
    border-radius: 4px;
    padding: 18px 22px;
    margin: 0 0 2em;
}
.wpsce-qa-label    { font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #0073aa; margin-bottom: 6px; }
.wpsce-qa-question { margin: 0 0 8px; font-size: 1.1em; color: #1a1a2e; }
.wpsce-qa-answer   { margin: 0; font-size: 1em; color: #333; line-height: 1.6; }

/* ── Specs table ────────────────────────────────────────────────────────────── */
.wpsce-specs-table { margin: 1.5em 0; overflow-x: auto; }
.wpsce-specs-table h2 { font-size: 1.1em; margin-bottom: 10px; }
.wpsce-specs { width: 100%; border-collapse: collapse; font-size: .93em; }
.wpsce-specs th { background: #f8f9fa; text-align: left; padding: 10px 14px; border: 1px solid #dee2e6; font-weight: 600; width: 35%; }
.wpsce-specs td { padding: 10px 14px; border: 1px solid #dee2e6; }
.wpsce-specs tr:nth-child(even) td { background: #f8f9fa; }

/* ── Pros & Cons ────────────────────────────────────────────────────────────── */
.wpsce-pros-cons { display: flex; gap: 20px; margin: 1.5em 0; flex-wrap: wrap; }
.wpsce-pros, .wpsce-cons { flex: 1; min-width: 200px; border-radius: 4px; padding: 16px 18px; }
.wpsce-pros { background: #f0faf2; border: 1px solid #c3e6c8; }
.wpsce-cons { background: #fdf5f5; border: 1px solid #e6c3c3; }
.wpsce-pros h3 { color: #2d8a46; margin-top: 0; font-size: 1em; }
.wpsce-cons h3 { color: #c0392b; margin-top: 0; font-size: 1em; }
.wpsce-pros ul, .wpsce-cons ul { margin: 0; padding-left: 18px; }
.wpsce-pros li, .wpsce-cons li { padding: 3px 0; font-size: .93em; }

/* ── FAQ section ────────────────────────────────────────────────────────────── */
.wpsce-faq-section { margin: 2em 0; }
.wpsce-faq-section h2 { font-size: 1.3em; margin-bottom: 1em; }
.wpsce-faq-item {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}
.wpsce-faq-item h3 {
    background: #f8f9fa;
    margin: 0;
    padding: 14px 18px;
    font-size: 1em;
    cursor: pointer;
    position: relative;
}
.wpsce-faq-item h3::after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #0073aa; }
.wpsce-faq-item [itemprop="text"] { padding: 14px 18px; font-size: .95em; line-height: 1.7; }

/* ── YouTube embed ──────────────────────────────────────────────────────────── */
.wpsce-video-wrapper { border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.12); }

/* ── Author bio ─────────────────────────────────────────────────────────────── */
.wpsce-author-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 18px 22px;
    margin: 2.5em 0 1em;
    font-size: .93em;
}
.wpsce-author-logo    { border-radius: 50%; border: 2px solid #dee2e6; flex-shrink: 0; }
.wpsce-author-name    { display: block; font-weight: 700; font-size: 1em; margin-bottom: 5px; color: #1a1a1a; }
.wpsce-author-bio     { margin: 0 0 4px; color: #555; line-height: 1.6; }
.wpsce-author-trust   { margin: 0; color: #888; font-size: .9em; font-style: italic; }

/* ── Trust signals ──────────────────────────────────────────────────────────── */
.wpsce-trust-signals {
    background: #fff8e5;
    border: 1px solid #f3e09a;
    border-radius: 4px;
    padding: 16px 20px;
    margin: 1.5em 0;
    font-size: .9em;
}
.wpsce-trust-signals h3 { margin-top: 0; font-size: 1em; color: #7a5c00; }
.wpsce-trust-list { margin: 0; padding-left: 18px; }
.wpsce-trust-list li { padding: 4px 0; color: #3c3200; line-height: 1.6; }

/* ── HowTo steps ────────────────────────────────────────────────────────────── */
.wpsce-howto { margin: 2em 0; }
.wpsce-howto-steps { padding-left: 0; counter-reset: step; list-style: none; }
.wpsce-howto-steps li {
    counter-increment: step;
    padding: 12px 16px 12px 54px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    background: #fff;
}
.wpsce-howto-steps li::before {
    content: counter(step);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: #0073aa;
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85em;
}
.wpsce-howto-steps strong { display: block; margin-bottom: 4px; }
.wpsce-howto-steps p { margin: 0; color: #555; font-size: .93em; }

/* ── Product cards ──────────────────────────────────────────────────────────── */
.wpsce-product-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 1.5em 0; }
@media (max-width: 900px) { .wpsce-product-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .wpsce-product-cards { grid-template-columns: 1fr; } }

.wpsce-product-card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    background: #fff;
    transition: box-shadow .2s;
}
.wpsce-product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.wpsce-product-card img   { max-width: 100%; height: 130px; object-fit: contain; margin-bottom: 8px; }
.wpsce-product-card h3    { font-size: .95em; margin: 0 0 6px; }
.wpsce-product-card h3 a  { color: #1a1a1a; text-decoration: none; }
.wpsce-card-price { font-weight: 700; color: #0073aa; margin: 0 0 10px; }
.wpsce-card-btn   { display: inline-block; width: 100%; box-sizing: border-box; text-align: center; }

/* ── Expert summary ─────────────────────────────────────────────────────────── */
.wpsce-expert-summary {
    border-left: 4px solid #0073aa;
    padding: 12px 16px;
    margin: 1.5em 0;
    background: #f0f6fc;
    border-radius: 0 4px 4px 0;
    font-size: .95em;
}
.wpsce-summary-label { margin-bottom: 6px; }

/* ── Key facts table ────────────────────────────────────────────────────────── */
.wpsce-key-facts { margin: 1.5em 0; }
.wpsce-key-facts h3 { margin-bottom: 8px; }
.wpsce-facts-table { width: 100%; border-collapse: collapse; font-size: .93em; }
.wpsce-facts-table th { width: 40%; text-align: left; background: #f8f9fa; padding: 9px 12px; border: 1px solid #dee2e6; font-weight: 600; }
.wpsce-facts-table td { padding: 9px 12px; border: 1px solid #dee2e6; }

/* ── References ─────────────────────────────────────────────────────────────── */
.wpsce-references { margin: 2em 0; font-size: .88em; border-top: 1px solid #dee2e6; padding-top: 1em; }
.wpsce-references h4 { font-size: .95em; margin-bottom: 8px; color: #666; }
.wpsce-references ol { margin: 0; padding-left: 18px; }
.wpsce-references li { padding: 2px 0; }
.wpsce-references a  { color: #0073aa; }

/* ── See also ───────────────────────────────────────────────────────────────── */
.wpsce-see-also { margin: 1.5em 0; padding: 14px 18px; background: #f8f9fa; border-radius: 4px; border: 1px solid #dee2e6; }
.wpsce-see-also h3 { margin: 0 0 8px; font-size: 1em; }
.wpsce-see-also ul { margin: 0; padding-left: 18px; }
.wpsce-see-also a  { color: #0073aa; }

/* ── Comparison table ───────────────────────────────────────────────────────── */
.wpsce-comparison { margin: 1.5em 0; overflow-x: auto; }
.wpsce-compare-table { width: 100%; border-collapse: collapse; font-size: .93em; }
.wpsce-compare-table th { background: #0073aa; color: #fff; padding: 10px 14px; text-align: left; }
.wpsce-compare-table td { padding: 10px 14px; border: 1px solid #dee2e6; }
.wpsce-compare-table caption { caption-side: top; font-weight: 700; font-size: 1em; text-align: left; padding-bottom: 6px; }
.wpsce-compare-table tr:nth-child(even) td { background: #f8f9fa; }

/* ── Expertise intro ────────────────────────────────────────────────────────── */
.wpsce-expertise { color: #555; font-style: italic; margin-bottom: 1.5em; padding: 10px 14px; background: #f9f9f9; border-radius: 4px; }