/*
 * Raspberry Pi setup guide pages on diginode.tools (the step pages): step cards, "More info" toggles, option cards,
 * the step bar and the Raspberry Pi 5 / Pi 4 switch. Loaded by dgnt_guide_assets() on the pages in DGNT_GUIDE_PAGES.
 * The One Page Setup (page 112) has its own copy of the card styles in a Custom HTML block on the page.
 */

/* Cards */
.dgnt-guide-intro,.dgnt-step,.dgnt-next{background:#fff;border:1px solid #dbe5f1;border-radius:16px;padding:28px 30px 24px;margin:0 0 28px;box-shadow:0 6px 20px rgba(0,35,82,.06)}
.dgnt-guide-intro{background:#f4f8fd}
.dgnt-guide-intro h2,.dgnt-next h2{margin-top:0}
@media (max-width:700px){.dgnt-guide-intro,.dgnt-step,.dgnt-next{padding:22px 18px 18px}}
.dgnt-step h2.wp-block-heading{display:flex;align-items:center;gap:16px;margin-top:0;font-size:1.6em;line-height:1.2}
.dgnt-step h2.wp-block-heading[data-step]::before{content:attr(data-step);flex:none;min-width:54px;height:54px;padding:0 8px;border-radius:999px;background:#0066cc;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-style:italic;font-size:.95em;box-shadow:0 0 0 6px rgba(0,102,204,.12)}
.dgnt-step .dgnt-lead{font-size:1.1em;color:#3d5a80;margin-top:-4px}
.dgnt-step p.dgnt-do{padding-left:44px;position:relative;margin:16px 0 10px}
.dgnt-step p.dgnt-do>strong:first-child{position:absolute;left:0;top:0;width:32px;height:26px;border-radius:7px;background:#e6f0fb;color:#0066cc;
  font-size:.85em;display:flex;align-items:center;justify-content:center}
.dgnt-step .wp-block-image{margin:12px 0 18px 44px}
.dgnt-step .wp-block-image img{max-width:min(100%,640px);height:auto;border-radius:10px}
.dgnt-step .wp-block-image figcaption{font-size:.85em;color:#5b7290;text-align:left}
.dgnt-step .wp-block-details,.dgnt-step .wp-block-embed,.dgnt-step p.dgnt-cmd{margin-left:44px}
.dgnt-step details.wp-block-details{background:#f4f8fd;border:1px solid #dbe5f1;border-radius:10px;padding:10px 16px;margin-top:10px;margin-bottom:10px}
.dgnt-step details.wp-block-details>summary{cursor:pointer;font-weight:600;color:#0066cc}
.dgnt-step details.wp-block-details[open]>summary{margin-bottom:8px}
.dgnt-step .dgnt-more{margin:22px 0 0;font-size:.95em;color:#5b7290}
.dgnt-step p.dgnt-cmd{position:relative;background:#0b1220;border-radius:10px;padding:14px 92px 14px 16px;margin-top:8px;margin-bottom:14px}
.dgnt-step p.dgnt-cmd code{background:none;color:#cfe4ff;font-size:1em;padding:0;white-space:pre-wrap;word-break:break-all}
.dgnt-copy{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;border-radius:7px;background:#0066cc;color:#fff;font:600 13px/1 inherit;padding:8px 12px;cursor:pointer}
.dgnt-copy.ok{background:#1fa463}
.dgnt-note{border-left:4px solid #0066cc;background:#f4f8fd;border-radius:0 10px 10px 0;padding:12px 16px!important}
.dgnt-step p.dgnt-note{margin-left:44px}
.dgnt-credit{font-size:.8em;color:#7a8ca3;margin-top:18px}

/* Option cards (e.g. which NVMe board or case) - side by side on desktop */
.dgnt-options>.wp-block-group__inner-container,.dgnt-options.is-layout-constrained{display:grid!important;grid-template-columns:1fr 1fr;gap:20px}
.dgnt-options>.wp-block-group__inner-container>*,.dgnt-options.is-layout-constrained>*{max-width:none!important;margin:0!important}
.dgnt-step .dgnt-options{margin:14px 0 16px 44px}
@media (max-width:899px){.dgnt-options>.wp-block-group__inner-container,.dgnt-options.is-layout-constrained{grid-template-columns:1fr}.dgnt-step .dgnt-options{margin-left:0}}
.dgnt-option{background:#f8fbff;border:1px solid #dbe5f1;border-radius:14px;padding:16px 18px 12px}
.dgnt-option h3{margin:0 0 8px;font-size:1.15em}
.dgnt-step .dgnt-option .wp-block-image{margin:0 0 10px}
.dgnt-step .dgnt-option .wp-block-image img{width:100%;max-width:100%}
.dgnt-option p{margin:0 0 8px}
.dgnt-step .dgnt-option .wp-block-details{margin-left:0}

/* Next step card */
.dgnt-next{text-align:center;background:linear-gradient(160deg,#0b3a7a,#002352);border:0;color:#fff}
.dgnt-next h2{color:#fff!important}
.dgnt-next p{color:#e6f1ff!important}
.dgnt-next a{color:#fff!important;text-decoration:underline}
.dgnt-next .wp-block-buttons{margin-bottom:22px}
.dgnt-next .wp-block-button__link{background:#fff!important;color:#002352!important;text-decoration:none!important;font-weight:700}

/* Step bar and Raspberry Pi switch (added at the top of the page by the plugin) */
.dgnt-guide-top{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 22px;margin:0 0 28px}
.dgnt-stepbar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dbe5f1;border-radius:999px;padding:8px 14px;box-shadow:0 6px 20px rgba(0,35,82,.06)}
.dgnt-stepbar>span{font-weight:600;color:#3d5a80;margin-right:4px;white-space:nowrap}
.dgnt-stepbar a{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none!important;font-weight:700;
  border:2px solid #b9cde6;color:#0066cc!important;background:#fff}
.dgnt-stepbar a.is-past{background:#e6f0fb;border-color:#e6f0fb}
.dgnt-stepbar a.is-current{background:#0066cc;border-color:#0066cc;color:#fff!important;box-shadow:0 0 0 4px rgba(0,102,204,.15)}
.dgnt-stepbar i{width:12px;height:2px;background:#dbe5f1}
.dgnt-pi-switch{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dbe5f1;border-radius:999px;padding:6px;box-shadow:0 6px 20px rgba(0,35,82,.06)}
.dgnt-pi-switch>span{font-weight:600;color:#3d5a80;margin:0 6px 0 10px;white-space:nowrap}
.dgnt-pi-switch button{border:0;border-radius:999px;background:transparent;color:#0066cc;font:600 15px/1 inherit;padding:10px 16px;cursor:pointer}
.dgnt-pi-switch button[aria-pressed="true"]{background:#0066cc;color:#fff}
@media (max-width:600px){.dgnt-stepbar>span,.dgnt-stepbar i{display:none}.dgnt-stepbar a{width:30px;height:30px}.dgnt-pi-switch>span{display:none}}

/* Raspberry Pi 5 / Pi 4 only blocks: shown for the chosen Pi. Without the script both show, labelled. */
.dgnt-only-pi5,.dgnt-only-pi4{position:relative}
html:not(.dgnt-pi-chosen) .dgnt-only-pi5::before{content:"Raspberry Pi 5";display:inline-block;font-size:.8em;font-weight:700;color:#fff;background:#c51a4a;border-radius:6px;padding:2px 8px;margin-bottom:6px}
html:not(.dgnt-pi-chosen) .dgnt-only-pi4::before{content:"Raspberry Pi 4";display:inline-block;font-size:.8em;font-weight:700;color:#fff;background:#3d5a80;border-radius:6px;padding:2px 8px;margin-bottom:6px}
html.dgnt-pi4 .dgnt-only-pi5,html.dgnt-pi5 .dgnt-only-pi4{display:none!important}
/* Same for the computer: macOS / Windows */
.dgnt-only-mac,.dgnt-only-win{position:relative}
html:not(.dgnt-os-chosen) .dgnt-only-mac::before{content:"macOS";display:inline-block;font-size:.8em;font-weight:700;color:#fff;background:#555;border-radius:6px;padding:2px 8px;margin-bottom:6px}
html:not(.dgnt-os-chosen) .dgnt-only-win::before{content:"Windows";display:inline-block;font-size:.8em;font-weight:700;color:#fff;background:#0078d4;border-radius:6px;padding:2px 8px;margin-bottom:6px}
html.dgnt-os-mac .dgnt-only-win,html.dgnt-os-win .dgnt-only-mac{display:none!important}

/* Screenshot flow: 2 columns with arrows on desktop, 1 column with down arrows on phones */
.dgnt-flow{margin:18px 0 6px}
.dgnt-flow>.wp-block-group__inner-container,.dgnt-flow.is-layout-constrained{display:grid!important;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:56px;align-items:stretch}
.dgnt-flow>.wp-block-group__inner-container>*,.dgnt-flow.is-layout-constrained>*{max-width:none!important;margin:0!important}
.dgnt-shot{position:relative;background:#f8fbff;border:1px solid #dbe5f1;border-radius:14px;padding:16px 16px 12px}
.dgnt-step .dgnt-shot p.dgnt-do{margin:0 0 12px}
.dgnt-step .dgnt-shot .wp-block-image{margin:0 0 6px}
.dgnt-step .dgnt-shot .wp-block-image img{max-width:100%;width:auto;max-height:420px;display:block;margin:0 auto}
.dgnt-step .dgnt-shot .wp-block-details{margin-left:0}
.dgnt-shot.is-odd:not(.is-last)::after{content:"";position:absolute;right:-48px;top:50%;width:40px;height:20px;margin-top:-10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 10h30' stroke='%230066cc' stroke-width='3' stroke-dasharray='6 4' fill='none'/%3E%3Cpath d='M28 3l9 7-9 7z' fill='%230066cc'/%3E%3C/svg%3E") no-repeat center/contain}
.dgnt-shot.is-even:not(.is-last)::after{content:"";position:absolute;top:100%;left:calc(-50% - 56px);width:calc(100% + 56px);height:28px;
  border-right:3px dashed #0066cc;border-bottom:3px dashed #0066cc;border-bottom-right-radius:14px;box-sizing:border-box}
.dgnt-shot.is-even:not(.is-last)::before{content:"";position:absolute;top:calc(100% + 25px);left:calc(-50% - 56px - 8.5px);width:20px;height:31px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 31'%3E%3Cpath d='M10 0v20' stroke='%230066cc' stroke-width='3' stroke-dasharray='6 4' fill='none'/%3E%3Cpath d='M3 19l7 10 7-10z' fill='%230066cc'/%3E%3C/svg%3E") no-repeat center top/contain}
@media (max-width:899px){
  .dgnt-flow>.wp-block-group__inner-container,.dgnt-flow.is-layout-constrained{grid-template-columns:1fr;row-gap:46px}
  .dgnt-shot.is-even:not(.is-last)::before{display:none}
  .dgnt-shot:not(.is-last)::after{content:""!important;position:absolute!important;top:100%!important;left:50%!important;right:auto!important;width:20px!important;height:44px!important;margin:0 0 0 -10px!important;
    border:0!important;border-radius:0!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cpath d='M10 4v28' stroke='%230066cc' stroke-width='3' stroke-dasharray='6 4' fill='none'/%3E%3Cpath d='M3 30l7 10 7-10z' fill='%230066cc'/%3E%3C/svg%3E") no-repeat center/contain!important}
}
.dgnt-step .dgnt-flow{margin-left:44px}
@media (max-width:899px){.dgnt-step .dgnt-flow{margin-left:0}}
.dgnt-step .dgnt-shot p.dgnt-cmd,.dgnt-step details p.dgnt-cmd{margin-left:0}
.dgnt-step details .dgnt-flow{margin-left:0}
.dgnt-step details.wp-block-details>.wp-block-group{margin-top:10px}

/* Step 5: "Help! It's not finding my Pi!" - IP address steps (dgnt-ip-only) replace the name steps (dgnt-name-only) */
html.dgnt-js .dgnt-ip-only{display:none!important}
html.dgnt-js.dgnt-ip-mode .dgnt-ip-only{display:block!important}
html.dgnt-js.dgnt-ip-mode .dgnt-name-only{display:none!important}
.dgnt-step .dgnt-shot .dgnt-ip-toggle{margin:10px 0 2px!important;justify-content:center}
.dgnt-help-box{margin:14px 0 4px!important;padding:12px 14px 10px;border:1px solid #f0b48f;border-radius:12px;background:#fff8f3}
.dgnt-help-box h4{margin:0 0 6px!important;font-size:1em;color:#c2410c}
html.dgnt-ip-mode .dgnt-help-box{background:#e6f5ec;border-color:#9fd8b6}
html.dgnt-ip-mode .dgnt-help-box h4{color:#157a47}
.dgnt-ip-toggle .wp-block-button__link{background:#c2410c!important;color:#fff!important;font-weight:700;border-radius:999px;padding:10px 18px;text-decoration:none!important}
html.dgnt-ip-mode .dgnt-ip-toggle .wp-block-button__link{background:#1fa463!important;color:#fff!important}
.dgnt-step .dgnt-shot p.dgnt-help{font-size:.9em;color:#5b7290;margin:0 0 4px}
/* Testnet box ticked: the diginode-testnet screenshots replace the diginode ones */
html.dgnt-tn-on .dgnt-mainnet-only,html:not(.dgnt-tn-on) .dgnt-testnet-only{display:none!important}
.dgnt-shot.dgnt-ip-only{border-color:#f0b48f;background:#fff8f3}
label.dgnt-testnet{display:flex;align-items:center;gap:10px;margin:0 0 14px 44px!important;padding:10px 14px;border:1px dashed #b9cde6;border-radius:10px;background:#f8fbff;cursor:pointer;font-size:.95em}
label.dgnt-testnet input{width:18px;height:18px;flex:none;cursor:pointer}
@media (max-width:899px){label.dgnt-testnet{margin-left:0!important}}

/* Support panels at the bottom of each step page (added by the plugin) */
.dgnt-guide-support{margin:8px 0 10px;text-align:center}
.dgnt-guide-support h2{margin-top:0}