/**
 * Modern blog listing UI — shared by every template that lists multiple
 * posts as cards: archive.php (category/tag/date/author archives),
 * template-blog.php (the main "/blog/" page) and search.php.
 *
 * Scoped entirely under .blog-listing, which each of those three templates
 * wraps its markup in, so nothing here touches single.php, which still uses
 * the legacy .blog-left / .blog-search markup and rules in style.css /
 * responsive.css. Reuses the brand tokens already defined on body{} in
 * style.css (--medi-blue, --dark-blue, --gray-color, --white, --light-blue,
 * --font-hurme-*) instead of redefining colors/fonts.
 */

.blog-listing {
	--blog-radius-lg: 16px;
	--blog-radius-md: 12px;
	--blog-shadow: 0 4px 20px rgba(2, 27, 47, 0.08);
	--blog-shadow-hover: 0 16px 40px rgba(2, 27, 47, 0.14);
	--blog-border: #e6e9ee;
}

.blog-listing .container {
	max-width: 1280px;
}

/* ------------------------------------------------------------------ */
/* Hero — reuses template-about.php's own hero exactly (see            */
/* include/content-blog-hero.php): same .home-banner.dark-bg.sec-lo-   */
/* hero section, same #experience/#lines animated background, same     */
/* .container.text-center > .home-bnn-content structure. The h1 needs  */
/* no font-size/color/weight rule of its own — .home-bnn-content h1    */
/* (style.css) already provides the exact 65px white hero-title style  */
/* used site-wide; adding a second declaration here would just         */
/* duplicate those values. Only page-label's structural role changes,  */
/* so nothing to add for it.                                           */
/*                                                                      */
/* What genuinely doesn't exist anywhere else yet is the min-height/   */
/* padding schedule template-about.php sets inline for its own hero    */
/* (.about-page section.home-banner) — .blog-hero mirrors those exact  */
/* values so all three blog listing templates match without touching   */
/* the About page or any other .home-banner page.                     */
/* ------------------------------------------------------------------ */

.blog-listing .blog-hero {
	min-height: 750px !important;
}

@media (max-width: 991px) {
	.blog-listing .blog-hero {
		min-height: auto !important;
		padding: 100px 0 !important;
	}
}

@media (max-width: 767px) {
	.blog-listing .blog-hero {
		padding: 80px 0 !important;
	}
}

@media (max-width: 480px) {
	.blog-listing .blog-hero {
		padding: 60px 0 !important;
	}
}

/* The description sits alongside the h1 inside .home-bnn-content, which the
   global hero pattern doesn't itself lift above the #lines canvas (only the
   h1 gets that treatment, via the same style.css rule referenced above).
   Give it the same position + z-index treatment here so it's actually
   visible over the canvas. (.blog-breadcrumb gets the same treatment too,
   but that rule now lives in css/breadcrumb.css — see that file — since the
   breadcrumb component itself is shared site-wide, not just by blog pages.) */
.blog-listing .blog-hero__desc {
	position: relative;
	z-index: 99;
}

.blog-listing .blog-hero__desc {
	font-family: var(--font-hurme-sec);
	font-size: 17px;
	line-height: 1.7;
	color: #b9c8d8;
	max-width: 640px;
	margin: 16px auto 0;
}

.blog-listing .blog-hero__desc p {
	color: #b9c8d8;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Main layout: posts + sidebar                                       */
/* ------------------------------------------------------------------ */

.blog-listing .blog-main {
	padding: 70px 0 100px;
}

.blog-listing .blog-main__inner {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

.blog-listing .blog-main__posts {
	flex: 1 1 auto;
	min-width: 0;
}

.blog-listing .blog-main__sidebar {
	flex: 0 0 340px;
	max-width: 340px;
}

/* ------------------------------------------------------------------ */
/* Blog cards grid                                                    */
/* ------------------------------------------------------------------ */

.blog-listing .blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

/*
 * A lone card on the grid's last row (odd total post count on a given page —
 * category/tag/author archives can land on any count, not just the ones this
 * theme controls via posts_per_page) otherwise leaves half the row empty.
 * Span it across both columns instead of stranding it on the left with dead
 * space to its right; the card's own flex layout (media on top, body below)
 * already scales cleanly to the wider column.
 */
.blog-listing .blog-grid > .blog-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.blog-listing .blog-grid > .blog-card:last-child:nth-child(odd) .blog-card__media {
	aspect-ratio: 32 / 9;
}

.blog-listing .blog-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--blog-radius-lg);
	box-shadow: var(--blog-shadow);
	overflow: hidden;
	transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.blog-listing .blog-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--blog-shadow-hover);
}

.blog-listing .blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--light-blue);
}

.blog-listing .blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
	transition: transform 0.4s ease-in-out;
}

.blog-listing .blog-card__img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--light-blue), #cfeaf9);
}

.blog-listing .blog-card:hover .blog-card__img {
	transform: scale(1.06);
}

.blog-listing .blog-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--medi-blue);
	color: var(--white);
	font-family: var(--font-hurme-thd);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(40, 178, 250, 0.35);
}

.blog-listing .blog-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px 28px 28px;
}

.blog-listing .blog-card__title {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	color: var(--dark-blue);
	font-size: 21px;
	line-height: 1.35;
	margin: 0 0 12px;
	/* Reserve space for 2 lines (21px * 1.35 * 2) so a 1-line title doesn't pull
	   the excerpt/meta/CTA below it up, keeping those aligned across every card
	   in a row regardless of each post's actual title length. */
	min-height: calc(21px * 1.35 * 2);
}

.blog-listing .blog-card__title a {
	color: inherit;
	transition: color 0.2s ease-in-out;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-listing .blog-card__title a:hover {
	color: var(--medi-blue);
}

.blog-listing .blog-card__excerpt {
	font-family: var(--font-hurme-sec);
	font-size: 15px;
	line-height: 1.7;
	color: var(--gray-color);
	margin: 0 0 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-listing .blog-card__meta {
	list-style: none;
	display: flex;
	/* Author | Date | Reading Time | Views must stay on one line on desktop —
	   flex-wrap here was letting the last item (usually Views) drop onto its
	   own row whenever the four items' combined width came in even a few px
	   over the card's content-box width (they routinely did, by ~5-15px,
	   once the sidebar is present). nowrap + the overflow-x fallback below
	   guarantees a single line at every width instead of an inconsistent,
	   misaligned wrap. */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	align-items: center;
	margin: 0 0 22px;
	padding: 16px 0 0;
	border-top: 1px solid var(--blog-border);
}

.blog-listing .blog-card__meta::-webkit-scrollbar {
	display: none;
}

.blog-listing .blog-card__meta-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	gap: 5px;
	font-family: var(--font-hurme-sec);
	font-size: 12.5px;
	color: var(--gray-color);
}

/* Thin vertical divider between meta items instead of the flex gap alone —
   keeps spacing uniform across Author / Date / Reading Time / Views, and
   between whichever two items end up adjacent when Author or Views don't
   render (:last-child adapts to whichever item is actually last). */
.blog-listing .blog-card__meta-item:not(:last-child) {
	position: relative;
	margin-right: 10px;
	padding-right: 10px;
}

.blog-listing .blog-card__meta-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 1px;
	height: 12px;
	background: var(--blog-border);
}

.blog-listing .blog-card__meta-item i {
	color: var(--medi-blue);
	font-size: 12px;
}

.blog-listing .blog-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-hurme-thd);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--dark-blue);
	width: max-content;
}

.blog-listing .blog-card__cta i {
	font-size: 13px;
	transition: transform 0.2s ease-in-out;
}

.blog-listing .blog-card__cta:hover {
	color: var(--medi-blue);
}

.blog-listing .blog-card__cta:hover i {
	transform: translateX(4px);
}

.blog-listing .blog-empty {
	background: var(--white);
	border-radius: var(--blog-radius-lg);
	box-shadow: var(--blog-shadow);
	padding: 60px 30px;
	text-align: center;
	font-family: var(--font-hurme-sec);
	color: var(--gray-color);
}

/* ------------------------------------------------------------------ */
/* Pagination                                                         */
/* ------------------------------------------------------------------ */

/*
 * Standard WP core visually-hidden utility class. Not defined anywhere else
 * in this theme, so it's added here (scoped) for the prev/next pagination
 * links below, which rely on it to hide their "Previous"/"Next" text from
 * sighted users while keeping it for screen readers.
 */
.blog-listing .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.blog-listing .blog-pagination {
	margin-top: 48px;
}

.blog-listing .blog-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.blog-listing .blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--white);
	box-shadow: var(--blog-shadow);
	font-family: var(--font-hurme-thd);
	font-size: 14px;
	font-weight: 700;
	color: var(--dark-blue);
	transition: all 0.2s ease-in-out;
}

.blog-listing .blog-pagination a.page-numbers:hover {
	background: var(--medi-blue);
	color: var(--white);
	box-shadow: 0 8px 18px rgba(40, 178, 250, 0.35);
}

.blog-listing .blog-pagination .page-numbers.current {
	background: var(--medi-blue);
	color: var(--white);
}

.blog-listing .blog-pagination .page-numbers.dots {
	background: transparent;
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                            */
/* ------------------------------------------------------------------ */

/*
 * The sidebar include's outer element still carries Bootstrap's
 * .col-lg-5.col-xl-4 grid classes (kept so search.php/single.php/
 * template-blog.php, which render it inside a Bootstrap .row, are
 * unaffected). Those classes set a percentage max-width that assumes a
 * .row ancestor; here the sidebar sits in a plain flex layout instead; so
 * that percentage is neutralised and width is driven by .blog-main__sidebar.
 */
.blog-listing .blog-sidebar-col {
	position: sticky;
	top: 120px;
	max-width: none !important;
	flex-basis: auto !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.blog-listing .blog-sidebar-widget {
	background: var(--white);
	border-radius: var(--blog-radius-md);
	box-shadow: var(--blog-shadow);
	padding: 26px !important;
	margin-bottom: 24px;
}

.blog-listing .blog-sidebar-widget:last-child {
	margin-bottom: 0;
}

.blog-listing .side_title,
.blog-listing .side_heading {
	position: relative;
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 18px !important;
	color: var(--dark-blue);
	padding-left: 18px !important;
	margin-bottom: 20px;
}

.blog-listing .side_title::before,
.blog-listing .side_heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--medi-blue);
}

/* Search widget */

.blog-listing .blog-search-form {
	position: relative;
}

.blog-listing .blog-search-form input.search-input {
	width: 100%;
	/* style.css has an untargeted ".blog-search-form input{min-height:60px}"
	   rule (kept for single.php, which doesn't load this stylesheet); pin
	   both height and min-height here so this 52px design wins outright
	   instead of being stretched to that unrelated value. */
	height: 52px !important;
	min-height: 52px !important;
	/* Match line-height to the box (minus the 1px top/bottom border) so the
	   placeholder/typed text sits vertically centered instead of relying on
	   the browser's default line-height, which left it riding slightly high. */
	line-height: 50px !important;
	margin: 0 !important;
	border: 1px solid var(--blog-border) !important;
	border-radius: var(--blog-radius-md) !important;
	padding: 0 60px 0 18px !important;
	font-family: var(--font-hurme-sec);
	font-size: 15px;
	color: var(--dark-blue);
	transition: border-color 0.2s ease-in-out;
}

.blog-listing .blog-search-form input.search-input:hover {
	border-color: #c9d4de !important;
}

.blog-listing .blog-search-form input.search-input:focus {
	outline: none;
	border-color: var(--medi-blue) !important;
}

/*
 * The button in the sidebar markup still carries legacy classes
 * (btn, defult-btn, blue-solid-btn, btn-animation, mt-4) so single.php —
 * which doesn't load this stylesheet — keeps its original full-size
 * "SEARCH" button unchanged. Those classes fight this compact icon-button
 * design (btn-animation forces position:relative!important and a
 * mismatched ::after shine-sweep; mt-4 adds an unwanted margin-top), so
 * every property below that needs to win is !important, at higher
 * specificity than those single-class rules — deliberately, not
 * defensively copy-pasted.
 */
.blog-listing .blog-search-form .search-submit {
	position: absolute !important;
	top: 6px;
	right: 6px;
	height: 40px;
	min-height: 40px !important;
	min-width: 40px !important;
	width: 40px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: var(--blog-radius-md) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0;
	background: var(--medi-blue);
	cursor: pointer;
}

.blog-listing .blog-search-form .search-submit::after {
	display: none !important;
}

/*
 * The button's own flex centering (above) only centers the ::before
 * pseudo-element's generated box as a whole — it can't correct for the
 * icon font's internal ascent/descent, which don't sit symmetrically
 * around a line-height:1 box and so left the glyph reading slightly
 * off-centre inside the 40x40 button. Making the pseudo-element itself an
 * exact-sized (16x16) flex box, and flex-centering the glyph *inside* it,
 * removes that font-metric slop instead of nudging around it.
 */
.blog-listing .blog-search-form .search-submit::before {
	content: "\f002";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

/* Recent posts widget */

.blog-listing .side_content_div {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--blog-border);
}

.blog-listing .side_content_div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.blog-listing .side_content_div:first-child {
	padding-top: 0;
}

.blog-listing .side_img_div {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: var(--blog-radius-md);
	overflow: hidden;
}

.blog-listing .side_img_div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-listing .side_inner_div {
	flex: 1 1 auto;
	min-width: 0;
}

.blog-listing .side_inner_div p {
	font-family: var(--font-hurme-thd);
	font-size: 14px;
	font-weight: 700;
	color: var(--dark-blue);
	line-height: 1.4;
	margin-bottom: 6px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reserve 2 full lines (14px * 1.4 * 2) so a short, 1-line title doesn't
	   pull its date up and leave every recent-post row sitting at a
	   different height/alignment. */
	min-height: calc(14px * 1.4 * 2);
}

.blog-listing .side_inner_div a:hover p {
	color: var(--medi-blue);
}

.blog-listing .side_inner_div ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-listing .side_inner_div ul li p {
	font-family: var(--font-hurme-sec);
	font-weight: 400;
	font-size: 12px !important;
	color: var(--gray-color);
	margin: 0 !important;
	-webkit-line-clamp: unset;
}

/* Category list */

.blog-listing .category_inner_div ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-listing .category_inner_div ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	border-bottom: 0;
	transition: background-color 0.2s ease-in-out;
}

.blog-listing .category_inner_div ul li:not(:last-child) {
	margin-bottom: 4px;
}

.blog-listing .category_inner_div ul li:hover {
	background: var(--light-blue);
}

.blog-listing .category_inner_div ul li a {
	font-family: var(--font-hurme-sec);
	font-size: 15px;
	color: var(--dark-blue);
	transition: color 0.2s ease-in-out;
	flex: 1 1 auto;
	min-width: 0;
}

.blog-listing .category_inner_div ul li a:hover {
	color: var(--medi-blue);
}

.blog-listing .category_inner_div ul li span {
	flex: 0 0 auto;
	font-family: var(--font-hurme-sec);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--gray-color);
	background: var(--light-blue);
	border-radius: 999px;
	padding: 4px 10px;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Active state: the category archive currently being viewed. */
.blog-listing .category_inner_div ul li.current-cat {
	background: var(--medi-blue);
}

.blog-listing .category_inner_div ul li.current-cat a {
	color: var(--white);
	font-weight: 700;
}

.blog-listing .category_inner_div ul li.current-cat a:hover {
	color: var(--white);
}

.blog-listing .category_inner_div ul li.current-cat span {
	background: rgba(255, 255, 255, 0.25);
	color: var(--white);
}

/* ------------------------------------------------------------------ */
/* Tablet                                                              */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1199px) and (min-width: 768px) {
	.blog-listing .blog-main__inner {
		gap: 32px;
	}

	.blog-listing .blog-main__sidebar {
		flex: 0 0 300px;
		max-width: 300px;
	}

	.blog-listing .blog-grid {
		gap: 24px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile: single-column cards, sidebar moves below                   */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
	.blog-listing .blog-hero__desc {
		font-size: 15px;
	}

	.blog-listing .blog-main {
		padding: 40px 0 60px;
	}

	.blog-listing .blog-main__inner {
		flex-direction: column;
		gap: 40px;
	}

	.blog-listing .blog-main__sidebar {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}

	.blog-listing .blog-sidebar-col {
		position: static;
	}

	.blog-listing .blog-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.blog-listing .blog-card__body {
		padding: 22px 20px 24px;
	}

	.blog-listing .blog-card__title {
		font-size: 19px;
	}

	.blog-listing .blog-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------ */
/* Single blog post (single.php)                                      */
/*                                                                     */
/* single.php wraps its markup in .blog-listing.blog-single and reuses */
/* the hero, .blog-main__inner layout, sidebar and .blog-card meta     */
/* classes above as-is. Everything below is scoped under .blog-single */
/* so it only ever applies to the single post template.                */
/* ------------------------------------------------------------------ */

.blog-single .blog-main__posts {
	background: var(--white);
	border-radius: var(--blog-radius-lg);
	box-shadow: var(--blog-shadow);
	overflow: hidden;
}

.blog-single .blog-single-article {
	padding: 36px 40px 44px;
}

.blog-single .blog-single__featured {
	margin: -36px -40px 28px;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--light-blue);
}

.blog-single .blog-single__featured-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

/*
 * Two groups: Category on the left, Author/Date/Reading-time/Views grouped
 * together on the right, with space between the two groups. This is the one
 * layout in this file that genuinely needs justify-content:space-between —
 * it's a two-item row (.blog-single-meta-left, .blog-single-meta-right) and
 * space-between is exactly "push these two groups to opposite ends", not a
 * stand-in for sizing a single element. Neither group grows to fill space
 * itself (no flex:1 on either); each is inline-flex, sized to its own
 * content, so only the gap BETWEEN them ever changes with the available
 * width. flex-wrap lets the whole row drop to two stacked lines once it no
 * longer fits.
 */
.blog-single .blog-single-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	margin-bottom: 32px;
}

.blog-single .blog-single-meta-left {
	display: inline-flex;
	align-items: center;
}

/* Author/Date/Reading-time/Views stay grouped together, compact, regardless
   of how much space is free between this group and Category. */
.blog-single .blog-single-meta-right {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

/*
 * Light chip + dark text/icon (not the brand accent blue used for the icon
 * circles elsewhere in this row) is a deliberate contrast fix, not just a
 * style choice: --light-blue background with --medi-blue text measures
 * ~2.1:1 contrast at this 12px size — well under the 4.5:1 WCAG minimum for
 * text. --dark-blue is also an existing brand colour (used for headings and
 * card titles site-wide), pairs with the same light-blue chip, and reaches
 * a large, comfortable contrast ratio instead. Weight is reduced (700->600)
 * and the pill is a touch smaller (padding/letter-spacing) so it reads as a
 * secondary label rather than competing with the meta text next to it.
 */
.blog-single .blog-single__category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--light-blue);
	color: var(--dark-blue);
	font-family: var(--font-hurme-thd);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 6px 14px;
	border-radius: 999px;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.blog-single .blog-single__category::before {
	content: "\f07b";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 11px;
	color: var(--medi-blue);
}

.blog-single .blog-single__category:hover {
	background: var(--medi-blue);
	color: var(--white);
}

.blog-single .blog-single__category:hover::before {
	color: var(--white);
}

/* Premium SaaS-blog meta items — each gets its own small tinted icon badge
   instead of a bare glyph. */
.blog-single .blog-single__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-hurme-sec);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dark-blue);
}

.blog-single .blog-single__meta-item--date,
.blog-single .blog-single__meta-item--read-time,
.blog-single .blog-single__meta-item--views {
	font-weight: 500;
	color: var(--gray-color);
}

.blog-single .blog-single__meta-item i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--light-blue);
	color: var(--medi-blue);
	font-size: 12px;
}

/*
 * "•" before every item except the first child within the right-hand group
 * (the category badge, when present) — Author on the left never gets one,
 * it's its own separate group. Each .blog-single__meta-item is itself
 * display:inline-flex with gap:9px between its own children (icon + text) —
 * the ::before dot becomes that item's first flex child, so the same
 * gap:9px already spaces it from the icon that follows; no extra margin
 * needed here.
 */
.blog-single .blog-single-meta-right > *:not(:first-child)::before {
	content: "•";
	font-size: 14px;
	color: var(--blog-border);
}

@media screen and (max-width: 480px) {
	.blog-single .blog-single-meta-right {
		gap: 6px 10px;
	}
}

/* Article typography — headings, paragraphs, blockquote, lists, tables,
   code and images inside the ACF flexible-content body. Scoped to
   .blog-single__body so nothing on any other template is affected. */
.blog-single__body {
	font-family: var(--font-hurme-sec);
	font-size: 16px;
	line-height: 1.8;
	color: var(--gray-color);
}

.blog-single__body h1,
.blog-single__body h2,
.blog-single__body h3,
.blog-single__body h4,
.blog-single__body h5,
.blog-single__body h6 {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	color: var(--dark-blue);
	line-height: 1.35;
	margin: 40px 0 18px;
}

.blog-single__body h2 {
	font-size: 28px;
}

.blog-single__body h3 {
	font-size: 23px;
}

.blog-single__body h4 {
	font-size: 19px;
}

.blog-single__body > *:first-child {
	margin-top: 0;
}

.blog-single__body p {
	margin: 0 0 22px;
}

.blog-single__body ul,
.blog-single__body ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.blog-single__body li {
	margin-bottom: 10px;
}

.blog-single__body a {
	color: var(--medi-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.blog-single__body a:hover {
	color: var(--dark-blue);
}

.blog-single__body blockquote {
	margin: 28px 0;
	padding: 20px 26px;
	border-left: 4px solid var(--medi-blue);
	background: var(--light-blue);
	border-radius: 0 var(--blog-radius-md) var(--blog-radius-md) 0;
	font-family: var(--font-hurme-sec);
	font-style: italic;
	color: var(--dark-blue);
}

.blog-single__body blockquote p:last-child {
	margin-bottom: 0;
}

.blog-single__body code {
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 14px;
	background: var(--light-blue);
	color: var(--dark-blue);
	padding: 2px 6px;
	border-radius: 4px;
}

.blog-single__body pre {
	margin: 0 0 22px;
	padding: 20px 22px;
	background: #0b1e33;
	border-radius: var(--blog-radius-md);
	overflow-x: auto;
}

.blog-single__body pre code {
	background: none;
	color: #e6e9ee;
	padding: 0;
}

.blog-single__body table {
	width: 100%;
	margin: 0 0 22px;
	border-collapse: collapse;
	font-size: 15px;
}

.blog-single__body table th,
.blog-single__body table td {
	padding: 12px 16px;
	border: 1px solid var(--blog-border);
	text-align: left;
}

.blog-single__body table th {
	background: var(--light-blue);
	font-family: var(--font-hurme-thd);
	color: var(--dark-blue);
}

.blog-single__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--blog-radius-md);
	margin: 8px 0 22px;
	display: block;
}

/* Tags */

.blog-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--blog-border);
}

.blog-tags__label {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 14px;
	color: var(--dark-blue);
}

.blog-tags__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.blog-tags__list a {
	display: inline-block;
	font-family: var(--font-hurme-sec);
	font-size: 13px;
	color: var(--dark-blue);
	background: var(--light-blue);
	padding: 7px 16px;
	border-radius: 999px;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.blog-tags__list a:hover {
	background: var(--medi-blue);
	color: var(--white);
}

/* Author box */

.blog-single__author {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	padding: 22px;
	background: var(--light-blue);
	border-radius: var(--blog-radius-md);
}

.blog-single__author-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--medi-blue);
	color: var(--white);
	font-size: 18px;
}

.blog-single__author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.blog-single__author-label {
	font-family: var(--font-hurme-sec);
	font-size: 12px;
	color: var(--gray-color);
}

.blog-single__author-name {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 15px;
	color: var(--dark-blue);
}

/* Comments */

.blog-single .comment_sec {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--blog-border);
}

/* Related posts */

.blog-related {
	padding: 0 0 100px;
}

.blog-related__heading {
	font-family: var(--font-hurme-thd);
	font-weight: 700;
	font-size: 28px;
	color: var(--dark-blue);
	text-align: center;
	margin: 0 0 36px;
}

/*
 * Related Posts reuses .blog-grid (same class as the main Blog page's post
 * grid) so it needed no CSS of its own beyond the column count — but that
 * also meant it inherited the "lone last card spans full width" rule above
 * (.blog-grid > .blog-card:last-child:nth-child(odd)), which was written for
 * the main grid's 2 columns. In a grid actually laid out with 3 columns, 3
 * total cards is a complete row, not a leftover — nth-child(odd) still
 * matched (position 3 is odd) and stretched the 3rd card across the whole
 * row anyway. Root cause: two different grids sharing one "leftover card"
 * rule that only one of them means. Related Posts always queries exactly 3
 * posts (single.php), so 3 columns puts them in one full row with equal
 * widths and no leftover to stretch — the opt-out below is kept anyway as a
 * defensive guard in case that count ever changes.
 */
.blog-related .blog-grid {
	grid-template-columns: repeat(3, 1fr);
}

.blog-related .blog-grid > .blog-card:last-child:nth-child(odd) {
	grid-column: auto;
}

.blog-related .blog-grid > .blog-card:last-child:nth-child(odd) .blog-card__media {
	aspect-ratio: 16 / 9;
}

@media screen and (max-width: 991px) {
	.blog-related .blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.blog-single .blog-single-article {
		padding: 26px 20px 30px;
	}

	.blog-single .blog-single__featured {
		margin: -26px -20px 22px;
	}

	.blog-single__body h2 {
		font-size: 23px;
	}

	.blog-single__body h3 {
		font-size: 20px;
	}

	.blog-related .blog-grid {
		grid-template-columns: 1fr;
	}

	.blog-related__heading {
		font-size: 23px;
	}
}

/*
 * Keyboard-focus indicator for every interactive element these blog
 * templates introduce (card titles/CTAs, pagination, sidebar search/
 * category/recent-post links, tags, the category badge). style.css strips
 * the default browser outline SITE-WIDE via `a:focus, a:active{outline:none
 * !important}` and `button,...,a,...{outline:none!important}` — both
 * !important, so tabbing through every page (not just these) leaves no
 * visible focus indicator. !important here is the only way to win against
 * that existing !important rule; it's scoped to .blog-listing/.blog-single
 * only, so it restores a focus ring for just the elements this redesign
 * added, without touching style.css or any other page's behaviour.
 */
.blog-listing a:focus-visible,
.blog-listing button:focus-visible,
.blog-listing input:focus-visible,
.blog-single a:focus-visible,
.blog-single button:focus-visible {
	outline: 2px solid var(--medi-blue) !important;
	outline-offset: 2px;
}