/*
Theme Name: Bloghash Pro Child
Description: Child theme of Bloghash Pro for the Forex In Thai redesign. All custom CSS and template overrides live here so the parent theme can be updated safely.
Author: Forex In Thai
Template: bloghash-pro
Version: 1.1.0
Text Domain: bloghash-pro-child
*/


/* Header logo: the theme's width:auto/height:auto + max-width:100% inside a
   shrink-to-fit flex <a> collapses the image box to 0x0 until the file
   loads, shifting everything below (CLS). Pin the rendered size instead
   (both logos cap at the customizer's 80px max-height anyway). */
.bloghash-logo a img {
	height: 80px;
	width: auto;
}

:root {
	--fit-ink: #0b2e33;
	--fit-ink-2: #3f5d62;
	--fit-teal: #0e7c74;
	--fit-teal-deep: #0a5a54;
	--fit-teal-soft: #e2f1ee;
	--fit-bull: #0fa958;
	--fit-gold: #f2b33d;
	--fit-gold-hover: #e8a52c;
	--fit-mist: #f0f6f5;
	--fit-line: #dce8e6;
	--fit-radius: 14px;
	--fit-radius-sm: 10px;
	--fit-display: "IBM Plex Sans Thai", "Sarabun", sans-serif;
	--fit-mono: "IBM Plex Mono", monospace;
	--fit-shadow: 0 10px 30px -12px rgba(11, 46, 51, 0.18);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
	background: #fff;
	color: var(--fit-ink);
}

#page {
	background: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.entry-title {
	font-family: var(--fit-display) !important;
	color: var(--fit-ink);
	letter-spacing: -0.01em;
}

a {
	color: var(--fit-teal);
}

a:hover {
	color: var(--fit-teal-deep);
}

:focus-visible {
	outline: 2px solid var(--fit-teal);
	outline-offset: 2px;
}

::selection {
	background: var(--fit-teal-soft);
	color: var(--fit-ink);
}

/* --------------------------------------------------------------------------
   2. Topbar — quiet utility strip
   -------------------------------------------------------------------------- */

#bloghash-topbar {
	background: var(--fit-mist) !important;
	border-bottom: 1px solid var(--fit-line);
	font-size: 13px;
	color: var(--fit-ink-2);
}

#bloghash-topbar .bloghash-topbar-widget__text span {
	color: var(--fit-ink-2);
}

/* --------------------------------------------------------------------------
   3. Header + navigation
   -------------------------------------------------------------------------- */

#bloghash-header-inner {
	border-bottom: none;
}

.bloghash-logo-container {
	padding-top: 18px;
	padding-bottom: 12px;
}

.site-description {
	font-family: var(--fit-mono);
	font-size: 12px !important;
	letter-spacing: 0.08em;
	color: var(--fit-ink-2);
}

.bloghash-nav-container {
	background: #fff;
	border-top: 1px solid var(--fit-line);
	border-bottom: 1px solid var(--fit-line);
}

#bloghash-header-inner .bloghash-nav-container .menu > li > a,
#bloghash-primary-nav > li > a {
	font-family: var(--fit-display) !important;
	font-weight: 600;
	color: var(--fit-ink);
}

#bloghash-primary-nav > li > a > span {
	position: relative;
	padding-bottom: 4px;
}

#bloghash-primary-nav > li > a > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--fit-teal);
	transition: right 0.25s ease;
}

#bloghash-primary-nav > li:hover > a > span::after,
#bloghash-primary-nav > li.current-menu-item > a > span::after {
	right: 0;
}

/* --------------------------------------------------------------------------
   4. Ticker — the market tape (signature element)
   -------------------------------------------------------------------------- */

#ticker .bloghash-ticker {
	background: var(--fit-ink);
	border-radius: 0;
}

/* the slide strip is white in the parent theme — let the ink show through */
#ticker .ticker-slider-box {
	background: transparent;
}

#ticker .bloghash-card-items {
	margin: 1rem 0 !important;
}

#ticker .bloghash-ticker .widget-title {
	font-family: var(--fit-mono) !important;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fit-ink);
	background: var(--fit-gold);
	border-radius: 4px;
	padding: 6px 12px;
	margin: 0;
	position: relative;
}

#ticker .bloghash-ticker .widget-title::before {
	content: "●";
	color: var(--fit-bull);
	margin-right: 6px;
	font-size: 9px;
	vertical-align: 1px;
}

#ticker .ticker-slide-item h6,
#ticker .ticker-slide-item h6 a {
	color: #fff !important;
	font-weight: 500;
}

#ticker .ticker-slide-item h6 a:hover {
	color: var(--fit-gold) !important;
}

#ticker .entry-meta,
#ticker .entry-meta * {
	font-family: var(--fit-mono);
	font-size: 11px !important;
	color: #8fb5b1 !important;
}

/* --------------------------------------------------------------------------
   5. Section headers — terminal watchlist rows
   Candle glyph + title + axis rule with tick marks.
   -------------------------------------------------------------------------- */

.bloghash-card-items > .h4.widget-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	font-size: 1.9rem;
}

.bloghash-card-items > .h4.widget-title::before {
	content: "";
	flex: none;
	width: 10px;
	height: 24px;
	border-radius: 2px;
	background:
		linear-gradient(var(--fit-teal), var(--fit-teal)) center / 2px 24px no-repeat,
		linear-gradient(var(--fit-teal), var(--fit-teal)) center / 10px 15px no-repeat;
}

.bloghash-card-items > .h4.widget-title span {
	color: var(--fit-ink);
}

.bloghash-card-items > .h4.widget-title::after {
	content: "";
	flex: 1;
	height: 9px;
	background:
		repeating-linear-gradient(90deg, var(--fit-line) 0 1px, transparent 1px 26px) left center / 100% 9px no-repeat,
		linear-gradient(var(--fit-line), var(--fit-line)) left bottom / 100% 1px no-repeat;
}

/* hide the theme's default dot + line heading decoration */
.bloghash-card-items > .h4.widget-title span::before,
.bloghash-card-items > .h4.widget-title span::after {
	display: none !important;
}

/* --------------------------------------------------------------------------
   6. Sections — unboxed, calm rhythm
   -------------------------------------------------------------------------- */

.bloghash-card__boxed {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding-top: 44px !important;
	padding-bottom: 44px !important;
}

/* the theme boxes the INNER .bloghash-card-items — flatten it */
.bloghash-card__boxed .bloghash-card-items {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Editors' choice sits on a soft mist band for rhythm */
#editors_choice .bloghash-card-items {
	background: var(--fit-mist) !important;
	border-radius: 20px !important;
	padding: 36px 32px !important;
}

/* reading list: 3×2 horizontal index cards instead of six squeezed minis */
@media only screen and (min-width: 782px) {
	#editors_choice .bloghash-card-items .bloghash-flex-row .col-md-2 {
		flex-basis: 33.333% !important;
		max-width: 33.333% !important;
	}
}

#editors_choice .bloghash-post-item.style-3 {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff !important;
	border: 1px solid var(--fit-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 10px !important;
	height: 100%;
}

#editors_choice .style-3 .bloghash-post-thumb {
	flex: 0 0 132px;
	min-height: 0 !important;
	margin: 0 !important;
}

#editors_choice .style-3 .bloghash-post-thumb .inner,
#editors_choice .style-3 .bloghash-post-thumb .inner img {
	width: 132px !important;
	height: 88px !important;
	min-height: 0 !important;
	object-fit: cover;
	border-radius: 0 !important;
	display: block;
}

#editors_choice .style-3 .bloghash-post-content {
	padding: 0 !important;
	min-width: 0;
}

/* one quiet category tag is enough on a small card */
#editors_choice .style-3 .post-category {
	margin-bottom: 4px !important;
}

#editors_choice .style-3 .post-category .cat-links span > a:nth-of-type(n + 2) {
	display: none;
}

#editors_choice .style-3 .entry-title {
	font-size: 16px !important;
	line-height: 1.45 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* small screens: drop the tag, smaller thumb, give the title the room */
@media (max-width: 767px) {
	#editors_choice .style-3 .bloghash-post-thumb {
		flex: 0 0 104px;
	}

	#editors_choice .style-3 .bloghash-post-thumb .inner,
	#editors_choice .style-3 .bloghash-post-thumb .inner img {
		width: 104px !important;
		height: 70px !important;
	}

	#editors_choice .style-3 .post-category {
		display: none !important;
	}

	#editors_choice .style-3 .entry-title {
		font-size: 15px !important;
		-webkit-line-clamp: 3;
	}
}

/* --------------------------------------------------------------------------
   7. Cards, chips, meta
   -------------------------------------------------------------------------- */

.bloghash-post-item .bloghash-post-thumb .inner {
	border-radius: var(--fit-radius);
	overflow: hidden;
}

.bloghash-post-item {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border-radius: var(--fit-radius);
}

.bloghash-post-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--fit-shadow);
}

.bloghash-post-item .entry-title {
	font-weight: 600;
	line-height: 1.45;
}

.bloghash-post-item .entry-title a:hover {
	color: var(--fit-teal);
}

/* category chips — soft tinted pills, keep per-category colors readable */
.post-category .cat-links a {
	font-family: var(--fit-mono);
	font-size: 10.5px !important;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px !important;
	padding: 4px 11px !important;
}

/* meta — small mono, terminal flavour */
.entry-meta,
.entry-meta .posted-on,
.entry-meta time,
.entry-meta span {
	font-family: var(--fit-mono);
	font-size: 11.5px;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   8. Hero slider
   -------------------------------------------------------------------------- */

/* sharp corners — no rounding anywhere in the hero */
#hero .bloghash-post-item,
#hero .bloghash-post-item.rounded,
#hero .bloghash-post-item .bloghash-post-thumb .inner {
	border-radius: 0 !important;
}

/* calmer height than the 750px Customizer value; content sits bottom-left */
#hero .bloghash-hero-slider .bloghash-post-item {
	height: 520px;
	align-items: flex-end;
	justify-content: flex-start;
}

/* full-width single slide: cinematic but not a full screen */
#hero .one-slider .bloghash-post-item {
	height: min(620px, 78vh);
}

/* the theme zooms the WHOLE slide on hover — keep text still, zoom image only */
#hero .one-slider .bloghash-post-item:focus-within,
#hero .one-slider .bloghash-post-item:hover {
	transform: none;
}

/* text column reads comfortably on a 1440px-wide stage */
#hero .one-slider .bloghash-post-content {
	max-width: 860px;
	padding: 40px 24px 44px;
}

#hero .one-slider .entry-header .entry-title {
	font-size: 40px;
}

#hero .style-1.bloghash-post-item.center .bloghash-post-content {
	text-align: left;
}

#hero .style-1.bloghash-post-item.center .bloghash-post-content .entry-meta-elements {
	justify-content: flex-start;
}

/* readable ink gradient only where the text lives, image stays visible above */
#hero .slider-overlay-1 .bloghash-post-thumb .inner:after {
	background: linear-gradient(
		to bottom,
		rgba(11, 46, 51, 0.04) 0%,
		rgba(11, 46, 51, 0.12) 40%,
		rgba(11, 46, 51, 0.74) 70%,
		rgba(11, 46, 51, 0.96) 100%
	);
}

#hero .bloghash-post-content {
	width: 100%;
	padding: 26px 26px 24px;
}

/* gold tick anchors the text block */
#hero .bloghash-post-content::before {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: var(--fit-gold);
	margin-bottom: 12px;
}

/* categories: quiet mono tags instead of pastel pills, show at most two */
#hero .post-category .cat-links a {
	background: transparent !important;
	color: #ffd88a !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-size: 11px !important;
	letter-spacing: 0.1em;
}

#hero .post-category .cat-links span > a:nth-of-type(2)::before {
	content: "/";
	color: rgba(255, 216, 138, 0.55);
	margin: 0 8px;
}

#hero .post-category .cat-links span > a:nth-of-type(n + 3) {
	display: none;
}

#hero .entry-header .entry-title {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.4;
	text-wrap: balance;
	letter-spacing: 0;
}

#hero .entry-meta,
#hero .entry-meta time,
#hero .entry-meta span {
	color: #b6d2cd !important;
}

/* slow zoom on hover keeps the card alive without hurting the text */
#hero .bloghash-post-thumb .inner img {
	transition: transform 0.7s ease;
}

#hero .bloghash-post-item:hover .bloghash-post-thumb .inner img {
	transform: scale(1.05);
}

/* the hero read-more label is blank in the Customizer — hide the empty pill */
#hero a.read-more.bloghash-btn:has(> span:empty) {
	display: none;
}

/* square controls to match the sharp cards */
#hero .swiper-button-prev,
#hero .swiper-button-next {
	background: rgba(11, 46, 51, 0.85);
	color: #fff;
	border-radius: 0;
}

#hero .swiper-button-prev:hover,
#hero .swiper-button-next:hover {
	background: var(--fit-gold);
	color: var(--fit-ink);
}

/* dash-style pagination, gold for the active slide */
#hero .swiper-pagination-bullet {
	width: 26px;
	height: 3px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

#hero .swiper-pagination-bullet-active {
	background: var(--fit-gold);
}

@media (max-width: 768px) {
	#hero .bloghash-hero-slider .bloghash-post-item,
	#hero .one-slider .bloghash-post-item {
		height: 440px;
	}

	#hero .entry-header .entry-title,
	#hero .one-slider .entry-header .entry-title {
		font-size: 23px;
	}

	#hero .bloghash-post-content,
	#hero .one-slider .bloghash-post-content {
		padding: 18px 18px 20px;
	}
}

/* --------------------------------------------------------------------------
   9. Buttons — one system: gold = act, teal = navigate
   -------------------------------------------------------------------------- */

.bloghash-btn,
.button,
input[type="submit"] {
	font-family: var(--fit-display) !important;
	font-weight: 600;
	border-radius: 999px !important;
}

.bloghash-btn.btn-white {
	background: #fff;
	color: var(--fit-ink) !important;
}

.bloghash-btn.btn-white:hover {
	background: var(--fit-gold);
	color: var(--fit-ink) !important;
}

/* broker comparison-table CTAs (gutencon) — retire the red */
.comparison-item .gc-item-btn {
	--gcbtnbg: var(--fit-gold) !important;
	--gcbtncolor: var(--fit-ink) !important;
	background: var(--fit-gold) !important;
	color: var(--fit-ink) !important;
	font-family: var(--fit-display) !important;
	font-weight: 700;
	border-radius: 999px !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.comparison-item .gc-item-btn:hover {
	background: var(--fit-teal) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* shortcodes-ultimate buttons in content */
.su-button {
	border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   10. Content area typography
   -------------------------------------------------------------------------- */

.entry-content h1.wp-block-heading,
.entry-content h2.wp-block-heading {
	letter-spacing: -0.015em;
}

.entry-content h2.wp-block-heading.has-text-align-center {
	position: relative;
	padding-bottom: 16px;
}

.entry-content h2.wp-block-heading.has-text-align-center::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--fit-gold);
}

/* --------------------------------------------------------------------------
   10.4 Popular brokers (gutencon comparison-table) — broker cards
   Numbered like the watchlist via CSS counters; hairline frame; the
   plugin's scoped CSS is overridden with !important where it collides.
   -------------------------------------------------------------------------- */

.comparison-table .comparison-wrapper {
	counter-reset: fit-broker;
}

.comparison-table .comparison-item {
	counter-increment: fit-broker;
	border-color: var(--fit-line) !important;
	padding-top: 10px;
	transition: background 0.2s ease;
}

.comparison-table .comparison-item:first-child {
	border-left: 1px solid var(--fit-line);
}

.comparison-table .comparison-item:hover {
	background: var(--fit-mist);
}

/* rank chip, same language as the watchlist rows */
.comparison-table .comparison-item::before {
	content: "0" counter(fit-broker);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: var(--fit-ink);
	color: var(--fit-gold);
	font-family: var(--fit-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	padding: 4px 9px;
}

.comparison-table .comparison-item .product-image {
	height: 130px !important;
	padding-top: 14px !important;
	margin-bottom: 10px !important;
}

.comparison-table .comparison-item .product-image .image img {
	max-height: 92px !important;
}

.comparison-table .comparison-item .item-title {
	font-family: var(--fit-display) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--fit-ink);
}

.comparison-table .comparison-item .item-subtitle {
	opacity: 1 !important;
	color: var(--fit-ink-2) !important;
	font-size: 14px !important;
}

.comparison-table .comparison-item .gc-item-btn {
	margin-top: 8px;
}

/* review link row — quiet mono action row */
.comparison-table .item-row-description {
	border-top: 1px solid var(--fit-line) !important;
	text-align: center;
	padding: 13px 15px !important;
}

.comparison-table .item-row-description a {
	font-family: var(--fit-mono);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: var(--fit-teal) !important;
	text-decoration: none !important;
}

.comparison-table .item-row-description a::after {
	content: " →";
}

.comparison-table .item-row-description a:hover {
	color: var(--fit-ink) !important;
}

/* --------------------------------------------------------------------------
   10.5 Latest articles (gutencon advanced-listing) — watchlist rows
   The block ships its own <style scoped> in the body, so overrides
   here need !important to win the cascade.
   -------------------------------------------------------------------------- */

.gc_list_builder .gc_listitem {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--fit-line) !important;
	box-shadow: none !important;
	margin-bottom: 0 !important;
	transition: background 0.2s ease;
}

.gc_list_builder .gc_listitem:first-child {
	border-top: 1px solid var(--fit-line) !important;
}

.gc_list_builder .gc_listitem:hover {
	background: var(--fit-mist) !important;
}

.gc_list_builder .listitem_column {
	padding: 14px 16px !important;
}

.gc_list_builder .gc_listitem .listbuild_image {
	min-width: 132px !important;
	max-width: 132px !important;
	padding: 14px 0 14px 4px !important;
	border-right: 0 !important;
}

/* uniform sharp thumbnails regardless of source aspect ratio */
.gc_list_builder .listbuild_image figure > a img {
	width: 116px !important;
	height: 72px !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

/* posts without a featured image keep the rhythm with a mist placeholder */
.gc_list_builder .listbuild_image figure > a:not(:has(img)) {
	display: block;
	width: 116px;
	height: 72px;
	background: var(--fit-mist);
}

/* rank badge: black circle → square ink chip with mono gold number */
.gc_list_builder .gc_listitem .rank_count {
	width: 22px !important;
	height: 22px !important;
	line-height: 22px !important;
	border-radius: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: var(--fit-ink) !important;
	color: var(--fit-gold) !important;
	font-family: var(--fit-mono) !important;
	font-weight: 500 !important;
	font-size: 11px !important;
	text-align: center !important;
}

.gc_list_builder .listitem_column .gc_top_rating_title {
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	margin-bottom: 0 !important;
}

.gc_list_builder .gc_top_rating_title a {
	color: var(--fit-ink) !important;
}

.gc_list_builder .gc_top_rating_title a:hover {
	color: var(--fit-teal) !important;
}

.gc_list_builder .listitem_title .postcont {
	color: var(--fit-ink-2) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	margin: 4px 0 0 !important;
}

/* the button column is empty on this block — reclaim its 210px */
.gc_list_builder .gc_listitem .listbuild_btn {
	display: none !important;
}

/* keep compact rows on mobile instead of the plugin's stacked cards */
@media (max-width: 767px) {
	.gc_list_builder .gc_listitem > .gcmobblock {
		display: flex !important;
	}

	.gc_list_builder .gc_listitem > .gcmobblock > div.listbuild_image {
		width: 104px !important;
		min-width: 104px !important;
		max-width: 104px !important;
		padding: 12px 0 12px 8px !important;
		text-align: left !important;
	}

	.gc_list_builder .gc_listitem > .gcmobblock > div.listitem_title {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		padding: 12px 14px !important;
		text-align: left !important;
	}

	.gc_list_builder .listbuild_image figure > a img {
		width: 92px !important;
		height: 60px !important;
	}

	.gc_list_builder .listbuild_image figure > a:not(:has(img)) {
		width: 92px;
		height: 60px;
	}

	.gc_list_builder .gc_listitem .rank_count {
		top: 12px !important;
		left: 8px !important;
		margin: 0 !important;
	}

	.gc_list_builder .listitem_column .gc_top_rating_title {
		font-size: 15px !important;
	}
}

/* --------------------------------------------------------------------------
   10.6 Related posts (Contextual Related Posts) — compact card grid
   The plugin injects its own inline CSS (floated 160px figures), so
   contested properties carry !important.
   -------------------------------------------------------------------------- */

.crp_related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px 22px;
	margin-top: 64px !important;
	border-top: 0 !important;
}

/* heading matches the centered gold-underline style of this content column */
.crp_related h3 {
	grid-column: 1 / -1;
	margin: 0 0 6px;
	text-align: center;
	position: relative;
	padding-bottom: 16px;
	font-size: 2.2rem;
}

.crp_related h3::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--fit-gold);
}

.crp_related > div {
	clear: none !important;
}

.crp_related .crp_link {
	display: block;
	text-decoration: none !important;
}

.crp_related figure {
	float: none !important;
	width: 100% !important;
	margin: 0 0 10px !important;
}

.crp_related .crp_thumb {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.crp_related .crp_title {
	display: block;
	font-family: var(--fit-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fit-ink);
	transition: color 0.2s ease;
}

.crp_related .crp_link:hover .crp_title {
	color: var(--fit-teal);
}

@media (max-width: 767px) {
	.crp_related {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 14px;
	}

	.crp_related h3 {
		font-size: 1.9rem;
	}

	.crp_related .crp_title {
		font-size: 14px;
	}
}

/* --------------------------------------------------------------------------
   11. Sidebar
   -------------------------------------------------------------------------- */

#secondary .bloghash-widget {
	border: 1px solid var(--fit-line);
	border-radius: var(--fit-radius);
	padding: 22px;
	background: #fff;
}

#secondary .widget-title {
	font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   12. Footer — single deep ink surface
   -------------------------------------------------------------------------- */

#bloghash-footer {
	background: var(--fit-ink) !important;
}

#bloghash-copyright {
	background: #07242a !important;
}

#bloghash-footer .widget-title {
	color: #fff;
}

#bloghash-footer,
#bloghash-footer .textwidget {
	color: #b9d2cf;
}

#bloghash-footer a {
	color: #d7e8e6;
}

#bloghash-footer a:hover {
	color: var(--fit-gold);
}

/* --------------------------------------------------------------------------
   13. Motion & responsive
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bloghash-post-item,
	#hero .bloghash-post-thumb .inner img,
	#bloghash-primary-nav > li > a > span::after {
		transition: none !important;
	}

	.bloghash-post-item:hover,
	#hero .bloghash-post-item:hover .bloghash-post-thumb .inner img {
		transform: none;
	}
}

@media (max-width: 768px) {
	.bloghash-card__boxed {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}

	#editors_choice .bloghash-editors-choice {
		padding: 24px 18px !important;
		border-radius: var(--fit-radius) !important;
	}

	.bloghash-card-items > .h4.widget-title {
		font-size: 1.6rem;
	}
}

/* --------------------------------------------------------------------------
   14. Single post
   -------------------------------------------------------------------------- */

/* breadcrumb band: mist strip with mono trail */
.page-header.bloghash-has-breadcrumbs {
	background: var(--fit-mist) !important;
	border-bottom: 1px solid var(--fit-line) !important;
}

.rank-math-breadcrumb p {
	font-family: var(--fit-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--fit-ink-2);
}

.rank-math-breadcrumb a {
	color: var(--fit-ink-2) !important;
}

.rank-math-breadcrumb a:hover {
	color: var(--fit-teal) !important;
}

.rank-math-breadcrumb .separator {
	color: #9cb5b1;
	margin: 0 2px;
}

/* full-bleed featured banner: sharp image on a blurred copy of itself */
.fit-post-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(300px, 48vh, 540px);
	overflow: hidden;
	background: var(--fit-ink);
}

.fit-post-banner__backdrop {
	position: absolute;
	inset: -40px;
	background-size: cover;
	background-position: center;
	filter: blur(26px) brightness(0.45) saturate(1.1);
}

.fit-post-banner__image {
	position: relative;
	z-index: 1;
	width: auto;
	height: auto;
	max-width: min(100%, 1100px);
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

/* the banner replaces the in-article thumbnail */
.single-post .bloghash-article > .post-thumb.entry-media {
	display: none;
}

@media (max-width: 768px) {
	.fit-post-banner {
		height: clamp(200px, 36vh, 320px);
	}
}

/* featured image + gold tick + title */
.single-post .bloghash-article .post-thumb,
.single-post .bloghash-article .post-thumb img {
	border-radius: 0 !important;
}

.single-post article.bloghash-article .post-category::before {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: var(--fit-gold);
	margin-bottom: 12px;
}

.single-post .entry-header .entry-title {
	font-size: 36px;
	line-height: 1.4;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.single-post .bloghash-article > .entry-meta,
.single-post .entry-header + .entry-meta {
	border-bottom: 1px solid var(--fit-line);
	padding-bottom: 18px;
}

/* content typography — Thai body breathes, headings carry the system */
.single-post .entry-content p {
	line-height: 1.9;
}

.single-post .entry-content h2:not(.has-text-align-center) {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 2.4em;
}

.single-post .entry-content h2:not(.has-text-align-center)::before {
	content: "";
	flex: none;
	width: 10px;
	height: 24px;
	border-radius: 2px;
	background:
		linear-gradient(var(--fit-teal), var(--fit-teal)) center / 2px 24px no-repeat,
		linear-gradient(var(--fit-teal), var(--fit-teal)) center / 10px 15px no-repeat;
}

.single-post .entry-content h3 {
	margin-top: 2em;
}

.single-post .entry-content ul li::marker,
.single-post .entry-content ol li::marker {
	color: var(--fit-teal);
}

.single-post .entry-content ol li::marker {
	font-family: var(--fit-mono);
	font-weight: 500;
}

.single-post .entry-content li {
	margin-bottom: 0.5em;
}

.single-post .entry-content p a,
.single-post .entry-content li a {
	text-underline-offset: 3px;
}

.single-post .entry-content blockquote {
	background: var(--fit-mist);
	border-left: 3px solid var(--fit-teal);
	border-radius: 0;
	padding: 22px 26px;
	font-style: normal;
}

.single-post .entry-content img {
	border-radius: 0 !important;
}

.single-post .entry-content table {
	border-collapse: collapse;
}

.single-post .entry-content table th {
	background: var(--fit-mist);
	font-family: var(--fit-display);
}

.single-post .entry-content table th,
.single-post .entry-content table td {
	border: 1px solid var(--fit-line);
}

/* table of contents (easy-table-of-contents) — quiet mist panel */
.single-post #ez-toc-container {
	background: var(--fit-mist) !important;
	border: 1px solid var(--fit-line) !important;
	border-left: 3px solid var(--fit-teal) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px 24px !important;
}

.single-post #ez-toc-container .ez-toc-title {
	font-family: var(--fit-display) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--fit-ink) !important;
}

.single-post #ez-toc-container ul li a {
	color: var(--fit-ink-2) !important;
	text-decoration: none !important;
	line-height: 1.8;
}

.single-post #ez-toc-container ul li a:hover {
	color: var(--fit-teal) !important;
}

/* last-updated stamp */
.single .entry-footer .last-updated {
	font-family: var(--fit-mono);
	font-size: 12px;
	color: var(--fit-ink-2);
	background: var(--fit-mist);
	padding: 6px 12px;
}

.single .entry-footer .last-updated .bloghash-icon {
	width: 12px;
	height: 12px;
}

/* prev/next navigation — two quiet cards */
.single .post-nav {
	border-top: 1px solid var(--fit-line);
	padding-top: 26px;
	margin-top: 30px;
}

.single .post-nav .nav-title {
	font-family: var(--fit-mono) !important;
	font-size: 11px !important;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fit-ink-2);
}

.single .post-nav a {
	font-family: var(--fit-display);
	font-weight: 600;
	color: var(--fit-ink);
}

.single .post-nav a:hover {
	color: var(--fit-teal);
}

.single .post-nav img {
	border-radius: 0 !important;
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
}

@media (max-width: 768px) {
	.single-post .entry-header .entry-title {
		font-size: 26px;
	}
}

/* --------------------------------------------------------------------------
   15. Archive / category
   -------------------------------------------------------------------------- */

/* category hero on the mist band: mono eyebrow + big title + muted intro */
.archive .bloghash-page-header-title::before {
	content: "หมวดหมู่";
	display: block;
	font-family: var(--fit-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fit-teal);
	margin-bottom: 8px;
}

.search-results .bloghash-page-header-title::before {
	content: "ผลการค้นหา";
}

.archive .page-header .page-title,
.search-results .page-header .page-title {
	font-size: 34px;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.archive .bloghash-page-header-description p {
	color: var(--fit-ink-2);
	max-width: 760px;
	font-size: 16px;
}

/* entries: editorial rows separated by hairlines */
.archive .bloghash-article,
.search-results .bloghash-article,
.blog .bloghash-article {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--fit-line);
}

.archive .bloghash-blog-entry-wrapper.bloghash-thumb-left .post-thumb,
.search-results .bloghash-blog-entry-wrapper.bloghash-thumb-left .post-thumb,
.blog .bloghash-blog-entry-wrapper.bloghash-thumb-left .post-thumb {
	flex: 0 0 340px !important;
	max-width: 340px !important;
}

.archive .bloghash-blog-entry-wrapper .post-thumb img,
.search-results .bloghash-blog-entry-wrapper .post-thumb img,
.blog .bloghash-blog-entry-wrapper .post-thumb img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform 0.5s ease;
}

.archive .bloghash-blog-entry-wrapper .post-thumb,
.archive .entry-image-link,
.search-results .bloghash-blog-entry-wrapper .post-thumb,
.search-results .entry-image-link,
.blog .bloghash-blog-entry-wrapper .post-thumb,
.blog .entry-image-link {
	border-radius: 0 !important;
}

.archive .entry-image-link,
.search-results .entry-image-link,
.blog .entry-image-link {
	display: block;
	overflow: hidden;
}

/* kill the theme's 30rem min-height / fixed heights so 16:10 can apply */
.archive .bloghash-article .entry-media .entry-image-link,
.archive .bloghash-article .entry-media img,
.search-results .bloghash-article .entry-media .entry-image-link,
.search-results .bloghash-article .entry-media img,
.blog .bloghash-article .entry-media .entry-image-link,
.blog .bloghash-article .entry-media img {
	min-height: 0 !important;
}

.archive .bloghash-blog-entry-wrapper .entry-media,
.search-results .bloghash-blog-entry-wrapper .entry-media,
.blog .bloghash-blog-entry-wrapper .entry-media {
	height: auto !important;
}

.archive .bloghash-article:hover .post-thumb img,
.search-results .bloghash-article:hover .post-thumb img,
.blog .bloghash-article:hover .post-thumb img {
	transform: scale(1.04);
}

.archive .bloghash-entry-content-wrapper .entry-title,
.search-results .bloghash-entry-content-wrapper .entry-title,
.blog .bloghash-entry-content-wrapper .entry-title {
	font-size: 22px !important;
	line-height: 1.45 !important;
}

.archive .entry-summary,
.search-results .entry-summary,
.blog .entry-summary {
	color: var(--fit-ink-2);
	font-size: 15px;
	line-height: 1.75;
}

/* load-more: quiet outlined action, gold on hover */
.bloghash-pagination.bloghash-infinite a {
	display: inline-block;
	padding: 12px 32px;
	border: 1px solid var(--fit-ink);
	border-radius: 999px;
	font-family: var(--fit-display);
	font-weight: 600;
	color: var(--fit-ink);
	background: transparent;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bloghash-pagination.bloghash-infinite a:hover {
	background: var(--fit-gold);
	border-color: var(--fit-gold);
	color: var(--fit-ink);
}

@media (max-width: 768px) {
	.archive .page-header .page-title,
	.search-results .page-header .page-title {
		font-size: 25px;
	}

	.archive .bloghash-blog-entry-wrapper.bloghash-thumb-left .post-thumb,
	.search-results .bloghash-blog-entry-wrapper.bloghash-thumb-left .post-thumb,
	.blog .bloghash-blog-entry-wrapper.bloghash-thumb-left .post-thumb {
		flex-basis: auto !important;
		max-width: 100% !important;
	}

	.archive .bloghash-article,
	.search-results .bloghash-article,
	.blog .bloghash-article {
		padding-bottom: 24px;
	}

	.archive .bloghash-entry-content-wrapper .entry-title,
	.search-results .bloghash-entry-content-wrapper .entry-title,
	.blog .bloghash-entry-content-wrapper .entry-title {
		font-size: 19px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.archive .bloghash-article:hover .post-thumb img,
	.search-results .bloghash-article:hover .post-thumb img,
	.blog .bloghash-article:hover .post-thumb img {
		transform: none;
	}
}