/* =====================================================================
   HostGage design system
   Loaded after kadence-global. Sections:
   1. Tokens (brand palette + Kadence palette overrides)
   2. Base typography
   3. Links & buttons
   4. Header
   5. Footer
   6. Layout helpers
   7. Archive / blog cards
   8. Single post
   9. Review & affiliate components
   ===================================================================== */

/* 1. Tokens ----------------------------------------------------------- */
:root {
	--hg-blue:        #2563EB;
	--hg-blue-dark:   #1D4ED8;
	--hg-blue-soft:   #EFF4FF;
	--hg-orange:      #EA580C;
	--hg-orange-dark: #C2410C;
	--hg-green:       #16A34A;
	--hg-green-soft:  #ECFDF3;
	--hg-amber:       #F59E0B;
	--hg-red:         #DC2626;
	--hg-red-soft:    #FEF2F2;

	--hg-ink:    #0F172A;  /* headings */
	--hg-body:   #334155;  /* body text */
	--hg-muted:  #64748B;  /* meta / secondary */
	--hg-border: #E2E8F0;
	--hg-bg:     #FFFFFF;
	--hg-bg-alt: #F8FAFC;

	--hg-radius:    14px;
	--hg-radius-sm: 9px;
	--hg-shadow:    0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
	--hg-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
	--hg-container: 1180px;
	--hg-narrow:    760px;

	--hg-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--hg-head: 'Plus Jakarta Sans', var(--hg-sans);

	/* Re-map Kadence's global palette so the parent theme's header,
	   buttons and links adopt the HostGage brand without Customizer edits. */
	--global-palette1: #2563EB;
	--global-palette2: #1D4ED8;
	--global-palette3: #0F172A;
	--global-palette4: #334155;
	--global-palette5: #64748B;
	--global-palette6: #E2E8F0;
	--global-palette7: #F8FAFC;
	--global-palette8: #FFFFFF;
	--global-palette9: #FFFFFF;  /* Kadence's main background slot — must stay light or page content areas render dark */
}

/* 2. Base typography -------------------------------------------------- */
body {
	font-family: var(--hg-sans) !important;
	color: var(--hg-body);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	background: var(--hg-bg);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
	font-family: var(--hg-head) !important;
	color: var(--hg-ink);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 800;
}

h1 { font-size: clamp(2rem, 4vw, 2.85rem); }
h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-top: 1.6em; }
h4 { font-size: 1.18rem; }

p { margin: 0 0 1.15em; }

strong { color: var(--hg-ink); font-weight: 700; }

::selection { background: var(--hg-blue); color: #fff; }

/* 3. Links & buttons -------------------------------------------------- */
a { color: var(--hg-blue); text-decoration: none; }
a:hover { color: var(--hg-blue-dark); }

.hg-entry-content a:not(.hg-btn):not(.button) {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(37,99,235,.4);
}
.hg-entry-content a:not(.hg-btn):not(.button):hover {
	text-decoration-color: var(--hg-blue-dark);
}

.hg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--hg-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: .85em 1.5em;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
	text-decoration: none !important;
}
.hg-btn:active { transform: translateY(1px); }

.hg-btn--primary { background: var(--hg-blue); color: #fff !important; }
.hg-btn--primary:hover { background: var(--hg-blue-dark); color: #fff !important; box-shadow: 0 8px 20px rgba(37,99,235,.28); }

.hg-btn--cta { background: var(--hg-orange); color: #fff !important; box-shadow: 0 8px 20px rgba(234,88,12,.22); }
.hg-btn--cta:hover { background: var(--hg-orange-dark); color: #fff !important; box-shadow: 0 10px 26px rgba(234,88,12,.32); }

.hg-btn--ghost { background: #fff; color: var(--hg-ink) !important; border: 1.5px solid var(--hg-border); }
.hg-btn--ghost:hover { border-color: var(--hg-blue); color: var(--hg-blue) !important; }

.hg-btn--block { width: 100%; }
.hg-btn--lg { font-size: 1.08rem; padding: 1em 1.8em; }

/* 4. Header ----------------------------------------------------------- */
.site-header,
.site-header-wrap {
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid var(--hg-border);
}
.site-branding .site-title,
.site-title a {
	font-family: var(--hg-head) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hg-ink) !important;
}
.site-title a:hover { color: var(--hg-blue) !important; }

/* Primary navigation links */
.header-navigation .menu-item > a,
.header-menu-container ul li a,
.main-navigation a {
	font-family: var(--hg-head);
	font-weight: 600;
	font-size: .98rem;
	color: var(--hg-ink) !important;
	transition: color .12s ease;
}
.header-navigation .menu-item > a:hover,
.header-menu-container ul li a:hover,
.header-navigation .current-menu-item > a {
	color: var(--hg-blue) !important;
}

/* "Deals" item styled as a CTA pill */
.menu-item.menu-cta > a {
	background: var(--hg-orange);
	color: #fff !important;
	padding: .55em 1.15em !important;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(234,88,12,.22);
}
.menu-item.menu-cta > a:hover { background: var(--hg-orange-dark); color: #fff !important; }

/* 5. Footer ----------------------------------------------------------- */
.site-footer {
	background: var(--hg-ink) !important;
	color: #CBD5E1;
}
.site-footer a { color: #CBD5E1 !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer .widget-title,
.site-footer h2, .site-footer h3, .site-footer h4 { color: #fff !important; }

.site-footer .footer-html,
.footer-bottom .site-footer-row-container-inner {
	color: #94A3B8;
}
.hg-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: center;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.hg-footer-nav a {
	font-family: var(--hg-head);
	font-weight: 600;
	font-size: .92rem;
	color: #CBD5E1 !important;
}
.hg-footer-nav a:hover { color: #fff !important; }
.hg-footer-tag { color: #64748B; font-size: .85rem; text-align: center; }
.hg-footer-tag a { color: #94A3B8 !important; text-decoration: underline; }

/* 6. Layout helpers --------------------------------------------------- */
.hg-container {
	max-width: var(--hg-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}
.hg-narrow { max-width: var(--hg-narrow); margin-inline: auto; }
.hg-section { padding-block: clamp(36px, 6vw, 64px); }
.hg-bg-alt { background: var(--hg-bg-alt); }

.hg-eyebrow {
	display: inline-block;
	font-family: var(--hg-head);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hg-blue);
	margin-bottom: .6em;
}

/* 7. Archive / blog cards -------------------------------------------- */
.hg-archive-head {
	padding: clamp(34px, 6vw, 60px) 0 8px;
	border-bottom: 1px solid var(--hg-border);
	margin-bottom: clamp(28px, 5vw, 48px);
	text-align: center;
}
.hg-archive-head .hg-archive-title { margin: 0 0 .25em; }
.hg-archive-head p { color: var(--hg-muted); margin: 0; }

.hg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(20px, 3vw, 30px);
}
.hg-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	overflow: hidden;
	box-shadow: var(--hg-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hg-card:hover { transform: translateY(-3px); box-shadow: var(--hg-shadow); border-color: #CBD5E1; }
.hg-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hg-bg-alt); }
.hg-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hg-card__cat {
	font-family: var(--hg-head);
	font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--hg-blue);
}
.hg-card__title { font-size: 1.22rem; line-height: 1.3; margin: 0; }
.hg-card__title a { color: var(--hg-ink); }
.hg-card__title a:hover { color: var(--hg-blue); }
.hg-card__excerpt { color: var(--hg-muted); font-size: .98rem; margin: 0; }
.hg-card__meta { margin-top: auto; padding-top: 10px; color: var(--hg-muted); font-size: .85rem; display: flex; gap: 14px; align-items: center; }

/* 8. Single post ------------------------------------------------------ */
.hg-single { padding-block: clamp(28px, 5vw, 52px); }
.hg-single__header { max-width: var(--hg-narrow); margin: 0 auto clamp(22px, 4vw, 34px); text-align: left; }
.hg-single__cat {
	font-family: var(--hg-head); font-weight: 700; font-size: .8rem; letter-spacing: .07em;
	text-transform: uppercase; color: var(--hg-blue);
}
.hg-single__title { margin: .35em 0 .5em; }
.hg-single__dek { font-size: 1.18rem; color: var(--hg-muted); line-height: 1.6; }
.hg-meta {
	display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: flex-start; align-items: center;
	margin-top: 18px; color: var(--hg-muted); font-size: .92rem;
}
.hg-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: #CBD5E1; }
.hg-meta strong { color: var(--hg-body); font-weight: 600; }

.hg-featured { max-width: 980px; margin: 0 auto clamp(26px, 4vw, 40px); }
.hg-featured img { width: 100%; height: auto; border-radius: var(--hg-radius); display: block; }

/* Content column typography */
.hg-entry-content { max-width: var(--hg-narrow); margin-inline: auto; }
.hg-entry-content > * { margin-inline: auto; }
.hg-entry-content img { border-radius: var(--hg-radius-sm); height: auto; }
.hg-entry-content ul, .hg-entry-content ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.hg-entry-content li { margin-bottom: .5em; }
.hg-entry-content blockquote {
	border-left: 4px solid var(--hg-blue);
	background: var(--hg-bg-alt);
	margin: 1.6em 0; padding: 1em 1.3em; border-radius: 0 var(--hg-radius-sm) var(--hg-radius-sm) 0;
	font-size: 1.08rem; color: var(--hg-ink);
}
.hg-entry-content h2 { scroll-margin-top: 90px; }
.hg-entry-content h3 { scroll-margin-top: 90px; }

/* 8b. Single-post two-column layout (content + sticky sidebar) -------- */
.hg-single__grid { display: block; }
.hg-single__main { min-width: 0; }

.hg-sidebar { max-width: var(--hg-narrow); margin: clamp(32px, 5vw, 44px) auto 0; }
.hg-sidebar__inner { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 1024px) {
	.hg-single__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: clamp(36px, 4vw, 60px);
		/* stretch (default): the aside matches the content column's height so
		   the sticky inner can pin for the whole article, not just the first
		   ~screenful. */
		align-items: stretch;
	}
	.hg-sidebar { max-width: none; margin: 0; }
	.hg-sidebar__inner {
		position: sticky;
		top: 92px;
		/* Keep the full sidebar reachable on short viewports: scroll within
		   it rather than letting the lower modules sit permanently off-screen. */
		max-height: calc(100vh - 112px);
		overflow-y: auto;
	}
	/* On desktop the sticky sidebar TOC replaces the inline one. */
	.hg-entry-content .hg-toc { display: none; }
}

/* Sidebar TOC is desktop-only; the inline TOC covers narrow screens. */
.hg-sidebar__toc { display: none; }
@media (min-width: 1024px) {
	.hg-sidebar__toc { display: block; }
}

/* Sidebar modules */
.hg-side {
	background: #fff;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	padding: 20px 22px;
	box-shadow: var(--hg-shadow-sm);
}
.hg-side__title {
	font-family: var(--hg-head); font-weight: 800; color: var(--hg-ink);
	font-size: 1.02rem; margin: 0 0 .7em;
}

/* Editor's pick card */
.hg-side--pick { border-top: 3px solid var(--hg-orange); }
.hg-side__eyebrow {
	font-family: var(--hg-head); font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--hg-orange);
	margin: 0 0 .5em;
}
.hg-side__pickhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hg-side__pickname { font-family: var(--hg-head); font-weight: 800; font-size: 1.5rem; color: var(--hg-ink); line-height: 1; }
.hg-side__score {
	font-family: var(--hg-head); font-weight: 800; font-size: 1rem; color: #fff;
	background: var(--hg-blue); border-radius: 8px; padding: 3px 9px;
}
.hg-side__stars { font-size: .95rem; margin: 8px 0 0; }
.hg-side__picktext { color: var(--hg-body); font-size: .92rem; line-height: 1.55; margin: .7em 0 1em; }
.hg-side--pick .hg-btn { width: 100%; }
.hg-side__note { color: var(--hg-muted); font-size: .8rem; text-align: center; margin: .7em 0 0; }

/* Sidebar table of contents (scroll-spy) */
.hg-side--toc { background: var(--hg-bg-alt); }
.hg-sidetoc { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--hg-border); }
.hg-sidetoc__item a {
	display: block; padding: 6px 0 6px 14px; margin-left: -2px;
	border-left: 2px solid transparent; color: var(--hg-muted);
	font-size: .9rem; line-height: 1.4;
}
.hg-sidetoc__item--h3 a { padding-left: 28px; font-size: .85rem; }
.hg-sidetoc__item a:hover { color: var(--hg-blue); }
.hg-sidetoc__item a.is-active { color: var(--hg-blue); border-left-color: var(--hg-blue); font-weight: 600; }

/* More comparisons list */
.hg-side__links { list-style: none; margin: 0; padding: 0; }
.hg-side__links li + li { border-top: 1px solid var(--hg-border); }
.hg-side__links a {
	display: block; padding: 9px 0; color: var(--hg-body);
	font-size: .92rem; font-weight: 600; font-family: var(--hg-head); line-height: 1.35;
}
.hg-side__links a:hover { color: var(--hg-blue); }

/* 9. Review & affiliate components ----------------------------------- */

/* Table of contents */
.hg-toc {
	background: var(--hg-bg-alt);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	padding: 20px 24px;
	margin: 0 auto 2em;
	max-width: var(--hg-narrow);
}
.hg-toc__title {
	font-family: var(--hg-head); font-weight: 800; color: var(--hg-ink);
	margin: 0 0 .6em; font-size: 1.02rem;
}
.hg-toc__list { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.hg-toc__item { margin-bottom: .4em; break-inside: avoid; }
.hg-toc__item--h3 { padding-left: 12px; list-style: circle; }
.hg-toc a { color: var(--hg-body); }
.hg-toc a:hover { color: var(--hg-blue); text-decoration: underline; }
@media (max-width: 600px) { .hg-toc__list { columns: 1; } }

/* Affiliate disclosure */
.hg-disclosure {
	max-width: var(--hg-narrow);
	margin: 0 auto 1.8em;
	font-size: .86rem;
	color: var(--hg-muted);
	background: var(--hg-blue-soft);
	border: 1px solid #DBEAFE;
	border-radius: var(--hg-radius-sm);
	padding: 12px 16px;
}
.hg-disclosure strong { color: var(--hg-ink); }

/* Verdict / rating box */
.hg-verdict {
	max-width: var(--hg-narrow);
	margin: 2em auto;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	box-shadow: var(--hg-shadow);
	overflow: hidden;
}
.hg-verdict__top {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
	padding: 22px 24px; background: var(--hg-bg-alt); border-bottom: 1px solid var(--hg-border);
}
.hg-verdict__score {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 84px; height: 84px; border-radius: 18px;
	background: var(--hg-blue); color: #fff;
}
.hg-verdict__score b { font-family: var(--hg-head); font-size: 1.9rem; line-height: 1; }
.hg-verdict__score span { font-size: .7rem; opacity: .85; letter-spacing: .04em; }
.hg-verdict__headline { flex: 1; min-width: 200px; }
.hg-verdict__headline h3 { margin: 0 0 .2em; }
.hg-stars { color: var(--hg-amber); font-size: 1.05rem; letter-spacing: 2px; }
.hg-verdict__body { padding: 20px 24px; }

/* Pros / cons */
.hg-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: var(--hg-narrow); margin: 2em auto; }
@media (max-width: 640px) { .hg-proscons { grid-template-columns: 1fr; } }
.hg-pros, .hg-cons { border-radius: var(--hg-radius); padding: 20px 22px; border: 1px solid var(--hg-border); }
.hg-pros { background: var(--hg-green-soft); border-color: #BBF7D0; }
.hg-cons { background: var(--hg-red-soft); border-color: #FECACA; }
.hg-pros h4, .hg-cons h4 { margin: 0 0 .7em; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.hg-pros h4 { color: var(--hg-green); }
.hg-cons h4 { color: var(--hg-red); }
.hg-pros ul, .hg-cons ul { list-style: none; margin: 0; padding: 0; }
.hg-pros li, .hg-cons li { position: relative; padding-left: 26px; margin-bottom: .55em; font-size: .97rem; }
.hg-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--hg-green); font-weight: 800; }
.hg-cons li::before { content: "✕"; position: absolute; left: 0; color: var(--hg-red); font-weight: 800; }

/* Comparison table */
.hg-table-wrap { max-width: 100%; overflow-x: auto; margin: 2em auto; }
.hg-table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	font-size: .96rem; min-width: 540px;
	border: 1px solid var(--hg-border); border-radius: var(--hg-radius); overflow: hidden;
}
.hg-table th, .hg-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--hg-border); }
.hg-table thead th {
	background: var(--hg-ink); color: #fff; font-family: var(--hg-head); font-weight: 700;
	font-size: .9rem; letter-spacing: .01em;
}
.hg-table tbody tr:nth-child(even) { background: var(--hg-bg-alt); }
.hg-table tbody tr:last-child td { border-bottom: 0; }
.hg-table td:first-child, .hg-table th:first-child { font-weight: 600; color: var(--hg-ink); }
.hg-table .hg-win { color: var(--hg-green); font-weight: 700; }
.hg-table .hg-lose { color: var(--hg-muted); }
.hg-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; font-family: var(--hg-head); }
.hg-pill--win { background: var(--hg-green-soft); color: var(--hg-green); }
.hg-pill--warn { background: #FFF7ED; color: var(--hg-orange); }

/* CTA box */
.hg-cta-box {
	max-width: var(--hg-narrow);
	margin: 2.2em auto;
	background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
	color: #fff;
	border-radius: var(--hg-radius);
	padding: 28px 28px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
	box-shadow: 0 16px 40px rgba(37,99,235,.28);
}
.hg-cta-box__text { flex: 1; min-width: 220px; }
.hg-cta-box__text h4 { color: #fff; margin: 0 0 .3em; font-size: 1.3rem; }
.hg-cta-box__text p { margin: 0; color: #DBEAFE; font-size: .98rem; }
.hg-cta-box .hg-btn--cta { white-space: nowrap; }

/* Callout / note */
.hg-callout {
	max-width: var(--hg-narrow);
	margin: 1.8em auto;
	border-left: 4px solid var(--hg-amber);
	background: #FFFBEB;
	border-radius: 0 var(--hg-radius-sm) var(--hg-radius-sm) 0;
	padding: 16px 20px;
	font-size: .98rem;
}
.hg-callout strong { color: var(--hg-ink); }

/* Key-takeaways list */
.hg-takeaways {
	max-width: var(--hg-narrow); margin: 1.5em auto 2em;
	background: #fff; border: 1px solid var(--hg-border); border-radius: var(--hg-radius);
	padding: 22px 26px; box-shadow: var(--hg-shadow-sm);
}
.hg-takeaways h4 { margin: 0 0 .6em; }
.hg-takeaways ul { margin: 0; padding-left: 1.2em; }
.hg-takeaways li { margin-bottom: .5em; }

/* Author / share row */
.hg-postfoot {
	max-width: var(--hg-narrow); margin: clamp(28px,5vw,44px) auto 0;
	padding-top: 22px; border-top: 1px solid var(--hg-border);
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.hg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-tags a {
	font-size: .82rem; font-weight: 600; font-family: var(--hg-head);
	background: var(--hg-bg-alt); border: 1px solid var(--hg-border); color: var(--hg-body) !important;
	padding: 4px 12px; border-radius: 999px;
}
.hg-tags a:hover { border-color: var(--hg-blue); color: var(--hg-blue) !important; }

/* Author box */
.hg-author {
	max-width: var(--hg-narrow);
	margin: clamp(28px,5vw,40px) auto 0;
	background: #fff;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	box-shadow: var(--hg-shadow-sm);
	padding: clamp(20px,3vw,26px);
	display: flex; align-items: center; gap: 20px;
}
.hg-author__avatar {
	flex: none;
	width: 66px; height: 66px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
	color: #fff;
	font-family: var(--hg-head); font-weight: 800; font-size: 1.45rem; letter-spacing: .02em;
	box-shadow: 0 10px 22px rgba(37,99,235,.30);
}
.hg-author__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hg-author__body { min-width: 0; }
.hg-author__eyebrow {
	margin: 0 0 3px;
	font-family: var(--hg-head); font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--hg-blue);
}
.hg-author__name {
	margin: 0 0 .35em;
	font-family: var(--hg-head); font-weight: 800; color: var(--hg-ink);
	font-size: 1.18rem; line-height: 1.25;
}
.hg-author__bio { margin: 0; color: var(--hg-body); font-size: .96rem; line-height: 1.6; }

@media (max-width: 560px) {
	.hg-author { flex-direction: column; text-align: center; gap: 14px; }
}

/* Related posts */
.hg-related { background: var(--hg-bg-alt); border-top: 1px solid var(--hg-border); margin-top: clamp(40px,6vw,64px); }
.hg-related .hg-related__title { text-align: center; margin: 0 0 clamp(22px,4vw,34px); }

/* Card placeholder when a post has no featured image */
.hg-card__ph {
	display: block; width: 100%; height: 100%;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(37,99,235,.14), transparent 60%),
		linear-gradient(135deg, #EEF2F7 0%, #E2E8F0 100%);
}

/* Pagination */
.hg-pagination { margin-top: clamp(30px, 5vw, 48px); }
.hg-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.hg-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--hg-border); border-radius: 10px;
	font-family: var(--hg-head); font-weight: 600; color: var(--hg-body);
	background: #fff; transition: all .12s ease;
}
.hg-pagination .page-numbers:hover { border-color: var(--hg-blue); color: var(--hg-blue); }
.hg-pagination .page-numbers.current { background: var(--hg-blue); border-color: var(--hg-blue); color: #fff; }
.hg-pagination .page-numbers.dots { border-color: transparent; }

.hg-empty { text-align: center; color: var(--hg-muted); padding: 40px 0; }

/* Comparisons hub intro (Comparisons Hub page template) */
.hg-archive-intro { max-width: var(--hg-narrow); margin: 14px auto 0; }
.hg-archive-intro p { color: var(--hg-muted); margin: 0 0 .7em; }
.hg-archive-intro p:last-child { margin-bottom: 0; }

/* Content library: filter tabs + search (Content Library page template) */
.hg-libbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: clamp(22px, 4vw, 34px); }
.hg-libtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-libtab {
	font-family: var(--hg-head); font-weight: 700; font-size: .9rem; line-height: 1;
	padding: 9px 17px; border-radius: 999px; border: 1px solid var(--hg-border);
	color: var(--hg-ink); background: #fff;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.hg-libtab:hover { border-color: var(--hg-blue); color: var(--hg-blue); }
.hg-libtab.is-active { background: var(--hg-blue); border-color: var(--hg-blue); color: #fff; }
.hg-libsearch { display: flex; gap: 8px; }
.hg-libsearch input[type="search"] {
	border: 1px solid var(--hg-border); border-radius: 10px; padding: 9px 14px;
	font: inherit; min-width: 210px; background: #fff; color: var(--hg-ink);
}
.hg-libsearch input[type="search"]:focus { outline: 2px solid var(--hg-blue); outline-offset: 1px; border-color: var(--hg-blue); }
.hg-libsearch button {
	font-family: var(--hg-head); font-weight: 700; cursor: pointer; white-space: nowrap;
	padding: 9px 18px; border-radius: 10px; border: 1px solid var(--hg-blue);
	background: var(--hg-blue); color: #fff; transition: background .15s ease;
}
.hg-libsearch button:hover { background: var(--hg-blue-dark); }
@media (max-width: 640px) {
	.hg-libbar { flex-direction: column; align-items: stretch; }
	.hg-libsearch { width: 100%; }
	.hg-libsearch input[type="search"] { flex: 1; min-width: 0; }
}
.hg-page-links { margin-top: 1.5em; font-family: var(--hg-head); font-weight: 600; }
.hg-page-links a, .hg-page-links > span { display: inline-block; padding: 4px 12px; border: 1px solid var(--hg-border); border-radius: 8px; margin: 0 3px; }

/* Keep our overridden Kadence content-width from squeezing custom templates */
.hg-single .hg-container,
.hg-archive-head,
.hg-grid { width: 100%; }

/* ─── Static WordPress Pages (About, Contact, Privacy, Affiliate) ───────────
   These render through Kadence's parent page.php (a wide content area), not
   our custom post template, so they need two Page-only adjustments. */

/* 1. Page-title hero: a soft blue band + hairline divider so the title
      section separates from the white header above and white body below. */
.page .entry-hero-container-inner {
	background: #EEF2FF;
	border-bottom: 1px solid var(--hg-border);
}

/* 2. The Page content column is wider than the post reading column, so the
      post-width note/takeaway boxes end up centered and indented. On Pages,
      let them span the full content width, left-aligned to match the body
      text. (Blog posts keep their narrower, centered treatment.) */
.page .hg-callout,
.page .hg-takeaways {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Sidebar "overall #1" nudge: shown in the Editor's-pick card only when a
   post's own winner isn't Hostinger, so Hostinger still gets a soft,
   clearly-secondary mention without overriding that matchup's verdict. */
.hg-side__overall {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--hg-border);
	font-size: .8rem;
	line-height: 1.5;
	color: var(--hg-muted);
}
.hg-side__overall a { color: var(--hg-blue); font-weight: 600; text-decoration: none; }
.hg-side__overall a:hover { text-decoration: underline; }

/* 10. Best-web-hosting ranking page ---------------------------------- */
.hg-best { max-width: 940px; margin-inline: auto; }
/* Let the post-width components span the page wrapper instead of the
   narrower reading column they default to inside blog posts. */
.hg-best .hg-disclosure,
.hg-best .hg-table-wrap,
.hg-best .hg-takeaways,
.hg-best .hg-callout { max-width: none; margin-left: 0; margin-right: 0; }

.hg-best .hg-lead { font-size: 1.2rem; line-height: 1.6; color: var(--hg-body); }

/* Quick picks band */
.hg-quickpicks {
	background: var(--hg-bg-alt);
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	padding: 22px 24px;
	margin: 1.8em 0 2.2em;
}
.hg-quickpicks__title {
	font-family: var(--hg-head); font-weight: 800; color: var(--hg-ink);
	margin: 0 0 .9em; font-size: 1.05rem;
}
.hg-quickpicks__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.hg-quickpicks__grid li {
	display: flex; flex-direction: column; gap: 2px;
	background: #fff; border: 1px solid var(--hg-border); border-radius: var(--hg-radius-sm);
	padding: 11px 14px; margin: 0;
}
.hg-quickpicks__k {
	font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--hg-muted); font-family: var(--hg-head);
}
.hg-quickpicks__grid a { font-family: var(--hg-head); font-weight: 700; font-size: 1.02rem; color: var(--hg-blue); }
.hg-quickpicks__grid a:hover { color: var(--hg-blue-dark); }
@media (max-width: 720px) { .hg-quickpicks__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .hg-quickpicks__grid { grid-template-columns: 1fr; } }

/* At-a-glance ranking table */
.hg-ranktable td, .hg-ranktable th { vertical-align: middle; }
.hg-ranktable__host { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.hg-ranktable__logo { width: auto; height: 24px; max-width: 84px; object-fit: contain; flex: none; }
.hg-ranktable__host span { font-weight: 700; color: var(--hg-ink); }
.hg-btn--sm { padding: .5em .95em; font-size: .82rem; }
.hg-best .hg-table-note { font-size: .82rem; color: var(--hg-muted); margin: -.4em 0 2.4em; }

/* Ranked host cards */
.hg-hostcard {
	position: relative;
	background: #fff;
	border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius);
	box-shadow: var(--hg-shadow-sm);
	padding: 24px 26px 26px;
	margin: 0 0 22px;
	scroll-margin-top: 90px;
	transition: box-shadow .15s ease;
}
.hg-hostcard:hover { box-shadow: var(--hg-shadow); }
.hg-hostcard__top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hg-hostcard__rank {
	flex: none;
	font-family: var(--hg-head); font-weight: 800; font-size: 1.05rem;
	color: var(--hg-blue); background: var(--hg-blue-soft);
	width: 44px; height: 44px; border-radius: 12px;
	display: grid; place-items: center;
}
.hg-logo-frame {
	flex: none;
	display: grid; place-items: center;
	width: 132px; height: 56px;
	background: #fff; border: 1px solid var(--hg-border); border-radius: 12px;
	padding: 7px 12px;
}
.hg-logo-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.hg-hostcard__id { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.hg-hostcard__name { margin: 0; font-size: 1.4rem; }
.hg-hostcard__score {
	flex: none; text-align: center;
	background: var(--hg-blue); color: #fff; border-radius: 12px;
	padding: 7px 14px; font-family: var(--hg-head); line-height: 1.1;
}
.hg-hostcard__score b { font-size: 1.5rem; line-height: 1; display: block; }
.hg-hostcard__score span { font-size: .72rem; opacity: .85; }
.hg-hostcard__stars { margin: 12px 0 0; font-size: 1rem; }

.hg-hostcard__metrics {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--hg-border); border: 1px solid var(--hg-border);
	border-radius: var(--hg-radius-sm); overflow: hidden; margin: 18px 0;
}
.hg-hostcard__metrics > div { background: #fff; padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; }
.hg-m__k { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--hg-muted); font-family: var(--hg-head); }
.hg-m__v { font-size: .97rem; font-weight: 600; color: var(--hg-ink); }
@media (max-width: 680px) { .hg-hostcard__metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .hg-hostcard__metrics { grid-template-columns: 1fr; } }

.hg-hostcard__verdict { margin: 0 0 4px; color: var(--hg-body); }

.hg-hostcard__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.hg-hostcard__pc .hg-pros, .hg-hostcard__pc .hg-cons { margin: 0; max-width: none; padding: 16px 18px; }
.hg-hostcard__pc h4 { font-size: .98rem; margin: 0 0 .5em; }
.hg-hostcard__pc li { font-size: .92rem; margin-bottom: .4em; }
@media (max-width: 600px) { .hg-hostcard__pc { grid-template-columns: 1fr; } }

.hg-hostcard__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hg-hostcard__cta .hg-btn { flex: 1; min-width: 180px; }