/**
 * BLOG DETAIL V2 — one-off redesigned post template.
 * Loaded only by templates/blog-detail-v2.php.
 *
 * Every selector is namespaced `fhv2-` so nothing here can leak into the
 * rest of the theme, and nothing from single.php styling applies here.
 *
 * Self-contained on purpose: brand values are declared locally (copied from
 * assets/design-tokens.css) because that file is not enqueued site-wide.
 * No font-family is declared — type inherits from the theme.
 */

.fhv2-hero,
.fhv2-body {
	--fhv2-blue: #072AC8;
	--fhv2-navy: #03045E;
	--fhv2-cyan: #01BAEF;
	--fhv2-orange: #FF7B00;
	--fhv2-orange-hover: #E76F00;
	--fhv2-white: #FFFFFF;
	--fhv2-cloud: #FBFBFF;
	--fhv2-ink: #2D2D2D;
	--fhv2-body-text: #3A3F49;
	--fhv2-muted: #6B7486;
	--fhv2-line: #E3E8F0;
	--fhv2-tint: #EEF1F7;
	--fhv2-tint-blue: #E6F8FE;
}

/* ---------------------------------------------------------------
   1. HERO
   --------------------------------------------------------------- */
.fhv2-hero {
	background:
		radial-gradient(640px 320px at 88% -10%, rgba(1, 186, 239, .35), transparent 70%),
		radial-gradient(520px 300px at -10% 110%, rgba(1, 186, 239, .18), transparent 70%),
		linear-gradient(118deg, var(--fhv2-blue) 0%, #0B1FA0 55%, var(--fhv2-navy) 100%);
	color: var(--fhv2-white);
	padding: 0 0 20px;
	overflow: hidden;
}

.fhv2-hero__title {
	color: var(--fhv2-white);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.18;
	margin: 0 0 22px;
	max-width: 21ch;
}

.fhv2-hero__title .fhv2-hl { color: var(--fhv2-cyan); }

.fhv2-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	font-size: 15px;
}

.fhv2-hero__meta a {
	text-decoration: none;
}
p.fhv2-hero__meta span a {
    color: #ffffff;
}
.fhv2-hero__meta a:hover { text-decoration: underline; }
.fhv2-hero__sep { opacity: .5; }

.fhv2-hero__art svg {
	display: block;
	width: 100%;
	max-width: 470px;
	height: auto;
	margin-left: auto;
}

h1.fhv2-hero__title span {
    color: #ff7b00;
}
.fa-search:before {
    content: "\f002";
    top: 10px;
    position: absolute;
    left: 12px;
}
.fhig-article .fhig-tldr{
	border: none !important;
}
.fhig-article .fhig-cards.fhig-anim .fhig-card.fhig-on{
	    border-bottom: 6px solid #072ac8;
}
/* gentle bob for the podium badges, twinkle for the sparkles */
.fhv2-float { animation: fhv2-bob 3.6s ease-in-out infinite; }
.fhv2-float--b { animation-delay: .6s; }
.fhv2-float--c { animation-delay: 1.2s; }

.fhv2-spark { animation: fhv2-twinkle 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.fhv2-spark--2 { animation-delay: .7s; }
.fhv2-spark--3 { animation-delay: 1.4s; }
.fhv2-spark--4 { animation-delay: 2.1s; }

@keyframes fhv2-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes fhv2-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.78); }
}

/* ---------------------------------------------------------------
   2. BODY LAYOUT + ARTICLE TYPOGRAPHY
   --------------------------------------------------------------- */
.fhv2-body { padding: 56px 0 80px; background: var(--fhv2-white); }

.fhv2-article h2 {
	color: var(--fhv2-navy);
	font-size: 28px;
	font-weight: 700;
	margin: 44px 0 16px;
	scroll-margin-top: 120px;
}

.fhv2-article h2:first-child { margin-top: 0; }

.fhv2-article h3 {
	color: var(--fhv2-navy);
	font-size: 21px;
	font-weight: 700;
	margin: 30px 0 12px;
	scroll-margin-top: 120px;
}

.fhv2-article p {
	color: var(--fhv2-body-text);
	font-size: 16px;
	line-height: 1.78;
	margin: 0 0 18px;
}

.fhv2-article a { color: var(--fhv2-blue); }
.fhv2-article a:hover { color: var(--fhv2-orange); }

.fhv2-article ul,
.fhv2-article ol { margin: 0 0 20px; padding-left: 22px; }

.fhv2-article li {
	color: var(--fhv2-body-text);
	line-height: 1.7;
	margin-bottom: 10px;
}

.fhv2-article img { max-width: 100%; height: auto; }
h4.fhv2-author__name a {
    color: var(--fhv2-navy);
}
/* ---------------------------------------------------------------
   3. TLDR + TABLE OF CONTENTS
   --------------------------------------------------------------- */
.fhv2-tldr {
	background: #F7FAFF;
	border-left: 4px solid var(--fhv2-cyan);
	border-radius: 0 12px 12px 0;
	padding: 26px 30px 18px;
	margin: 0 0 30px;
}

.fhv2-tldr h2 {
	margin: 0 0 14px;
	font-size: 22px;
}

.fhv2-tldr ul { list-style: none; padding: 0; margin: 0; }

.fhv2-tldr li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	font-size: 15.5px;
}

.fhv2-tldr li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--fhv2-blue);
}

.fhv2-toc {
	background: var(--fhv2-tint);
	border-radius: 12px;
	padding: 26px 30px;
	margin: 0 0 36px;
}

.fhv2-toc__title {
	color: var(--fhv2-navy);
	font-weight: 700;
	font-size: 19px;
	margin: 0 0 12px !important;
}

.fhv2-toc ol { margin: 0; padding-left: 22px; }
.fhv2-toc li { margin-bottom: 8px; }

.fhv2-toc a {
	color: var(--fhv2-ink);
	text-decoration: none;
}

.fhv2-toc a:hover { color: var(--fhv2-blue); text-decoration: underline; }

/* ---------------------------------------------------------------
   4. ANIMATED INFOGRAPHIC (bar chart card)
   --------------------------------------------------------------- */
.fhv2-chart {
	background: var(--fhv2-white);
	border: 1px solid var(--fhv2-line);
	border-radius: 16px;
	box-shadow: 0 10px 34px rgba(3, 4, 94, .08);
	padding: 30px 30px 26px;
	margin: 36px 0 0;
	text-align: center;
}

.fhv2-chart__eyebrow {
	color: var(--fhv2-orange);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 8px !important;
}

.fhv2-chart__title {
	color: var(--fhv2-navy);
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 16px !important;
}

.fhv2-chart__title span { color: var(--fhv2-orange); }

.fhv2-chart__banner {
	background: var(--fhv2-navy);
	color: var(--fhv2-white) !important;
	border-radius: 8px;
	font-size: 14.5px;
	padding: 10px 16px;
	margin: 0 0 28px !important;
}

.fhv2-chart__rows { display: grid; gap: 15px; text-align: left; }

.fhv2-chart__row {
	display: grid;
	grid-template-columns: 168px 1fr 54px;
	align-items: center;
	gap: 14px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}
.fhv2-hero__art img {
    width: 350px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.fhv2-chart__row.is-on { opacity: 1; transform: none; }

.fhv2-chart__label { line-height: 1.25; }

.fhv2-chart__label strong {
	display: block;
	color: var(--fhv2-ink);
	font-size: 14px;
	font-weight: 700;
}

.fhv2-chart__label span {
	display: block;
	color: var(--fhv2-muted);
	font-size: 12px;
	margin-top: 2px;
}

.fhv2-chart__track {
	position: relative;
	height: 18px;
	border-radius: 999px;
	background:
		repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), var(--fhv2-line) calc(20% - 1px), var(--fhv2-line) 20%),
		#F3F6FC;
	overflow: hidden;
}

.fhv2-chart__bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fhv2-blue), var(--fhv2-navy));
	transition: width 1.15s cubic-bezier(.22, .61, .36, 1);
}

.fhv2-chart__row:nth-child(even) .fhv2-chart__bar {
	background: linear-gradient(90deg, var(--fhv2-cyan), #4BA3F7);
}

.fhv2-chart__value {
	color: var(--fhv2-navy);
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

/* "What to do next" strip under the chart */
.fhv2-next {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--fhv2-line);
	border-radius: 12px;
	overflow: hidden;
	margin: 18px 0 36px;
}

.fhv2-next__label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	background: var(--fhv2-white);
	color: var(--fhv2-navy);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 16px 20px;
	border-right: 1px solid var(--fhv2-line);
}

.fhv2-next__label i { color: var(--fhv2-cyan); font-size: 18px; }

.fhv2-next p {
	flex: 1;
	background: var(--fhv2-tint-blue);
	color: var(--fhv2-navy) !important;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 !important;
	padding: 14px 20px;
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------
   5. ACTION CARDS (What small businesses should do)
   --------------------------------------------------------------- */
.fhv2-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin: 28px 0 32px;
}

.fhv2-action {
	background: var(--fhv2-white);
	border: 1px solid var(--fhv2-line);
	border-radius: 12px;
	padding: 26px 26px 22px;
	transition: box-shadow .25s ease, transform .25s ease;
}

.fhv2-action:hover {
	box-shadow: 0 12px 30px rgba(3, 4, 94, .1);
	transform: translateY(-3px);
}

.fhv2-action__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--fhv2-blue);
	color: var(--fhv2-white);
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 16px;
}

.fhv2-action h3 {
	margin: 0 0 10px !important;
	font-size: 18px !important;
}

.fhv2-action p {
	margin: 0 !important;
	font-size: 14.5px !important;
	color: var(--fhv2-muted) !important;
	line-height: 1.65 !important;
}

/* ---------------------------------------------------------------
   6. FAQ ACCORDION
   --------------------------------------------------------------- */
.fhv2-faq { margin: 44px 0 0; }

.fhv2-faq__heading {
	color: var(--fhv2-navy);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 20px;
	scroll-margin-top: 120px;
}

.fhv2-faq__list { display: grid; gap: 12px; }

.fhv2-faq__item {
	background: var(--fhv2-tint);
	border-radius: 10px;
	overflow: hidden;
}

.fhv2-faq__q { margin: 0; }

.fhv2-faq__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	color: var(--fhv2-ink);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	padding: 17px 22px;
}

.fhv2-faq__btn:hover { color: var(--fhv2-blue); }

.fhv2-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.fhv2-faq__icon::before,
.fhv2-faq__icon::after {
	content: "";
	position: absolute;
	background: var(--fhv2-navy);
	transition: transform .25s ease;
}

.fhv2-faq__icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.fhv2-faq__icon::after { left: 6px; top: 0; width: 2px; height: 14px; }

.fhv2-faq__btn[aria-expanded="true"] .fhv2-faq__icon::after { transform: scaleY(0); }

.fhv2-faq__panel { overflow: hidden; }

.fhv2-faq__answer {
	padding: 0 22px 18px;
	color: var(--fhv2-body-text);
	font-size: 15px;
	line-height: 1.7;
}

.fhv2-faq__answer p { margin: 0 0 12px; }
.fhv2-faq__answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   7. AUTHOR BOX
   --------------------------------------------------------------- */
.fhv2-author {
	background: var(--fhv2-tint);
	border-radius: 16px;
	padding: 44px 48px 38px;
	margin: 44px 0 0;
	text-align: center;
	scroll-margin-top: 120px;
}

.fhv2-author__photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 22px;
	box-shadow: 0 6px 18px rgba(3, 4, 94, .18);
}

.fhv2-author__bio {
	color: #4A5568;
	font-style: italic;
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 20px;
}

.fhv2-author__name {
	color: var(--fhv2-navy);
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 6px;
	  font-family: 'GeneralSans-Regular';
}

.fhv2-author__role {
	color: var(--fhv2-blue);
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

/* ---------------------------------------------------------------
   8. SIDEBAR
   --------------------------------------------------------------- */
.fhv2-sidebar { position: sticky; top: 30px; }

.fhv2-widget {
	border-radius: 14px;
	padding: 26px 24px;
	margin-bottom: 24px;
}

.fhv2-widget--navy {
	background: linear-gradient(160deg, #0B1FA0 0%, var(--fhv2-navy) 100%);
	color: var(--fhv2-white);
}

.fhv2-widget--light {
	background: var(--fhv2-white);
	border: 1px solid var(--fhv2-line);
}

.fhv2-widget__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
}

.fhv2-widget--navy .fhv2-widget__title { color: var(--fhv2-white); }
.fhv2-widget--light .fhv2-widget__title { color: var(--fhv2-navy); }

/* search */
.fhv2-search__field {
	position: relative;
	display: flex;
}

.fhv2-search__field input {
	width: 100%;
	border: 0;
	border-radius: 999px;
	background: var(--fhv2-white);
	color: var(--fhv2-ink);
	font-size: 14.5px;
	padding: 12px 52px 12px 20px;
	outline: none;
}

.fhv2-search__field button {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--fhv2-navy);
	color: var(--fhv2-white);
	cursor: pointer;
}

.fhv2-search__field button:hover { background: var(--fhv2-blue); }

/* categories */
.fhv2-cats__list { list-style: none; margin: 0; padding: 0; }

.fhv2-cats__list li { border-bottom: 1px solid var(--fhv2-tint); }
.fhv2-cats__list li:last-child { border-bottom: 0; }

.fhv2-cats__list a {
	display: block;
	padding: 11px 2px;
	color: #4A5568;
	font-size: 15px;
	text-decoration: none;
	transition: color .18s ease, padding-left .18s ease;
}

.fhv2-cats__list a:hover { color: var(--fhv2-blue); padding-left: 8px; }

/* share */
.fhv2-share__list {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.fhv2-share__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	color: var(--fhv2-white);
	font-size: 16px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}

.fhv2-share__list a:hover {
	background: var(--fhv2-cyan);
	border-color: var(--fhv2-cyan);
	color: var(--fhv2-navy);
}

/* join / schedule box */
.fhv2-join { padding: 34px 26px; }

.fhv2-join__logo {
	max-width: 150px;
	height: auto;
	margin: 0 auto 18px;
	display: block;
}

.fhv2-join h3 {
	color: var(--fhv2-white);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px;
}

.fhv2-join p {
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
	margin: 0 0 18px;
}

/* ---------------------------------------------------------------
   9. BUTTONS + BOTTOM CTA
   --------------------------------------------------------------- */
.fhv2-btn {
	display: inline-block;
	background: var(--fhv2-orange);
	color: var(--fhv2-white) !important;
	font-weight: 700;
	font-size: 14.5px;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease;
}

.fhv2-btn:hover {
	background: var(--fhv2-orange-hover);
	color: var(--fhv2-white);
	transform: translateY(-2px);
}

.fhv2-btn--lg { font-size: 16px; padding: 15px 34px; }

.fhv2-cta {
	background:
		radial-gradient(480px 260px at 90% -20%, rgba(1, 186, 239, .3), transparent 70%),
		linear-gradient(118deg, var(--fhv2-blue) 0%, var(--fhv2-navy) 90%);
	border-radius: 18px;
	color: var(--fhv2-white);
	text-align: center;
	padding: 52px 40px;
	margin-top: 56px;
}

.fhv2-cta h2 {
	color: var(--fhv2-white);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 14px;
}

.fhv2-cta p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	line-height: 1.7;
	max-width: 720px;
	margin: 0 auto 26px;
}

/* ---------------------------------------------------------------
   10. SCROLL-REVEAL + REDUCED MOTION
   --------------------------------------------------------------- */
.fhv2-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .6s ease, transform .6s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.fhv2-float,
	.fhv2-spark { animation: none; }

	.fhv2-reveal,
	.fhv2-chart__row {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fhv2-chart__bar { transition: none; }
	.fhv2-action { transition: none; }
}

/* ---------------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 991px) {
	.fhv2-hero { padding: 44px 0 48px; }
	.fhv2-hero__title { font-size: 34px; max-width: none; }
	.fhv2-sidebar { position: static; margin-top: 44px; }
	.fhv2-actions { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
	.fhv2-hero__title { font-size: 28px; }
	.fhv2-body { padding: 40px 0 56px; }
	.fhv2-article h2 { font-size: 23px; }

	.fhv2-tldr,
	.fhv2-toc { padding: 20px 18px; }

	.fhv2-chart { padding: 22px 16px 20px; }
	.fhv2-chart__title { font-size: 23px; }

	.fhv2-chart__row {
		grid-template-columns: 108px 1fr 42px;
		gap: 8px;
	}

	.fhv2-chart__label strong { font-size: 12.5px; }
	.fhv2-chart__label span { font-size: 10.5px; }
	.fhv2-chart__value { font-size: 13px; }
	.fhv2-chart__track { height: 14px; }

	.fhv2-next { flex-direction: column; }
	.fhv2-next__label { border-right: 0; border-bottom: 1px solid var(--fhv2-line); }

	.fhv2-author { padding: 30px 20px 26px; }
	.fhv2-cta { padding: 36px 22px; }
	.fhv2-cta h2 { font-size: 25px; }
}