/* Marketing Cheatcodes - FAQ, How-to and Breadcrumbs blocks (live site and editor) */

.mc-breadcrumbs { margin: 0 0 1.5em; font-size: .875em; line-height: 1.5; }
.mc-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25em; margin: 0; padding: 0; list-style: none; }
.mc-breadcrumbs li { display: inline-flex; align-items: center; gap: .25em; margin: 0; }
.mc-breadcrumbs a { color: inherit; opacity: .75; text-decoration: none; transition: opacity .15s ease; }
.mc-breadcrumbs a:hover, .mc-breadcrumbs a:focus-visible { opacity: 1; text-decoration: underline; }
.mc-breadcrumbs__sep { opacity: .5; padding: 0 .25em; }
.mc-breadcrumbs [aria-current="page"] { font-weight: 600; }

.mc-faq { margin: 1.5em 0; border-top: 1px solid rgba(127,127,127,.25); }
.mc-faq__item { border-bottom: 1px solid rgba(127,127,127,.25); }
.mc-faq__q { position: relative; padding: 1em 2.5em 1em 0; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.mc-faq__q::-webkit-details-marker { display: none; }
.mc-faq__q::after { content: "+"; position: absolute; top: 50%; right: .5em; font-size: 1.25em; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform .2s ease; }
.mc-faq__item[open] > .mc-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.mc-faq__q:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mc-faq__a { padding: 0 0 1em; line-height: 1.6; }
.mc-faq__a > :first-child { margin-top: 0; }
.mc-faq__a > :last-child { margin-bottom: 0; }

.mc-howto { margin: 1.5em 0; }
.mc-howto__time { margin: 0 0 1em; font-size: .875em; opacity: .75; }
.mc-howto__steps { margin: 1em 0 0; padding: 0; list-style: none; counter-reset: mc-step; }
.mc-howto__step { position: relative; margin: 0 0 1.25em; padding-left: 3em; counter-increment: mc-step; line-height: 1.6; }
.mc-howto__step::before { content: counter(mc-step); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: #115e59; color: #fff; font-size: .875em; font-weight: 700; }
.mc-howto__step-name { display: block; margin-bottom: .25em; }
.mc-howto__step-text > :first-child { margin-top: 0; }
.mc-howto__step-text > :last-child { margin-bottom: 0; }

/* Editor only */
.mc-block-edit .mc-block-row { position: relative; padding: 8px 96px 8px 0; border-bottom: 1px dashed rgba(127,127,127,.3); }
.mc-block-edit .mc-howto__step.mc-block-row { padding-left: 3em; }
.mc-block-edit .mc-faq__q { padding: 0; margin: 0 0 4px; cursor: text; }
.mc-block-edit .mc-faq__q::after { content: none; }
.mc-block-row__tools { position: absolute; top: 4px; right: 0; display: flex; opacity: .4; transition: opacity .15s ease; }
.mc-block-row:hover .mc-block-row__tools, .mc-block-row:focus-within .mc-block-row__tools { opacity: 1; }
.mc-block-edit > .components-button { margin-top: 12px; }
.mc-block-hint { margin: 8px 0 0; font-size: 12px; opacity: .7; }