/* ==================================================================
   JPW BLOG — extends the site's existing .jw-root design tokens
   (--navy/--teal/--gold/--sand/--ink/--mut/--line/--r/--shadow etc.)
   Only loaded on blog single/archive pages and any page using [jpw_blog].
   ================================================================== */

.jw-root .jw-blog-crumbs{background:var(--sand,#F7F3EC);border-bottom:1px solid var(--line,#E3DCD0);padding:14px 0;font-size:13.5px;color:var(--mut,#6B7A87)}
.jw-root .jw-blog-crumbs a{color:var(--mut,#6B7A87);transition:color .2s}
.jw-root .jw-blog-crumbs a:hover{color:var(--teal,#0A6E72)}
.jw-root .jw-blog-crumbs span{margin:0 6px}
.jw-root .jw-blog-crumb-current{color:var(--ink,#1B2A38);font-weight:600}

.jw-root .jw-blog-hero{background:var(--navy,#0B2545);color:#fff;padding:64px 0 48px}
/* Specificity bump (.jw-root + .jw-blog-hero + h1) is deliberate: the
   theme's global `.jw-root h1,h2,h3,h4{color:var(--navy)}` rule has equal
   specificity to a plain `.jw-blog-hero h1` selector, and was winning by
   load order — making this title navy-on-navy and completely invisible.
   Found by inspecting the live page, not guessed. */
.jw-root .jw-blog-hero h1{color:#fff;font-size:clamp(26px,4vw,42px);margin:18px 0 20px;line-height:1.35}
.jw-root .jw-blog-cat-badge{display:inline-block;background:var(--gold,#C9922E);color:#fff;font-size:12.5px;font-weight:700;padding:7px 18px;border-radius:20px;letter-spacing:.4px}
.jw-root .jw-blog-meta{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;color:#B6C7D9}

.jw-root .jw-blog-feature-img{margin-top:34px;margin-bottom:8px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg,0 18px 48px rgba(11,37,69,.14))}
/* Deliberately aspect-ratio on the WRAPPER, not the <img> itself: WordPress
   prints explicit width/height HTML attributes on the_post_thumbnail()'s
   output, and when those are present, `aspect-ratio` set directly on the
   <img> can lose to the HTML `height` attribute in practice — confirmed on
   the live post, where the image rendered at height:1125px (the attribute
   value) instead of the 16:9 ratio, making it look oversized. Putting
   aspect-ratio on the wrapper and using width/height:100% on the img
   sidesteps the conflict entirely (same pattern already used for the card
   thumbnails, which never had this problem). */
.jw-root .jw-blog-feature-img img{width:100%;height:100%;object-fit:cover;display:block}

.jw-root .jw-blog-layout{display:grid;grid-template-columns:2.15fr 1fr;gap:56px;padding:60px 0 76px;align-items:start}
.jw-root .jw-blog-content{font-size:17.5px;line-height:1.9;color:var(--ink,#1B2A38)}
.jw-root .jw-blog-content h2{font-size:26px;margin:44px 0 16px;line-height:1.35}
.jw-root .jw-blog-content h3{font-size:21px;margin:34px 0 14px;line-height:1.4}
.jw-root .jw-blog-content p{margin-bottom:20px}
.jw-root .jw-blog-content ul,.jw-root .jw-blog-content ol{margin:0 0 22px 24px}
.jw-root .jw-blog-content li{margin-bottom:10px}
.jw-root .jw-blog-content img{border-radius:12px;margin:26px 0}
.jw-root .jw-blog-content table{width:100%;border-collapse:collapse;margin:24px 0 28px;font-size:15px}
.jw-root .jw-blog-content th,.jw-root .jw-blog-content td{padding:12px 16px;border:1px solid var(--line,#E3DCD0);text-align:right}
.jw-root .jw-blog-content th{background:var(--sand,#F7F3EC);color:var(--navy,#0B2545)}
.jw-root .jw-blog-content a{color:var(--teal,#0A6E72);text-decoration:underline}
.jw-root .jw-blog-content blockquote{border-right:3px solid var(--gold,#C9922E);padding:16px 22px;background:var(--sand,#F7F3EC);border-radius:8px;margin:26px 0;font-style:italic;color:var(--mut,#6B7A87)}

.jw-root .jw-blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line,#E3DCD0)}
.jw-root .jw-blog-tags .jw-tag{font-size:13px}

.jw-root .jw-blog-sidebar{position:sticky;top:130px;display:flex;flex-direction:column;gap:24px}
.jw-root .jw-blog-cta-card{background:var(--sand,#F7F3EC);border:1px solid var(--line,#E3DCD0);border-radius:var(--r,14px);padding:28px}
.jw-root .jw-blog-cta-card h4{font-size:18px;margin-bottom:10px;color:var(--navy,#0B2545)}
.jw-root .jw-blog-cta-card p{font-size:14px;color:var(--mut,#6B7A87);margin-bottom:18px;line-height:1.6}
.jw-root .jw-blog-cat-list{background:#fff;border:1px solid var(--line,#E3DCD0);border-radius:var(--r,14px);padding:24px}
.jw-root .jw-blog-cat-list h4{font-size:15px;margin-bottom:14px;color:var(--navy,#0B2545)}
.jw-root .jw-blog-cat-list a{display:block;font-size:14.5px;padding:10px 0;border-bottom:1px solid var(--line,#E3DCD0);color:var(--ink,#1B2A38)}
.jw-root .jw-blog-cat-list a:last-child{border-bottom:none}
.jw-root .jw-blog-cat-list a:hover{color:var(--teal,#0A6E72)}

.jw-root .jw-blog-filterbar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px;justify-content:center}

.jw-root .jw-blog-related-grid{display:flex;flex-wrap:wrap;gap:32px;justify-content:flex-start}
.jw-root .jw-blog-card{flex:1 1 320px;max-width:390px;background:#fff;border:1px solid var(--line,#E3DCD0);border-radius:var(--r,14px);overflow:hidden;display:block;transition:transform .28s,box-shadow .28s}
.jw-root .jw-blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg,0 18px 48px rgba(11,37,69,.14))}
.jw-root .jw-blog-card-img{aspect-ratio:16/10;background:var(--sand-dp,#EFE8DC);overflow:hidden}
.jw-root .jw-blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.jw-root .jw-blog-card-img-placeholder{display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--teal,#0A6E72)}
.jw-root .jw-blog-card-body{padding:24px}
.jw-root .jw-blog-card-cat{display:inline-block;font-size:11.5px;font-weight:700;color:var(--teal,#0A6E72);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.jw-root .jw-blog-card-body h3{font-size:17.5px;margin-bottom:10px;color:var(--navy,#0B2545);font-family:'Mukta',sans-serif;font-weight:600;line-height:1.45}
.jw-root .jw-blog-card-body p{font-size:14px;color:var(--mut,#6B7A87);margin-bottom:14px;line-height:1.65}
.jw-root .jw-blog-card-date{font-size:12.5px;color:var(--mut,#6B7A87)}

.jw-root .jw-blog-archive-grid{margin-bottom:52px}

.jw-root .jw-blog-pagination{display:flex;justify-content:center;gap:8px}
.jw-root .jw-blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:8px;border:1.5px solid var(--line,#E3DCD0);color:var(--ink,#1B2A38);font-weight:600;font-size:14px;padding:0 12px}
.jw-root .jw-blog-pagination .page-numbers.current{background:var(--navy,#0B2545);border-color:var(--navy,#0B2545);color:#fff}
.jw-root .jw-blog-pagination .page-numbers:hover:not(.current){border-color:var(--teal,#0A6E72);color:var(--teal,#0A6E72)}

@media(max-width:900px){
  .jw-root .jw-blog-layout{grid-template-columns:1fr;gap:40px;padding:48px 0 60px}
  .jw-root .jw-blog-sidebar{position:static}
  .jw-root .jw-blog-card{flex-basis:45%}
}
@media(max-width:600px){
  .jw-root .jw-blog-card{flex-basis:100%;max-width:100%}
  .jw-root .jw-blog-meta{gap:14px;font-size:13px}
  .jw-root .jw-blog-layout{padding:36px 0 48px}
  .jw-root .jw-blog-hero{padding:44px 0 32px}
}

/* ================= FULL-WIDTH POST MODE =================
   Applied when a post is self-contained (brings its own layout) or the
   author ticked "full width". The theme may still wrap the template's
   output in its own centred container, so this breaks out of it:
   100vw wide, pulled back to the true viewport left edge.

   Uses left:50%/right:50% + negative margins rather than `width:100vw`
   alone, because 100vw includes the scrollbar width and would cause a
   horizontal scroll on desktop. max-width:100% is deliberately reset. */
.jw-root .jw-blog-fullwidth,
.jw-blog-fullwidth{
  width:100vw;
  max-width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
/* Guard against the horizontal scrollbar that 100vw can introduce. */
.jw-blog-fullwidth{overflow-x:clip}