/* blog.css — trail.cam Field Notes articles. Uses the design tokens from style.css (:root).
   NOTE: blog classes are namespaced (bloghero/blogbrand/blogtag) to avoid colliding with the
   marketing site's style.css (which defines a tall .hero section, .brand, .tag). */
.blog-article{background:var(--bg,#f5f2ea);color:var(--text,#232b25);font-family:Inter,system-ui,sans-serif;line-height:1.65;margin:0}
.blog-top,.blog-foot{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem clamp(1rem,4vw,2rem);max-width:1180px;margin:0 auto}
.blog-top .blogbrand{font-weight:800;font-size:1.15rem;color:var(--accent-deep,#27432f);text-decoration:none;letter-spacing:-.02em}
.blog-top nav a,.blog-foot a{color:var(--text-soft,#44513f);text-decoration:none;font-weight:600}
.blog-top nav a:hover,.blog-foot a:hover{color:var(--accent,#3a5a45)}
.blog-top nav{display:flex;align-items:center}
.langswitch{display:inline-flex;gap:.25rem;align-items:center;margin-left:1rem;padding-left:1rem;
  border-left:1px solid var(--border,#ddd4c2);font-size:.82rem;font-weight:700;letter-spacing:.03em}
.langswitch .ls-on{color:var(--accent-deep,#27432f)}
.langswitch a{color:var(--text-muted,#6f7a6a);text-decoration:none}
.langswitch a:hover{color:var(--accent,#3a5a45)}
.blog-foot{border-top:1px solid var(--border,#ddd4c2);margin-top:3rem;color:var(--text-muted,#6f7a6a);font-size:.9rem;flex-wrap:wrap}

.article{max-width:720px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) 2rem}
.crumbs{font-size:.85rem;color:var(--text-muted,#6f7a6a);margin:.5rem 0 1.2rem}
.crumbs a{color:var(--text-muted,#6f7a6a);text-decoration:none}
.crumbs a:hover{color:var(--accent,#3a5a45)}
.article h1{font-size:clamp(1.9rem,4.5vw,2.7rem);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:.2rem 0 1.1rem}
.artmeta{font-size:.9rem;color:var(--text-muted,#6f7a6a);margin:-.4rem 0 1.4rem;font-weight:500}
.bloghero{display:block;width:100%;height:auto;border-radius:var(--radius-lg,20px);
  box-shadow:var(--shadow-md);margin:0 0 1.6rem;background:var(--bg-warm,#efe9dc)}

/* key takeaways summary box (top of article) */
.keybox{background:var(--surface,#fbf9f3);border:1px solid var(--border,#ddd4c2);
  border-left:4px solid var(--accent,#3a5a45);border-radius:var(--radius-md,14px);
  padding:1.2rem 1.4rem;margin:0 0 2rem;box-shadow:var(--shadow-sm)}
.keybox h2{display:flex;align-items:center;gap:.45rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent,#3a5a45);margin:0 0 .7rem}
.keybox ul{margin:0;padding-left:1.2rem}
.keybox li{margin:.45rem 0;font-size:1rem;color:var(--text-soft,#44513f)}

/* pull quote — clearly a quote (big quote mark, italic, centered), not a header */
blockquote.pullquote{position:relative;border:none;margin:2.6rem auto;padding:1.2rem 0 0;max-width:600px;
  font-size:1.45rem;line-height:1.38;font-weight:600;font-style:italic;color:var(--accent-deep,#27432f);text-align:center}
blockquote.pullquote::before{content:"\201C";display:block;font-family:Georgia,serif;font-style:normal;
  font-size:3.4rem;line-height:.5;color:var(--gold,#c9a24b);margin-bottom:.5rem}

.prose{font-size:1.08rem}
.prose p{margin:0 0 1.25rem}
.prose h2{font-size:1.6rem;font-weight:700;letter-spacing:-.01em;margin:2.4rem 0 .9rem;line-height:1.2}
.prose h3{font-size:1.22rem;font-weight:700;margin:1.8rem 0 .6rem}
.prose ul,.prose ol{margin:0 0 1.25rem;padding-left:1.4rem}
.prose li{margin:.4rem 0}
.prose strong{font-weight:700}
.prose a{color:var(--accent,#3a5a45);text-decoration:underline;text-underline-offset:2px}
.prose a.ilink{font-weight:600}

.table-wrap{overflow-x:auto;margin:0 0 1.5rem;border:1px solid var(--border,#ddd4c2);border-radius:var(--radius-md,14px)}
.prose table{border-collapse:collapse;width:100%;font-size:.96rem;background:var(--surface,#fbf9f3)}
.prose th,.prose td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--border-soft,#e7e0d1);vertical-align:top}
.prose thead th{background:var(--bg-warm,#efe9dc);font-weight:700;font-size:.9rem}
.prose tbody tr:last-child td{border-bottom:none}

figure.inbody{margin:1.8rem 0}
figure.inbody img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius-md,14px);box-shadow:var(--shadow-sm);background:var(--bg-warm,#efe9dc)}
figure.inbody figcaption{font-size:.82rem;color:var(--text-muted,#6f7a6a);margin-top:.4rem;text-align:center}

/* FAQ */
#faq{display:flex;align-items:center;gap:.5rem;margin-top:2.8rem}
#faq .ic{width:1.4rem;height:1.4rem;color:var(--gold,#c9a24b);flex:none}
.faq-item{border-top:1px solid var(--border-soft,#e7e0d1);padding:1.1rem 0}
.faq-q{font-size:1.1rem;margin:0 0 .4rem}

/* product / signup CTA */
.product-cta{display:flex;gap:1rem;align-items:flex-start;background:var(--surface,#fbf9f3);
  border:1px solid var(--gold,#c9a24b);border-left:4px solid var(--gold,#c9a24b);border-radius:var(--radius-md,14px);
  padding:1.2rem 1.4rem;margin:1.8rem 0;box-shadow:var(--shadow-sm)}
.product-cta .cta-icon{width:2rem;height:2rem;color:var(--gold,#c9a24b);flex:none;margin-top:.15rem}
.product-cta .cta-body{flex:1}
.product-cta p{margin:0 0 .7rem}
.product-cta .cta-name{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--gold,#c9a24b);margin:0 0 .35rem}
.product-cta .cta-name + p{font-size:1.05rem;color:var(--text,#232b25);font-weight:500;line-height:1.45}
.product-cta .cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent,#3a5a45);color:#fff;text-decoration:none;
  font-weight:600;padding:.5rem 1.1rem;border-radius:var(--radius-pill,999px);font-size:.95rem}
.product-cta .cta:hover{background:var(--accent-deep,#27432f)}
.product-cta .cta .ic{width:1rem;height:1rem}

/* blog index + taxonomy pages */
.blog-index{max-width:1180px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) 3rem}
.blog-index h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin:.5rem 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin-top:1.5rem}
.card{background:var(--surface,#fbf9f3);border:1px solid var(--border-soft,#e7e0d1);border-radius:var(--radius-lg,20px);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-warm,#efe9dc)}
.card .pad{padding:1rem 1.1rem 1.2rem}
.card .blogtag{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gold,#c9a24b);font-weight:700}
.card h3{font-size:1.08rem;margin:.3rem 0 .4rem;line-height:1.25}
.card p{font-size:.9rem;color:var(--text-muted,#6f7a6a);margin:0}
.card .card-date{font-size:.78rem;color:var(--text-muted,#6f7a6a);margin:.55rem 0 0;opacity:.8}
/* index filter bar — contained card: search, a Topic chip row, then a tidy dropdown row */
.filterbar{margin:1.4rem 0 1.8rem;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;
  background:var(--surface,#fbf9f3);border:1px solid var(--border-soft,#e7e0d1);
  border-radius:var(--radius-lg,20px);box-shadow:var(--shadow-sm)}
.filter-search{width:100%;padding:.62rem .95rem;font:inherit;font-size:1rem;color:var(--text,#232b25);
  border:1px solid var(--border,#ddd4c2);border-radius:var(--radius-pill,999px);background:var(--bg,#f5f2ea)}
.filter-search:focus{outline:none;border-color:var(--accent,#3a5a45);box-shadow:0 0 0 3px rgba(58,90,69,.12)}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.filter-selects{gap:.7rem}
.filter-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--text-muted,#6f7a6a);margin-right:.2rem}
.chip{font-size:.85rem;padding:.34rem .85rem;border-radius:var(--radius-pill,999px);cursor:pointer;
  background:var(--bg-warm,#efe9dc);color:var(--text-soft,#44513f);text-decoration:none;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--moss,#8aa67e)}
.chip.active{background:var(--accent,#3a5a45);color:#fff;border-color:var(--accent,#3a5a45)}
.filter-field{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;color:var(--text-muted,#6f7a6a)}
.filter-select{font:inherit;font-size:.9rem;font-weight:500;text-transform:none;letter-spacing:normal;
  color:var(--text-soft,#44513f);padding:.4rem .65rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--border,#ddd4c2);background:var(--bg,#f5f2ea)}
.filter-select:focus{outline:none;border-color:var(--accent,#3a5a45);box-shadow:0 0 0 3px rgba(58,90,69,.12)}
.filter-spacer{flex:1 1 auto}
.filter-count{font-size:.85rem;color:var(--text-muted,#6f7a6a);font-weight:600;white-space:nowrap}
.noresults{color:var(--text-muted,#6f7a6a);margin:1.5rem 0;font-size:1rem}
/* full-text search results (Pagefind) */
.search-results{margin:.5rem 0 2rem}
.sresult{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border-soft,#e7e0d1)}
.sresult:first-child{border-top:1px solid var(--border-soft,#e7e0d1)}
.sresult img{width:120px;height:68px;object-fit:cover;border-radius:var(--radius-md,14px);flex:none;background:var(--bg-warm,#efe9dc)}
.sresult .sr-body{flex:1;min-width:0}
.sresult h3{font-size:1.1rem;margin:0 0 .3rem;line-height:1.25;color:var(--accent-deep,#27432f)}
.sresult:hover h3{color:var(--accent,#3a5a45)}
.sresult p{font-size:.92rem;color:var(--text-muted,#6f7a6a);margin:0;line-height:1.5}
.sresult mark{background:var(--gold,#c9a24b);color:#231a08;padding:0 .12em;border-radius:2px}
.pillchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.pillchips a{font-size:.85rem;padding:.35rem .85rem;border-radius:var(--radius-pill,999px);
  background:var(--bg-warm,#efe9dc);color:var(--text-soft,#44513f);text-decoration:none;border:1px solid var(--border-soft,#e7e0d1)}
.pillchips a:hover{background:var(--moss,#8aa67e);color:#fff}

/* related articles strip */
.related{max-width:720px;margin:2.8rem auto 0;padding:1.5rem clamp(1rem,4vw,2rem) 0;border-top:1px solid var(--border,#ddd4c2)}
.related h2{font-size:1.2rem;margin:0 0 1rem}
.related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem}
.related a{display:block;background:var(--surface,#fbf9f3);border:1px solid var(--border-soft,#e7e0d1);
  border-radius:var(--radius-md,14px);padding:.8rem 1rem;text-decoration:none;color:var(--text-soft,#44513f);
  font-weight:600;font-size:.95rem;line-height:1.3;transition:border-color .15s,color .15s}
.related a:hover{border-color:var(--accent,#3a5a45);color:var(--accent,#3a5a45)}