/* =====================================================================
   Squad Child — Documentation styles (CPT: squad_doc)
   Loaded on doc single/archive and blog post single views (see includes/core/class-enqueue.php).
   Consumes the tokens defined in tokens.css.
   Author: Al Amin Ahamed (@mralaminahamed)
   ===================================================================== */

/* .page-head lives in components.css; this sheet adds only docs-specific UI. */

/* hub cards + list */
.doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.doc-card { display:block; background:var(--squad-white); border:1px solid var(--squad-line); border-radius:var(--squad-radius-lg); padding:28px; transition:.3s var(--squad-ease); }
.doc-card:hover { transform:translateY(-4px); box-shadow:var(--squad-shadow-md); border-color:rgba(94,46,255,.3); }
.doc-card .ic { width:50px; height:50px; border-radius:14px; background:var(--squad-bg-tint); display:grid; place-items:center; color:var(--squad-violet); margin-bottom:18px; }
.doc-card h3 { font-size:1.12rem; margin-bottom:8px; }
.doc-card p { font-size:.92rem; color:var(--squad-ink-soft); }
.doc-card .count { display:inline-block; margin-top:14px; font-size:.78rem; font-weight:700; color:var(--squad-violet); }
.art-list { display:grid; gap:10px; margin-top:30px; }
.art-list a { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--squad-white); border:1px solid var(--squad-line); border-radius:var(--squad-radius); padding:18px 22px; color:inherit; text-decoration:none; font-weight:600; transition:.25s var(--squad-ease); }
.art-list a:hover { border-color:rgba(94,46,255,.35); transform:translateX(4px); color:var(--squad-violet); }
.art-list .arr { color:var(--squad-violet); flex:none; }
@media (max-width:880px){ .doc-grid{ grid-template-columns:1fr; } }

/* single: shell — article only by default; widens to two columns when the
   TOC rail is present (JS adds `.has-toc` once "On this page" is populated). */
.doc-shell { display:grid; grid-template-columns: minmax(0,1fr); gap:40px; align-items:start; }
.doc-shell.has-toc { grid-template-columns: minmax(0,1fr) 220px; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.84rem; font-weight:600; color:var(--squad-ink-soft); margin-bottom:18px; }
.crumbs a { color:var(--squad-violet); }
.crumbs .sep { color:var(--squad-muted); }

.doc-meta__item { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--squad-ink-soft); background:var(--squad-white); border:1px solid var(--squad-line); border-radius:var(--squad-radius-pill); padding:5px 13px; }
.doc-badge { display:inline-flex; align-items:center; font-size:.8rem; font-weight:700; border-radius:var(--squad-radius-pill); padding:5px 13px; }
.doc-badge--both { background:rgba(94,46,255,.1); color:var(--squad-violet); }
.doc-badge--lite { background:var(--squad-bg-tint); color:var(--squad-ink-soft); border:1px solid var(--squad-line); }
.doc-badge--pro  { background:rgba(25,210,124,.12); color:var(--squad-green-ink); }

.doc-article { min-width:0; max-width:var(--squad-readw); margin-inline:auto; }
.doc-shell.has-toc .doc-article { margin-inline:0; }
.doc-body { font-size:1rem; line-height:1.75; color:var(--squad-doc-prose); }
.doc-body > * + * { margin-top:18px; }
.doc-body h2 { font-size:1.4rem; margin-top:38px; scroll-margin-top:90px; }
.doc-body h3 { font-size:1.12rem; margin-top:26px; scroll-margin-top:90px; }
.doc-body ul, .doc-body ol { padding-left:22px; display:grid; gap:8px; }
.doc-body a { color:var(--squad-violet); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.doc-body code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; background:var(--squad-bg-tint); padding:2px 6px; border-radius:6px; color:var(--squad-royal); }
.doc-body pre { background:var(--squad-ink); color:var(--squad-code-text); border-radius:var(--squad-radius); padding:18px 20px; overflow:auto; font-size:.86rem; line-height:1.6; }
.doc-body pre code { background:none; color:inherit; padding:0; }
.doc-body blockquote { border-left:3px solid var(--squad-violet); background:var(--squad-bg-tint); padding:14px 18px; border-radius:0 12px 12px 0; color:var(--squad-ink); }
.doc-figure { border-radius:var(--squad-radius); overflow:hidden; border:1px solid var(--squad-line); }
.doc-figure > img { display:block; width:100%; aspect-ratio:16/8; object-fit:cover; }

.doc-rail { position:sticky; top:96px; align-self:start; }
.doc-toc { font-size:.84rem; }
.doc-toc h2 { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--squad-ink-soft); margin:0 0 12px; font-weight:800; }
.doc-toc ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; border-left:2px solid var(--squad-line); }
.doc-toc a { display:block; color:var(--squad-ink-soft); padding-left:14px; margin-left:-2px; border-left:2px solid transparent; transition:.2s var(--squad-ease); }
.doc-toc a:hover, .doc-toc a.active { color:var(--squad-violet); border-left-color:var(--squad-violet); font-weight:700; }
.doc-toc .lvl-3 { padding-left:26px; }

.doc-feedback { margin-top:44px; padding:22px 24px; border:1px solid var(--squad-line); border-radius:var(--squad-radius-lg); display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between; }
.doc-feedback span { font-weight:700; }
.doc-feedback .acts { display:flex; gap:10px; }
.doc-feedback .acts .btn { display:inline-flex; align-items:center; gap:7px; }

@media (max-width:1080px){ .doc-shell.has-toc{ grid-template-columns:minmax(0,1fr); } .doc-shell.has-toc .doc-article{ margin-inline:auto; } .doc-rail{ display:none; } }
@media (max-width:760px){ .doc-shell{ grid-template-columns:1fr; } }

/* reading progress + heading anchors.
   z-index:1200 sits above the sticky site header (.squad-header is z-index:100,
   its mobile drawer 200), so the 3px bar draws over the header's top edge — the
   standard reading-progress pattern. NOTE: the WP admin bar (logged-in users
   only, ~32px) overlaps the very top, so during logged-in testing the bar reads
   as covered; verify it functionally via the scaleX transform, not by eyeballing
   the top edge. Public visitors (no admin bar) see it at top:0. */
.doc-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:1200; pointer-events:none; }
.doc-progress span { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:var(--squad-violet); transition:transform .08s linear; }
.doc-body h2, .doc-body h3 { position:relative; }
.doc-anchor { position:absolute; left:-1.1em; top:0; opacity:0; color:var(--squad-violet); font-weight:700; text-decoration:none; transition:opacity .15s var(--squad-ease); }
.doc-body h2:hover .doc-anchor, .doc-body h3:hover .doc-anchor, .doc-anchor:focus { opacity:1; }
@media (max-width:760px){ .doc-anchor { display:none; } }