/* ==========================================================================
   TirupatiHelps v2.0.0 — pages.css
   25. Homepage hero
   26. Homepage sections
   27. Archive header and filters
   28. Single listing
   29. Single temple
   30. Single post / article body
   31. Guest post page
   32. Comments
   33. Search, 404, generic page
   ========================================================================== */

/* --------------------------------------------------------------------------
   25. Homepage hero
   -------------------------------------------------------------------------- */

.th-hero {
	position: relative;
	color: #fff;
	background: var(--th-bg-dark);
	overflow: hidden;
}

.th-hero__bg {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .42;
}

.th-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 15, 13, .55), rgba(20, 15, 13, .82));
	pointer-events: none;
}

.th-hero__in {
	position: relative;
	z-index: 2;
	padding-block: clamp(46px, 7vw, 86px);
	text-align: center;
}

.th-hero__flag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 15px;
	border-radius: var(--th-r-pill);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	font-size: 12.5px;
	font-weight: 550;
	color: #fff;
	margin-bottom: 18px;
	backdrop-filter: blur(6px);
}

.th-hero__flag svg {
	width: 14px;
	height: 14px;
}

.th-hero h1 {
	color: #fff;
	font-size: clamp(30px, 5vw, 50px);
	margin-bottom: 12px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.th-hero__sub {
	font-size: clamp(15px, 1.6vw, 17.5px);
	color: rgba(255, 255, 255, .86);
	max-width: 660px;
	margin: 0 auto 26px;
}

/* Hero search bar */
.th-herosearch {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto;
	gap: 8px;
	background: #fff;
	border-radius: var(--th-r-lg);
	padding: 9px;
	max-width: 900px;
	margin: 0 auto;
	box-shadow: var(--th-sh-lg);
}

.th-herosearch__f {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.th-herosearch__f svg {
	position: absolute;
	left: 13px;
	width: 17px;
	height: 17px;
	color: var(--th-faint);
	pointer-events: none;
}

.th-herosearch input,
.th-herosearch select {
	border: 0;
	border-radius: var(--th-r-sm);
	background: var(--th-bg-soft);
	height: 46px;
	min-height: 46px;
	padding-left: 40px;
	font-size: 14.5px;
	width: 100%;
}

.th-herosearch select {
	padding-left: 40px;
}

.th-herosearch input:focus,
.th-herosearch select:focus {
	box-shadow: 0 0 0 2px var(--th-red-soft);
}

.th-herosearch .th-btn {
	height: 46px;
	padding-inline: 26px;
}

@media (max-width: 860px) {
	.th-herosearch {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.th-herosearch__f:first-child {
		grid-column: 1 / -1;
	}

	.th-herosearch .th-btn {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.th-herosearch {
		grid-template-columns: minmax(0, 1fr);
	}
}

.th-hero__quick {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: 20px;
}

.th-hero__quick .th-btn {
	box-shadow: var(--th-sh);
}

/* Hero stat strip */
.th-hero__stats {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	max-width: 760px;
	margin: 30px auto 0;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--th-r);
	overflow: hidden;
}

.th-hero__stat {
	background: rgba(24, 18, 16, .55);
	padding: 14px 10px;
	text-align: center;
	backdrop-filter: blur(4px);
}

.th-hero__stat b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 21px;
	font-weight: 800;
	color: #fff;
}

.th-hero__stat span {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .72);
}

@media (max-width: 560px) {
	.th-hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   26. Homepage sections
   -------------------------------------------------------------------------- */

.th-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
	gap: 12px;
}

/* Horizontal scroller used for the featured listing rail */
.th-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(276px, 1fr);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.th-rail > * {
	scroll-snap-align: start;
}

@media (min-width: 1025px) {
	.th-rail {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
	}
}

.th-railnav {
	display: flex;
	gap: 7px;
}

.th-railnav button {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--th-line);
	background: #fff;
	display: grid;
	place-items: center;
	color: var(--th-ink);
}

.th-railnav button:hover {
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-railnav svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 1024px) {
	.th-railnav { display: none; }
}

/* Temple card with a wider media block */
.th-temple {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	overflow: hidden;
}

.th-temple:hover {
	border-color: #d9d2cc;
	box-shadow: var(--th-sh);
}

.th-temple__media {
	position: relative;
	background: var(--th-bg-warm);
	min-height: 168px;
}

.th-temple__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-temple__body {
	padding: 15px 17px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.th-temple__name {
	font-family: var(--th-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.th-temple__name a {
	color: var(--th-ink);
}

.th-temple__name a:hover {
	color: var(--th-red);
}

.th-temple__facts {
	display: grid;
	gap: 5px;
	font-size: 13px;
	color: var(--th-muted);
}

.th-temple__facts div {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.th-temple__facts svg {
	width: 14px;
	height: 14px;
	color: var(--th-red);
	flex: none;
	margin-top: 2px;
}

.th-temple__facts b {
	color: var(--th-ink);
	font-weight: 600;
}

@media (max-width: 560px) {
	.th-temple {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-temple__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.th-temple__media img {
		position: static;
	}
}

/* Guest post band on the homepage */
.th-gpband {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 332px;
	gap: 26px;
	align-items: start;
}

@media (max-width: 1024px) {
	.th-gpband {
		grid-template-columns: minmax(0, 1fr);
	}
}

.th-gpbox {
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 20px;
}

.th-gpbox__title {
	font-family: var(--th-font-head);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--th-ink);
}

.th-gpbox ul {
	list-style: none;
	margin: 14px 0 18px;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: 14px;
}

.th-gpbox li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
}

.th-gpbox svg {
	width: 16px;
	height: 16px;
	color: var(--th-green);
	flex: none;
	margin-top: 3px;
}

/* --------------------------------------------------------------------------
   27. Archive header and filters
   -------------------------------------------------------------------------- */

.th-ahead {
	padding-block: 24px 20px;
	border-bottom: 1px solid var(--th-line);
	background: var(--th-bg-soft);
}

.th-ahead h1 {
	margin-bottom: 8px;
}

.th-ahead__desc {
	color: var(--th-muted);
	font-size: 15px;
	max-width: 780px;
	margin: 0;
}

.th-ahead__stats {
	margin-top: 18px;
}

.th-ahead__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.th-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-size: 14px;
	color: var(--th-muted);
}

.th-toolbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.th-toolbar select {
	min-height: 38px;
	height: 38px;
	padding-block: 0;
	font-size: 13.5px;
	width: auto;
	min-width: 190px;
}

.th-viewtoggle {
	display: inline-flex;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-sm);
	overflow: hidden;
}

.th-viewtoggle a,
.th-viewtoggle button {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 0;
	color: var(--th-muted);
}

.th-viewtoggle a + a,
.th-viewtoggle button + button {
	border-left: 1px solid var(--th-line);
}

.th-viewtoggle .is-on {
	background: var(--th-red-tint);
	color: var(--th-red);
}

.th-viewtoggle svg {
	width: 16px;
	height: 16px;
}

/* Filter sidebar */
.th-filters {
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 16px 17px;
}

.th-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--th-line);
}

.th-filters__head h2 {
	font-size: 15.5px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.th-filters__head svg {
	width: 16px;
	height: 16px;
	color: var(--th-red);
}

.th-filters__reset {
	font-size: 12.5px;
	color: var(--th-red);
	background: none;
	border: 0;
	padding: 0;
}

.th-fgroup {
	padding: 14px 0;
	border-bottom: 1px solid var(--th-line-soft);
}

.th-fgroup:last-of-type {
	border-bottom: 0;
}

.th-fgroup__title {
	font-family: var(--th-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--th-muted);
	margin: 0 0 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.th-fgroup__list {
	display: grid;
	gap: 8px;
	max-height: 232px;
	overflow-y: auto;
	padding-right: 4px;
}

.th-fgroup__list::-webkit-scrollbar {
	width: 5px;
}

.th-fgroup__list::-webkit-scrollbar-thumb {
	background: var(--th-line);
	border-radius: 3px;
}

.th-fcheck {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--th-body);
	cursor: pointer;
}

.th-fcheck span:first-of-type {
	flex: 1 1 auto;
	min-width: 0;
}

.th-fcheck__n {
	font-size: 11.5px;
	color: var(--th-faint);
	flex: none;
}

/* Toggle switch used for "verified only" */
.th-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--th-ink);
	cursor: pointer;
}

.th-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.th-switch__ui {
	width: 38px;
	height: 21px;
	border-radius: var(--th-r-pill);
	background: var(--th-line);
	position: relative;
	flex: none;
	transition: background .18s var(--th-ease);
}

.th-switch__ui::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--th-sh-xs);
	transition: transform .18s var(--th-ease);
}

.th-switch input:checked + .th-switch__ui {
	background: var(--th-green);
}

.th-switch input:checked + .th-switch__ui::after {
	transform: translateX(17px);
}

.th-switch input:focus-visible + .th-switch__ui {
	outline: 2px solid var(--th-red);
	outline-offset: 2px;
}

/* Mobile filter sheet */
.th-filterbtn {
	display: none;
}

@media (max-width: 1024px) {
	.th-filterbtn {
		display: inline-flex;
	}

	.th-filters {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 80;
		max-height: 84vh;
		overflow-y: auto;
		border-radius: var(--th-r-lg) var(--th-r-lg) 0 0;
		transform: translateY(100%);
		transition: transform .25s var(--th-ease);
		box-shadow: var(--th-sh-up);
	}

	.th-filters.is-open {
		transform: translateY(0);
	}

	.th-filters__head {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 2;
		padding-top: 4px;
	}
}

/* --------------------------------------------------------------------------
   28. Single listing
   -------------------------------------------------------------------------- */

.th-lhead {
	padding-block: 20px 22px;
	border-bottom: 1px solid var(--th-line);
}

.th-lhead__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 11px;
}

.th-lhead__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
}

.th-lhead h1 {
	margin-bottom: 8px;
}

.th-lhead__addr {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 14.5px;
	color: var(--th-muted);
	margin-bottom: 10px;
}

.th-lhead__addr svg {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 3px;
	color: var(--th-red);
}

.th-lhead__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	font-size: 13.5px;
	color: var(--th-muted);
}

.th-lhead__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-items: center;
}

.th-lhead__price {
	font-family: var(--th-font-head);
	font-size: 20px;
	font-weight: 750;
	color: var(--th-ink);
}

.th-lhead__price small {
	font-size: 12.5px;
	font-weight: 450;
	color: var(--th-muted);
}

/* Amenity strip under the header */
.th-lstrip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 14px;
	border-bottom: 1px solid var(--th-line);
}

/* Gallery */
.th-gallery {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 10px;
	margin-block: 22px;
}

.th-gallery__main {
	position: relative;
	border-radius: var(--th-r);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--th-bg-warm);
}

.th-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-gallery__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 18px 16px;
	background: linear-gradient(transparent, rgba(20, 15, 13, .82));
	color: #fff;
}

.th-gallery__cap b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 17px;
	margin-bottom: 3px;
}

.th-gallery__cap span {
	font-size: 12.5px;
	opacity: .85;
}

.th-gallery__side {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 1fr);
	gap: 10px;
}

.th-gallery__thumb {
	position: relative;
	border-radius: var(--th-r-sm);
	overflow: hidden;
	background: var(--th-bg-warm);
	aspect-ratio: 4 / 3;
}

.th-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-gallery__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(20, 15, 13, .6);
	color: #fff;
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 650;
}

@media (max-width: 768px) {
	.th-gallery {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-gallery__side {
		grid-template-rows: 1fr;
	}

	.th-gallery__thumb:nth-child(n + 3) {
		display: none;
	}
}

/* Content blocks */
.th-block {
	margin-bottom: 30px;
}

/*
 * A block that follows article prose needs air above it, not just below.
 * Adjacent margins collapse, so this does not stack with the 30px below.
 */
.th-article + .th-block,
.th-adslot + .th-block,
.th-block + .th-block {
	margin-top: 38px;
}

.th-block__title {
	font-family: var(--th-font-head);
	font-size: 21px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.th-block__title svg {
	width: 20px;
	height: 20px;
	color: var(--th-red);
	flex: none;
}

.th-block__sub {
	font-size: 14px;
	color: var(--th-muted);
	margin: 0 0 16px;
}

/* Fact grid */
.th-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

.th-fact {
	display: flex;
	gap: 11px;
	padding: 13px 15px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
}

.th-fact svg {
	width: 18px;
	height: 18px;
	color: var(--th-red);
	flex: none;
	margin-top: 2px;
}

.th-fact b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 14px;
	color: var(--th-ink);
	margin-bottom: 2px;
}

.th-fact span {
	font-size: 13px;
	color: var(--th-muted);
}

/* Services checklist */
.th-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 9px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-checks li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14.5px;
	margin: 0;
}

.th-checks svg {
	width: 16px;
	height: 16px;
	color: var(--th-green);
	flex: none;
	margin-top: 3px;
}

/* Tariff rows */
.th-tariff {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	margin-bottom: 10px;
}

.th-tariff--best {
	border-color: var(--th-red);
	box-shadow: 0 0 0 2px var(--th-red-soft);
}

.th-tariff__name {
	font-family: var(--th-font-head);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 5px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.th-tariff__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.th-tariff__right {
	text-align: right;
	flex: none;
}

.th-tariff__price {
	font-family: var(--th-font-head);
	font-size: 20px;
	font-weight: 750;
	color: var(--th-ink);
	line-height: 1.2;
}

.th-tariff__was {
	font-size: 12.5px;
	color: var(--th-faint);
	text-decoration: line-through;
}

@media (max-width: 560px) {
	.th-tariff {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-tariff__right {
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
}

/* Map */
.th-map {
	position: relative;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	overflow: hidden;
	background: var(--th-bg-warm);
}

.th-map iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
}

.th-map__ph {
	display: grid;
	place-items: center;
	height: 240px;
	color: var(--th-muted);
	font-size: 14px;
	text-align: center;
	padding: 20px;
}

.th-distances {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

/* Hours table */
.th-hours td:first-child {
	font-weight: 600;
	color: var(--th-ink);
	width: 40%;
}

/* Quick action tiles */
.th-qacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 10px;
	margin-block: 20px;
}

.th-qact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 15px 10px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	text-align: center;
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
	transition: border-color .16s var(--th-ease), transform .16s var(--th-ease);
}

.th-qact:hover {
	border-color: var(--th-red);
	color: var(--th-red);
	transform: translateY(-2px);
}

.th-qact svg {
	width: 21px;
	height: 21px;
	color: var(--th-red);
}

.th-qact small {
	font-weight: 450;
	color: var(--th-muted);
	font-size: 11.5px;
}

/* Report / claim links */
.th-microlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 14px 0;
	font-size: 13px;
	color: var(--th-muted);
	border-top: 1px solid var(--th-line);
	margin-top: 24px;
}

.th-microlinks a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--th-muted);
}

.th-microlinks a:hover {
	color: var(--th-red);
}

.th-microlinks svg {
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------------------
   29. Single temple
   -------------------------------------------------------------------------- */

.th-thead {
	padding-block: 22px;
	border-bottom: 1px solid var(--th-line);
	background: linear-gradient(140deg, var(--th-red-tint), #fff 58%);
}

.th-timings td:first-child {
	white-space: nowrap;
	font-family: var(--th-font-head);
	font-weight: 650;
	color: var(--th-red);
	width: 150px;
}

.th-steps {
	list-style: none;
	counter-reset: th-step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

.th-step {
	counter-increment: th-step;
	position: relative;
	padding: 15px 17px 15px 54px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	margin: 0;
}

.th-step::before {
	content: counter(th-step);
	position: absolute;
	left: 16px;
	top: 15px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--th-red);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--th-font-head);
	font-size: 13px;
	font-weight: 700;
}

.th-step b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 15px;
	color: var(--th-ink);
	margin-bottom: 3px;
}

.th-step span {
	font-size: 13.5px;
	color: var(--th-muted);
}

/* Two-column do / don't panels */
.th-dodont {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 640px) {
	.th-dodont {
		grid-template-columns: minmax(0, 1fr);
	}
}

.th-panel {
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	padding: 17px;
	background: #fff;
}

.th-panel__title {
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--th-ink);
}

.th-panel__title svg {
	width: 17px;
	height: 17px;
}

.th-panel--ok .th-panel__title { color: var(--th-green-dark); }
.th-panel--no .th-panel__title { color: #a62520; }

.th-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 14px;
}

.th-panel li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
}

.th-panel li svg {
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 3px;
}

.th-panel--ok li svg { color: var(--th-green); }
.th-panel--no li svg { color: #c0392b; }

/* --------------------------------------------------------------------------
   30. Single post / article body
   -------------------------------------------------------------------------- */

.th-post-head {
	padding-block: 22px 18px;
}

.th-post-head__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 12px;
}

.th-post-head h1 {
	margin-bottom: 12px;
}

.th-post-head__lead {
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--th-muted);
	margin-bottom: 16px;
}

.th-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	font-size: 13.5px;
	color: var(--th-muted);
	padding-block: 12px;
	border-top: 1px solid var(--th-line);
	border-bottom: 1px solid var(--th-line);
}

.th-byline__who {
	display: flex;
	align-items: center;
	gap: 9px;
}

.th-byline img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.th-byline b {
	color: var(--th-ink);
	font-weight: 650;
}

.th-byline__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.th-byline__item svg {
	width: 14px;
	height: 14px;
	color: var(--th-faint);
}

.th-hero-img {
	border-radius: var(--th-r-lg);
	overflow: hidden;
	margin-block: 22px;
	background: var(--th-bg-warm);
}

.th-hero-img img {
	width: 100%;
	display: block;
}

/* Article prose */
.th-article {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--th-body);
}

.th-article > *:first-child {
	margin-top: 0;
}

.th-article h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	margin-top: 1.9em;
	margin-bottom: .55em;
	padding-bottom: .3em;
	border-bottom: 2px solid var(--th-red-soft);
}

.th-article h3 {
	font-size: clamp(18.5px, 2.1vw, 22px);
	margin-top: 1.6em;
	margin-bottom: .45em;
}

.th-article h4 {
	margin-top: 1.4em;
	margin-bottom: .4em;
}

.th-article ul,
.th-article ol {
	padding-left: 1.5em;
	margin-bottom: 1.3em;
}

.th-article li {
	margin-bottom: .55em;
}

.th-article ul > li::marker {
	color: var(--th-red);
}

.th-article ol > li::marker {
	color: var(--th-red);
	font-weight: 700;
}

.th-article img {
	border-radius: var(--th-r);
}

.th-article table {
	font-size: 15px;
	margin-bottom: 1.4em;
}

.th-article th,
.th-article td {
	border: 1px solid var(--th-line);
	padding: 10px 13px;
	text-align: left;
}

.th-article th {
	background: var(--th-bg-warm);
	font-family: var(--th-font-head);
	font-weight: 650;
	color: var(--th-ink);
}

.th-article a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(211, 47, 47, .35);
}

.th-article a:hover {
	text-decoration-color: currentColor;
}

/* Heading anchor link revealed on hover */
.th-anchor {
	opacity: 0;
	margin-left: 8px;
	font-size: .72em;
	color: var(--th-faint);
	text-decoration: none;
	transition: opacity .15s var(--th-ease);
}

.th-article :is(h2, h3):hover .th-anchor,
.th-anchor:focus-visible {
	opacity: 1;
}

/* Post tags */
.th-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 26px 0;
}

.th-tags__label {
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
}

/* Author box on single posts (kept off the homepage on purpose) */
.th-authorbox {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: var(--th-bg-soft);
	margin: 30px 0;
}

.th-authorbox img {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.th-authorbox__name {
	font-family: var(--th-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 3px;
}

.th-authorbox__role {
	font-size: 12.5px;
	color: var(--th-red);
	font-weight: 600;
	margin-bottom: 7px;
}

.th-authorbox__bio {
	font-size: 14px;
	color: var(--th-muted);
	margin: 0;
}

@media (max-width: 560px) {
	.th-authorbox {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}
}

/* Related posts */
.th-related {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--th-line);
}

/* --------------------------------------------------------------------------
   31. Guest post page
   -------------------------------------------------------------------------- */

.th-gphero {
	padding-block: clamp(30px, 4.5vw, 52px);
	background: linear-gradient(140deg, var(--th-red-tint), #fff 60%);
	border-bottom: 1px solid var(--th-line);
}

.th-gphero h1 {
	margin-bottom: 12px;
}

.th-gphero h1 span {
	color: var(--th-red);
}

.th-gphero__lead {
	font-size: 16.5px;
	color: var(--th-muted);
	max-width: 720px;
	margin: 0 0 20px;
}

/* Category grid on the guest post page */
.th-gpcats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
	gap: 12px;
}

.th-gpcat {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	transition: border-color .16s var(--th-ease), transform .16s var(--th-ease);
}

.th-gpcat:hover {
	border-color: var(--th-red);
	transform: translateY(-2px);
}

.th-gpcat__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--th-r-sm);
	display: grid;
	place-items: center;
	flex: none;
	background: var(--th-red-tint);
	color: var(--th-red);
}

.th-gpcat__icon svg {
	width: 19px;
	height: 19px;
}

.th-gpcat b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 14.5px;
	color: var(--th-ink);
	line-height: 1.3;
}

.th-gpcat span {
	font-size: 12px;
	color: var(--th-muted);
}

/* Steps row */
.th-how {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	counter-reset: th-how;
}

.th-howstep {
	counter-increment: th-how;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	position: relative;
}

.th-howstep::before {
	content: counter(th-how);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--th-red-soft);
	color: var(--th-red);
	font-family: var(--th-font-head);
	font-weight: 800;
	font-size: 15px;
	margin-bottom: 11px;
}

.th-howstep b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 15.5px;
	color: var(--th-ink);
	margin-bottom: 5px;
}

.th-howstep p {
	font-size: 13.5px;
	color: var(--th-muted);
	margin: 0;
}

/* Submission form panel */
.th-gpform {
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-lg);
	padding: clamp(20px, 3vw, 30px);
}

.th-gpform__head {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--th-line);
}

.th-gpform__head h2 {
	margin-bottom: 4px;
}

.th-gpform__head p {
	font-size: 14px;
	color: var(--th-muted);
	margin: 0;
}

/* Category multi-select as chips */
.th-catpick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.th-catpick label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-pill);
	background: #fff;
	font-size: 13.5px;
	font-weight: 550;
	color: var(--th-body);
	cursor: pointer;
	transition: border-color .15s var(--th-ease), background .15s var(--th-ease), color .15s var(--th-ease);
}

/*
 * The checkbox is hidden visually but stays in the accessibility tree and
 * remains keyboard focusable — width/height 0 with opacity 0 would take it out
 * of the tab order in some browsers.
 */
.th-catpick input {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * .is-on is set by theme.js. :has() covers the no-JS case on current browsers;
 * plenty of the phones this site is read on ship older engines, so the class is
 * what actually does the work.
 */
.th-catpick label.is-on,
.th-catpick label:has(input:checked) {
	background: var(--th-red);
	border-color: var(--th-red);
	color: #fff;
}

.th-catpick label.is-focused,
.th-catpick label:has(input:focus-visible) {
	outline: 2px solid var(--th-red);
	outline-offset: 2px;
}

.th-catpick svg {
	width: 15px;
	height: 15px;
}

/* --------------------------------------------------------------------------
   32. Comments
   -------------------------------------------------------------------------- */

.th-comments {
	margin-top: 38px;
	padding-top: 28px;
	border-top: 1px solid var(--th-line);
}

.th-comments__title {
	font-family: var(--th-font-head);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 20px;
}

.th-comments ol.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-comments ol.children {
	list-style: none;
	margin: 16px 0 0 26px;
	padding-left: 18px;
	border-left: 2px solid var(--th-line);
}

.th-comments li.comment,
.th-comments li.pingback {
	margin-bottom: 20px;
}

.th-comment {
	display: flex;
	gap: 13px;
}

.th-comment img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: none;
}

.th-comment__name {
	font-family: var(--th-font-head);
	font-size: 14.5px;
	font-weight: 650;
	color: var(--th-ink);
}

.th-comment__date {
	font-size: 12.5px;
	color: var(--th-muted);
	margin-bottom: 7px;
}

.th-comment__text {
	font-size: 15px;
}

.th-comment__actions {
	margin-top: 7px;
	font-size: 13px;
	display: flex;
	gap: 14px;
}

.comment-respond {
	margin-top: 28px;
	padding: 20px;
	background: var(--th-bg-soft);
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
}

.comment-reply-title {
	font-family: var(--th-font-head);
	font-size: 17px;
	margin: 0 0 6px;
}

.comment-notes,
.comment-form-cookies-consent label {
	font-size: 13.5px;
	color: var(--th-muted);
}

.comment-form p {
	margin-bottom: 14px;
}

.comment-form label {
	display: block;
	margin-bottom: 5px;
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
}

.comment-form .form-submit {
	margin-bottom: 0;
}

.comment-form input[type="submit"] {
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--th-r-sm);
	background: var(--th-red);
	color: #fff;
	font-family: var(--th-font-head);
	font-size: 14.5px;
	font-weight: 650;
	cursor: pointer;
	width: auto;
	min-height: 0;
}

.comment-form input[type="submit"]:hover {
	background: var(--th-red-dark);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.comment-form-cookies-consent label {
	font-weight: 450;
	margin: 0;
}

/* --------------------------------------------------------------------------
   33. Search, 404, generic page
   -------------------------------------------------------------------------- */

.th-page-head {
	padding-block: 26px 20px;
	border-bottom: 1px solid var(--th-line);
}

.th-page-body {
	padding-block: 32px;
}

.th-empty {
	text-align: center;
	padding: 52px 20px;
	border: 1px dashed var(--th-line);
	border-radius: var(--th-r-lg);
	background: var(--th-bg-soft);
}

.th-empty__icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--th-red-tint);
	color: var(--th-red);
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
}

.th-empty__icon svg {
	width: 28px;
	height: 28px;
}

.th-empty h2 {
	font-size: 21px;
	margin-bottom: 8px;
}

.th-empty p {
	color: var(--th-muted);
	max-width: 480px;
	margin: 0 auto 20px;
}

.th-404 {
	text-align: center;
	padding-block: clamp(46px, 8vw, 90px);
}

.th-404__code {
	font-family: var(--th-font-head);
	font-size: clamp(74px, 16vw, 148px);
	font-weight: 800;
	line-height: 1;
	color: var(--th-red-soft);
	letter-spacing: -.04em;
}

.th-404 h1 {
	margin-top: -14px;
}

.th-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
}

/* Search results list */
.th-sresult {
	padding: 18px 0;
	border-bottom: 1px solid var(--th-line-soft);
}

.th-sresult__type {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--th-red);
	margin-bottom: 5px;
}

.th-sresult h2 {
	font-size: 18px;
	margin-bottom: 5px;
}

.th-sresult p {
	font-size: 14.5px;
	color: var(--th-muted);
	margin: 0;
}

.th-sresult__url {
	font-size: 12.5px;
	color: var(--th-green-dark);
	margin-top: 5px;
}