/* SEO Rank Publisher v0.4.0 - frontend styles. Mobile-first. Blog index is self-contained (.srp-*).
   Single-article rules are scoped to body.srp-styled so they NEVER touch Elementor-built pages. */

.srp-blog {
  --srp-accent:#1f6feb; --srp-ink:#16181d; --srp-muted:#6b7280; --srp-line:#e6e8eb;
  max-width:1180px; margin:0 auto; padding:0 1rem;
}
.srp-blog-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; }
.srp-chip {
  display:inline-block; padding:.42rem .9rem; border:1px solid var(--srp-line); border-radius:999px;
  font-size:.85rem; line-height:1; color:var(--srp-ink); text-decoration:none; background:#fff;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.srp-chip:hover { border-color:var(--srp-accent); color:var(--srp-accent); }
.srp-chip.is-active { background:var(--srp-accent); border-color:var(--srp-accent); color:#fff; }

.srp-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:600px){ .srp-grid{ grid-template-columns:repeat(2,1fr); gap:1.5rem; } }
@media (min-width:960px){ .srp-grid{ grid-template-columns:repeat(3,1fr); } }

.srp-card {
  background:#fff; border:1px solid var(--srp-line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
}
.srp-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,24,40,.10); }
.srp-card-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
.srp-card-media { aspect-ratio:16/10; background:#f2f4f7; overflow:hidden; }
.srp-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.srp-card-media--ph { background:linear-gradient(135deg, rgba(31,111,235,.16), rgba(31,111,235,.03)); }
.srp-card-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.srp-card-cat { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--srp-accent); font-weight:600; }
.srp-card-title { font-size:1.15rem; line-height:1.3; margin:0; color:var(--srp-ink); }
.srp-card-sub { font-size:.92rem; line-height:1.5; color:var(--srp-muted); margin:0; }
.srp-card-meta { margin-top:auto; font-size:.78rem; color:var(--srp-muted); }
.srp-empty { color:var(--srp-muted); padding:2rem 0; text-align:center; }

body.srp-styled .entry-content,
body.srp-styled .page-content {
  max-width:760px; margin-left:auto; margin-right:auto;
  font-size:1.075rem; line-height:1.7; color:#1f2329;
}
body.srp-styled .entry-content > figure:first-child img,
body.srp-styled .page-content > figure:first-child img { width:100%; height:auto; border-radius:14px; }
body.srp-styled .entry-content img,
body.srp-styled .page-content img { max-width:100%; height:auto; border-radius:10px; }
body.srp-styled .entry-content h2,
body.srp-styled .page-content h2 { font-size:1.6rem; line-height:1.25; margin:2.2rem 0 .8rem; }
body.srp-styled .entry-content h3,
body.srp-styled .page-content h3 { font-size:1.25rem; line-height:1.3; margin:1.6rem 0 .6rem; }
body.srp-styled .entry-content p,
body.srp-styled .page-content p { margin:0 0 1.1rem; }
body.srp-styled .entry-content ul,
body.srp-styled .entry-content ol,
body.srp-styled .page-content ul,
body.srp-styled .page-content ol { margin:0 0 1.1rem 1.25rem; }
body.srp-styled .entry-content li,
body.srp-styled .page-content li { margin:.35rem 0; }
body.srp-styled .entry-content table,
body.srp-styled .page-content table {
  width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem;
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
body.srp-styled .entry-content th,
body.srp-styled .entry-content td,
body.srp-styled .page-content th,
body.srp-styled .page-content td { border:1px solid #e6e8eb; padding:.6rem .75rem; text-align:left; vertical-align:top; }
body.srp-styled .entry-content th,
body.srp-styled .page-content th { background:#f7f9fc; font-weight:600; }
body.srp-styled .entry-content figcaption,
body.srp-styled .page-content figcaption { font-size:.78rem; color:#8a8a8a; margin-top:.4rem; }

/* v0.8.0: blank canvas for managed posts — no theme margins; chrome + template own the layout. */
body.srp-canvas { margin:0; padding:0; }
.srp-canvas-main { display:block; }

/* v0.8.0: engine-rendered blog fragments (auto_blog slot output). Mobile-first, scoped to .afx so
   they never leak onto Elementor pages. The staged #afxpost template owns the reading column; these
   are sensible defaults for the hero figure, FAQ accordion, in-post CTA, and related grid. */
.afx .afx-hero { margin:0 0 1.4rem; }
.afx .afx-hero img { width:100%; height:auto; border-radius:14px; display:block; }
.afx .afx-hero-credit { font-size:.78rem; color:#8a8a8a; margin-top:.4rem; }

.afx .afx-faq { margin:1.6rem 0; display:flex; flex-direction:column; gap:.6rem; }
.afx .afx-faq-item { border:1px solid var(--line,#e7eaf1); border-radius:12px; background:#fff; overflow:hidden; }
.afx .afx-faq-item > summary { cursor:pointer; list-style:none; padding:.95rem 1.1rem; font-weight:600; color:var(--ink,#0a0c10); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.afx .afx-faq-item > summary::-webkit-details-marker { display:none; }
.afx .afx-faq-item > summary::after { content:"+"; color:var(--ac,#6366f1); font-size:1.2em; line-height:1; }
.afx .afx-faq-item[open] > summary::after { content:"\2212"; }
.afx .afx-faq-a { padding:0 1.1rem 1.05rem; color:var(--muted,#5d6573); line-height:1.6; }

.afx .afx-postcta { margin:2rem 0; padding:clamp(1.4rem,3vw,2.2rem); border-radius:18px; background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(99,102,241,.02)); border:1px solid var(--line,#e7eaf1); text-align:center; }
.afx .afx-postcta h2 { margin:0 0 .5rem; font-size:clamp(1.25rem,2.4vw,1.6rem); }
.afx .afx-postcta p { margin:0 0 1rem; color:var(--muted,#5d6573); }
.afx .afx-postcta .srp-cta { display:inline-block; background:linear-gradient(135deg,var(--ac,#6366f1),var(--ac-d,#4f46e5)); color:#fff; padding:.8rem 1.5rem; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 14px 30px -10px rgba(99,102,241,.5); }

/* v0.8.5: config-driven "Related" internal-links block (SRP_Chrome::config_related_html). Mobile-first,
   reading-column width, reuses afx tokens + the footer/related link aesthetic. No dropdowns. */
.afx .afx-related { margin:2.2rem 0 0; padding:clamp(1.4rem,3vw,1.9rem) 0; border-top:1px solid var(--line,#e7eaf1); }
.afx .afx-related-in { max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.afx .afx-related-h { font-size:1.15rem; font-weight:800; letter-spacing:-.01em; color:var(--ink,#0a0c10); margin:0 0 .7rem; }
.afx .afx-related-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.afx .afx-related-list a { color:var(--ac,#6366f1); font-weight:600; text-decoration:none; }
.afx .afx-related-list a:hover { text-decoration:underline; }

.afx .srp-related { margin-inline:calc(50% - 50vw); padding:clamp(2rem,4vw,3rem) var(--gutter,clamp(20px,5vw,48px)); background:var(--soft,#f6f8fc); border-top:1px solid var(--line,#e7eaf1); }
.afx .srp-related-in { max-width:var(--maxw,var(--container,1280px)); margin:0 auto; }
.afx .srp-related-h { font-size:1.3rem; margin:0 0 1.2rem; }

/* v0.8.1: blog posts index (/blog/) on the blank canvas — header + card grid + pagination. */
.srp-canvas-blog { margin:0; }
.afx .srp-bloglist { padding:clamp(2rem,5vw,3.5rem) var(--gutter,clamp(20px,5vw,48px)) clamp(2.5rem,6vw,4.5rem); }
.afx .srp-bloglist-in { max-width:var(--maxw,var(--container,1180px)); margin:0 auto; }
.afx .srp-bloglist-hd { margin:0 0 clamp(1.6rem,3vw,2.4rem); }
.afx .srp-bloglist-hd h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; letter-spacing:-.02em; font-weight:850; color:var(--ink,#0a0c10); margin:0; }
.afx .srp-bloglist-hd p { margin:.6rem 0 0; color:var(--muted,#5d6573); font-size:1.05rem; max-width:60ch; }

/* v0.8.6: category filter pills + server-side sort. Mobile-first; the pill row scrolls horizontally
   on narrow screens. Each pill is a real <a> to a WP category archive; each category is indexable. */
.afx .srp-filterwrap { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:0 0 clamp(1.4rem,3vw,2rem); }
.afx .srp-filterbar { display:flex; gap:.5rem; flex:1 1 auto; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.15rem; }
.afx .srp-filterbar::-webkit-scrollbar { display:none; }
.afx .srp-pill { flex:0 0 auto; white-space:nowrap; display:inline-block; padding:.45rem .95rem; border:1px solid var(--line,#e7eaf1); border-radius:999px; font-size:.88rem; font-weight:600; line-height:1; color:var(--ink,#0a0c10); text-decoration:none; background:#fff; transition:border-color .15s,color .15s,background .15s; }
.afx .srp-pill:hover { border-color:var(--ac,#6366f1); color:var(--ac,#6366f1); }
.afx .srp-pill.is-active { background:var(--ac,#6366f1); border-color:var(--ac,#6366f1); color:#fff; }
.afx .srp-sortbar { display:inline-flex; gap:.15rem; flex:0 0 auto; }
.afx .srp-sort { white-space:nowrap; font-size:.82rem; font-weight:600; color:var(--muted,#5d6573); text-decoration:none; padding:.45rem .7rem; border-radius:999px; }
.afx .srp-sort:hover { color:var(--ac,#6366f1); }
.afx .srp-sort.is-active { color:var(--ink,#0a0c10); background:var(--soft,#f6f8fc); }
@media (max-width:560px){ .afx .srp-filterwrap { flex-direction:column; align-items:stretch; gap:.6rem; } .afx .srp-sortbar { align-self:flex-end; } }
.afx .srp-pagination { margin-top:clamp(1.8rem,4vw,2.6rem); }
.afx .srp-pagination ul { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; }
.afx .srp-pagination a, .afx .srp-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; padding:.5rem .8rem; border:1px solid var(--line,#e7eaf1); border-radius:10px; font-weight:600; font-size:.92rem; color:var(--ink,#0a0c10); text-decoration:none; background:#fff; }
.afx .srp-pagination a:hover { border-color:var(--ac,#6366f1); color:var(--ac,#6366f1); }
.afx .srp-pagination .current { background:var(--ac,#6366f1); border-color:var(--ac,#6366f1); color:#fff; }