/* =====================================================================
   Viv Article — branded long-form styling for BrandOS blog posts.
   Applied to single posts flagged with meta _viv_raw_html (see
   lib/viv-article-posts.php). Content is stored as clean semantic HTML
   wrapped in .viv-article; wpautop is disabled for these posts.
   Palette: violet #351965 / magenta #af4bac / gold #f4c44c.
   ===================================================================== */
.viv-article{
	--v:#351965; --m:#af4bac; --g:#f4c44c;
	--ink:#28272d; --muted:#574f66;
	--line:rgba(40,39,45,.12); --soft:rgba(53,25,101,.045);
	max-width:772px;
	margin:0 auto;
	padding:4px 22px 88px;
	font-family:'Outfit',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink);
	font-size:18px;
	line-height:1.72;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
.viv-article *{ box-sizing:border-box; }

/* Lede — the opening italic standfirst */
.viv-article > p:first-child{
	font-family:'Fraunces',Georgia,serif;
	font-size:23px;
	line-height:1.5;
	font-weight:400;
	color:var(--muted);
	border-left:3px solid var(--g);
	padding-left:22px;
	margin:10px 0 30px;
}
.viv-article > p:first-child em{ font-style:italic; }

/* Headings */
.viv-article h2{
	font-family:'Fraunces',Georgia,serif;
	font-weight:600;
	font-size:clamp(26px,3.4vw,32px);
	line-height:1.16;
	letter-spacing:-.012em;
	color:var(--v);
	margin:58px 0 16px;
}
.viv-article h3{
	font-family:'Fraunces',Georgia,serif;
	font-weight:600;
	font-size:22px;
	line-height:1.25;
	color:var(--v);
	margin:36px 0 10px;
}
.viv-article h2 strong,
.viv-article h3 strong{ font-weight:600; color:var(--m); }
.viv-article h2 + p,
.viv-article h3 + p{ margin-top:0; }

.viv-article p{ margin:0 0 18px; }
.viv-article a{
	color:var(--m);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:2.5px;
	transition:color .15s ease;
}
.viv-article a:hover{ color:var(--v); }
.viv-article strong{ font-weight:600; color:#211733; }
.viv-article em{ font-style:italic; }

/* Subtle section dividers */
.viv-article hr{
	border:0;
	height:1px;
	background:var(--line);
	margin:44px 0;
}

/* Blockquote callouts (incl. "Why it wins" + ♿ / ⏪ callouts) */
.viv-article blockquote{
	margin:28px 0;
	padding:18px 24px;
	background:var(--soft);
	border:1px solid var(--line);
	border-left:4px solid var(--m);
	border-radius:12px;
	font-size:17px;
}
.viv-article blockquote p{ margin:0; }
.viv-article blockquote p + p{ margin-top:12px; }
.viv-article blockquote strong{ color:var(--v); }

/* Lists */
.viv-article ul,
.viv-article ol{ margin:0 0 22px; padding-left:26px; }
.viv-article li{ margin:8px 0; }
.viv-article li > ul{ margin:8px 0 4px; }
.viv-article ul:not(.task-list) li::marker{ color:var(--m); }
.viv-article ol li::marker{ color:var(--m); font-weight:600; }

/* Checklist (pymdownx task list) — styled checkboxes */
.viv-article ul.task-list{
	list-style:none;
	padding-left:0;
	margin:14px 0 24px;
	display:grid;
	gap:9px;
}
.viv-article .task-list-item{
	position:relative;
	margin:0;
	padding:13px 16px 13px 48px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:11px;
	transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.viv-article .task-list-item:hover{
	border-color:rgba(175,75,172,.4);
	box-shadow:0 8px 22px rgba(53,25,101,.06);
	transform:translateY(-1px);
}
.viv-article .task-list-control{ position:absolute; left:16px; top:15px; line-height:0; }
.viv-article .task-list-control input{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.viv-article .task-list-indicator{
	display:block;
	width:20px; height:20px;
	border:2px solid var(--m);
	border-radius:6px;
	background:#fff;
}
/* Highlight the "(often forgotten)" items */
.viv-article .task-list-item em{ color:var(--m); font-style:italic; font-weight:500; }

/* Tables */
.viv-article table{
	width:100%;
	border-collapse:collapse;
	margin:26px 0;
	font-size:15.5px;
	line-height:1.5;
	border:1px solid var(--line);
	border-radius:12px;
	overflow:hidden;
}
.viv-article th,
.viv-article td{
	border-bottom:1px solid var(--line);
	border-right:1px solid var(--line);
	padding:12px 15px;
	text-align:left;
	vertical-align:top;
}
.viv-article tr th:last-child,
.viv-article tr td:last-child{ border-right:0; }
.viv-article thead th{
	background:var(--v);
	color:#fff;
	font-weight:600;
	font-family:'Outfit',sans-serif;
}
.viv-article tbody tr:last-child td{ border-bottom:0; }
.viv-article tbody tr:nth-child(even){ background:var(--soft); }
.viv-article td strong{ color:var(--v); }

/* Images (the Venn diagram) */
.viv-article img{
	display:block;
	max-width:100%;
	height:auto;
	margin:30px auto;
	background:#fff;
	border:1px solid var(--line);
	border-radius:16px;
	padding:14px;
	box-shadow:0 14px 34px rgba(53,25,101,.08);
}

/* Inline code & tokens */
.viv-article code{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	font-size:.86em;
	background:rgba(53,25,101,.07);
	color:var(--v);
	padding:2px 6px;
	border-radius:5px;
}

/* Final paragraph (CTA) gets a little lift */
.viv-article > p:last-of-type{ font-size:18.5px; }

@media (max-width:600px){
	.viv-article{ font-size:17px; padding-bottom:64px; }
	.viv-article > p:first-child{ font-size:20px; }
	.viv-article table{ font-size:14px; }
	.viv-article th, .viv-article td{ padding:10px 11px; }
}

/* =====================================================================
   Viv Blog Index (Insights) — branded card grid for the posts page.
   Rendered by viv-child/home.php. Enqueued on is_home().
   ===================================================================== */
.viv-blog-index{
	--v:#351965; --m:#af4bac; --g:#f4c44c;
	--ink:#28272d; --muted:#574f66;
	--line:rgba(40,39,45,.12); --soft:rgba(53,25,101,.045);
	max-width:1120px;
	margin:0 auto;
	padding:56px 24px 96px;
	font-family:'Outfit',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink);
}
.viv-blog-index *{ box-sizing:border-box; }
.viv-blog-index .vbi-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.viv-blog-index .vbi-kicker{
	font-size:13px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
	color:var(--m); margin:0 0 12px;
}
.viv-blog-index .vbi-head h1{
	font-family:'Fraunces',Georgia,serif; font-weight:600;
	font-size:clamp(32px,5vw,48px); line-height:1.1; letter-spacing:-.015em;
	color:var(--v); margin:0 0 14px;
}
.viv-blog-index .vbi-sub{ font-size:18px; line-height:1.6; color:var(--muted); margin:0; }

.viv-blog-index .vbi-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
	gap:24px;
}
.viv-blog-index .vbi-card{
	display:flex; flex-direction:column;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	padding:28px 26px 26px;
	box-shadow:0 8px 24px rgba(53,25,101,.05);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* #233: the card body isn't clickable (only the title/Read links are) —
   no misleading hover lift/shadow. */
.viv-blog-index .vbi-cat{
	align-self:flex-start;
	font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
	color:var(--m); text-decoration:none;
	background:rgba(175,75,172,.08); border:1px solid rgba(175,75,172,.18);
	padding:4px 12px; border-radius:30px; margin-bottom:16px;
}
.viv-blog-index .vbi-cat:hover{ background:rgba(175,75,172,.16); }
.viv-blog-index .vbi-title{
	font-family:'Fraunces',Georgia,serif; font-weight:600;
	font-size:23px; line-height:1.22; margin:0 0 10px;
}
.viv-blog-index .vbi-title a{ color:var(--v); text-decoration:none; }
.viv-blog-index .vbi-title a:hover{ color:var(--m); }
.viv-blog-index .vbi-meta{ font-size:13.5px; color:var(--muted); margin:0 0 14px; }
.viv-blog-index .vbi-excerpt{ font-size:15.5px; line-height:1.6; color:var(--ink); margin:0 0 22px; }
.viv-blog-index .vbi-more{
	margin-top:auto; align-self:flex-start;
	font-size:15px; font-weight:600; color:var(--m); text-decoration:none;
}
.viv-blog-index .vbi-more:hover{ color:var(--v); }
.viv-blog-index .vbi-empty{ text-align:center; color:var(--muted); font-size:18px; padding:40px 0; }

/* Pagination */
.viv-blog-index .vbi-pagination{ margin-top:48px; }
.viv-blog-index .vbi-pagination .nav-links{
	display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
}
.viv-blog-index .vbi-pagination a,
.viv-blog-index .vbi-pagination span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:42px; height:42px; padding:0 14px;
	border:1px solid var(--line); border-radius:10px;
	font-size:15px; font-weight:500; color:var(--v); text-decoration:none;
}
.viv-blog-index .vbi-pagination a:hover{ border-color:var(--m); color:var(--m); }
.viv-blog-index .vbi-pagination .current{ background:var(--v); color:#fff; border-color:var(--v); }

@media (max-width:600px){
	.viv-blog-index{ padding:36px 18px 64px; }
	.viv-blog-index .vbi-grid{ grid-template-columns:1fr; }
}