/* -- TapCam.app - Guides: index, single guide, article body -----------
   Loaded only on the guides pages (see includes/header.php), so the rest of
   the site does not pay for it. Uses the shared tokens from variables.css and
   the shared components from site.css (.btn, .faq/.qa, .wrap, .block) rather
   than restating them. */

/* Reading measure. Wider than a legal page: guides carry screenshots, and a
   step capture of a Windows dialog is unreadable squeezed into 768px. */
.wrap-read{max-width:840px;margin:0 auto;padding:0 24px}

/* -- Breadcrumb ------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:30px}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--teal-deep);border-bottom-color:rgba(15,158,143,.35)}
.crumbs-sep{color:var(--faint)}
.crumbs [aria-current]{color:var(--text);font-weight:600}

/* -- Guide header ----------------------------------------------------- */
.guide-head{margin-bottom:30px}
.guide-head h1{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:800;color:var(--text);margin:0 0 16px}
.guide-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
.guide-meta-dot{color:var(--faint)}
.guide-updated{color:var(--teal-deep);font-weight:600}

/* The hero is a 1280x732 image in an 840px column, which renders 450px tall and pushes the
   article off the screen on a laptop. Capped and cropped from the centre: these covers are
   composed with generous margins, so the crop costs nothing. */
.guide-hero{margin:0 0 34px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md);background:var(--paper-2)}
.guide-hero img{width:100%;height:auto;max-height:360px;object-fit:cover}

/* -- Table of contents ------------------------------------------------ */
/* Two columns from 700px up: a guide with eight sections made a 270px tall list, which ate the
   screen before a single sentence of the article. Never sticky: it is a map you read once, not
   a rail that follows you down and takes a third of the viewport with it. */
.guide-toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:0 0 36px}
.guide-toc-title{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);margin:0 0 10px}
/* CSS columns rather than a grid: they balance themselves and flow down-then-across, which
   is the order a table of contents has to read in. A grid would need the item count passed
   in from the template, and that means an inline style, which this project does not allow. */
.guide-toc ul{list-style:none;column-gap:30px}
.guide-toc li{break-inside:avoid;padding:3.5px 0}
.guide-toc a{font-size:14.5px;font-weight:600;color:var(--text);border-bottom:1px solid transparent}
.guide-toc a:hover{color:var(--teal-deep);border-bottom-color:rgba(15,158,143,.35)}
@media (min-width:700px){.guide-toc ul{columns:2}}

/* -- Article body ------------------------------------------------------
   Everything below styles Parsedown's output, so the selectors are element
   selectors scoped to .guide-body rather than classes we could put in the
   Markdown. */
.guide-body{font-size:17px;line-height:1.72;color:var(--text)}
.guide-body>*+*{margin-top:20px}
.guide-body h2{font-size:clamp(1.45rem,2.6vw,1.85rem);font-weight:800;margin:52px 0 0;scroll-margin-top:84px}
.guide-body h3{font-size:1.2rem;font-weight:700;margin:34px 0 0;scroll-margin-top:84px}
.guide-body h2+*,.guide-body h3+*{margin-top:14px}
.guide-body p{color:var(--text)}
.guide-body a{color:var(--teal-deep);font-weight:600;border-bottom:1px solid rgba(15,158,143,.35)}
.guide-body a:hover{border-bottom-color:var(--teal-deep)}
.guide-body strong{font-weight:700}
.guide-body ul,.guide-body ol{padding-left:24px;display:flex;flex-direction:column;gap:9px}
.guide-body li{padding-left:4px}
.guide-body li::marker{color:var(--teal)}

/* A step capture is the point of the paragraph around it, so it gets air and
   a frame that separates it from the page rather than floating unbounded. */
.guide-body figure{margin:34px 0}
.guide-body figure img,.guide-body>img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--paper-2)}
.guide-body figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center}

.guide-body blockquote{border-left:3px solid var(--teal);background:var(--paper-2);border-radius:0 12px 12px 0;padding:16px 20px;color:var(--muted)}
.guide-body blockquote p{color:var(--muted)}
.guide-body code{font-family:Consolas,Menlo,monospace;font-size:.88em;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:6px;padding:2px 6px}
.guide-body pre{background:#0e181d;color:#e7f4f2;border-radius:12px;padding:18px 20px;overflow-x:auto}
.guide-body pre code{background:none;border:0;padding:0;color:inherit;font-size:14px}

/* Tables scroll inside their own box: a comparison table is the one element
   guides always overflow on a phone, and the page must not scroll sideways. */
.guide-body .table-scroll{overflow-x:auto}
.guide-body table{border-collapse:collapse;width:100%;font-size:15px}
.guide-body th,.guide-body td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.guide-body th{background:var(--paper-2);font-weight:700}

.guide-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* -- FAQ + call to action --------------------------------------------- */
.guide-faq{margin-top:60px}
.guide-faq h2{font-size:clamp(1.45rem,2.6vw,1.85rem);font-weight:800;margin-bottom:22px}
.guide-faq .faq{max-width:none}

.guide-cta{margin-top:60px;background:linear-gradient(160deg,var(--teal-deep),var(--teal-ink));color:#fff;border-radius:var(--r);padding:34px 32px;text-align:center;box-shadow:var(--shadow-md)}
.guide-cta-title{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.guide-cta-text{margin:12px auto 22px;max-width:520px;color:rgba(255,255,255,.86);font-size:16px}
.guide-cta .btn{background:#fff;color:var(--teal-ink)}
.guide-cta .btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(4,40,36,.3)}

/* -- Cards: related guides, and the index listing --------------------- */
.guide-related{margin-top:64px}
.guide-related h2{font-size:1.4rem;font-weight:800;margin-bottom:22px}

.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.guide-grid-index{margin-top:8px}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .2s ease}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.guide-card>a{display:flex;flex-direction:column;height:100%}
.guide-card-media{display:block;background:var(--paper-2)}
.guide-card-media img{width:100%;height:auto;aspect-ratio:1280/732;object-fit:cover}
.guide-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.guide-card-title{font-family:var(--display);font-size:17px;font-weight:700;line-height:1.3;color:var(--text)}
.guide-card:hover .guide-card-title{color:var(--teal-deep)}
.guide-card-desc{font-size:14.5px;color:var(--muted);line-height:1.55}
.guide-card-meta{margin-top:auto;padding-top:6px;font-size:13px;color:var(--faint)}

.guides-empty{text-align:center;color:var(--muted);font-size:16px;padding:40px 0}

/* The index reuses .center, which site.css styles for h2 only. */
.center h1{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;margin:14px 0 0}

@media (max-width:640px){
  .guide-body{font-size:16px}
  .guide-cta{padding:28px 22px}
  .guide-grid{grid-template-columns:1fr}
}