/*
 Theme Name:   Quiety Child
 Theme URI:    https://quiety-wp.themetags.com/
 Description:  Quiety is a modern and clean WordPress theme suitable for any kind of Digital Agency, Digital Marketing and Seo Marketing.
 Author:       ThemeTags
 Author URI:   https://themetags.com/
 Template:     quiety
 Version:      4.0.8
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  quiety
*/

.site-header .site-logo img {
/* 	width: 100% !important; */
	height: 44px;
}

.tt-team__name {
	font-size: 16px !important;
}

.tt-team__info {
    padding: 15px 5px 0 !important;
}

/* .tt-count-info__logo img {
	height: 100% !important;
} */

.tt-menu-item .wrapper .box-title {
	font-size: 16px !important;
}

.job-single {
	padding: 70px 0 !important;
}

.salary-info {
	width: auto;
	padding: 20px !important;
}

.salary-info .salary {
	font-size: 24px !important;
}

/* .site-main-menu li.menu-item-has-children .sub-menu li a:not(.tt-btn-link) {
	font-size: 12px !important;
	padding: 5px 5px !important;
} */

.page-header .page-header_title {
	text-align: left !important;
	max-width: 100% !important;
	color: #071C4D !important;
}

.page-header .page-header-description {
	color: #071C4D !important;
	text-align: left !important;
	font-size: 20px !important;
	max-width: 80% !important;
}

.single-post-header-bg .single-post-title {
	text-align: left !important;
	max-width: 100% !important;
}

.page-header .breadcrumbs {
	display: none !important;
}

span.mk-subtitle {
	background: #ffffff !important;
	color: #175cff !important;
}

.tt-team__social {
	display: none !important;
}

/* div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
	background-color: #357ea4 !important;
} */

/* .site-header:not(.mobile-header) .site-main-menu li.menu-item-has-children .sub-menu {
	min-width: 800px !important;
} */

//////////////// Job Detail Page /////////////////////
/* @media only screen and (min-width: 375px) and (max-width: 425px) {
	.job-header .header-content .single-post-title {
	font-size: 28px !important;
	margin-bottom: 20px !important;
	}
} */

.tt-job__category {
	padding: 6px 22px !important;
	font-size: 11px !important;
	margin-right: -20px !important;
}

.job-header .header-content .single-post-title {
	font-size: 28px !important;
	margin-bottom: 20px !important;
}
.salary-info {
	margin-top: 20px !important;
}

.site-header:not(.mobile-header) .site-main-menu li.menu-item-has-children .sub-menu li a:not(.tt-btn-link)
 {
    font-size: 13px !important;
    padding: 5px 5px !important;
    display: block !important;
    line-height: 1.5 !important;
    color: #071C4D !important;
    font-weight: 500 !important;
}

.site-header:not(.mobile-header) .site-main-menu li.menu-item-has-children .sub-menu li a:not(.tt-btn-link):hover {
	color: #357EA4 !important;
}

.tt-btn {
	border: 2px solid #FF6B1A !important;
	color: #fff !important;
	background-color: #FF6B1A !important;
}

.quiety-accordion .accordion-button.collapsed {
	color: #357ea4 !important;
}

.quiety-accordion .accordion-button.collapsed:hover {
	color: #fff !important;
}

#back-to-top {
	background: #FF6B1A !important;
}

.site-header.header-width .container {
	max-width: 1255px;
}

.site-header:not(.mobile-header) .menu-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 0;
}

.site-header:not(.mobile-header) .site-main-menu {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	min-width: 0 !important;
	margin-right: 160px !important;
}

.site-header:not(.mobile-header) .site-main-menu > li > a {
	white-space: nowrap;
}

.site-header:not(.mobile-header) .site-main-menu li:not(:last-child) {
	margin-right: 52px !important;
}

.site-header:not(.mobile-header) .nav-right {
	margin-left: 24px;
	flex-shrink: 0;
}

.site-header:not(.mobile-header) .nav-right .tt-btn {
	padding: 8px 20px;
	white-space: nowrap;
}

/* Sidebar Categories widget — clean list with accent hover/active state */
.sidebar .wp-block-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar .wp-block-categories-list li.cat-item {
	margin: 0;
	border-bottom: 1px solid #eef1f6;
}

.sidebar .wp-block-categories-list li.cat-item:last-child {
	border-bottom: none;
}

.sidebar .wp-block-categories-list li.cat-item a {
	display: block;
	padding: 12px 14px;
	color: #4a5568;
	font-size: 17px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar .wp-block-categories-list li.cat-item a:hover {
	background-color: #f2f6ff;
	color: #175cff;
}

.sidebar .wp-block-categories-list li.cat-item-all a {
	font-weight: 700;
	color: #071C4D;
}

.sidebar .wp-block-categories-list li.current-cat a {
	background-color: #f2f6ff;
	color: #175cff;
	font-weight: 700;
}

/* Remove the default blue underline under the Categories widget heading */
.sidebar h2.wp-block-heading:after {
	content: none;
}

.sidebar h2.wp-block-heading {
	font-size: 34px !important;
	font-weight: 700;
}

/* Case Study single page — breathing room before the site footer */
.case-study-content-area {
	padding-bottom: 60px;
}

.case-study-content-area #comments {
	margin-bottom: 40px;
}

.case-study-content-area .post-single .feature-image {
	margin-top: 120px;
}

/* Mobile-only floating bottom bar */
.mobile-floating-bar {
	display: none;
}

@media (max-width: 767px) {
	.mobile-floating-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: -1px;
		z-index: 9999;
		border-radius: 10px 10px 0 0;
		background: #FF6B1A;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	}

	.mobile-floating-bar .mfb-item {
		flex: 1;
		text-align: center;
		color: #FFFFFF;
		padding: 8px 0 6px;
		font-size: 11px;
		text-decoration: none;
		line-height: 1.4;
	}

	.mobile-floating-bar .mfb-item i {
		display: block;
		font-size: 18px;
		margin-bottom: 2px;
	}

	/* keep the fixed bar from covering footer content on mobile */
	body {
		padding-bottom: 56px;
	}

	.calendly-badge-widget {
		display: none !important;
	}
}

/* ===================================================================
   Blog Listing redesign — card grid (Quiety Blog Posts, Style Ten)
   and the live sidebar filter (Quiety Blog Filter widget)
   =================================================================== */
:root {
	--wblog-blue: #075f92;
	--wblog-orange: #ff6b1a;
	--wblog-orange2: #ff9a3d;
	--wblog-ink700: #123047;
	--wblog-ink600: #254860;
	--wblog-ink500: #31546c;
	--wblog-ink300: #667789;
	--wblog-ink200: #99adbb;
	--wblog-ink100: #b7c6d1;
	--wblog-teal: #1da7a8;
	--wblog-soft: #f5f9fc;
	--wblog-line: #dfe9f0;
	--wblog-line2: #e1edf3;
	--wblog-shadow-card: 0 16px 45px rgba(18, 48, 71, .07);
	--wblog-shadow-card-hover: 0 26px 65px rgba(7, 95, 146, .14);
	--wblog-radius: 26px;
}

/* -- card --
   .wblog-col is the Bootstrap col-* wrapper the tt-blog widget renders; Bootstrap's
   .row/.col gutters are horizontal-only, so the vertical gap between rows has to be
   added here explicitly. */
.wblog-col {
	margin-bottom: 22px;
}

.wblog-card {
	position: relative;
	background: #fff;
	background-clip: padding-box;
	border: 1px solid transparent;
	border-radius: var(--wblog-radius);
	box-shadow: var(--wblog-shadow-card);
	transition: .28s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wblog-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--wblog-shadow-card-hover);
}

/* Rotating gradient ring — a 1px conic-gradient "beam" that sweeps around the
   card border on a loop, speeding up on hover. Built as a masked ::after so only
   the border itself is painted (the middle stays fully transparent); ring lives
   slightly outside the card (inset:-1px), which is why .wblog-card can't use
   overflow:hidden — the image's own top corners are rounded instead, below. */
.wblog-card:after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--wblog-beam),
		transparent 0deg,
		rgba(7, 95, 146, .14) 40deg,
		var(--wblog-orange) 78deg,
		var(--wblog-orange2) 98deg,
		rgba(101, 193, 239, .95) 124deg,
		rgba(7, 95, 146, .14) 164deg,
		transparent 224deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: wblogBeam 5s linear infinite;
	pointer-events: none;
	z-index: 2;
}

@property --wblog-beam {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes wblogBeam {
	to {
		--wblog-beam: 360deg;
	}
}

.wblog-card:hover:after {
	animation-duration: 2.2s;
}

.wblog-media {
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: var(--wblog-radius) var(--wblog-radius) 0 0;
	background: var(--wblog-soft);
}

.wblog-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.wblog-card:hover .wblog-media img {
	transform: scale(1.05);
}

.wblog-ribbon {
	position: absolute;
	left: 14px;
	top: 14px;
	background: linear-gradient(135deg, var(--wblog-orange), var(--wblog-orange2));
	color: #fff;
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-shadow: 0 10px 24px rgba(255, 107, 26, .28);
	white-space: nowrap;
}

.wblog-read {
	position: absolute;
	right: 11px;
	bottom: 11px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 10.5px;
	font-weight: 800;
	color: var(--wblog-ink500);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.wblog-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wblog-cats {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 11px;
}

.wblog-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #eef6fb;
	color: var(--wblog-blue);
	font-weight: 800;
	font-size: 10.5px;
	border: 1px solid rgba(7, 95, 146, .10);
	text-decoration: none !important;
}

.wblog-cat-warm {
	background: #fff3ea;
	color: #c35312;
	border-color: #ffd7bd;
}

.wblog-title {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.28;
	font-weight: 700;
}

.wblog-title a {
	color: var(--wblog-ink700) !important;
}

.wblog-card:hover .wblog-title a {
	color: var(--wblog-blue) !important;
}

.wblog-excerpt {
	margin: 0 0 15px;
	color: var(--wblog-ink300);
	line-height: 1.6;
	font-size: 13.5px;
}

.wblog-foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--wblog-line2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wblog-author {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 12px;
}

.wblog-author .post-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--wblog-ink700) !important;
}

.wblog-author img.avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

.wblog-author .posted-on {
	font-size: 10.5px;
	color: var(--wblog-ink300);
	font-weight: 700;
}

.wblog-author .posted-on:before {
	content: "·";
	margin-right: 8px;
	color: var(--wblog-ink200);
}

.wblog-arrow {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wblog-soft);
	color: var(--wblog-blue) !important;
	font-size: 13px;
	transition: .25s ease;
	flex-shrink: 0;
}

.wblog-card:hover .wblog-arrow {
	background: linear-gradient(135deg, var(--wblog-orange), var(--wblog-orange2));
	color: #fff !important;
	transform: translateX(3px);
}

/* -- case study card extras (style-11.php: head/meta above the image, services/
   stack, proof stats, CTA) -- */
.wcs-title {
	padding: 15px 22px 0;
}

.wcs-meta {
	padding: 7px 22px 0;
	margin-bottom: 0;
}

.wcs-meta .wblog-cat {
	padding: 4px 9px;
}

.wcs-media {
	margin: 10px 18px 0;
	border-radius: 16px;
	aspect-ratio: 2 / 1;
}

.wcs-card .wblog-body {
	padding: 14px 22px 6px;
}

.wcs-row {
	margin-bottom: 8px;
}

.wcs-rowlabel {
	display: block;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--wblog-orange);
	margin-bottom: 6px;
}

.wcs-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.wcs-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--wblog-soft);
	color: var(--wblog-ink600);
	font-weight: 800;
	font-size: 11.5px;
	border: 1px solid var(--wblog-line2);
}

.wcs-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.wcs-stack span {
	font-size: 11px;
	font-weight: 700;
	color: var(--wblog-ink300);
}

.wcs-stack span + span:before {
	content: "·";
	margin-right: 6px;
	color: var(--wblog-ink100);
}

.wcs-proof {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.wcs-proof li {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #fff7ef, #effaff);
	border: 1px solid #dcecf5;
	border-radius: 12px;
	padding: 6px 10px;
	font-size: 12.5px;
	color: var(--wblog-ink700);
	font-weight: 800;
}

.wcs-proof i {
	color: var(--wblog-teal);
	flex-shrink: 0;
}

.wcs-viewcta {
	font-weight: 800;
	font-size: 13.5px;
	color: var(--wblog-blue) !important;
	transition: .25s ease;
}

.wcs-viewcta:hover {
	color: var(--wblog-orange) !important;
}

.wcs-foot {
	padding-top: 11px;
}

/* -- case studies hero -- */
.wcs-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(circle at 82% 6%, rgba(255, 107, 26, .16), transparent 34%),
		radial-gradient(circle at 6% 96%, rgba(29, 167, 168, .13), transparent 32%),
		linear-gradient(180deg, #f8fcff 0%, #fff 84%);
}

.wcs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .8;
	background-image:
		linear-gradient(rgba(7, 95, 146, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(7, 95, 146, .07) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 86%);
	mask-image: linear-gradient(180deg, #000, transparent 86%);
}

.wcs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(29, 167, 168, .5), transparent 68%),
		radial-gradient(circle, rgba(255, 107, 26, .55), transparent 68%);
	background-size: 170px 170px, 120px 120px;
	background-repeat: no-repeat, no-repeat;
	background-position: 3% 26%, 92% 14%;
	filter: blur(6px);
	animation: wcsOrbFloat 7s ease-in-out infinite;
}

@keyframes wcsOrbFloat {
	50% {
		background-position: calc(3% + 12px) calc(26% - 22px), calc(92% + 12px) calc(14% - 22px);
	}
}

.wcs-crumb {
	font-size: 13px;
	font-weight: 700;
	color: var(--wblog-ink500);
	margin-bottom: 18px;
}

.wcs-crumb a {
	color: var(--wblog-blue);
}

.wcs-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff1e8;
	color: var(--wblog-orange);
	font-weight: 800;
	font-size: 12.5px;
	margin-bottom: 14px;
}

.wcs-hero h1 {
	font-size: 40px;
	line-height: 1.15;
	font-weight: 800;
	margin: 0;
}

.wcs-lead {
	font-size: 16px;
	color: var(--wblog-ink500);
	max-width: 620px;
	margin-top: 12px;
}

.wcs-hnote {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	background-clip: padding-box;
	border: 1px solid transparent;
	border-radius: var(--wblog-radius);
	padding: 16px 18px;
	box-shadow: 0 6px 18px rgba(16, 24, 40, .04);
	margin-bottom: 16px;
	transition: .28s ease;
}

.wcs-hnote:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(16, 24, 40, .1);
}

.wcs-hnote::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--wblog-beam),
		transparent 0deg,
		rgba(7, 95, 146, .14) 40deg,
		var(--wblog-orange) 78deg,
		var(--wblog-orange2) 98deg,
		rgba(101, 193, 239, .95) 124deg,
		rgba(7, 95, 146, .14) 164deg,
		transparent 224deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: wblogBeam 5s linear infinite;
	pointer-events: none;
	z-index: 2;
}

.wcs-hnote:hover::after {
	animation-duration: 2.2s;
}

.wcs-hnote .tt-icon-box__icon-container {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 16px;
	margin-bottom: 0;
	transition: .28s ease;
}

.wcs-hnote-warm .tt-icon-box__icon-container {
	background-color: #fff1e8 !important;
	color: var(--wblog-orange) !important;
}

.wcs-hnote-warm .tt-icon-box__icon-container svg path {
	fill: var(--wblog-orange) !important;
	transition: .28s ease;
}

.wcs-hnote-warm:hover .tt-icon-box__icon-container {
	background: linear-gradient(135deg, var(--wblog-orange), var(--wblog-orange2)) !important;
	box-shadow: 0 10px 22px rgba(255, 107, 26, .3);
}

.wcs-hnote-warm:hover .tt-icon-box__icon-container svg path {
	fill: #fff !important;
}

.wcs-hnote-cool .tt-icon-box__icon-container {
	background-color: #e8f2fb !important;
	color: var(--wblog-blue) !important;
}

.wcs-hnote-cool .tt-icon-box__icon-container svg path {
	fill: var(--wblog-blue) !important;
	transition: .28s ease;
}

.wcs-hnote-cool:hover .tt-icon-box__icon-container {
	background: linear-gradient(135deg, var(--wblog-blue), var(--wblog-teal)) !important;
	box-shadow: 0 10px 22px rgba(7, 95, 146, .28);
}

.wcs-hnote-cool:hover .tt-icon-box__icon-container svg path {
	fill: #fff !important;
}

.wcs-hnote .tt-icon-box__title {
	font-size: 14px;
	font-weight: 800;
	color: var(--wblog-ink700);
	margin-bottom: 4px;
}

.wcs-hnote .tt-icon-box__description {
	font-size: 12.5px;
	color: var(--wblog-ink500);
}

/* -- sidebar filter -- */
.wblog-filter {
	position: sticky;
	top: 100px;
	display: grid;
	gap: 16px;
}

.wblog-search {
	position: relative !important;
	display: block !important;
}

.wblog-search i {
	position: absolute !important;
	left: 23px;
	top: 36% !important;
	transform: translateY(-50%) !important;
	color: var(--wblog-ink200) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	width: auto;
	height: auto;
	display: inline-block;
	pointer-events: none;
	z-index: 1;
}

.wblog-search input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

.wblog-search input[type="search"]::-webkit-search-decoration,
.wblog-search input[type="search"]::-webkit-search-cancel-button,
.wblog-search input[type="search"]::-webkit-search-results-button,
.wblog-search input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

.wblog-search input {
	width: 100% !important;
	height: auto !important;
	padding: 15px 18px 15px 46px !important;
	border-radius: 999px !important;
	border: 1px solid var(--wblog-line) !important;
	background: #fff !important;
	font-family: inherit;
	font-size: 15px;
	color: var(--wblog-ink700) !important;
	box-shadow: var(--wblog-shadow-card);
}

.wblog-search input:focus {
	border-color: var(--wblog-blue);
	outline: none;
}

.wblog-sidelabel {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--wblog-ink300);
}

.wblog-catlist {
	display: grid;
	gap: 4px;
}

/* !important below: the parent theme has a blanket `button{background-color:var(--color_primary);
   color:#fff;padding:11px 41px}` rule (app.css) that otherwise wins visually even though this
   class selector is technically more specific — forcing it explicitly avoids relying on that. */
.wblog-catbtn {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100% !important;
	text-align: left;
	border: 1px solid transparent !important;
	background: none !important;
	border-radius: 12px !important;
	padding: 9px 14px !important;
	height: auto !important;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	color: var(--wblog-ink500) !important;
	cursor: pointer;
	transition: .25s ease;
}

.wblog-catbtn:hover {
	background: var(--wblog-soft) !important;
	color: var(--wblog-blue) !important;
}

.wblog-catbtn .wblog-n {
	font-size: 12px;
	font-weight: 800;
	color: var(--wblog-ink200) !important;
	background: var(--wblog-soft) !important;
	border-radius: 999px;
	padding: 3px 9px;
}

.wblog-catbtn[aria-pressed="true"] {
	background: var(--wblog-orange) !important;
	border-color: var(--wblog-blue) !important;
	color: #fff !important;
}

.wblog-catbtn[aria-pressed="true"] .wblog-n {
	background: rgba(255, 255, 255, .18) !important;
	color: #fff !important;
}

.wblog-count {
	font-size: 14px;
	color: var(--wblog-ink300);
	font-weight: 700;
	margin: 0 0 12px;
}

/* Case Studies filter bar variant — add the "wcs-filterbar" CSS class to the
   Quiety Blog Filter widget itself to turn its vertical sidebar list into a
   horizontal, scrollable chip row with no search box (mockup has none). Blog's
   sidebar instance doesn't carry this class, so it's unaffected. */
.wcs-filterbar .wblog-filter {
	position: static;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "label chips" "count count";
	align-items: center;
	column-gap: 18px;
	row-gap: 14px;
}

.wcs-filterbar .wblog-search {
	display: none !important;
}

.wcs-filterbar .wblog-sidelabel {
	grid-area: label;
	margin: 0;
	white-space: nowrap;
	font-weight: 900;
	color: var(--wblog-ink300);
}

.wcs-filterbar .wblog-count {
	grid-area: count;
	margin: 0;
}

.wcs-filterbar .wblog-catlist {
	grid-area: chips;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	gap: 8px;
	padding: 2px 0;
	/* Grid items default to min-width: auto, which refuses to shrink below the
	   chip row's full (max-content) width — overriding it is what actually lets
	   overflow-x scroll instead of the row just pushing past the viewport. */
	min-width: 0;
	cursor: grab;
}

.wcs-filterbar .wblog-catlist::-webkit-scrollbar {
	display: none;
}

/* Click-and-drag scrolling (see the mousedown/mousemove/mouseup handler inlined
   in quiety_blog_filter.php) — no visible scrollbar and no touchpad means a
   mouse user needs to be able to grab and drag the row directly. */
.wblog-catlist.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-behavior: auto;
}

.wcs-filterbar .wblog-catbtn {
	width: auto !important;
	flex: 0 0 auto;
	justify-content: center;
	border: 1px solid var(--wblog-line2) !important;
	border-radius: 999px !important;
	padding: 10px 16px !important;
	white-space: nowrap;
}

.wcs-filterbar .wblog-catbtn:hover {
	border-color: var(--wblog-orange) !important;
	color: var(--wblog-orange) !important;
	background: none !important;
	transform: translateY(-2px);
}

.wcs-filterbar .wblog-catbtn .wblog-n {
	background: none !important;
	opacity: .6;
	padding: 0;
	margin-left: 2px;
	color:#fff;
}

.wcs-filterbar .wblog-catbtn:hover .wblog-n {
	color: var(--wblog-orange) !important;
}

.wcs-filterbar .wblog-catbtn[aria-pressed="true"] .wblog-n {
	background: none !important;
	opacity: .85;
}

.wblog-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 70px 20px;
	border: 1px dashed var(--wblog-line);
	border-radius: var(--wblog-radius);
	color: var(--wblog-ink300);
	background: var(--wblog-soft);
}

.wblog-empty b {
	display: block;
	color: var(--wblog-ink700);
	font-size: 19px;
	margin-bottom: 8px;
}

.wblog-empty .wblog-clear {
	border: none;
	background: none;
	color: var(--wblog-blue);
	font-weight: 800;
	cursor: pointer;
	text-decoration: underline;
}

/* -- pagination (output by paginate_links() in quiety_blog.php, or client-side by quiety_blog_filter.php) -- */
.wblog-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 40px;
	position: relative;
	z-index: 2;
}

.wblog-pager .page-numbers {
	min-width: 44px;
	height: 44px;
	border-radius: 999px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--wblog-line);
	background: #fff !important;
	font-weight: 800 !important;
	font-size: 14px;
	color: #456070 !important;
	padding: 0 16px !important;
	height: 44px !important;
	transition: .25s ease;
	text-decoration: none !important;
	cursor: pointer;
}

.wblog-pager .page-numbers:hover:not(.current) {
	border-color: var(--wblog-orange);
	color: var(--wblog-orange) !important;
	transform: translateY(-2px);
}

.wblog-pager .page-numbers.current {
	background: var(--wblog-orange) !important;
	color: #fff !important;
}

.wblog-pager .page-numbers.dots {
	background: none !important;
	border-color: transparent;
}

/* -- infinite-scroll sentinel/loader, replaces the numbered pager on the
   plain (unrouted) blog and case-study listing pages — see quiety_blog_filter.php -- */
.wblog-loadmore {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	padding: 26px 0;
	color: var(--wblog-ink300);
	font-weight: 700;
	font-size: 14px;
	opacity: 0;
	transition: opacity .2s ease;
}

.wblog-loadmore.is-loading {
	opacity: 1;
}

.wblog-loadmore-spin {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--wblog-line);
	border-top-color: var(--wblog-orange);
	animation: wblog-spin .7s linear infinite;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity .2s ease;
}

.wblog-loadmore.is-loading .wblog-loadmore-spin {
	opacity: 1;
}

@keyframes wblog-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wblog-loadmore-spin {
		animation: none;
	}
}

@media (max-width: 991px) {
	.wblog-filter {
		position: static;
	}

	.wblog-catlist {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		padding-bottom: 6px;
		cursor: grab;
	}

	.wblog-catbtn {
		width: auto;
		flex: 0 0 auto;
		border-radius: 999px;
		border-color: var(--wblog-line);
		background: #fff;
		padding: 11px 17px;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* -- Hero background: dotted-grid mesh + floating blurred orbs --
   Add the CSS class "hero-mesh-bg" to the Hero section/container in
   Elementor (Advanced tab > CSS Classes). No extra HTML/widget needed —
   the grid and the two orbs are pure ::before/::after layers. Leave the
   section's own Elementor Background setting empty so it doesn't fight
   with this. */
.hero-mesh-bg {
	position: relative !important;
	isolation: isolate;
	overflow: hidden !important;
	background: radial-gradient(circle at 78% 8%, rgba(255, 107, 26, .16), transparent 32%),
		linear-gradient(180deg, #f8fcff 0%, #fff 82%) !important;
}

.hero-mesh-bg:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .8;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(7, 95, 146, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(7, 95, 146, .07) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 86%);
	mask-image: linear-gradient(180deg, #000, transparent 86%);
}

.hero-mesh-bg:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	filter: blur(4px);
	background-repeat: no-repeat;
	background-image:
		radial-gradient(circle, rgba(29, 167, 168, .5) 0%, transparent 70%),
		radial-gradient(circle, rgba(255, 107, 26, .55) 0%, transparent 70%);
	background-size: 170px 170px, 120px 120px;
	background-position: 4% 22%, 91% 16%;
	animation: wblogOrbFloat 7s ease-in-out infinite;
}

@keyframes wblogOrbFloat {
	50% {
		background-position: 4.8% 17.5%, 90.2% 19.5%;
	}
}

.hero-mesh-bg > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero-mesh-bg:after {
		animation: none;
	}

	.wblog-card:after {
		animation: none;
	}

	.wtoc-box,
	.wafi-sc:before,
	.wfaq-item:before {
		animation: none;
	}

	.wafi-reveal.wafi-reveal-armed {
		opacity: 1;
		transform: none;
	}
}

/* ===================================================================
   Blog single-post redesign — scroll-triggered reveal (progressive
   enhancement: elements stay visible by default; assets/js/wafi-blog.js
   arms the hidden-until-visible state only once it's actually running)
   =================================================================== */
.wafi-reveal.wafi-reveal-armed {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.wafi-reveal.wafi-reveal-armed.is-visible {
	opacity: 1;
	transform: none;
}

/* reading progress bar */
.wafi-progress-track {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	z-index: 999;
}

.wafi-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--wblog-orange), var(--wblog-orange2));
}

/* ===================================================================
   Blog single post — hero (ported 1:1 from the reference file's own
   .hero/.mesh/.glow/.bub/.shape/.byline rules, namespaced wafi-*)
   =================================================================== */
.wafi-hero {
	position: relative;
	isolation: isolate;
	background: linear-gradient(180deg, #e8f4fc 0%, #f2f9fd 44%, #fdfeff 100%);
	padding: 120px 0 64px;
	margin-bottom: 80px;
	overflow: hidden;
}

.wafi-hero:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(7, 95, 146, .14), transparent);
}

.wafi-herogrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.wafi-mesh {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .85;
	background-image: linear-gradient(rgba(7, 95, 146, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 95, 146, .1) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 90% 78% at 50% 34%, #000, transparent 72%);
	mask-image: radial-gradient(ellipse 90% 78% at 50% 34%, #000, transparent 72%);
}

.wafi-glow {
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
	filter: blur(50px);
}

.wafi-glow.g1 {
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(14, 129, 183, .5), transparent 68%);
	left: -170px;
	top: -190px;
	animation: wafiPulse 9s ease-in-out infinite;
}

.wafi-glow.g2 {
	width: 470px;
	height: 470px;
	background: radial-gradient(circle, rgba(255, 107, 26, .42), transparent 66%);
	right: -130px;
	top: -150px;
	animation: wafiPulse 11s ease-in-out 1.5s infinite;
}

.wafi-glow.g3 {
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(29, 167, 168, .38), transparent 68%);
	right: 24%;
	bottom: -240px;
	animation: wafiPulse 13s ease-in-out .8s infinite;
}

.wafi-glow.g4 {
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(101, 193, 239, .44), transparent 68%);
	right: 14%;
	bottom: -200px;
	animation: wafiPulse 10s ease-in-out 2.2s infinite;
}

.wafi-glow.g5 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255, 154, 61, .32), transparent 68%);
	right: 36%;
	top: -130px;
	animation: wafiPulse 12s ease-in-out 3s infinite;
}

@keyframes wafiPulse {
	50% {
		transform: scale(1.14);
		opacity: .72;
	}
}

.wafi-bub {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
	animation: wafiRise 14s ease-in-out infinite;
}

.wafi-bub.b1 { width: 48px; height: 48px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(101,193,239,.42)); border: 1px solid rgba(14,129,183,.3); right: 14%; top: 52%; }
.wafi-bub.b2 { width: 34px; height: 34px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,154,61,.44)); border: 1px solid rgba(255,107,26,.34); left: 47%; top: 6%; animation-delay: 1.2s; }
.wafi-bub.b3 { width: 37px; height: 37px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(29,167,168,.4)); border: 1px solid rgba(29,167,168,.32); right: 6%; bottom: 16%; animation-delay: 2.4s; }
.wafi-bub.b4 { width: 26px; height: 26px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(14,129,183,.42)); border: 1px solid rgba(7,95,146,.3); right: 30%; bottom: 6%; animation-delay: 3.6s; }
.wafi-bub.b5 { width: 60px; height: 60px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.92), rgba(101,193,239,.32)); border: 1px solid rgba(14,129,183,.24); right: 2%; top: 14%; animation-delay: .6s; }
.wafi-bub.b6 { width: 24px; height: 24px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,107,26,.46)); border: 1px solid rgba(255,107,26,.36); right: 44%; bottom: 5%; animation-delay: 4.4s; }
.wafi-bub.b7 { width: 32px; height: 32px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.94), rgba(101,193,239,.4)); border: 1px solid rgba(14,129,183,.28); right: 22%; top: 5%; animation-delay: 5.2s; }
.wafi-bub.b8 { width: 25px; height: 25px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(29,167,168,.42)); border: 1px solid rgba(29,167,168,.3); right: 38%; top: 16%; animation-delay: 6s; }

@keyframes wafiRise {
	50% {
		transform: translateY(-30px) translateX(14px) scale(1.06);
	}
}

.wafi-shape {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	border-radius: 26px;
	border: 1px solid rgba(7, 95, 146, .13);
	background: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .1));
	backdrop-filter: blur(6px);
	animation: wafiDrift 8s ease-in-out infinite;
}

.wafi-shape.s1 { width: 86px; height: 86px; left: 3%; bottom: 16%; transform: rotate(-14deg); }
.wafi-shape.s2 { width: 54px; height: 54px; border-radius: 50%; left: 46%; top: 6%; border-color: rgba(255,107,26,.24); background: linear-gradient(140deg, rgba(255,240,231,.85), rgba(255,255,255,.2)); animation-delay: 1.4s; }
.wafi-shape.s3 { width: 64px; height: 64px; border-radius: 20px; right: 2%; bottom: 22%; transform: rotate(12deg); animation-delay: 2.2s; }

@keyframes wafiDrift {
	50% {
		transform: translateY(-20px) rotate(6deg);
	}
}

.wafi-hero-cats {
	margin-bottom: 14px;
}

.wafi-hero-title {
	font-size: clamp(32px, 3.5vw, 50px);
	line-height: 1.06;
	letter-spacing: -.05em;
	margin: 16px 0 22px;
	color: var(--wblog-blue);
	font-weight: 700;
}

.wafi-hero-title .accent {
	color: var(--wblog-orange);
}

.wafi-byline {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 18px 22px;
	margin: 0 0 22px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(14px);
	border: 1px solid transparent;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(7, 95, 146, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
	width: max-content;
	max-width: 100%;
	background-clip: padding-box;
}

.wafi-byline:before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--wafi-byline-beam),
		transparent 0deg,
		rgba(7, 95, 146, .12) 40deg,
		var(--wblog-orange) 76deg,
		var(--wblog-orange2) 96deg,
		rgba(101, 193, 239, .9) 120deg,
		rgba(7, 95, 146, .12) 160deg,
		transparent 220deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: wafiBylineBeam 4.5s linear infinite;
	pointer-events: none;
}

@property --wafi-byline-beam {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes wafiBylineBeam {
	to {
		--wafi-byline-beam: 360deg;
	}
}

.wafi-author {
	display: flex;
	align-items: center;
	gap: 11px;
}

.wafi-author .author.vcard a {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--wblog-ink700) !important;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none !important;
}

.wafi-author .author.vcard img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(7, 95, 146, .18);
}

.wafi-bit {
	display: grid;
	gap: 4px;
	padding-left: 20px;
	border-left: 1px solid rgba(7, 95, 146, .12);
}

.wafi-bit span {
	font-size: 10.5px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--wblog-ink200);
	line-height: 1;
}

.wafi-bit b {
	font-size: 14px;
	color: var(--wblog-ink600, var(--wblog-ink700));
	font-weight: 800;
	line-height: 1;
}

.wafi-bit .posted-on a {
	color: inherit !important;
	text-decoration: none !important;
}

.wafi-hero .breadcrumbs {
	position: relative;
	z-index: 1;
	font-size: 15px;
	color: var(--wblog-ink500);
	font-weight: 700;
}

.wafi-hero .breadcrumbs a {
	color: var(--wblog-blue) !important;
}

.wafi-hero .breadcrumbs .separator {
	display: inline-block;
	margin: 0 8px;
}

.wafi-hero .breadcrumbs .separator:before {
	content: "\00bb";
	color: var(--wblog-ink200);
}

.wafi-figure {
	position: relative;
	border-radius: var(--wblog-radius);
	padding: 12px;
	background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(233, 246, 252, .6) 46%, rgba(255, 240, 231, .55));
	border: 1px solid rgba(255, 255, 255, .85);
	box-shadow: 0 34px 84px rgba(7, 95, 146, .18), 0 4px 14px rgba(7, 95, 146, .06), inset 0 1px 0 rgba(255, 255, 255, 1);
	animation: wafiFigureHover 7s ease-in-out infinite;
}

@keyframes wafiFigureHover {
	50% {
		transform: translateY(-10px);
	}
}

.wafi-figure:before {
	content: "";
	position: absolute;
	inset: -22px;
	border-radius: 46px;
	z-index: -1;
	background: radial-gradient(ellipse at 30% 20%, rgba(14, 129, 183, .24), transparent 62%), radial-gradient(ellipse at 78% 84%, rgba(255, 107, 26, .20), transparent 62%);
	filter: blur(34px);
}

.wafi-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
	display: block;
	box-shadow: 0 12px 30px rgba(7, 31, 55, .14);
}

.wafi-tagfloat {
	position: absolute;
	left: 4px;
	bottom: 22px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(7, 95, 146, .12);
	border-radius: 999px;
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 800;
	color: var(--wblog-ink600, var(--wblog-ink700));
	box-shadow: 0 16px 38px rgba(7, 95, 146, .16);
}

.wafi-tagfloat i {
	color: var(--wblog-orange);
}

@media (max-width: 1024px) {
	.wafi-herogrid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.wafi-figure {
		animation: none;
	}

	.wafi-glow.g3,
	.wafi-glow.g4,
	.wafi-glow.g5,
	.wafi-shape,
	.wafi-bub.b4,
	.wafi-bub.b5,
	.wafi-bub.b6,
	.wafi-bub.b8 {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wafi-glow,
	.wafi-bub,
	.wafi-shape,
	.wafi-figure,
	.wafi-byline:before {
		animation: none;
	}
}

/* ===================================================================
   Blog single post — main/sidebar wrap grid
   =================================================================== */
.wafi-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	padding: 8px 0 80px;
}

.wafi-main {
	min-width: 0;
}

@media (max-width: 1024px) {
	.wafi-wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ===================================================================
   Blog single post — Table of Contents box (auto-generated from the
   post's own <h2>/<h3> headings by wafi_inject_blog_toc() in functions.php,
   scroll-spy highlight driven by assets/js/wafi-blog.js)
   =================================================================== */
.wtoc-box {
	position: relative;
	background: linear-gradient(165deg, #fbfdff 0%, #f1f8fd 100%);
	border: 1px solid rgba(7, 95, 146, .13);
	border-radius: 20px;
	padding: 26px 28px 28px;
	margin: 0 0 40px;
	box-shadow: 0 16px 40px rgba(7, 95, 146, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
	overflow: hidden;
}

.wtoc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--wblog-ink500);
}

.wtoc-head i {
	width: 28px;
	height: 28px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: var(--wblog-soft);
	color: var(--wblog-blue);
	font-size: 11px;
	border: 1px solid rgba(7, 95, 146, .08);
}

.wtoc-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: none;
	border: none;
	padding: 2px 0 0;
	font-family: inherit;
	font-weight: 900;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--wblog-ink500);
	cursor: pointer;
}

.wtoc-toggle i {
	transition: transform .25s ease;
	color: var(--wblog-blue);
	font-size: 12px;
}

.wtoc-box.is-open .wtoc-toggle i {
	transform: rotate(180deg);
}

.wtoc-list {
	list-style: none;
	counter-reset: wtoc;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 5px;
}

.wtoc-list li {
	counter-increment: wtoc;
}

.wtoc-list a {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 15px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--wblog-ink500);
	text-decoration: none !important;
	transition: .25s ease;
	border: 1px solid transparent;
	line-height: 1.4;
}

.wtoc-list a:before {
	content: counter(wtoc, decimal-leading-zero);
	font-weight: 900;
	font-size: 11px;
	color: var(--wblog-ink200);
	flex-shrink: 0;
	letter-spacing: .04em;
}

.wtoc-list a:hover {
	background: rgba(255, 255, 255, .9);
	color: var(--wblog-blue);
	border-color: rgba(7, 95, 146, .12);
	transform: translateX(4px);
	box-shadow: 0 8px 20px rgba(7, 95, 146, .08);
}

.wtoc-list a.is-active {
	background: #fff;
	color: var(--wblog-blue);
	border-color: rgba(255, 107, 26, .3);
	box-shadow: 0 10px 24px rgba(7, 95, 146, .12);
}

.wtoc-list a.is-active:before {
	color: var(--wblog-orange);
}

.wtoc-list a.is-active:after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wblog-orange);
	margin-left: auto;
	box-shadow: 0 0 0 4px rgba(255, 107, 26, .16);
}

.entry-content h2[id],
.entry-content h3[id] {
	scroll-margin-top: 110px;
}

@media (max-width: 1000px) {
	.wtoc-head {
		display: none;
	}

	.wtoc-toggle {
		display: flex;
	}

	.wtoc-list {
		display: none;
	}

	.wtoc-box.is-open .wtoc-list {
		display: grid;
		margin-top: 14px;
	}

	.wtoc-box {
		padding: 16px 20px;
		margin-bottom: 32px;
	}

	.wtoc-list a {
		padding: 13px 15px;
		min-height: 44px;
	}
}

/* ===================================================================
   Blog single post — article typography (generic tags inside
   .entry-content, so every existing post benefits without edits)
   =================================================================== */
.entry-content {
	font-size: 17px;
	line-height: 1.8;
	color: var(--wblog-ink500);
}

.entry-content blockquote {
	background: linear-gradient(150deg, #eef6fb 0%, #f7fbfe 60%, #fff 100%);
	border: 1px solid var(--wblog-line);
	border-radius: 20px;
	padding: 28px 32px;
	margin: 0 0 26px;
	box-shadow: var(--wblog-shadow-card);
}

.entry-content blockquote p {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wblog-ink700);
}

.entry-content blockquote b,
.entry-content blockquote strong {
	color: var(--wblog-blue);
	font-weight: 800;
}

.entry-content pre,
.entry-content .wp-block-code {
	background: #07223a !important;
	color: #dbeaf4 !important;
	border-radius: 18px;
	padding: 26px 28px;
	overflow-x: auto;
	font-size: 13.5px;
	line-height: 1.7;
	margin: 0 0 26px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	box-shadow: var(--wblog-shadow-card);
}

.entry-content pre code,
.entry-content .wp-block-code code {
	background: none;
	color: inherit;
	padding: 0;
}

.entry-content .wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--wblog-line2);
	border-radius: 18px;
	margin: 0 0 28px;
	box-shadow: var(--wblog-shadow-card);
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	min-width: 640px;
	font-size: 14.5px;
	background: #fff;
	margin: 0;
}

.entry-content th {
	background: var(--wblog-soft);
	text-align: left;
	padding: 15px 18px;
	font-weight: 800;
	color: var(--wblog-ink700);
	font-size: 13px;
	border-bottom: 1px solid var(--wblog-line2);
	white-space: nowrap;
}

.entry-content td {
	padding: 15px 18px;
	border-bottom: 1px solid var(--wblog-line2);
	color: var(--wblog-ink500);
	vertical-align: top;
	line-height: 1.6;
}

.entry-content tbody tr:last-child td {
	border-bottom: none;
}

.entry-content .wp-block-image {
	margin: 0 0 28px;
}

.entry-content .wp-block-image img {
	border-radius: 18px;
	border: 1px solid var(--wblog-line2);
	box-shadow: var(--wblog-shadow-card);
}

.entry-content figcaption {
	font-size: 13px;
	color: var(--wblog-ink300);
	font-weight: 600;
	margin-top: 12px;
	text-align: center;
}

.entry-content hr {
	border: none;
	border-top: 1px solid var(--wblog-line2);
	margin: 44px 0;
}

/* Optional utility for future posts — add "wafi-callout" (or "wafi-callout warm")
   as an Additional CSS Class on a Group/Paragraph block in the editor to get this
   icon-box treatment; nothing existing is auto-converted into this. */
.entry-content .wafi-callout {
	display: block;
	background: var(--wblog-soft);
	border: 1px solid var(--wblog-line2);
	border-radius: 18px;
	padding: 22px 24px;
	margin: 0 0 26px;
}

.entry-content .wafi-callout.warm {
	background: #fff8f3;
	border-color: #ffe0cb;
}

/* ===================================================================
   Blog single post — share buttons (existing markup/classes from
   Quiety_Theme_Helper::render_post_list_share(), CSS-only restyle)
   =================================================================== */
.share-link-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 28px 0;
	border-top: 1px solid var(--wblog-line2);
	border-bottom: 1px solid var(--wblog-line2);
	margin: 48px 0 0;
}

.share-title {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--wblog-ink600, var(--wblog-ink700)) !important;
}

.social-share-link {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.social-share-link .share_post {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wblog-soft);
	color: var(--wblog-blue) !important;
	font-size: 15px;
	transition: .25s ease;
}

/* Parent theme's render_post_list_share() paints its own always-on brand-colored
   square behind each icon via this pseudo-element — kill it so only our own
   grey-circle/hover-to-brand-color styling above is visible. */
.social-share-link .share_post i:after {
	content: none;
}

.social-share-link .share_post:hover {
	color: #fff !important;
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(7, 23, 42, .18);
}

.social-share-link .share_post.share_facebook:hover {
	background: #405fa4;
}

.social-share-link .share_post.share_twitter:hover {
	background: #16aefd;
}

.social-share-link .share_post.share_pinterest:hover {
	background: #e60023;
}

.social-share-link .share_post.share_linkedin:hover {
	background: #2677b5;
}

/* ===================================================================
   Blog single post — related posts section head (cards themselves
   reuse the existing .wblog-* classes from the blog-listing redesign,
   no new CSS needed for the cards)
   =================================================================== */
.wafi-related {
	background: #f4f8fc;
	border-top: 1px solid rgba(7, 95, 146, .08);
	padding: 88px 0;
}

.wafi-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 32px;
}

.wafi-eyebrow {
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--wblog-orange);
	margin-bottom: 8px;
}

.wafi-section-head h2 {
	margin: 0;
	font-size: clamp(24px, 3vw, 34px);
	color: var(--wblog-ink700);
	font-weight: 700;
}

.wafi-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-shrink: 0;
	border-radius: 999px;
	padding: 14px 21px;
	font-weight: 800;
	font-size: 15px;
	background: #fff;
	color: var(--wblog-blue) !important;
	border: 1px solid #cfe2ee;
	text-decoration: none !important;
	transition: .25s ease;
	white-space: nowrap;
}

.wafi-btn-ghost:hover {
	border-color: var(--wblog-orange);
	color: var(--wblog-orange) !important;
	transform: translateY(-3px);
}

@media (max-width: 560px) {
	.wafi-section-head {
		flex-wrap: wrap;
	}
}

/* ===================================================================
   Blog single post — closing CTA banner (ported 1:1 from the reference
   file's own .cta/.cta-box, namespaced wafi-*)
   =================================================================== */
.wafi-cta {
	padding: 64px 0 88px;
}

.wafi-cta-box {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 26px;
	align-items: center;
	background: linear-gradient(135deg, #fff7ef, #effaff);
	border: 1px solid #d9ebf4;
	border-radius: 34px;
	padding: 42px;
	box-shadow: 0 24px 70px rgba(7, 95, 146, .13);
}

.wafi-cta-box h2 {
	margin: 10px 0 10px;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.06;
	letter-spacing: -.045em;
	color: var(--wblog-ink700);
	font-weight: 700;
}

.wafi-cta-box p {
	margin: 0;
	color: var(--wblog-ink300);
	line-height: 1.75;
}

.wafi-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-shrink: 0;
	border-radius: 999px;
	padding: 16px 26px;
	font-weight: 800;
	font-size: 15px;
	background: linear-gradient(135deg, var(--wblog-orange), var(--wblog-orange2));
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 15px 34px rgba(255, 107, 26, .26);
	transition: .25s ease;
	white-space: nowrap;
}

.wafi-cta-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 42px rgba(255, 107, 26, .32);
	color: #fff !important;
}

@media (max-width: 720px) {
	.wafi-cta-box {
		grid-template-columns: 1fr;
		text-align: left;
		padding: 32px;
	}

	.wafi-cta-btn {
		width: 100%;
	}
}

/* ===================================================================
   Blog single post — promo sidebar (exact copy/stats from the
   reference file; stacking-on-scroll effect via assets/js/wafi-blog.js)
   =================================================================== */
.wafi-side {
	display: grid;
	gap: 20px;
	align-content: start;
}

.wafi-sc {
	position: sticky;
	top: 100px;
	background: linear-gradient(165deg, #fff 0%, #f7fbfe 58%, #eff7fc 100%);
	border: 1px solid transparent;
	background-clip: padding-box;
	border-radius: 22px;
	padding: 28px;
	box-shadow: 0 18px 44px rgba(7, 95, 146, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
	overflow: hidden;
}

.wafi-sc.wafi-sc-dark {
	background: linear-gradient(160deg, #0e3a5c 0%, #0a2c47 100%);
	border-color: transparent;
	box-shadow: 0 22px 55px rgba(7, 63, 104, .34), inset 0 1px 0 rgba(255, 255, 255, .18);
	color: #fff;
}

.wafi-sc h3 {
	margin: 0 0 10px;
	font-size: 19px;
	color: var(--wblog-ink700);
	letter-spacing: -.025em;
	line-height: 1.32;
	font-weight: 700;
}

.wafi-sc.wafi-sc-dark h3 {
	color: #fff;
}

.wafi-sc p {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wblog-ink300);
}

.wafi-sc.wafi-sc-dark p {
	color: #dcecf6;
}

.wafi-sc-lbl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wblog-orange);
	margin-bottom: 14px;
}

.wafi-sc-lbl:before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wblog-orange);
	box-shadow: 0 0 0 4px rgba(255, 107, 26, .15);
}

.wafi-sc-k {
	width: 46px;
	height: 46px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: var(--wblog-soft);
	color: var(--wblog-blue);
	font-size: 17px;
	margin-bottom: 18px;
	box-shadow: 0 8px 20px rgba(7, 95, 146, .10), inset 0 1px 0 #fff;
	border: 1px solid rgba(7, 95, 146, .08);
}

.wafi-sc.wafi-sc-dark .wafi-sc-k {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
}

.wafi-sc-bigstat {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -.05em;
	color: #fff;
	line-height: 1;
	margin-bottom: 10px;
	text-shadow: 0 8px 26px rgba(0, 0, 0, .18);
}

.wafi-sc-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 4px;
}

.wafi-sc-trust div {
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(7, 95, 146, .10);
	border-radius: 14px;
	padding: 16px 12px;
	text-align: center;
}

.wafi-sc-trust b {
	display: block;
	font-size: 23px;
	color: var(--wblog-blue);
	letter-spacing: -.04em;
	font-weight: 800;
}

.wafi-sc-trust span {
	font-size: 11px;
	color: var(--wblog-ink300);
	font-weight: 700;
}

.wafi-svcs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.wafi-svcs a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 15px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .66);
	border: 1px solid rgba(7, 95, 146, .08);
	font-weight: 700;
	font-size: 14px;
	color: var(--wblog-ink500) !important;
	text-decoration: none !important;
	transition: .25s ease;
}

.wafi-svcs a:hover {
	background: #fff;
	color: var(--wblog-blue) !important;
	transform: translateX(4px);
	box-shadow: 0 10px 24px rgba(7, 95, 146, .10);
}

.wafi-svcs i {
	font-size: 11px;
	color: var(--wblog-ink200);
}

.wafi-nform {
	display: grid;
	gap: 10px;
}

.wafi-nform input {
	padding: 14px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .94);
	font-family: inherit;
	font-size: 14.5px;
	color: var(--wblog-ink700);
	width: 100%;
	box-sizing: border-box;
}

.wafi-nok {
	display: none;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 800;
	font-size: 14.5px;
}

.wafi-tick {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

.wafi-sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: none;
	border-radius: 999px;
	padding: 14px 20px;
	background: linear-gradient(135deg, var(--wblog-orange), var(--wblog-orange2)) !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 14.5px;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: 0 14px 32px rgba(255, 107, 26, .3);
	transition: .25s ease;
}

.wafi-sc-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(255, 107, 26, .38);
	color: #fff !important;
}

@media (max-width: 1024px) {
	.wafi-side {
		position: static;
	}

	.wafi-sc {
		position: relative !important;
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
		top: auto !important;
	}
}

/* ===================================================================
   Wafi FAQ Accordion — brand-new widget, fully separate from the
   existing "Quiety Accordion" (.quiety-accordion/.accordion-item), so
   nothing already using that widget anywhere on the site is affected.
   =================================================================== */
.wfaq-accordion {
	display: grid;
	gap: 16px;
}

.wfaq-item {
	position: relative;
	background: linear-gradient(165deg, #fff, #fbfdfe);
	border: 1px solid transparent;
	border-radius: 22px;
	box-shadow: var(--wblog-shadow-card);
	transition: .28s ease;
	background-clip: padding-box;
	overflow: visible;
}

.wfaq-item:before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--wfaq-beam),
		transparent 0deg,
		rgba(7, 95, 146, .14) 40deg,
		var(--wblog-orange) 78deg,
		var(--wblog-orange2) 98deg,
		rgba(101, 193, 239, .95) 124deg,
		rgba(7, 95, 146, .14) 164deg,
		transparent 224deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: wfaqBeam 5s linear infinite;
	pointer-events: none;
	z-index: 1;
}

@property --wfaq-beam {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes wfaqBeam {
	to {
		--wfaq-beam: 360deg;
	}
}

.wfaq-item:hover:before {
	animation-duration: 2.2s;
}

.wfaq-item.is-open {
	box-shadow: var(--wblog-shadow-card-hover);
}

.wfaq-q {
	margin: 0;
	position: relative;
	z-index: 1;
}

.wfaq-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	text-align: left;
	background: none;
	border: none;
	padding: 24px 26px;
	font-family: inherit;
	font-size: 17.5px;
	font-weight: 700;
	color: var(--wblog-ink700);
	cursor: pointer;
	letter-spacing: -.015em;
	line-height: 1.4;
}

.wfaq-ic {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--wblog-soft);
	color: var(--wblog-blue);
	font-size: 13px;
	flex-shrink: 0;
	transition: .28s ease;
}

.wfaq-item.is-open .wfaq-ic {
	background: linear-gradient(135deg, var(--wblog-orange), var(--wblog-orange2));
	color: #fff;
	transform: rotate(45deg);
	box-shadow: 0 10px 22px rgba(255, 107, 26, .26);
}

.wfaq-ans {
	max-height: 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
	transition: max-height .42s cubic-bezier(.4, 0, .2, 1);
}

.wfaq-ans-inner {
	padding: 0 26px 22px;
	color: var(--wblog-ink400, var(--wblog-ink500));
	line-height: 1.8;
	font-size: 16px;
}

.wfaq-ans-inner p:first-child {
	margin-top: 0;
}