/* =====================================================================
   Blog — index, single post, archives
   ===================================================================== */

.sk-blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sk-gap); padding-block: 32px 64px; align-items: flex-start; }
.sk-blog-header { margin-bottom: 22px; }
.sk-blog-header h1 span { color: var(--sk-primary); }
.sk-blog-header .sk-page-subtitle { font-size: 15px; margin-top: 6px; }

/* Filter pills + sort/view toolbar ------------------------------------------ */
.sk-blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.sk-blog-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-blog-filter-pill {
	display: inline-flex; align-items: center; padding: 9px 18px; border-radius: var(--sk-radius-pill);
	border: 1px solid var(--sk-border); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--sk-text);
	transition: background var(--sk-transition), color var(--sk-transition), border-color var(--sk-transition);
}
.sk-blog-filter-pill:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
.sk-blog-filter-pill.is-active { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }

.sk-blog-toolbar__right { display: flex; align-items: center; gap: 10px; }
.sk-blog-sort { position: relative; display: inline-flex; align-items: center; }
.sk-blog-sort select {
	appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 14px; border-radius: var(--sk-radius-sm);
	border: 1px solid var(--sk-border); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--sk-text); cursor: pointer;
}
.sk-blog-sort .sk-svg-icon { position: absolute; right: 12px; pointer-events: none; width: 14px; height: 14px; color: var(--sk-text-light); }
.sk-blog-view-toggle { display: flex; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); overflow: hidden; }
.sk-blog-view-toggle button { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #fff; color: var(--sk-text-light); border: none; border-left: 1px solid var(--sk-border); }
.sk-blog-view-toggle button:first-child { border-left: none; }
.sk-blog-view-toggle button.is-active { background: var(--sk-primary); color: #fff; }
.sk-blog-view-toggle .sk-svg-icon { width: 16px; height: 16px; }

/* Blog card grid ----------------------------------------------------------------
   Used on: the blog listing page (home.php), category/tag/author archives
   (archive.php), search results (search.php) and the "Latest from Blog"
   homepage teaser (template-parts/home/latest-blog.php).
   3 columns on desktop — matches the reference design, since the 320px
   sidebar leaves ~930px for cards at the theme's 1280px container width.
   Steps down to 2 on tablet/mobile, staying at 2 all the way to the
   smallest phone — see responsive.css. (The homepage teaser has its own
   4-column layout via .sk-latest-blog-grid in home.css.) --- */
.sk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sk-gap); }

.sk-blog-card {
	display: flex; flex-direction: column; background: #fff;
	border-radius: var(--sk-radius); overflow: hidden;
	border: 1px solid var(--sk-border);
	transition: border-color var(--sk-transition);
}
.sk-blog-card:hover { border-color: var(--sk-primary); }

.sk-blog-card__thumb { position: relative; display: block; aspect-ratio: 16/10; background: var(--sk-bg-soft); overflow: hidden; }
.sk-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Generated cover banner — shown instead of a blank thumbnail when a
   post has no featured image. Colors/icon come from
   sk_blog_category_theme(); values here are deliberately
   literal hex (not design-token vars) since they're a fixed decorative
   palette, same approach as sk_category_icon_map() elsewhere
   in the theme. */
.sk-blog-card__generated { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 100%; padding: 20px 18px; }
.sk-blog-card__generated-label { font-family: var(--sk-font-heading); font-weight: 800; font-size: 17px; line-height: 1.3; max-width: 68%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-blog-card__generated-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.sk-blog-card__generated-icon .sk-svg-icon { width: 28px; height: 28px; }

.sk-blog-card__generated--navy { background: linear-gradient(135deg, #1b2559 0%, #2f3f8f 100%); }
.sk-blog-card__generated--navy .sk-blog-card__generated-label { color: #fff; }
.sk-blog-card__generated--navy .sk-blog-card__generated-icon { background: rgba(255, 255, 255, .16); color: #fff; }

.sk-blog-card__generated--purple { background: linear-gradient(135deg, #4c2f9e 0%, #7c4ff0 100%); }
.sk-blog-card__generated--purple .sk-blog-card__generated-label { color: #fff; }
.sk-blog-card__generated--purple .sk-blog-card__generated-icon { background: rgba(255, 255, 255, .18); color: #fff; }

.sk-blog-card__generated--skyblue { background: linear-gradient(135deg, #dceafe 0%, #bfdbfe 100%); }
.sk-blog-card__generated--skyblue .sk-blog-card__generated-label { color: #0c3a7a; }
.sk-blog-card__generated--skyblue .sk-blog-card__generated-icon { background: #fff; color: var(--sk-primary); }

.sk-blog-card__generated--pink { background: linear-gradient(135deg, #fbe4f3 0%, #ecdcfb 100%); }
.sk-blog-card__generated--pink .sk-blog-card__generated-label { color: #6d2a63; }
.sk-blog-card__generated--pink .sk-blog-card__generated-icon { background: #fff; color: #a3336f; }

.sk-blog-card__generated--mint { background: linear-gradient(135deg, #d9f5ea 0%, #c3eee0 100%); }
.sk-blog-card__generated--mint .sk-blog-card__generated-label { color: #0d5c4c; }
.sk-blog-card__generated--mint .sk-blog-card__generated-icon { background: #fff; color: #0f766e; }

.sk-blog-card__generated--peach { background: linear-gradient(135deg, #fef0dd 0%, #fde2c2 100%); }
.sk-blog-card__generated--peach .sk-blog-card__generated-label { color: #8a3d0a; }
.sk-blog-card__generated--peach .sk-blog-card__generated-icon { background: #fff; color: #c2540c; }

.sk-blog-card__generated--amber { background: linear-gradient(135deg, #fef3d8 0%, #fce8b8 100%); }
.sk-blog-card__generated--amber .sk-blog-card__generated-label { color: #7a4306; }
.sk-blog-card__generated--amber .sk-blog-card__generated-icon { background: #fff; color: #b45309; }

.sk-blog-card__generated--slate { background: linear-gradient(135deg, #e2e8f4 0%, #cbd5e8 100%); }
.sk-blog-card__generated--slate .sk-blog-card__generated-label { color: #1e293b; }
.sk-blog-card__generated--slate .sk-blog-card__generated-icon { background: #fff; color: #334155; }

.sk-blog-card__thumb .sk-badge {
	position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .92);
	color: var(--sk-primary); backdrop-filter: blur(4px); box-shadow: var(--sk-shadow-sm);
}
/* Over a generated banner, the badge switches to a solid pill in the
   same accent color as the banner (matches the reference design) —
   a translucent white pill reads better only over real photos. */
.sk-blog-card__thumb:has(.sk-blog-card__generated--navy) .sk-badge { background: #1b2559; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--purple) .sk-badge { background: #4c2f9e; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--skyblue) .sk-badge { background: #2563eb; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--pink) .sk-badge { background: #a3336f; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--mint) .sk-badge { background: #0f766e; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--peach) .sk-badge { background: #c2540c; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--amber) .sk-badge { background: #b45309; color: #fff; }
.sk-blog-card__thumb:has(.sk-blog-card__generated--slate) .sk-badge { background: #334155; color: #fff; }

.sk-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.sk-blog-card__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--sk-primary); margin-bottom: 10px; }
.sk-blog-card__tag-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--sk-gradient); flex-shrink: 0; }
.sk-blog-card__title {
	font-size: 16px; line-height: 1.4; margin-bottom: 8px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-blog-card__title a { color: var(--sk-text); transition: color var(--sk-transition); }
.sk-blog-card:hover .sk-blog-card__title a { color: var(--sk-primary); }

.sk-blog-card__excerpt {
	font-size: 13px; line-height: 1.6; color: var(--sk-text-light); margin: 0 0 14px; flex: 1;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-blog-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--sk-border-light); padding-top: 12px; }
.sk-blog-card__meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--sk-text-muted); flex-wrap: wrap; }
.sk-blog-card__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.sk-blog-card__meta-item .sk-svg-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--sk-text-muted); }
.sk-blog-card__more { font-size: 12.5px; font-weight: 700; color: var(--sk-primary); text-decoration: none; white-space: nowrap; }
.sk-blog-card__more:hover { text-decoration: underline; }

/* List view — toggled by the toolbar's layout buttons (assets/js/blog.js). */
.sk-blog-grid.is-list-view { grid-template-columns: 1fr; gap: 16px; }
.sk-blog-grid.is-list-view .sk-blog-card { flex-direction: row; }
.sk-blog-grid.is-list-view .sk-blog-card__thumb { width: 260px; flex-shrink: 0; aspect-ratio: auto; }
.sk-blog-grid.is-list-view .sk-blog-card__body { flex: 1; justify-content: center; }

/* Search-result variant — same card, no forced thumb, plus a type badge. */
.sk-blog-card--search .sk-blog-card__body { padding-top: 20px; }
.sk-blog-card--search .sk-badge--type { margin-bottom: 10px; }

/* Newsletter card — lighter, boxed variant for the blog page (the
   homepage's .sk-home-newsletter is the full-bleed gradient version). */
.sk-blog-newsletter {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	background: var(--sk-bg-soft); border: 1px solid var(--sk-border-light); border-radius: var(--sk-radius-lg);
	padding: 28px 32px; margin-top: 40px;
}
.sk-blog-newsletter__text { display: flex; align-items: center; gap: 16px; }
.sk-blog-newsletter__icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sk-shadow-sm); flex-shrink: 0; }
.sk-blog-newsletter__icon .sk-svg-icon { width: 24px; height: 24px; color: var(--sk-primary); }
.sk-blog-newsletter__title { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.sk-blog-newsletter__subtitle { font-size: 13.5px; color: var(--sk-text-light); margin: 0; }
.sk-blog-newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.sk-blog-newsletter input[type="email"] { min-width: 240px; padding: 12px 16px; border-radius: var(--sk-radius-sm); border: 1px solid var(--sk-border); font-size: 13.5px; }

/* Sidebar widgets --------------------------------------------------------- */
.sk-sidebar { position: sticky; top: calc(var(--sk-header-height) + 16px); display: flex; flex-direction: column; gap: 24px; }
.sk-widget { background: #fff; border: 1px solid var(--sk-border-light); border-radius: var(--sk-radius); padding: 20px; }
.sk-widget-title { font-size: 15px; margin-bottom: 14px; }
/* Icon + title header used on the single-post sidebar (Popular Posts /
   Categories / Featured Products) — a colored round icon badge to the
   left of the widget name, matching the reference design. */
.sk-widget-title--icon { display: flex; align-items: center; gap: 10px; }
.sk-widget-title--icon .sk-widget-title__icon {
	display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
}
.sk-widget a.sk-widget__viewall {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding: 10px;
	border-radius: var(--sk-radius-sm); background: var(--sk-bg-soft); font-size: 13px; font-weight: 700; color: var(--sk-text);
	transition: background var(--sk-transition), color var(--sk-transition);
}
/* Specificity bumped to (0,2,1)/(0,3,1) via the extra ".sk-widget a"
   prefix — otherwise the generic ".sk-widget a:hover { color: ... }"
   rule below (also (0,2,1)) wins the color property despite coming
   after this in source order, since equal-looking selectors here
   aren't actually equal specificity once the "a" element is counted.
   That was overriding this rule's "color: #fff" back to
   var(--sk-primary) — the same color as the hover background — so
   the "View All" button's text visually disappeared on hover. */
.sk-widget a.sk-widget__viewall:hover { background: var(--sk-primary); color: #fff; }
.sk-widget ul { display: flex; flex-direction: column; gap: 10px; }
.sk-widget a { font-size: 14px; color: var(--sk-text-light); }
.sk-widget a:hover { color: var(--sk-primary); }
.sk-widget input[type="text"], .sk-widget input[type="search"] { margin-bottom: 8px; }

/* Compact product row — used inside the sidebar's Featured Products
   widget (thumb + name + star rating + price, no add-to-cart button). */
.sk-widget-products { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sk-widget-products li { display: flex; gap: 12px; align-items: flex-start; }
.sk-widget-product__thumb { width: 56px; height: 56px; border-radius: var(--sk-radius-sm); overflow: hidden; flex-shrink: 0; background: var(--sk-bg-soft); }
.sk-widget-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sk-widget-product__title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--sk-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.sk-widget-product__title:hover { color: var(--sk-primary); }
.sk-widget-product__price { display: block; font-size: 13px; font-weight: 700; color: var(--sk-primary); margin-top: 2px; }
.sk-widget-product__rating .sk-rating { font-size: 10.5px; }

.sk-blog-search-form { display: flex; gap: 8px; }
.sk-blog-search-form input[type="search"] { flex: 1; border: 1px solid var(--sk-border); border-radius: var(--sk-radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 0; }
.sk-blog-search-form button { display: flex; align-items: center; justify-content: center; width: 44px; border: none; border-radius: var(--sk-radius-sm); background: var(--sk-primary); color: #fff; flex-shrink: 0; }
.sk-blog-search-form button .sk-svg-icon { width: 18px; height: 18px; }

.sk-blog-categories { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-blog-categories li a { display: flex; align-items: center; justify-content: space-between; padding: 9px 6px; font-size: 13.5px; color: var(--sk-text); border-radius: var(--sk-radius-sm); }
.sk-blog-categories li a:hover { color: var(--sk-primary); background: var(--sk-bg-soft); }
.sk-blog-categories__name { display: flex; align-items: center; gap: 8px; }
.sk-blog-categories__name .sk-svg-icon { width: 14px; height: 14px; color: var(--sk-text-muted); flex-shrink: 0; }
.sk-blog-categories__count { font-size: 12px; color: var(--sk-text-muted); font-weight: 700; background: var(--sk-bg-soft); border-radius: var(--sk-radius-pill); padding: 2px 10px; }

.sk-popular-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sk-popular-posts li { display: flex; gap: 12px; align-items: flex-start; }
.sk-popular-posts__thumb { width: 56px; height: 56px; border-radius: var(--sk-radius-sm); overflow: hidden; flex-shrink: 0; background: var(--sk-bg-soft); }
.sk-popular-posts__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sk-popular-posts__generated { padding: 0; justify-content: center; }
.sk-popular-posts__title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--sk-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.sk-popular-posts__title:hover { color: var(--sk-primary); }
.sk-popular-posts__date { font-size: 11.5px; color: var(--sk-text-muted); }

.sk-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-tag-cloud a { padding: 6px 14px; border-radius: var(--sk-radius-pill); background: var(--sk-bg-soft); font-size: 12.5px; font-weight: 600; color: var(--sk-text-light); }
.sk-tag-cloud a:hover { background: var(--sk-primary); color: #fff; }

/* Reading progress ---------------------------------------------------------- */
.sk-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; background: transparent; }
.sk-reading-progress span { display: block; height: 100%; width: 0; background: var(--sk-gradient); transition: width 100ms linear; }

/* Single post — classic editorial ----------------------------------------------- */
.sk-single-post .sk-blog-layout { padding-top: 8px; }
.sk-single-post .sk-breadcrumbs { padding-top: 6px; }
.sk-single-post__header { padding-top: 24px; max-width: 900px; }
.sk-single-post__title { font-family: var(--sk-font-heading); font-weight: 800; font-size: 40px; line-height: 1.2; margin-block: 16px 20px; }
.sk-single-post__thumbnail { margin-block: 28px; border-radius: var(--sk-radius-lg); overflow: hidden; max-width: 900px; }
.sk-single-post__thumbnail img { width: 100%; display: block; }

/* Post-meta bar: avatar, author name (person icon), date + reading
   time (clock icon), and icon-only like/share actions — flat, no card
   chrome, matching the reference design exactly. */
.sk-post-meta-bar { display: flex; align-items: center; gap: 14px; padding-block: 18px; max-width: 900px; }
.sk-post-meta-bar__avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.sk-post-meta-bar__info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sk-post-meta-bar__name, .sk-post-meta-bar__sub { display: flex; align-items: center; gap: 8px; }
.sk-post-meta-bar__name { font-size: 16px; font-weight: 400; color: var(--sk-text); text-transform: capitalize; }
.sk-post-meta-bar__sub { font-size: 14px; color: var(--sk-text-muted); }
.sk-post-meta-bar__name .sk-svg-icon, .sk-post-meta-bar__sub .sk-svg-icon { color: var(--sk-text-muted); flex-shrink: 0; }

.sk-post-meta-bar__actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.sk-post-meta-bar__comments, .sk-post-meta-bar__share-btn {
	display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; margin: 0;
	color: var(--sk-text-light); cursor: pointer; transition: color var(--sk-transition); text-decoration: none; position: relative;
}
.sk-post-meta-bar__comments:hover, .sk-post-meta-bar__share-btn:hover { color: var(--sk-primary); }
.sk-post-meta-bar__comments .sk-svg-icon, .sk-post-meta-bar__share-btn .sk-svg-icon { width: 21px; height: 21px; }
.sk-post-meta-bar__comments-count {
	position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px;
	display: flex; align-items: center; justify-content: center;
	background: var(--sk-primary); color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
	border-radius: 999px; border: 1.5px solid #fff;
}

.sk-post-meta-bar__share-wrap { position: relative; }

/* "Share to other apps" bottom sheet — opened from the share icon in
   the post-meta bar (single.php). Mobile: slides up from the bottom.
   Desktop (min-width 640px): centered modal, matching .sk-modal. */
body.sk-no-scroll { overflow: hidden; }
.sk-share-sheet { position: fixed; inset: 0; z-index: 2000; display: none; align-items: flex-end; justify-content: center; }
.sk-share-sheet.is-open { display: flex; }
.sk-share-sheet__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .5); opacity: 0; transition: opacity var(--sk-transition); }
.sk-share-sheet.is-open .sk-share-sheet__backdrop { opacity: 1; }
.sk-share-sheet__panel {
	position: relative; z-index: 1; width: 100%; max-width: 480px; background: #fff;
	border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0; box-shadow: var(--sk-shadow-lg);
	padding: 14px 20px 26px; max-height: 85vh; overflow-y: auto;
	transform: translateY(100%); transition: transform var(--sk-transition);
}
.sk-share-sheet.is-open .sk-share-sheet__panel { transform: translateY(0); }
.sk-share-sheet__handle { width: 40px; height: 4px; border-radius: var(--sk-radius-pill); background: var(--sk-border); margin: 0 auto 16px; }
.sk-share-sheet__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sk-share-sheet__header h3 { font-size: 17px; font-weight: 700; margin: 0; }
.sk-share-sheet__close {
	width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--sk-bg-soft);
	color: var(--sk-text-muted); display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: all var(--sk-transition); flex-shrink: 0;
}
.sk-share-sheet__close:hover { background: var(--sk-primary); color: #fff; }

.sk-share-sheet__preview {
	display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 18px;
	border-bottom: 1px solid var(--sk-border-light);
}
.sk-share-sheet__thumb { width: 52px; height: 52px; border-radius: var(--sk-radius-sm); object-fit: cover; flex-shrink: 0; }
.sk-share-sheet__preview-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-share-sheet__preview-text strong {
	font-size: 14px; font-weight: 600; color: var(--sk-text); display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-share-sheet__preview-text span { font-size: 12px; color: var(--sk-text-muted); }

.sk-share-sheet__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; margin-bottom: 20px; }
.sk-share-sheet__grid-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--sk-text); }
.sk-share-sheet__grid-icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--sk-bg-soft);
	display: flex; align-items: center; justify-content: center; transition: all var(--sk-transition);
}
.sk-share-sheet__grid-item:hover .sk-share-sheet__grid-icon { background: var(--sk-primary); color: #fff; transform: translateY(-2px); }
.sk-share-sheet__grid-label { font-size: 11.5px; color: var(--sk-text-muted); text-align: center; }

.sk-share-sheet__copy { border-top: 1px solid var(--sk-border-light); padding-top: 16px; }
.sk-share-sheet__copy-label { display: block; font-size: 13px; color: var(--sk-text-muted); margin-bottom: 8px; }
.sk-share-sheet__copy-row { display: flex; align-items: center; gap: 8px; background: var(--sk-bg-soft); border-radius: var(--sk-radius-sm); padding: 4px 4px 4px 12px; }
.sk-share-sheet__copy-input { flex: 1; min-width: 0; border: none; background: none; font-size: 13px; color: var(--sk-text-muted); outline: none; }
.sk-share-sheet__copy-btn {
	flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--sk-radius-sm); border: none;
	background: #fff; box-shadow: var(--sk-shadow-sm); color: var(--sk-text); cursor: pointer;
	display: flex; align-items: center; justify-content: center; position: relative;
}
.sk-share-sheet__copy-btn:hover { color: var(--sk-primary); }
.sk-share-sheet__copy-check { display: none; color: var(--sk-success); position: absolute; }
.sk-share-sheet__copy-btn.is-copied .sk-share-sheet__copy-icon { display: none; }
.sk-share-sheet__copy-btn.is-copied .sk-share-sheet__copy-check { display: block; }

@media (min-width: 640px) {
	.sk-share-sheet { align-items: center; }
	.sk-share-sheet__panel { border-radius: var(--sk-radius-lg); transform: translateY(16px) scale(.97); opacity: 0; transition: transform var(--sk-transition), opacity var(--sk-transition); }
	.sk-share-sheet.is-open .sk-share-sheet__panel { transform: translateY(0) scale(1); opacity: 1; }
	.sk-share-sheet__handle { display: none; }
}

/* Small checkmark pill next to a verified author's name — reused in
   the meta bar and the author box. */
.sk-name-badge {
	display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
	border-radius: 50%; background: var(--sk-primary); color: #fff; flex-shrink: 0;
}
.sk-name-badge svg { width: 10px; height: 10px; }

.sk-single-post__content { max-width: 900px; font-size: 17px; line-height: 1.9; color: var(--sk-text); }
.sk-single-post__content p { margin-bottom: 22px; }

.sk-single-post__content h2 { font-family: var(--sk-font-heading); font-weight: 800; font-size: 24px; margin: 40px 0 14px; }
.sk-single-post__content h3 { font-family: var(--sk-font-heading); font-weight: 700; font-size: 20px; margin: 32px 0 14px; }
.sk-single-post__content img { border-radius: var(--sk-radius); margin-block: 20px; }
.sk-single-post__content figure { margin-block: 28px; }
.sk-single-post__content figcaption { font-size: 13px; color: var(--sk-text-light); margin-top: 10px; text-align: center; }
.sk-single-post__content blockquote {
	background: var(--sk-primary-light); border-radius: var(--sk-radius); padding: 28px 32px; margin: 32px 0;
	font-family: var(--sk-font-heading); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--sk-primary-dark);
	font-style: normal; border-left: none;
}
.sk-single-post__content pre { background: var(--sk-text); color: #f8fafc; padding: 20px; border-radius: var(--sk-radius); overflow-x: auto; margin-block: 26px; }
.sk-single-post__content code { background: var(--sk-bg-soft); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.sk-single-post__content pre code { background: none; padding: 0; }
.sk-single-post__content ul, .sk-single-post__content ol { padding-left: 24px; list-style: revert; margin-bottom: 22px; }
.sk-single-post__content li { margin-bottom: 8px; }

/* Callout boxes — [sk_keyfeatures] (green) / [sk_protip] (blue)
   shortcodes, for use inside post content. */
.sk-callout { display: flex; align-items: flex-start; gap: 14px; border-radius: var(--sk-radius); padding: 18px 22px; margin-block: 22px; }
.sk-callout__icon {
	display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	border-radius: 50%; flex-shrink: 0; margin-top: 2px;
}
.sk-callout__body { font-size: 15px; line-height: 1.7; color: var(--sk-text); }
.sk-callout__body p:last-child { margin-bottom: 0; }
.sk-callout__body strong { margin-right: 4px; }
.sk-callout--success { background: var(--sk-success-light); }
.sk-callout--success .sk-callout__icon { background: var(--sk-success); color: #fff; }
.sk-callout--info { background: var(--sk-primary-light); }
.sk-callout--info .sk-callout__icon { background: var(--sk-primary); color: #fff; }

/* Table of contents — collapsible <details> box, numbered top-level
   entries laid out in two CSS-column groups (image 1). */
.sk-toc { background: var(--sk-bg-soft); border: 1px solid var(--sk-border-light); border-radius: var(--sk-radius); padding: 20px 24px; margin-bottom: 32px; max-width: 900px; }
.sk-toc__summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
	list-style: none; font-family: var(--sk-font-heading); font-weight: 700; font-size: 15px; color: var(--sk-text);
}
.sk-toc__summary::-webkit-details-marker { display: none; }
.sk-toc[open] .sk-toc__summary { margin-bottom: 14px; }
.sk-toc__summary-label { display: flex; align-items: center; gap: 10px; color: var(--sk-primary); }
.sk-toc__summary-label .sk-svg-icon { color: var(--sk-primary); }
.sk-toc__summary-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sk-text-light); }
.sk-toc__summary-toggle .sk-svg-icon { transition: transform var(--sk-transition); }
.sk-toc[open] .sk-toc__summary-toggle .sk-svg-icon { transform: rotate(180deg); }
.sk-toc:not([open]) .sk-toc__summary-toggle-text--open,
.sk-toc[open] .sk-toc__summary-toggle-text--closed { display: none; }

.sk-toc .sk-toc__list { list-style: none; padding-left: 0; margin: 0; columns: 2; column-gap: 40px; }
.sk-toc__item { break-inside: avoid; margin-bottom: 12px; }
.sk-toc__item--h3 { margin-left: 16px; }
.sk-toc__item a { display: flex; align-items: baseline; gap: 8px; color: var(--sk-text); font-size: 14px; text-decoration: none; }
.sk-toc__item a:hover .sk-toc__text { color: var(--sk-primary); }
.sk-toc__number { font-weight: 700; color: var(--sk-primary); flex-shrink: 0; }
.sk-toc__text { transition: color var(--sk-transition); }
.sk-toc__item--h3 a { font-size: 13px; color: var(--sk-text-light); }

/* Social share — labeled pills (default) or compact circular icons
   (used in the post-meta bar; icon-btn re-uses the .sk-icon mask set). */
.sk-social-share { display: flex; align-items: center; gap: 10px; margin-block: 32px; flex-wrap: wrap; }
.sk-social-share__label { font-weight: 700; font-size: 14px; }
.sk-social-share__link { padding: 8px 14px; border-radius: var(--sk-radius-pill); background: var(--sk-bg-soft); font-size: 13px; font-weight: 600; }
.sk-social-share__link:hover { background: var(--sk-primary); color: #fff; }
.sk-social-share--icons { gap: 8px; }
.sk-social-share--icons .sk-social-share__label { font-size: 13px; color: var(--sk-text-light); margin-right: 2px; }
.sk-social-share__icon-btn {
	display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
	border-radius: 50%; border: 1px solid var(--sk-border); background: #fff; color: var(--sk-text-light);
	transition: background var(--sk-transition), border-color var(--sk-transition), color var(--sk-transition);
}
.sk-social-share__icon-btn .sk-icon { width: 14px; height: 14px; }
.sk-social-share__icon-btn:hover { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
.sk-social-share__icon-btn--copy { position: relative; }
.sk-social-share__copy-check { display: none; color: var(--sk-success); }
.sk-social-share__icon-btn--copy.is-copied { border-color: var(--sk-success); }
.sk-social-share__icon-btn--copy.is-copied .sk-social-share__copy-icon { display: none; }
.sk-social-share__icon-btn--copy.is-copied .sk-social-share__copy-check { display: block; }

.sk-author-box { display: flex; gap: 16px; background: var(--sk-bg-soft); border-radius: var(--sk-radius); padding: 24px; margin-block: 32px; max-width: 900px; }
.sk-author-box img { border-radius: 50%; width: 80px; height: 80px; flex-shrink: 0; }
.sk-author-box h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 16px; }
.sk-author-box p { margin: 0; color: var(--sk-text-light); font-size: 14px; }
.sk-author-box__social { display: flex; gap: 8px; margin-top: 14px; }
.sk-author-box__social-link {
	display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: 50%; background: #fff; border: 1px solid var(--sk-border); color: var(--sk-text-light);
	transition: background var(--sk-transition), border-color var(--sk-transition), color var(--sk-transition);
}
.sk-author-box__social-link .sk-icon { width: 15px; height: 15px; }
.sk-author-box__social-link:hover { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }

.sk-post-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }

/* Prev / next article navigation */
.sk-post-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; margin-block: 32px; max-width: 900px; }
.sk-post-nav__link {
	display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius); transition: border-color var(--sk-transition), box-shadow var(--sk-transition);
	min-width: 0;
}
.sk-post-nav__link:hover { border-color: var(--sk-primary); box-shadow: var(--sk-shadow-sm); }
.sk-post-nav__link--next { justify-content: flex-end; text-align: right; }
.sk-post-nav__arrow { display: flex; align-items: center; color: var(--sk-text-light); flex-shrink: 0; }
.sk-post-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-post-nav__text small { font-size: 11.5px; color: var(--sk-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.sk-post-nav__text strong { font-size: 14px; font-weight: 600; color: var(--sk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-post-nav__all {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; align-self: center;
	border-radius: 50%; background: var(--sk-bg-soft); color: var(--sk-text-light); flex-shrink: 0;
}
.sk-post-nav__all:hover { background: var(--sk-primary); color: #fff; }
.sk-post-nav__all .sk-icon { width: 16px; height: 16px; }

.sk-related-posts { margin-block: 48px; max-width: 900px; }
.sk-related-posts h2 { font-size: 22px; margin-bottom: 20px; }
.sk-blog-grid--related { grid-template-columns: repeat(3, 1fr); }

/* Comments ----------------------------------------------------------------------- */
.sk-comments { margin-top: 48px; }
.sk-comments__title { font-size: 22px; margin-bottom: 20px; }
.sk-comment-list { display: flex; flex-direction: column; gap: 20px; list-style: none; padding: 0; }
.sk-comment-list ol.children { list-style: none; margin-top: 20px; padding-left: 40px; }
.comment-body { display: flex; gap: 14px; }
.comment-body .avatar { border-radius: 50%; width: 44px; height: 44px; }
.comment-author .fn { font-weight: 700; font-size: 14px; font-style: normal; }
.comment-metadata { font-size: 12px; color: var(--sk-text-muted); margin-bottom: 8px; }
.sk-verified-badge {
	display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px;
	background: var(--sk-success-light, #ecfdf5); color: var(--sk-success, #16a34a);
	border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; vertical-align: middle;
}
.sk-verified-badge svg { width: 11px; height: 11px; }
.sk-comment-form { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; max-width: 600px; }
.sk-comment-form .comment-form-comment textarea { min-height: 140px; }
.sk-comments-closed { color: var(--sk-text-muted); font-style: italic; }

.sk-404 { text-align: center; padding-block: 90px 70px; max-width: 480px; margin-inline: auto; }
.sk-404__art { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
.sk-404__art-icon { width: 100%; height: 100%; border-radius: 50%; background: var(--sk-primary-light); color: var(--sk-primary); display: flex; align-items: center; justify-content: center; }
.sk-404__icon-svg { width: 40px; height: 40px; }
.sk-404__art-dot { position: absolute; border-radius: 50%; }
.sk-404__art-dot--1 { width: 16px; height: 16px; top: -6px; inset-inline-end: -4px; background: var(--sk-secondary-light); border: 2px solid var(--sk-secondary); }
.sk-404__art-dot--2 { width: 10px; height: 10px; bottom: 6px; inset-inline-start: -10px; background: var(--sk-primary-light); border: 2px solid var(--sk-primary); }
.sk-404__badge { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sk-secondary); margin-block-end: 10px; }
.sk-404__search { display: flex; gap: 6px; background: var(--sk-bg); border: 1.5px solid var(--sk-border); border-radius: var(--sk-radius); padding: 5px; box-shadow: var(--sk-shadow-sm); margin-block: 26px 18px; }
.sk-404__search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--sk-text); padding: 10px 14px; }
.sk-404__search-input::placeholder { color: var(--sk-text-muted); }
.sk-404__search-submit { display: flex; align-items: center; gap: 6px; flex-shrink: 0; border: none; border-radius: var(--sk-radius-sm); padding: 0 18px; background: var(--sk-gradient); color: var(--sk-btn-text); font-family: var(--sk-font-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: opacity .2s ease; }
.sk-404__search-submit:hover { opacity: .9; }
.sk-404__popular-label { font-size: 12.5px; color: var(--sk-text-muted); margin-block-end: 10px; }
.sk-404__cats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sk-404__cat-chip { background: var(--sk-bg-soft); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-pill); padding: 6px 14px; font-size: 12px; color: var(--sk-text-light); transition: border-color .2s ease, color .2s ease; }
.sk-404__cat-chip:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
.sk-404__home-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 30px; font-size: 13px; font-weight: 600; color: var(--sk-text-light); text-decoration: none; }
.sk-404__home-link:hover { color: var(--sk-primary); }