/* Viewtron guide hubs. Loaded only on guide screens (inc/guides.php). */
.guide-view{--g-accent:#1164ff;--g-accent-soft:#eaf1ff;--g-ink:#1d2330;--g-muted:#5b6475;--g-line:#e2e6ee;--g-soft:#f6f8fb;--g-radius:10px}
.guide-wrap{padding:1.25rem 1rem 3rem;background:#fff;color:var(--g-ink)}
@media (min-width:900px){.guide-wrap{padding:1.5rem 2rem 3rem}}
.guide-wrap a{color:var(--g-accent)}
.guide-crumbs{font-size:.875rem;color:var(--g-muted);margin:0 0 1rem}
.guide-crumbs a{color:var(--g-muted);text-decoration:none}
.guide-crumbs a:hover{color:var(--g-accent);text-decoration:underline}
.guide-crumbs .aioseo-breadcrumb-separator{margin:0 .35rem;color:#9aa3b2}
.guide-layout{display:block}
.guide-main{min-width:0}
.guide-title{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.35rem);line-height:1.2;margin:0 0 .6rem;color:var(--g-ink)}
.guide-lead{font-size:1.125rem;color:var(--g-muted);margin:0 0 1.5rem;max-width:44rem}

/* Left nav */
.guide-nav{font-size:.95rem;line-height:1.4}
.guide-nav-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .75rem}
.guide-nav-hub{font-weight:700;font-size:1.05rem;text-decoration:none!important;color:var(--g-ink)!important}
.guide-nav-hub.is-current{color:var(--g-accent)!important}
.guide-nav-close{display:none;font-size:1.75rem;line-height:1;text-decoration:none!important;color:var(--g-muted)!important;padding:0 .25rem}
.guide-nav ul{list-style:none;margin:0;padding:0}
.guide-nav ul ul{margin-left:.75rem;border-left:1px solid var(--g-line)}
.guide-nav-section{margin:0 0 .35rem}
.guide-nav-section>summary{cursor:pointer;list-style:none;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted);padding:.5rem .5rem .35rem;border-radius:6px}
.guide-nav-section>summary::-webkit-details-marker{display:none}
.guide-nav-section>summary::before{content:"";display:inline-block;width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 .55em .1em 0;transition:transform .15s}
.guide-nav-section[open]>summary::before{transform:rotate(45deg)}
.guide-nav-section>summary:hover{color:var(--g-ink)}
.guide-nav li a{display:block;padding:.4rem .6rem;border-radius:6px;color:var(--g-ink)!important;text-decoration:none}
.guide-nav li a:hover{background:var(--g-soft)}
.guide-nav li a.is-current{background:var(--g-accent-soft);color:var(--g-accent)!important;font-weight:600;box-shadow:inset 3px 0 0 var(--g-accent)}
.guide-nav a:focus-visible,.guide-nav summary:focus-visible,.guide-wrap a:focus-visible,.guide-wrap button:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}

/* Search */
.guide-search{display:flex;gap:.4rem;margin:0 0 1rem}
.guide-search input[type=search]{flex:1;min-width:0;padding:.55rem .7rem;border:1px solid #c9d0dc;border-radius:8px;font-size:.95rem;background:#fff}
.guide-search button{padding:.55rem .9rem;border:0;border-radius:8px;background:var(--g-accent);color:#fff;font-weight:600;cursor:pointer}
.guide-search-hub{max-width:36rem;margin:1.25rem 0 2rem}
.guide-search-hub input[type=search]{padding:.75rem .9rem;font-size:1rem}

/* Content */
.guide-content{font-size:1.0625rem;line-height:1.7;max-width:46rem}
.guide-content p{margin:0 0 1.1em}
.guide-content h2{display:flex;align-items:center;gap:.7rem;font-size:1.45rem;line-height:1.3;margin:2.6rem 0 1rem;scroll-margin-top:1rem}
.guide-content h3{font-size:1.2rem;margin:1.8rem 0 .7rem}
.guide-step-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--g-accent);color:#fff;font-size:1rem;font-weight:700}
.guide-content img{display:block;max-width:100%;height:auto;border:1px solid var(--g-line);border-radius:8px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.guide-content a:has(>img){display:block;cursor:zoom-in}
.guide-content a>img:hover{border-color:#b9c6dc}
.guide-content ol,.guide-content ul{margin:0 0 1.1em 1.4em;padding:0}
.guide-content li{margin:0 0 .4em}
.guide-tip,.guide-note,.guide-warning{padding:.85rem 1rem;border-left:4px solid;border-radius:6px;background:var(--g-soft)}
.guide-tip{border-color:#18a058;background:#eefaf3}
.guide-note{border-color:var(--g-accent);background:var(--g-accent-soft)}
.guide-warning{border-color:#d97706;background:#fff7ea}
.guide-tip::before,.guide-note::before,.guide-warning::before{font-weight:700;margin-right:.4em}
.guide-tip::before{content:"Tip:"}
.guide-note::before{content:"Note:"}
.guide-warning::before{content:"Warning:"}
.guide-sample{display:inline-block;padding:.15rem .5rem;border-radius:4px;background:#fff1c2;color:#7a5200;font-weight:700;font-size:.85rem}

/* On this page */
.guide-toc ol{list-style:none;margin:0;padding:0}
.guide-toc a{display:block;padding:.3rem 0 .3rem .8rem;border-left:2px solid var(--g-line);color:var(--g-muted)!important;text-decoration:none;font-size:.9rem;line-height:1.35}
.guide-toc a[data-step]::before{content:attr(data-step) ". ";font-weight:600}
.guide-toc a:hover,.guide-toc a.is-active{color:var(--g-accent)!important;border-color:var(--g-accent)}
.guide-toc-m{margin:0 0 1.5rem;padding:.6rem .9rem;border:1px solid var(--g-line);border-radius:var(--g-radius);background:var(--g-soft);max-width:46rem}
.guide-toc-m summary{cursor:pointer;font-weight:600}
.guide-toc-m ol{margin-top:.5rem}
.guide-toc-rail{display:none}
.guide-toc-h{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted);margin:0 0 .5rem}

/* Previous / next, helpful */
.guide-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 1.5rem;max-width:46rem}
.guide-pager a{display:block;padding:1rem 1.2rem;border:1px solid var(--g-line);border-radius:var(--g-radius);text-decoration:none;font-weight:600;color:var(--g-ink)!important;line-height:1.35}
.guide-pager a:hover{border-color:var(--g-accent);box-shadow:0 2px 8px rgba(17,100,255,.12)}
.guide-pager span{display:block;font-size:.8rem;font-weight:600;color:var(--g-muted);margin-bottom:.25rem}
.guide-pager-prev span::before{content:"\2190  "}
.guide-pager-next{grid-column:2;text-align:right}
.guide-pager-next span::after{content:"  \2192"}
.guide-helpful{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:1.1rem 0;border-top:1px solid var(--g-line);max-width:46rem}
.guide-helpful-q{margin:0 .4rem 0 0;font-weight:600}
.guide-helpful button{padding:.4rem 1.1rem;border:1px solid #c9d0dc;border-radius:999px;background:#fff;cursor:pointer;font-weight:600;color:var(--g-ink)}
.guide-helpful button:hover:not(:disabled){border-color:var(--g-accent);color:var(--g-accent)}
.guide-helpful button:disabled{opacity:.5;cursor:default}
.guide-helpful-thanks{flex-basis:100%;margin:0;color:var(--g-muted)}
.guide-help{margin:2.5rem 0 0;color:var(--g-muted)}

/* Hub and landing cards */
.guide-start h2,.guide-topics h2{font-size:1.35rem;margin:2rem 0 1rem}
.guide-start-cards,.guide-hub-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.guide-start-cards a,.guide-hub-cards a,.guide-hub-cards .is-soon{position:relative;display:flex;flex-direction:column;gap:.45rem;height:100%;box-sizing:border-box;padding:1rem;border:1px solid var(--g-line);border-radius:var(--g-radius);text-decoration:none;color:var(--g-ink)!important;background:#fff}
.guide-start-cards a:hover,.guide-hub-cards a:hover{border-color:var(--g-accent);box-shadow:0 4px 14px rgba(17,100,255,.12)}
.guide-start-cards img,.guide-hub-cards img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid var(--g-line)}
.guide-start-num{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--g-accent);color:#fff;font-weight:700}
.guide-start-title,.guide-hub-title{font-weight:700;line-height:1.3}
.guide-start-desc,.guide-hub-desc{font-size:.9rem;color:var(--g-muted);line-height:1.45}
.guide-hub-count{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--g-accent)}
.guide-hub-cards .is-soon{background:var(--g-soft);border-style:dashed}
.guide-hub-cards .is-soon .guide-hub-count{color:var(--g-muted)}
.guide-topic-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.guide-topic-card{padding:1rem 1.1rem;border:1px solid var(--g-line);border-radius:var(--g-radius)}
.guide-topic-card h3{font-size:1.05rem;margin:0 0 .5rem}
.guide-topic-card ul{list-style:none;margin:0;padding:0}
.guide-topic-card li{margin:.3rem 0}
.guide-topic-card a{text-decoration:none}
.guide-topic-card a:hover{text-decoration:underline}

@media (max-width:599px){
.guide-start-cards a{display:grid;grid-template-columns:auto 1fr 92px;grid-template-areas:"num title img" "num desc img";column-gap:.75rem;row-gap:.2rem;align-items:start}
.guide-start-num{grid-area:num}
.guide-start-cards img{grid-area:img;align-self:center}
.guide-start-title{grid-area:title}
.guide-start-desc{grid-area:desc}
}

/* Viewer */
.guide-viewer{max-width:96vw;max-height:94vh;padding:0;border:0;border-radius:8px;background:#111;overflow:visible}
.guide-viewer::backdrop{background:rgba(10,14,22,.85)}
.guide-viewer img{display:block;max-width:96vw;max-height:94vh;width:auto;height:auto;cursor:zoom-out}
.guide-viewer-close{position:absolute;top:-2.6rem;right:0;width:2.2rem;height:2.2rem;padding:0;border:0;border-radius:50%;background:#fff!important;color:#111!important;font-size:1.4rem;line-height:1;cursor:pointer}

/* Mobile: drawer nav */
.guide-nav-open{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;padding:.65rem .9rem;border:1px solid var(--g-line);border-radius:8px;background:#fff;font-weight:600;color:var(--g-ink)!important;text-decoration:none!important}
.guide-nav-open::before{content:"";width:1rem;height:.7rem;border-top:2px solid;border-bottom:2px solid;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
@media (max-width:899px){
.guide-nav{position:fixed;top:0;bottom:0;left:0;z-index:1000;width:min(86vw,330px);box-sizing:border-box;padding:1rem;overflow-y:auto;background:#fff;box-shadow:4px 0 24px rgba(0,0,0,.18);transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility .2s}
.guide-nav:target,.guide-nav.is-open{transform:none;visibility:visible}
.guide-nav-close{display:block}
.guide-drawer-open::after{content:"";position:fixed;inset:0;z-index:999;background:rgba(10,14,22,.45)}
.guide-pager{grid-template-columns:1fr}
.guide-pager-next{grid-column:auto}
}
@media (min-width:900px){
.guide-nav-open{display:none}
.guide-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:2.5rem;align-items:start}
.guide-nav{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto;padding-right:1rem;border-right:1px solid var(--g-line)}
}
@media (min-width:1200px){
.guide-article{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:2.5rem;align-items:start}
.guide-article>*{grid-column:1}
.guide-toc-m{display:none}
.guide-toc-rail{display:block;grid-column:2;grid-row:1/span 20;position:sticky;top:1rem}
}
@media (prefers-reduced-motion:reduce){.guide-nav{transition:none}}
