/* NichePilot samples - article-body elements and the samples index. Uses the tokens from styles.css. */

/* ---------- Samples index ---------- */
.s-group{margin-bottom:3rem}
.s-group:last-child{margin-bottom:0}
.s-group > h2{margin-bottom:.3rem}
.s-group > p.s-lead{color:var(--muted);margin-bottom:1.4rem}
.s-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.s-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 24px -18px var(--shadow)}
.s-thumb{display:block;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;text-decoration:none}
.s-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.s-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;width:100%;height:100%;padding:1rem;text-align:center;background:linear-gradient(150deg,var(--hero-a),var(--surface-2));color:var(--primary);font:700 .85rem/1.3 var(--font-head);letter-spacing:.02em}
.s-ph svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s-body{display:flex;flex-direction:column;gap:.5rem;flex:1;padding:1.1rem 1.15rem 1.25rem}
.s-tpl{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--link)}
.s-card h3{margin:0;font-size:1.05rem;line-height:1.3}
.s-card h3 a{color:var(--heading);text-decoration:none}
.s-card h3 a:hover{text-decoration:underline}
.s-what{margin:0;color:var(--muted);font-size:.93rem}
.s-card .btn{margin-top:auto;align-self:flex-start}
.s-card .chips{margin:.35rem 0 .8rem}

.chips{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem;font-size:.82rem;font-weight:500;color:var(--muted);max-width:none}
.chips li strong{color:var(--heading);font-weight:600}

.q-list{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));list-style:none;margin:0;padding:0}
.q-list li{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;max-width:none}
.q-list svg{width:20px;height:20px;flex:none;margin-top:.2rem;color:var(--ok);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.q-list strong{display:block;color:var(--heading);margin-bottom:.15rem}
.q-list span{color:var(--muted);font-size:.95rem}

/* ---------- Sample page: article laid out like a standard WordPress article page ---------- */
.sample-top{padding:1.4rem 0 1.25rem;background:linear-gradient(160deg,var(--hero-a),var(--hero-b) 80%);border-bottom:1px solid var(--border)}
.sample-top .back-link{display:inline-block;margin:0 0 .6rem}
.sample-top .eyebrow{display:block;margin:0 0 .2rem}
.sample-top .chips{margin:.4rem 0 0}
.back-link{font-weight:600}
.wp-page{background:var(--surface);padding:2.5rem 0 3rem}
.wp-wrap{width:min(822px,100% - 32px);margin-inline:auto}
.sample-note{background:var(--note-bg);border:1px solid var(--note-border);border-left-width:5px;border-radius:10px;padding:.85rem 1.1rem;margin:0 0 2rem;font-size:.95rem;color:var(--text)}
.sample-note p{margin:0;max-width:none}
.wp-thumb{margin:0 0 2rem}
.wp-thumb img{display:block;width:100%;height:auto;border-radius:10px}
.wp-header{margin:0 0 1.75rem}
.wp-cat{margin:0 0 .35rem;max-width:none;font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--warn)}
.wp-title{margin:0;font-size:clamp(1.75rem,4.4vw,2.125rem);font-weight:800;line-height:1.35;letter-spacing:-.01em;text-transform:capitalize;color:var(--heading);text-wrap:balance}
.wp-meta{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.85rem 0 0;font-size:1.0625rem;color:var(--muted)}
.wp-meta span + span::before{content:"\2022";margin-right:.9rem}
.sample-end{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}

/* table of contents box */
.wp-toc{margin:0 0 2rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.9rem 1.2rem}
.wp-toc summary{cursor:pointer;font:700 1.15rem var(--font-head);color:var(--heading);padding:.2rem 0}
.wp-toc ol{margin:.7rem 0 .2rem;padding-left:1.4rem;font-size:1rem;line-height:1.5}
.wp-toc li{margin:0 0 .3rem;max-width:none}

/* article body typography (standard article layout: 19px / 1.7, large spaced headings) */
.wp-content{font-size:1.1875rem;line-height:1.7;color:var(--muted);overflow-wrap:break-word}
.wp-content p{margin:0 0 1.7em;max-width:none}
.wp-content h2{margin:2.35em 0 .5em;font-size:1.875rem;font-weight:800;line-height:1.2;letter-spacing:0;text-transform:capitalize;color:var(--heading);scroll-margin-top:5rem}
.wp-content h3{margin:1.5em 0 .5em;font-size:1.5rem;font-weight:800;line-height:1.2;color:var(--heading)}
.wp-content h4{margin:1.4em 0 .4em;font-size:1.25rem;color:var(--heading)}
.wp-content ul,.wp-content ol{margin:0 0 1.7em;padding-left:2em}
.wp-content li{margin:0;max-width:none}
.wp-content li + li{margin-top:.25em}
.wp-content strong{color:var(--heading)}
.wp-content a{color:var(--link)}
.wp-content img{max-width:100%;height:auto;border-radius:10px}
.wp-content figure{margin:0 0 2rem}
.wp-content figcaption{margin-top:.5rem;font-size:.8rem;line-height:1.4;color:var(--muted);text-align:center}
.wp-content .fig-step img{border:1px solid var(--border)}
.wp-content blockquote,.wp-content .callout{margin:0 0 1.7em;padding:1.05rem 1.1rem;background:var(--bg);border-left:5px solid var(--primary);border-radius:0 6px 6px 0;font-style:italic;box-shadow:0 6px 10px -9px var(--shadow)}
.wp-content blockquote p:last-child{margin:0}
.wp-content hr{border:0;border-top:1px solid var(--border);margin:2rem 0}
.wp-content pre{overflow-x:auto;margin:0 0 1.7em;padding:.9rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:.88rem;line-height:1.5}
.wp-content code{padding:.08em .35em;background:var(--surface-2);border-radius:4px;font-size:.9em}
.wp-content pre code{padding:0;background:none}

/* tables: amber header row, zebra rows, scroll sideways inside their own wrapper */
.tbl-wrap{overflow-x:auto;margin:0 0 1.7rem;-webkit-overflow-scrolling:touch}
.wp-content table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.wp-content th,.wp-content td{padding:9px 12px;border:1px solid var(--border);text-align:left;vertical-align:top}
.wp-content th{background:var(--accent);color:var(--on-accent);font-weight:600}
.wp-content tbody tr:nth-child(odd) td{background:var(--surface)}
.wp-content tbody tr:nth-child(even) td{background:var(--surface-2)}

/* FAQ accordion (native details/summary, no script) */
.wp-content details.faq-item{margin:0 0 .6rem;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.wp-content details.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;cursor:pointer;list-style:none;font:700 1.0625rem/1.4 var(--font-head);color:var(--heading)}
.wp-content details.faq-item summary::-webkit-details-marker{display:none}
.wp-content details.faq-item summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;color:var(--link)}
.wp-content details.faq-item[open] summary::after{content:"\2212"}
.wp-content details.faq-item[open] summary{border-bottom:1px solid var(--border)}
.wp-content details.faq-item > div{padding:.9rem 1.1rem .2rem}
.wp-content details.faq-item p{font-size:1.0625rem}

/* calculator block (inline styles come from the tool) */
.wp-content .np-calc{color:#111827;background:#f9fafb}
.wp-content .np-calc a{color:#1d4ed8}
.wp-content .np-calc table{min-width:0}
.wp-content .np-calc details{background:transparent;border:0}

/* Amazon product boxes (visual only, same look as the live product boxes) */
.az-wrap{margin:0 0 2rem}
.az-box{margin:0 0 .4rem;padding:0}
.az-head{margin:0 0 .75rem;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.az-tiles{display:flex;flex-wrap:wrap;gap:14px}
.az-tile{position:relative;flex:1 1 200px;max-width:260px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;padding:0 0 12px}
.az-tile > .az-badge{position:absolute;top:10px;left:10px;z-index:1;margin:0}
.az-tile > .az-img{height:190px;border-radius:0;background:#f9fafb;padding:12px}
.az-tile > p,.az-tile > .az-btn{margin-left:12px;margin-right:12px}
.az-tile > .az-name{margin-top:.7rem}
.az-badge{display:inline-block;align-self:flex-start;padding:4px 9px;border-radius:999px;background:var(--heading);color:var(--bg);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.az-img{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px}
.az-img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:0}
.az-name{margin:0 0 .25rem;font-size:.9375rem;font-weight:700;line-height:1.3;color:var(--heading)}
.az-sub{margin:0 0 .35rem;font-size:.8125rem;line-height:1.4;color:var(--muted)}
.az-price{margin:.2rem 0 0;font:700 1.125rem var(--font-head);color:var(--heading)}
.az-date{margin:0 0 .4rem;font-size:.6875rem;color:var(--muted)}
.az-btn{display:block;margin-top:.5rem;padding:10px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:.875rem;font-weight:700;text-align:center;cursor:default}
.az-single .az-product{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin:0 0 1rem;padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.az-single .az-product > .az-img{flex:0 0 220px;height:220px;max-width:100%;padding:8px}
.az-single .az-info{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.az-single .az-info .az-name{font-size:1.1875rem;margin-top:.5rem}
.az-single .az-price{font-size:1.375rem}
.az-single .az-btn{align-self:flex-start;padding:10px 18px}
.az-note{margin:.2rem 0 0;font-size:.6875rem;line-height:1.5;color:var(--muted)}
.az-cap{margin:.25rem 0 0;max-width:none;font-size:.78rem;font-style:italic;text-align:center;color:var(--muted)}
.az-wrap .tbl-wrap{margin:0 0 1rem}
.az-compare{min-width:38rem;font-size:.875rem}
.wp-content .az-compare th{background:transparent;color:var(--heading);border:0;border-bottom:2px solid var(--heading)}
.wp-content .az-compare td{border:0;border-top:1px solid var(--border);background:transparent}
.az-compare .az-img{width:64px;height:64px;padding:3px;border-radius:6px}
.az-compare .az-btn{display:inline-block;margin:0;padding:8px 14px;font-size:.8125rem;white-space:nowrap}
.az-sub-inline{display:block;font-size:.75rem;color:var(--muted)}

@media (max-width:767px){
  .wp-page{padding:1.5rem 0 2.25rem}
  .wp-content{font-size:1.0625rem}
  .wp-content h2{font-size:1.5rem}
  .wp-content h3{font-size:1.25rem}
  .az-single .az-product{padding:14px}
  .az-single .az-product > .az-img{flex-basis:100%;height:200px}
  .az-tile{max-width:none}
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}