/* TAP Series Blog — redesign design system.
   Tokens, type, and components lifted verbatim from the approved reference
   builds (listing + guide/checklist post + legal/compliance post). Shared by
   blog/index.php (listing) and blog/post.php (single post). Do not substitute
   colors or fonts — see the developer spec, Section 3. */

:root{
  --ink:#1B2420;          /* body text */
  --ink-soft:#4B564F;     /* secondary text, meta, captions */
  --paper:#FAFAF7;        /* page background */
  --paper-shade:#F0EFE9;  /* callout/card backgrounds */
  --line:#DEDCD2;         /* borders, dividers */
  --forest:#2C5F45;       /* primary accent */
  --forest-deep:#1F4633;  /* accent hover/pressed, tag text */
  --navy:#1C2B40;         /* headlines, high-emphasis text */
  --rose:#E39494;
  --rose-deep:#C96E6E;    /* status/alert accent only */
}

html{scroll-behavior:smooth;}
/* Scope the blog's typography/background to a wrapper so it never bleeds into
   the shared site header/footer (which keep their own Bootstrap styling). */
.blog-page{
  box-sizing:border-box;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.blog-page *{box-sizing:border-box;}
.utility{font-family:'Inter', sans-serif;}
.blog-page img{max-width:100%;}

/* Reading-progress bar (post pages) */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--forest); z-index:200; transition:width 0.1s linear;
}

/* Masthead */
header.site{
  border-bottom:1px solid var(--line); background:var(--paper);
  position:sticky; top:0; z-index:100;
}
.site-inner{
  max-width:1180px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  font-family:'Inter', sans-serif; font-weight:700; font-size:15px;
  letter-spacing:0.14em; color:var(--navy); text-decoration:none;
}
.wordmark span{color:var(--forest);}
nav.site-nav{display:flex; gap:28px; font-family:'Inter',sans-serif; font-size:13px; font-weight:500;}
nav.site-nav a{color:var(--ink-soft); text-decoration:none; letter-spacing:0.02em;}
nav.site-nav a:hover, nav.site-nav a:focus-visible{color:var(--forest);}
@media(max-width:640px){ nav.site-nav{display:none;} }

/* Breadcrumb */
.blog-breadcrumb{
  max-width:720px; margin:0 auto; padding:28px 24px 0;
  font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-soft);
}
.blog-breadcrumb a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line);}
.blog-breadcrumb a:hover, .blog-breadcrumb a:focus-visible{color:var(--forest); border-color:var(--forest);}

/* ── Listing ─────────────────────────────────────────────────────────────── */
.hero{max-width:1180px; margin:0 auto; padding:56px 24px 40px; border-bottom:1px solid var(--line);}
.hero .eyebrow{font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--forest); margin-bottom:14px;}
.hero h1{font-family:'Fraunces',serif; font-weight:600; font-size:clamp(32px,4.5vw,46px); line-height:1.08; color:var(--navy); margin:0 0 16px; letter-spacing:-0.01em;}
.hero p{font-size:18px; color:var(--ink-soft); max-width:640px; line-height:1.6; margin:0;}

.filters{max-width:1180px; margin:0 auto; padding:26px 24px 0; display:flex; gap:10px; flex-wrap:wrap;}
.filters a{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  padding:7px 15px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;
}
.filters a.active{background:var(--forest); border-color:var(--forest); color:#fff;}
.filters a:hover:not(.active), .filters a:focus-visible:not(.active){border-color:var(--forest); color:var(--forest);}

main{max-width:1180px; margin:0 auto; padding:36px 24px 30px;}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid{grid-template-columns:1fr;} }

article.blog-card{background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
article.blog-card .thumb{height:170px; position:relative; display:block; background:linear-gradient(135deg, var(--forest) 0%, var(--navy) 100%); background-size:cover; background-position:center;}
article.blog-card .thumb span.cat{position:absolute; bottom:12px; left:14px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#fff; opacity:0.9; text-shadow:0 1px 3px rgba(0,0,0,0.4);}
article.blog-card .body{padding:20px 20px 24px;}
article.blog-card time{font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:8px;}
article.blog-card h2{font-family:'Fraunces',serif; font-weight:600; font-size:20px; line-height:1.3; margin:0 0 12px;}
article.blog-card h2 a{color:var(--navy); text-decoration:none;}
article.blog-card h2 a:hover, article.blog-card h2 a:focus-visible{color:var(--forest);}
article.blog-card p.excerpt{font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0 0 16px;}
article.blog-card .tags{display:flex; flex-wrap:wrap; gap:6px;}
article.blog-card .tags a, article.blog-card .tags span{font-family:'Inter',sans-serif; font-size:11.5px; color:var(--forest-deep); background:var(--paper-shade); border:1px solid var(--line); border-radius:14px; padding:4px 10px; text-decoration:none;}
article.blog-card .tags a:hover, article.blog-card .tags a:focus-visible{border-color:var(--forest);}

nav.blog-pagination{display:flex; justify-content:center; gap:8px; margin:48px 0 8px; font-family:'Inter',sans-serif; font-size:14px; flex-wrap:wrap;}
nav.blog-pagination a, nav.blog-pagination span{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); text-decoration:none;}
nav.blog-pagination a.current, nav.blog-pagination span.current{background:var(--forest); border-color:var(--forest); color:#fff;}
nav.blog-pagination a:hover:not(.current), nav.blog-pagination a:focus-visible:not(.current){border-color:var(--forest); color:var(--forest);}

/* ── Single post ─────────────────────────────────────────────────────────── */
article.post{max-width:720px; margin:0 auto; padding:0 24px 80px;}
article.post .eyebrow{font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--forest); margin:22px 0 14px;}
h1.headline{font-family:'Fraunces', serif; font-weight:600; font-size:clamp(32px, 4.8vw, 48px); line-height:1.1; letter-spacing:-0.01em; margin:0 0 20px; color:var(--navy);}
.meta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink-soft); padding-bottom:26px; margin-bottom:30px; border-bottom:1px solid var(--line);}
.meta-row .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-soft); display:inline-block;}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--forest); color:#fff; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center;}

figure.hero-img{margin:0 0 40px;}
figure.hero-img img{width:100%; height:auto; display:block; border-radius:3px;}
figure.hero-img figcaption{font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); margin-top:10px; text-align:left;}

.lede{font-size:20px; line-height:1.65; color:var(--ink); margin-bottom:8px;}

/* Case-status badge + case-meta panel (legal/compliance posts) */
.case-status{display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:var(--rose-deep); background:#FBEFEF; border:1px solid #F0D6D6; padding:6px 14px; border-radius:20px; margin-bottom:22px;}
.case-status .dot-live{width:7px; height:7px; border-radius:50%; background:var(--rose-deep); display:inline-block;}
.case-meta{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; background:var(--paper-shade); border:1px solid var(--line); border-radius:4px; padding:20px 24px; margin:0 0 36px; font-family:'Inter',sans-serif;}
.case-meta div .k{font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px;}
.case-meta div .v{font-size:14px; color:var(--navy); font-weight:600;}
@media(max-width:520px){ .case-meta{grid-template-columns:1fr;} }
.disclaimer-inline{font-family:'Inter',sans-serif; font-size:13.5px; font-style:italic; color:var(--ink-soft); background:var(--paper-shade); border-radius:3px; padding:14px 18px; margin:24px 0;}

/* Body copy (CMS content_html renders inside .body-copy) */
.body-copy h2{font-family:'Fraunces', serif; font-weight:600; font-size:26px; color:var(--navy); margin:44px 0 16px; line-height:1.25; border-bottom:2px solid var(--paper-shade); padding-bottom:10px;}
/* Checklist variant: an <h2 data-n="N"> gets a numbered circle marker instead
   of the underline (only when the content is genuinely a numbered sequence). */
.body-copy h2[data-n]{border-bottom:none; padding-bottom:0; padding-left:46px; position:relative;}
.body-copy h2[data-n]::before{content:attr(data-n); position:absolute; left:0; top:-2px; width:32px; height:32px; border:1.5px solid var(--forest); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:700; font-size:13px; color:var(--forest); background:var(--paper);}
.body-copy h3{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.02em; color:var(--forest-deep); margin:28px 0 12px;}
.body-copy p{margin:0 0 20px; color:var(--ink);}
.body-copy ul, .body-copy ol{margin:0 0 22px; padding-left:22px;}
.body-copy li{margin-bottom:9px; color:var(--ink);}
.body-copy img{height:auto; border-radius:3px; margin:8px 0;}
.body-copy a{color:var(--forest-deep); text-decoration:underline;}
.body-copy blockquote, blockquote.pull{font-family:'Fraunces', serif; font-weight:500; font-style:italic; font-size:24px; line-height:1.45; color:var(--forest-deep); border-left:3px solid var(--rose-deep); margin:36px 0; padding:4px 0 4px 26px;}

/* Key Takeaways */
.takeaways{background:var(--paper-shade); border:1px solid var(--line); border-left:3px solid var(--forest); border-radius:3px; padding:22px 26px; margin:0 0 36px;}
.takeaways .tk-label{font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--forest-deep); margin-bottom:12px;}
.takeaways ul{margin:0; padding-left:20px;}
.takeaways li{font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.6; color:var(--ink); margin-bottom:7px;}
.takeaways li:last-child{margin-bottom:0;}

/* Author credibility card */
.author-card{display:flex; gap:16px; align-items:flex-start; background:var(--paper-shade); border:1px solid var(--line); border-radius:4px; padding:20px 22px; margin:44px 0;}
.author-card .avatar-lg{width:46px; height:46px; border-radius:50%; flex-shrink:0; background:var(--forest); color:#fff; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center;}
.author-card h5{font-family:'Inter',sans-serif; font-size:14px; font-weight:700; margin:0 0 4px; color:var(--navy);}
.author-card p{font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-soft); margin:0; line-height:1.55;}

/* Sources */
.sources{margin:44px 0 0; padding-top:28px; border-top:1px solid var(--line);}
.sources h3{font-family:'Inter',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 16px;}
.sources ol{margin:0; padding-left:20px;}
.sources li{font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink-soft); margin-bottom:9px; line-height:1.55;}
.sources a{color:var(--forest-deep); text-decoration:none; border-bottom:1px solid var(--line);}
.sources a:hover, .sources a:focus-visible{border-color:var(--forest);}

/* FAQ */
.faq{margin:44px 0 0; padding-top:28px; border-top:1px solid var(--line);}
.faq h3{font-family:'Fraunces',serif; font-weight:600; font-size:24px; color:var(--navy); margin:0 0 18px;}
.faq details{border-bottom:1px solid var(--line); padding:16px 0;}
.faq summary{font-family:'Inter',sans-serif; font-weight:600; font-size:15.5px; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-size:20px; color:var(--forest); flex-shrink:0;}
.faq details[open] summary::after{content:'\2013';}
.faq .faq-a{font-family:'Inter',sans-serif; font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin-top:12px;}

/* Tags */
.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin:48px 0 0; padding-top:28px; border-top:1px solid var(--line);}
.post-tags .tag{font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; color:var(--forest-deep); background:var(--paper-shade); border:1px solid var(--line); padding:6px 13px; border-radius:20px; text-decoration:none;}
.post-tags .tag:hover, .post-tags .tag:focus-visible{border-color:var(--forest); color:var(--forest);}

/* Share row */
.share-row{display:flex; align-items:center; gap:14px; margin-top:26px; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-soft);}
.share-row .icons{display:flex; gap:10px;}
.share-row button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft);}
.share-row button:hover, .share-row button:focus-visible{border-color:var(--forest); color:var(--forest);}

/* Related / keep reading */
section.related{background:var(--paper-shade); border-top:1px solid var(--line); padding:64px 24px;}
.related-inner{max-width:1100px; margin:0 auto;}
.related h3{font-family:'Inter',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 26px;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media(max-width:800px){ .related-grid{grid-template-columns:1fr;} }
.rcard{background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden; text-decoration:none; color:var(--ink); display:block;}
.rcard .rimg{height:150px; background:linear-gradient(135deg,var(--forest) 0%, var(--navy) 100%); background-size:cover; background-position:center; position:relative;}
.rcard .rimg span{position:absolute; bottom:10px; left:12px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#fff; opacity:0.85; text-shadow:0 1px 3px rgba(0,0,0,0.4);}
.rcard .rbody{padding:16px 18px 20px;}
.rcard .rdate{font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-soft); margin-bottom:6px;}
.rcard h4{font-family:'Fraunces',serif; font-weight:600; font-size:17px; line-height:1.3; margin:0; color:var(--navy);}

footer.site-blog{max-width:1100px; margin:0 auto; padding:40px 24px 60px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); text-align:center;}

:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}