/* ============================================================================
   Blog — /blog/, single posts, category / tag / date archives.
   Loaded after assets/theme.css (handle bsc-theme) by inc/blog.php.
   Theme tokens only — no new colour, radius, shadow or font. Copper (--cta) stays
   reserved for the phone: every blog accent here is --primary.
   The theme dequeues wp-block-library and global-styles, so no core block rule can
   be assumed: everything the post body needs is written out below.
   ========================================================================== */

/* --- header: one more top-level item ("Blog") -------------------------------
   Measured with Segoe UI: at >=1260px the bar (brand + 7 items + call capsule)
   would need ~1153-1170px of the 1132px .wrap; 3px less side padding per item and
   a 2px gap bring it back to today's width. 1120-1259px: PART 6 already tightens
   the bar, 3px more keeps the same spare room. Applies only while the Blog item
   is printed (it is, only while a published posts page is set). */
@media(min-width:1260px){
  .nav:has(>.bsc-blog-nav){gap:2px}
  .nav:has(>.bsc-blog-nav)>li>a{padding:0 6px}
}
@media(min-width:1120px) and (max-width:1259px){
  .nav:has(>.bsc-blog-nav){gap:2px}
  .nav:has(>.bsc-blog-nav)>li>a{padding:0 4px}
}

/* --- hero (index + single) ------------------------------------------------- */
.bsc-blog-hero .hero__copy{max-width:860px}
.bsc-blog-meta{margin:0;font-size:16px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.bsc-blog-figure img{width:100%;height:100%;object-fit:cover}

/* --- index: the theme's .grid.g3 + .card ------------------------------------ */
.bsc-blog-card{display:flex;flex-direction:column}
.bsc-blog-card .media{margin:0 0 18px}
.bsc-blog-card .bsc-blog-meta{margin:0 0 8px;font-size:15px}
.bsc-blog-card h2 a{color:var(--head);text-decoration:none}
/* the whole card is the click target; the title link stays the only link */
.bsc-blog-card h2 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.bsc-blog-card p:not(.bsc-blog-meta){margin-bottom:16px}
.bsc-blog-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;color:var(--primary)}
.bsc-blog-more svg{width:18px;height:18px;flex:none;transition:translate var(--dur) var(--ease)}
.bsc-blog-card:hover .bsc-blog-more svg{translate:4px 0}
.bsc-blog-empty{max-width:760px}
.bsc-blog-empty p+p{margin-top:12px}

/* --- pagination (get_the_posts_pagination) --------------------------------- */
.bsc-blog-pagination{margin-top:clamp(30px,3.6vw,48px)}
.bsc-blog-pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.bsc-blog-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.bsc-blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);padding:8px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);color:var(--primary);font-size:16.2px;
  font-weight:700;text-decoration:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.bsc-blog-pagination a.page-numbers:hover{border-color:var(--primary);background:var(--primary-subtle)}
.bsc-blog-pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.bsc-blog-pagination .page-numbers.dots{border:0;background:none;min-width:0}

/* --- single: the post body (Gutenberg) -------------------------------------
   The template gives post-content the theme's .prose (measure, rhythm, paragraph
   size); these rules add everything an editor-written body can contain:
   heading, list, image, quote, table, separator, details. Same values as the
   theme's own .legaltext, the only other editor-HTML surface on this site. */
.bsc-blog-body{padding-top:clamp(40px,4.6vw,64px)}
.bsc-blog-prose::after{content:"";display:table;clear:both}
.bsc-blog-prose :is(h2,h3,h4){scroll-margin-top:120px}
.bsc-blog-prose h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em}
.bsc-blog-prose h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.012em;line-height:1.28}
.bsc-blog-prose h4{font-size:19px;line-height:1.3}
.bsc-blog-prose>h2{margin-top:clamp(34px,3.6vw,52px)}
.bsc-blog-prose>:is(h3,h4){margin-top:clamp(26px,2.6vw,36px)}
.bsc-blog-prose>:is(h2,h3,h4):first-child{margin-top:0}
.bsc-blog-prose>:is(h2,h3,h4)+*{margin-top:12px}
.bsc-blog-prose :is(ul,ol){padding-left:1.4em}
.bsc-blog-prose ul{list-style:disc}
.bsc-blog-prose ol{list-style:decimal}
.bsc-blog-prose li{font-size:clamp(17.5px,1.25vw,19px);line-height:1.68;padding-left:4px}
.bsc-blog-prose li+li{margin-top:6px}
.bsc-blog-prose li::marker{color:var(--primary)}
.bsc-blog-prose li>:is(ul,ol){margin-top:6px}
.bsc-blog-prose>:is(figure,.wp-block-image,.wp-block-table,blockquote,hr,details){
  margin-block:clamp(26px,2.8vw,40px)}
.bsc-blog-prose>:is(figure,.wp-block-image,.wp-block-table,blockquote,hr,details):first-child{margin-top:0}
.bsc-blog-prose figure{margin-inline:0}
.bsc-blog-prose img{max-width:100%;height:auto;border-radius:var(--r)}
.bsc-blog-prose figcaption{margin-top:10px;font-size:15.6px;line-height:1.5;color:var(--muted)}
.bsc-blog-prose .aligncenter{margin-inline:auto;text-align:center}
.bsc-blog-prose .aligncenter img{margin-inline:auto}
.bsc-blog-prose .alignleft{float:left;margin:6px 26px 16px 0;max-width:50%}
.bsc-blog-prose .alignright{float:right;margin:6px 0 16px 26px;max-width:50%}
.bsc-blog-prose blockquote{padding:4px 0 4px 22px;border-left:3px solid var(--primary)}
.bsc-blog-prose blockquote p{font-size:clamp(19px,1.6vw,22px);line-height:1.5;font-weight:600;color:var(--head)}
.bsc-blog-prose blockquote p+p{margin-top:10px}
.bsc-blog-prose blockquote cite{display:block;margin-top:10px;font-size:15.6px;font-style:normal;color:var(--muted)}
.bsc-blog-prose .wp-block-table{overflow-x:auto}
.bsc-blog-prose table{width:100%;border-collapse:collapse;font-size:16.6px;line-height:1.5}
.bsc-blog-prose :is(th,td){border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.bsc-blog-prose th{background:var(--surface-alt);font-weight:700;color:var(--head)}
.bsc-blog-prose hr{height:0;border:0;border-top:1px solid var(--line);opacity:1}
.bsc-blog-prose details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.bsc-blog-prose details+details{margin-top:0;border-top:0}
.bsc-blog-prose summary{cursor:pointer;padding:10px 0;font-size:18px;font-weight:700;color:var(--head)}
.bsc-blog-prose details>:not(summary){margin-top:8px}
.bsc-blog-prose .has-text-align-center{text-align:center;margin-inline:auto}
.bsc-blog-prose .has-text-align-right{text-align:right}
@media(max-width:640px){
  .bsc-blog-prose :is(.alignleft,.alignright){float:none;max-width:100%;margin:26px 0}
}