/* Diamond Knowledge Base: guides written in the block editor (front end and editor). */

/* Box styles chosen in the editor (Group block -> Styles) look like the guide boxes */
.is-style-kb-note,.is-style-kb-tip,.is-style-kb-update,.is-style-kb-decision{border-radius:12px;padding:14px 18px;margin:18px 0;border:1px solid var(--line);border-left:6px solid var(--tape);background:#fff8e8}
.is-style-kb-update{background:#f2f7fc;border-left-color:#3b78b8}
.is-style-kb-tip{background:#f3f8f2;border-left-color:#3c8d40}
.is-style-kb-decision{background:#fff;border-left-color:var(--ink)}
.is-style-kb-note p,.is-style-kb-tip p,.is-style-kb-update p,.is-style-kb-decision p{margin:0}
.is-style-kb-note p+p,.is-style-kb-tip p+p,.is-style-kb-update p+p,.is-style-kb-decision p+p,.kb-callout p+p{margin-top:.6em}
.is-style-kb-labelcheck{border:2px solid #c62828;background:#fff5f5;border-radius:12px;padding:16px 20px;margin:0 0 28px}
.is-style-kb-labelcheck p{margin:0 0 6px}
.is-style-kb-faq{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 12px}
.is-style-kb-faq h4{margin:0 0 .5em}
.is-style-kb-sec{margin-top:44px;scroll-margin-top:96px}
.is-style-kb-sec>h2{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px 12px;line-height:1.2;padding-top:20px;border-top:2px solid var(--line);margin-bottom:.7em}
.is-style-kb-steps{list-style:none;counter-reset:s;margin:0 0 1em;padding:0}
.is-style-kb-steps>li{counter-increment:s;position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px 14px 58px;margin:0 0 10px;min-height:56px}
.is-style-kb-steps>li::before{content:counter(s);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:700 .95rem "Inter",sans-serif;display:flex;align-items:center;justify-content:center}
.is-style-kb-need{list-style:none;margin:0 0 1em;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.is-style-kb-need li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kb-mac>h2,.is-style-kb-sec.kb-mac>h2{border-top:0}
h3.is-style-kb-group{font-size:1.35rem;margin:2em 0 .8em;padding:.4em .8em;background:var(--ink);color:#fff;border-radius:8px}

/* Block layout tidy-ups */
.kb-blocks .wp-block-group{box-sizing:border-box}
.kb-blocks .kb-sec .wp-block-heading{margin-top:0}
.kb-blocks .kb-sec h3.wp-block-heading{margin:1.6em 0 .6em}
.kb-blocks .kb-faq>.wp-block-heading{margin:0 0 .5em}
.kb-blocks .kb-callout>*:last-child,.kb-blocks .kb-faq>*:last-child,.kb-blocks .kb-labelcheck>*:last-child{margin-bottom:0}
.kb-blocks .kb-callout ul{margin:.6em 0 0;padding-left:1.2em}

/* Screenshots inside a step (inline pictures in a list item) */
.kb-steps li img,.is-style-kb-steps li img{display:block;max-width:100%;height:auto;margin:12px 0 2px;border:1px solid var(--line);border-radius:10px;background:#fff}
.kb-blocks .wp-block-image.kb-fig img{width:100%;height:auto}
.kb-blocks .wp-block-image.kb-fig a{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.kb-blocks .wp-block-image.kb-fig-sm{max-width:420px}
.kb-blocks .wp-block-image figcaption{font-size:.85rem;color:var(--mute);margin-top:6px;text-align:left}

/* Video: same frame as the theme's guide video */
.kb-blocks .wp-block-embed.is-provider-youtube,.kb-blocks .wp-block-embed.kb-video{margin:24px 0 8px}
.kb-blocks .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--line)}
.kb-blocks .wp-block-embed.is-provider-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Guide pages without numbered sections, and the plugin's guide layout */
.kb-layout-solo{grid-template-columns:minmax(0,1fr)}
.kb-layout-solo .kb-article{margin:0 auto}
.kb-blocks img{max-width:100%;height:auto}
.kb-blocks table{width:100%;border-collapse:collapse;margin:1em 0}
.kb-blocks th,.kb-blocks td{border:1px solid var(--line);padding:.5em .7em;text-align:left;vertical-align:top}
.kb-blocks h2[id],.kb-blocks h3[id]{scroll-margin-top:96px}
.kb-blocks>.kb-callout:last-of-type{margin-top:2em}

@media(max-width:640px){
 .is-style-kb-need{grid-template-columns:1fr}
 .is-style-kb-steps>li{padding:12px 12px 12px 52px}
 .is-style-kb-steps>li::before{left:12px;top:12px}
}