/*
 * FAQ accordion at the foot of the tool pages.
 *
 * This 651-byte block was duplicated byte-for-byte inside the inline <style> of
 * 20 files (18 page templates plus inc-chinese-converter.css.php and
 * inc-vertical-text-layout.css.php). It is now enqueued once by
 * gjw_tool_styles() in inc/tool-scripts.php.
 *
 * Kept separate from media-tool.css because five FAQ pages (image-info,
 * image-split, audio-info, video-info, video-keyframes) carry their own layout
 * CSS and never loaded the shared media-tool styles.
 *
 * The +/- glyphs are written as CSS escapes rather than literal ＋/－. Inline
 * CSS inherited the document's UTF-8; a standalone .css file is decoded from
 * its Content-Type charset, which nginx does not set for text/css. \FF0B and
 * \FF0D are pure ASCII and so cannot be mis-decoded.
 */
.mt-faq { margin-top:40px; padding-top:24px; border-top:1px solid #f3f4f6; }
.mt-faq-title { font-size:1.1rem; font-weight:700; color:#111827; margin-bottom:16px; }
.mt-faq-item { border:1px solid #e5e7eb; border-radius:8px; margin-bottom:8px; overflow:hidden; }
.mt-faq-q { padding:14px 16px; font-size:.9rem; font-weight:600; color:#374151; cursor:pointer; list-style:none; }
.mt-faq-q::-webkit-details-marker { display:none; }
.mt-faq-q::after { content:'\FF0B'; float:right; color:#9ca3af; font-weight:400; }
details[open] .mt-faq-q::after { content:'\FF0D'; }
.mt-faq-a { padding:0 16px 14px; font-size:.85rem; color:#6b7280; line-height:1.7; margin:0; }

/*
 * Related articles, printed above the FAQ by gjw_render_related_posts().
 *
 * Lives in this file rather than its own: every page that renders the block
 * also renders the FAQ, so a second stylesheet would be a second request for
 * no benefit. The one exception is the hub/satellite template (the seven image
 * tools), which has no FAQ — gjw_tool_styles() enqueues this there too.
 */
.mt-related { margin-top:40px; padding-top:24px; border-top:1px solid #f3f4f6; }
.mt-related-title { font-size:1.1rem; font-weight:700; color:#111827; margin-bottom:16px; }
.mt-related-list {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:10px;
}
.mt-related-item {
    display:flex; flex-direction:column; gap:5px;
    border:1px solid #e5e7eb; border-radius:8px;
    padding:14px 16px; text-decoration:none;
    transition:border-color .15s, box-shadow .15s;
}
.mt-related-item:hover { border-color:var(--accent, #7c3aed); box-shadow:0 2px 10px rgba(0,0,0,.05); }
.mt-related-h { font-size:.9rem; font-weight:700; color:#111827; line-height:1.4; }
.mt-related-x {
    font-size:.78rem; color:#6b7280; line-height:1.5;
    /* Three lines keeps every card the same height whatever the language —
       the same excerpt runs far shorter in Chinese than in German. */
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.mt-related-more {
    display:inline-block; margin-top:14px;
    font-size:.84rem; font-weight:600;
    color:var(--accent-dark, #6d28d9); text-decoration:none;
}
.mt-related-more:hover { text-decoration:underline; }