/*
Theme Name: BlogHash Child
Theme URI: https://peregrine-themes.com/bloghash
Description: Child theme for BlogHash.
Author: Your Name
Author URI: https://example.com
Template: bloghash
Version: 1.0.0
Text Domain: bloghash-child
*/

/*
 * Add your custom CSS below.
 */

/*
 * Single post heading hierarchy.
 * Keep content H2 clearly below post title H1.
 */
body.single-post .entry-content h2,
body.single-post .entry-content .wp-block-heading {
	font-size: clamp(2.1rem, 2.8vw, 2.6rem) !important;
	line-height: 1.28;
	margin-top: 2.6rem;
	margin-bottom: 1.2rem;
}

body.single-post .entry-content h3 {
	font-size: clamp(1.65rem, 2vw, 1.95rem) !important;
	line-height: 1.3;
	margin-top: 2.2rem;
	margin-bottom: 1rem;
}

body.single-post .entry-content h4 {
	font-size: clamp(1.45rem, 1.8vw, 1.7rem) !important;
	line-height: 1.34;
	margin-top: 2rem;
	margin-bottom: 0.9rem;
}

body.single-post .entry-content h5 {
	font-size: clamp(1.3rem, 1.5vw, 1.5rem) !important;
	line-height: 1.38;
	margin-top: 1.8rem;
	margin-bottom: 0.8rem;
}

body.single-post .entry-content h6 {
	font-size: clamp(1.15rem, 1.2vw, 1.3rem) !important;
	line-height: 1.42;
	margin-top: 1.6rem;
	margin-bottom: 0.7rem;
}

/*
 * Mobile single post readability.
 * Moderate width and improved text spacing.
 */
@media only screen and (max-width: 868px) {
	body.single-post #main > .bloghash-container {
		padding-left: 1.6rem !important;
		padding-right: 1.6rem !important;
	}

	body.single-post.bloghash-layout__boxed-separated #content > article,
	body.single-post.bloghash-layout__boxed-separated #comments {
		padding: 1.8rem !important;
	}

	body.single-post .entry-content > :not([class*="align"]):not([class*="gallery"]):not(.wp-block-image):not(.quote-inner):not(.quote-post-bg),
	body.single-post .entry-footer,
	body.single-post .post-nav,
	body.single-post #bloghash-comments-toggle,
	body.single-post #comments,
	body.single-post .entry-content .aligncenter,
	body.single-post .bloghash-narrow-element,
	body.single-post.bloghash-no-sidebar .bloghash-page-header-wrapper,
	body.single-post.bloghash-no-sidebar .bloghash-breadcrumbs nav {
		max-width: min(680px, calc(100% - 2.4rem)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.single-post .entry-content p,
	body.single-post .entry-content li {
		line-height: 1.9;
	}

	body.single-post .entry-content p {
		margin-bottom: 1.8rem;
	}

	body.single-post .entry-content h2,
	body.single-post .entry-content .wp-block-heading {
		font-size: clamp(1.99rem, 5vw, 2.38rem) !important;
		line-height: 1.38;
		margin-top: 2.4rem;
		margin-bottom: 1.1rem;
	}

	body.single-post .entry-content h3 {
		font-size: clamp(1.6rem, 3.8vw, 1.85rem) !important;
		line-height: 1.3;
		margin-top: 2.1rem;
		margin-bottom: 1rem;
	}

	body.single-post .entry-content h4 {
		font-size: clamp(1.4rem, 3.2vw, 1.65rem) !important;
		line-height: 1.34;
		margin-top: 1.9rem;
		margin-bottom: 0.9rem;
	}

	body.single-post .entry-content h5 {
		font-size: clamp(1.25rem, 2.8vw, 1.45rem) !important;
		line-height: 1.38;
		margin-top: 1.7rem;
		margin-bottom: 0.8rem;
	}

	body.single-post .entry-content h6 {
		font-size: clamp(1.1rem, 2.3vw, 1.25rem) !important;
		line-height: 1.42;
		margin-top: 1.5rem;
		margin-bottom: 0.7rem;
	}
}

@media only screen and (max-width: 599px) {
	body.single-post #main > .bloghash-container {
		padding-left: 1.2rem !important;
		padding-right: 1.2rem !important;
	}

	/* Mobile reading comfort for post body text only. */
	body.single-post .entry-content p,
	body.single-post .entry-content li {
		font-family: "Avenir Next", "Segoe UI Variable", "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-size: clamp(1.65rem, 4.1vw, 1.85rem);
		line-height: 1.75;
		letter-spacing: 0.01em;
	}

	body.single-post.bloghash-layout__boxed-separated #content > article,
	body.single-post.bloghash-layout__boxed-separated #comments {
		padding: 1.6rem !important;
	}

	body.single-post .entry-content > :not([class*="align"]):not([class*="gallery"]):not(.wp-block-image):not(.quote-inner):not(.quote-post-bg),
	body.single-post .entry-footer,
	body.single-post .post-nav,
	body.single-post #bloghash-comments-toggle,
	body.single-post #comments,
	body.single-post .entry-content .aligncenter,
	body.single-post .bloghash-narrow-element,
	body.single-post.bloghash-no-sidebar .bloghash-page-header-wrapper,
	body.single-post.bloghash-no-sidebar .bloghash-breadcrumbs nav {
		max-width: calc(100% - 1.6rem) !important;
	}

	body.single-post .entry-content h2,
	body.single-post .entry-content .wp-block-heading {
		font-size: clamp(1.85rem, 6.2vw, 2.2rem) !important;
		line-height: 1.3;
		margin-top: 2.2rem;
		margin-bottom: 1rem;
	}

	body.single-post .entry-content h3 {
		font-size: clamp(1.5rem, 4.9vw, 1.75rem) !important;
		line-height: 1.32;
		margin-top: 2rem;
		margin-bottom: 0.9rem;
	}

	body.single-post .entry-content h4 {
		font-size: clamp(1.35rem, 4.3vw, 1.55rem) !important;
		line-height: 1.36;
		margin-top: 1.8rem;
		margin-bottom: 0.8rem;
	}

	body.single-post .entry-content h5 {
		font-size: clamp(1.2rem, 3.6vw, 1.4rem) !important;
		line-height: 1.4;
		margin-top: 1.6rem;
		margin-bottom: 0.7rem;
	}

	body.single-post .entry-content h6 {
		font-size: clamp(1.05rem, 3vw, 1.2rem) !important;
		line-height: 1.44;
		margin-top: 1.4rem;
		margin-bottom: 0.6rem;
	}
}

/*
 * Page content heading hierarchy.
 * Matches single-post content heading scale without affecting global heading styles.
 */
body.page .entry-content h1 {
	font-size: clamp(2.35rem, 3.1vw, 2.95rem) !important;
	line-height: 1.24;
	margin-top: 2.8rem;
	margin-bottom: 1.35rem;
}

body.page .entry-content h2,
body.page .entry-content .wp-block-heading {
	font-size: clamp(2.1rem, 2.8vw, 2.6rem) !important;
	line-height: 1.28;
	margin-top: 2.6rem;
	margin-bottom: 1.2rem;
}

body.page .entry-content h3 {
	font-size: clamp(1.65rem, 2vw, 1.95rem) !important;
	line-height: 1.3;
	margin-top: 2.2rem;
	margin-bottom: 1rem;
}

body.page .entry-content h4 {
	font-size: clamp(1.45rem, 1.8vw, 1.7rem) !important;
	line-height: 1.34;
	margin-top: 2rem;
	margin-bottom: 0.9rem;
}

body.page .entry-content h5 {
	font-size: clamp(1.3rem, 1.5vw, 1.5rem) !important;
	line-height: 1.38;
	margin-top: 1.8rem;
	margin-bottom: 0.8rem;
}

body.page .entry-content h6 {
	font-size: clamp(1.15rem, 1.2vw, 1.3rem) !important;
	line-height: 1.42;
	margin-top: 1.6rem;
	margin-bottom: 0.7rem;
}

@media only screen and (max-width: 868px) {
	body.page .entry-content h1 {
		font-size: clamp(2.2rem, 5.6vw, 2.58rem) !important;
		line-height: 1.3;
		margin-top: 2.5rem;
		margin-bottom: 1.2rem;
	}

	body.page .entry-content h2,
	body.page .entry-content .wp-block-heading {
		font-size: clamp(1.99rem, 5vw, 2.38rem) !important;
		line-height: 1.38;
		margin-top: 2.4rem;
		margin-bottom: 1.1rem;
	}

	body.page .entry-content h3 {
		font-size: clamp(1.6rem, 3.8vw, 1.85rem) !important;
		line-height: 1.3;
		margin-top: 2.1rem;
		margin-bottom: 1rem;
	}

	body.page .entry-content h4 {
		font-size: clamp(1.4rem, 3.2vw, 1.65rem) !important;
		line-height: 1.34;
		margin-top: 1.9rem;
		margin-bottom: 0.9rem;
	}

	body.page .entry-content h5 {
		font-size: clamp(1.25rem, 2.8vw, 1.45rem) !important;
		line-height: 1.38;
		margin-top: 1.7rem;
		margin-bottom: 0.8rem;
	}

	body.page .entry-content h6 {
		font-size: clamp(1.1rem, 2.3vw, 1.25rem) !important;
		line-height: 1.42;
		margin-top: 1.5rem;
		margin-bottom: 0.7rem;
	}
}

@media only screen and (max-width: 599px) {
	body.page .entry-content h1 {
		font-size: clamp(2.02rem, 6.8vw, 2.45rem) !important;
		line-height: 1.28;
		margin-top: 2.3rem;
		margin-bottom: 1.08rem;
	}

	body.page .entry-content h2,
	body.page .entry-content .wp-block-heading {
		font-size: clamp(1.85rem, 6.2vw, 2.2rem) !important;
		line-height: 1.3;
		margin-top: 2.2rem;
		margin-bottom: 1rem;
	}

	body.page .entry-content h3 {
		font-size: clamp(1.5rem, 4.9vw, 1.75rem) !important;
		line-height: 1.32;
		margin-top: 2rem;
		margin-bottom: 0.9rem;
	}

	body.page .entry-content h4 {
		font-size: clamp(1.35rem, 4.3vw, 1.55rem) !important;
		line-height: 1.36;
		margin-top: 1.8rem;
		margin-bottom: 0.8rem;
	}

	body.page .entry-content h5 {
		font-size: clamp(1.2rem, 3.6vw, 1.4rem) !important;
		line-height: 1.4;
		margin-top: 1.6rem;
		margin-bottom: 0.7rem;
	}

	body.page .entry-content h6 {
		font-size: clamp(1.05rem, 3vw, 1.2rem) !important;
		line-height: 1.44;
		margin-top: 1.4rem;
		margin-bottom: 0.6rem;
	}
}

/*
 * Global header search popup size.
 * Larger, easier-to-use search panel on desktop and mobile.
 */
.bloghash-header-widgets .bloghash-search-simple.bloghash-search-container.dropdown-item {
	width: min(44rem, calc(100vw - 2.4rem));
	max-width: 44rem;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}

.bloghash-header-widgets .bloghash-search-simple .bloghash-search-form input {
	font-size: 1.75rem;
	padding: 1.9rem 9.2rem 1.9rem 2.4rem;
}

.bloghash-header-widgets .bloghash-search-simple button {
	width: 3.8rem;
	height: 3.8rem;
	padding: 0.9rem;
}

.bloghash-header-widgets .bloghash-search-simple button:not(.bloghash-search-close) {
	right: 6.2rem;
}

.bloghash-header-widgets .bloghash-search-simple .bloghash-search-close {
	right: 1.8rem;
}

/*
 * Hide Top Stories ticker on mobile.
 */
@media only screen and (max-width: 868px) {
	#ticker {
		display: none !important;
	}

	body.home #hero,
	body.blog #hero {
		margin-top: 3.1rem;
	}

	body.home #hero .bloghash-hero-container.bloghash-container,
	body.blog #hero .bloghash-hero-container.bloghash-container {
		max-width: min(680px, calc(100% - 2.4rem));
		margin-left: auto;
		margin-right: auto;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Hero cards on mobile: keep only category + title. */
	body.home #hero .bloghash-article .entry-summary,
	body.home #hero .bloghash-article .entry-footer,
	body.home #hero .bloghash-article .entry-meta,
	body.home #hero .bloghash-article .post-category,
	body.blog #hero .bloghash-article .entry-summary,
	body.blog #hero .bloghash-article .entry-footer,
	body.blog #hero .bloghash-article .entry-meta,
	body.blog #hero .bloghash-article .post-category {
		display: none !important;
	}
}

@media only screen and (max-width: 599px) {
	body.home #hero .bloghash-hero-container.bloghash-container,
	body.blog #hero .bloghash-hero-container.bloghash-container {
		max-width: calc(100% - 1.6rem);
	}
}

/* Hero first-paint guard.
   Before Swiper initializes, cloned/next slides can briefly peek on the
   right edge (appears as a dark vertical strip). Keep only first slide
   visible until .swiper-initialized is present. */
#hero .bloghash-horizontal-slider .bloghash-swiper.swiper:not(.swiper-initialized) {
	overflow: hidden;
}

#hero .bloghash-horizontal-slider .bloghash-swiper.swiper:not(.swiper-initialized) .swiper-wrapper {
	display: block;
}

#hero .bloghash-horizontal-slider .bloghash-swiper.swiper:not(.swiper-initialized) .swiper-slide {
	width: 100% !important;
}

#hero .bloghash-horizontal-slider .bloghash-swiper.swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
	display: none;
}

@media screen and (min-width: 869px) {
	#hero .bloghash-horizontal-slider .bloghash-swiper.swiper:not(.swiper-initialized) .bloghash-article {
		padding-right: 0 !important;
	}
}

/*
 * Compact footer style (all devices).
 */

/* --- Widget area --- */
#bloghash-footer .bloghash-footer-column {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

#bloghash-footer .bloghash-footer-column .bloghash-widget {
	margin-bottom: 1.6rem;
}

#bloghash-footer .bloghash-footer-column .bloghash-widget:last-child {
	margin-bottom: 0;
}

#colophon .widget-title {
	margin-bottom: 1.2rem;
}

#bloghash-footer .widget ul li,
#bloghash-footer .widget ol li {
	margin-bottom: 0.5rem;
}

/* --- Copyright bar --- */
#bloghash-copyright > .bloghash-container > .bloghash-flex-row {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#bloghash-copyright > .bloghash-container > .bloghash-flex-row > div {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

#bloghash-copyright .bloghash-copyright-widget {
	font-size: 1.2rem;
	line-height: 1.45;
}

/* --- Mobile redesign --- */
@media only screen and (max-width: 868px) {

	/* 2-column grid: widgets sit side-by-side instead of full-width stacks */
	#bloghash-footer #bloghash-footer-widgets {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		padding-top: 2.8rem;
		padding-bottom: 2rem;
	}

	#bloghash-footer .bloghash-footer-column {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Each widget gets its own padding so the grid cells breathe evenly */
	#bloghash-footer .bloghash-footer-column .bloghash-widget {
		padding: 1.6rem 1.4rem;
		margin-bottom: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	#bloghash-footer .bloghash-footer-column .bloghash-widget:last-child {
		border-bottom: none;
	}

	/* Accent line above each heading for visual structure */
	#bloghash-footer .bloghash-footer-column .widget-title {
		font-size: 1.55rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		margin-bottom: 1rem;
		padding-bottom: 0.7rem;
		border-bottom: 2px solid rgba(255, 255, 255, 0.18);
	}

	/* Slightly smaller, tighter links */
	#bloghash-footer .widget ul li a,
	#bloghash-footer .widget ol li a {
		font-size: 1.5rem;
		line-height: 1.4;
		opacity: 0.78;
	}

	#bloghash-footer .widget ul li a:hover,
	#bloghash-footer .widget ol li a:hover {
		opacity: 1;
	}

	#bloghash-footer .widget ul li,
	#bloghash-footer .widget ol li {
		margin-bottom: 0.6rem;
	}

	/* Copyright bar */
	#bloghash-copyright > .bloghash-container > .bloghash-flex-row {
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}

	#bloghash-copyright .bloghash-copyright-widget {
		font-size: 1.45rem;
	}
}

/*
 * Dark mode compatibility: WordPress Popular Posts tabs widget.
 * Minimal override for tab headers + content surface.
 */
html[data-darkmode="dark"] #secondary .widget_wpt .wpt_widget_content {
	background: #11162d;
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(232, 236, 255, 0.9);
}

html[data-darkmode="dark"] #secondary .widget_wpt .inside,
html[data-darkmode="dark"] #secondary .widget_wpt .tab-content,
html[data-darkmode="dark"] #secondary .widget_wpt .inside li,
html[data-darkmode="dark"] #secondary .widget_wpt .tab-content li {
	background: #11162d !important;
}

html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title {
	background: #1a2038 !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	opacity: 0.72;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.selected,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.active,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.current,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.ui-tabs-active,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.selected,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.active,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.current,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.ui-tabs-active {
	background: #212a4d !important;
	opacity: 1;
	box-shadow: inset 0 -3px 0 #f62d7a, 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title > a,
html[data-darkmode="dark"] #secondary .widget_wpt a#popular-tab,
html[data-darkmode="dark"] #secondary .widget_wpt a#recent-tab {
	background: transparent !important;
	color: rgba(223, 230, 255, 0.85) !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.selected > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.active > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.current > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.tab_title.ui-tabs-active > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.selected > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.active > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.current > a,
html[data-darkmode="dark"] #secondary .widget_wpt ul.wpt-tabs > li.ui-tabs-active > a {
	color: #ffffff !important;
	font-weight: 700;
}

html[data-darkmode="dark"] #secondary .widget_wpt .inside li {
	border-color: rgba(255, 255, 255, 0.09);
}

html[data-darkmode="dark"] #secondary .widget_wpt .inside li a,
html[data-darkmode="dark"] #secondary .widget_wpt .tab-content li a {
	color: #e8edff;
}

html[data-darkmode="dark"] #secondary .widget_wpt .inside li .wpt-post-date,
html[data-darkmode="dark"] #secondary .widget_wpt .tab-content li .wpt-post-date,
html[data-darkmode="dark"] #secondary .widget_wpt .inside li time,
html[data-darkmode="dark"] #secondary .widget_wpt .tab-content li time {
	color: rgba(194, 201, 228, 0.82);
}

/*
 * Comments section polish for dark mode.
 */
html[data-darkmode="dark"] #comments.comments-area {
	padding: 3.2rem;
	border-radius: 2.4rem;
	background: linear-gradient(135deg, rgba(35, 45, 81, 0.82), rgba(27, 24, 60, 0.84));
	border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-darkmode="dark"] #comments.comments-area .comments-title,
html[data-darkmode="dark"] #comments.comments-area .comment-reply-title {
	color: #f4f6ff;
	letter-spacing: 0.01em;
}

html[data-darkmode="dark"] #comments.comments-area .comment-list > li,
html[data-darkmode="dark"] #comments.comments-area .comment-list .children > li {
	background: rgba(16, 21, 45, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 1.4rem;
	padding: 2rem;
}

/* Native comment form (non-Jetpack) */
html[data-darkmode="dark"] #comments.comments-area #respond .comment-form input:not([type="submit"]),
html[data-darkmode="dark"] #comments.comments-area #respond .comment-form textarea {
	background: rgba(12, 17, 38, 0.94);
	color: #eef1ff;
	border-color: rgba(255, 255, 255, 0.14);
}

html[data-darkmode="dark"] #comments.comments-area #respond .comment-form input::placeholder,
html[data-darkmode="dark"] #comments.comments-area #respond .comment-form textarea::placeholder {
	color: rgba(203, 210, 236, 0.72);
}

/* Jetpack iframe comment form wrapper */
html[data-darkmode="dark"] #comments.comments-area iframe.jetpack_remote_comment {
	background: #0f1530;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 1.2rem;
	overflow: hidden;
	/* Cross-origin iframe: use visual fallback to avoid bright white form in dark mode. */
	filter: invert(0.92) hue-rotate(180deg) saturate(0.82) contrast(0.94);
}

/* Mobile comments spacing */
@media only screen and (max-width: 868px) {
	html[data-darkmode="dark"] #comments.comments-area {
		padding: 2rem;
		border-radius: 1.8rem;
	}
}

/* Comments section heading hierarchy.
   "Comments" (section heading) larger; "Leave a Reply" clearly smaller. */
#comments .comments-title {
	font-size: clamp(2.2rem, 2.6vw, 2.8rem);
	line-height: 1.25;
}

#comments .comment-reply-title {
	font-size: clamp(1.55rem, 1.7vw, 1.85rem);
	line-height: 1.3;
	font-weight: 600;
}

@media only screen and (max-width: 599px) {
	#comments .comments-title {
		font-size: clamp(2rem, 5.6vw, 2.4rem);
	}

	#comments .comment-reply-title {
		font-size: clamp(1.5rem, 4.4vw, 1.7rem);
	}
}

/*
 * Dark mode: inline "Read Also" block injected inside post content.
 */
/* Light + dark mode: remove default underline / link gradient under the
   "Read Also" label only. The post title underline (rendered by the plugin
   on .postTitle) is intentionally preserved. */
.single-post .entry-content a:has(.ctaText),
.single-post .entry-content a:has(.ctaText):hover,
.single-post .entry-content a:has(.ctaText):focus,
.single-post .entry-content a:has(.ctaText):visited {
	text-decoration: none !important;
	background-image: none !important;
	border-bottom: 0 !important;
}

.single-post .entry-content .ctaText,
.single-post .entry-content a .ctaText,
.single-post .entry-content a:hover .ctaText {
	text-decoration: none !important;
	background-image: none !important;
	border-bottom: 0 !important;
}

/* Light theme "Read Also" contrast (WCAG AA).
   The plugin paints .ctaText in red and .postTitle in near-black against a
   light gray block. Red on gray fails contrast; force a high-contrast
   palette regardless of plugin color settings. */
.single-post .entry-content .ctaText {
	color: #A84600 !important; /* deep magenta, ~7.8:1 on #f1f3f5 */
}


html[data-darkmode="dark"] .single-post .entry-content div[style*="padding-left:1em"][style*="padding-right:1em"] {
	background: linear-gradient(135deg, rgba(24, 34, 70, 0.92), rgba(16, 24, 53, 0.94)) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 4px solid #f62d7a;
	border-radius: 0.9rem;
	padding: 1rem 1.2rem !important;
	box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.22);
}

html[data-darkmode="dark"] .single-post .entry-content div[style*="padding-left:1em"][style*="padding-right:1em"] .ctaText {
	color: #45e7d6;
	font-weight: 700;
	margin-right: 0.45rem;
	text-decoration: none !important;
	border-bottom: 0 !important;
	background-image: none !important;
}

html[data-darkmode="dark"] .single-post .entry-content div[style*="padding-left:1em"][style*="padding-right:1em"] .postTitle {
	color: #f2f5ff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

html[data-darkmode="dark"] .single-post .entry-content a:has(> div .ctaText),
html[data-darkmode="dark"] .single-post .entry-content a:has(> div .postTitle) {
	color: inherit;
	text-decoration: none;
}

html[data-darkmode="dark"] .single-post .entry-content a:hover:has(> div .postTitle) .postTitle {
	color: #ffffff;
}

/* Remove plugin wrapper gray layer around the callout. */
html[data-darkmode="dark"] .single-post .entry-content div[style*="clear:both"][style*="margin-bottom:1em"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html[data-darkmode="dark"] .single-post .entry-content div[style*="clear:both"][style*="margin-bottom:1em"] > a:has(> div .ctaText),
html[data-darkmode="dark"] .single-post .entry-content div[style*="clear:both"][style*="margin-bottom:1em"] > a:has(> div .postTitle) {
	display: block;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Dark mode: hero slider arrows */
html[data-darkmode="dark"] #hero .swiper-button-prev,
html[data-darkmode="dark"] #hero .swiper-button-next {
	color: #e9edff;
	background: rgba(20, 27, 53, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

html[data-darkmode="dark"] #hero .swiper-button-prev:hover,
html[data-darkmode="dark"] #hero .swiper-button-next:hover {
	color: #ffffff;
	background: #364274;
	border-color: rgba(255, 255, 255, 0.26);
}

@media only screen and (max-width: 868px) {
	#hero .swiper-button-prev,
	#hero .swiper-button-next {
		display: none !important;
	}
}

/* Single post author box: make the "View All Posts/Publications" label slightly smaller. */
body.single-post .author-box .more-posts-button .bloghash-btn span {
	font-size: 1.45rem;
	line-height: 1.25;
}

@media only screen and (max-width: 599px) {
	body.single-post .author-box .more-posts-button .bloghash-btn span {
		font-size: 1.35rem;
	}
}

/* Related posts card title: slightly smaller for tighter layout. */
#related_posts .bloghash-post-item .entry-header .entry-title,
#related_posts .bloghash-post-item .entry-header .entry-title a {
	font-size: clamp(1.5rem, 1.35vw, 1.85rem);
	line-height: 1.24;
}

/* Prevent the post-content (flex item) from being stretched by its widest
   child (e.g. a long author name on a nowrap meta row). Without min-width:0
   the card's overflow:hidden clips the title. */
#related_posts .bloghash-post-item {
	min-width: 0;
}

#related_posts .bloghash-post-item > .bloghash-post-content {
	min-width: 0;
	max-width: 100%;
}

#related_posts .bloghash-post-item .entry-header,
#related_posts .bloghash-post-item .entry-header .entry-title,
#related_posts .bloghash-post-item .entry-header .entry-title a {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Desktop only: hide the category badge on related-posts cards (kept on mobile). */
@media only screen and (min-width: 769px) {
	#related_posts .bloghash-post-item .post-category {
		display: none !important;
	}

	/* Keep author + date on the same row. If the author name is too long,
	   truncate it with an ellipsis instead of overflowing the card and
	   clipping the post title / date. */
	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements {
		flex-wrap: nowrap;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements > span {
		white-space: nowrap;
		min-width: 0;
	}

	/* Date stays fully visible; author shrinks and gets an ellipsis. */
	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements > span.posted-on {
		flex: 0 0 auto;
	}

	/* The actual flex child for the author block is .post-author (it wraps
	   .posted-by). Hide the gravatar on desktop and let the author name
	   shrink with an ellipsis when long. */
	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements .post-author {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements .author-avatar {
		display: none !important;
	}

	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements .posted-by {
		display: inline-flex;
		align-items: center;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements .posted-by > span {
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}

	#related_posts .bloghash-post-item .entry-meta .entry-meta-elements .posted-by a {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: bottom;
	}
}

@media only screen and (max-width: 599px) {
	#related_posts .bloghash-post-item .entry-header .entry-title,
	#related_posts .bloghash-post-item .entry-header .entry-title a {
		font-size: clamp(1.45rem, 4.2vw, 1.72rem);
	}
}

/* Keep site description in the HTML for SEO, but hide it visually. */
.logo-inner .site-description {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Keep archive/home card titles semantic h2, but visually sized like the old h4. */
body.home #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
body.blog #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
body.archive #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
body.search #main .bloghash-blog-entry-wrapper .entry-header .entry-title {
	font-size: clamp(1.98rem, 2.15vw, 2.4rem);
	line-height: 1.38;
	margin: 0;
}

body.home #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
body.blog #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
body.archive #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
body.search #main .bloghash-blog-entry-wrapper .entry-header .entry-title a {
	font-size: inherit;
	line-height: inherit;
}

/* Hero slider title: semantic h2 with previous h4 visual weight/size. */
#hero .bloghash-blog-entry-wrapper.bloghash-thumb-hero .entry-header .entry-title {
	font-size: clamp(2rem, 2.2vw, 2.6rem);
	line-height: 1.2;
	margin: 0;
}

/* PYML card titles: semantic heading with old visual size. */
#pyml .bloghash-pyml .bloghash-post-item .bloghash-post-content .entry-header .entry-title,
#pyml .bloghash-pyml .bloghash-post-item .bloghash-post-content .entry-header .entry-title a {
	font-size: clamp(1.45rem, 1.45vw, 1.9rem);
	line-height: 1.24;
	margin: 0;
}

@media only screen and (max-width: 768px) {
	#hero .bloghash-blog-entry-wrapper.bloghash-thumb-hero .entry-header .entry-title,
	#hero .bloghash-blog-entry-wrapper.bloghash-thumb-hero .entry-header .entry-title a {
		font-size: clamp(1.9rem, 5vw, 2.1rem);
		line-height: 1.22;
	}

	#pyml .bloghash-pyml .bloghash-post-item .bloghash-post-content .entry-header .entry-title,
	#pyml .bloghash-pyml .bloghash-post-item .bloghash-post-content .entry-header .entry-title a {
		font-size: clamp(1.9rem, 5.4vw, 2.3rem);
		line-height: 1.24;
	}
}

/* Related posts ("Publications You May Like") on mobile: bigger card titles. */
@media only screen and (max-width: 768px) {
	#related_posts .bloghash-post-item .entry-header .entry-title,
	#related_posts .bloghash-post-item .entry-header .entry-title a {
		font-size: clamp(1.7rem, 5.1vw, 2.1rem) !important;
		line-height: 1.21 !important;
	}
}

/* Home / blog / archive / search card titles on mobile: bump size for readability. */
@media only screen and (max-width: 768px) {
	body.home #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.blog #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.archive #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.search #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.home #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
	body.blog #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
	body.archive #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
	body.search #main .bloghash-blog-entry-wrapper .entry-header .entry-title a {
		font-size: clamp(2.15rem, 5.6vw, 2.55rem) !important;
		line-height: 1.28 !important;
	}
}

@media only screen and (max-width: 599px) {
	body.home #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.blog #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.archive #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.search #main .bloghash-blog-entry-wrapper .entry-header .entry-title,
	body.home #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
	body.blog #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
	body.archive #main .bloghash-blog-entry-wrapper .entry-header .entry-title a,
	body.search #main .bloghash-blog-entry-wrapper .entry-header .entry-title a {
		font-size: clamp(2.05rem, 6.1vw, 2.35rem) !important;
		line-height: 1.26 !important;
	}
}

/* Category badge contrast (WCAG AA).
   Per-category brand colors (set in Customizer) vary widely (red, orange, blue…).
   No single text color passes contrast on every brand color when used as a fill.
   Default style: outline pill — transparent fill + colored border + dark text,
   contrast measured against the page/card background. */
.post-category .cat-links a,
.featured-one .bloghash-post-item.style-1 .bloghash-post-content .post-category .cat-links a {
	background-color: transparent !important;
	color: #111827 !important;
	border: 2px solid var(--bloghash-primary) !important;
	padding: 5px 10px !important;
}

.post-category .cat-links a:hover,
.post-category .cat-links a:focus {
	background-color: var(--bloghash-primary) !important;
	color: #ffffff !important;
	border-color: var(--bloghash-primary) !important;
}

/* Badges placed over a thumbnail (hero, PYML, related, featured cards with
   image overlay): keep solid fill + white text — contrast measured against
   white text on the brand color, which is consistently readable for the
   theme's category palette. */
#hero .post-category .cat-links a,
.bloghash-pyml .post-category .cat-links a,
#related_posts .post-category .cat-links a,
.entry-thumb-image .post-category .cat-links a,
.entry-media + .post-category .cat-links a {
	background-color: var(--bloghash-primary) !important;
	color: #ffffff !important;
	border: 2px solid var(--bloghash-primary) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Dark mode: light text on dark page background, transparent fill. */
html[data-darkmode="dark"] .post-category .cat-links a {
	background-color: transparent !important;
	color: #f5f7ff !important;
	border-color: var(--bloghash-primary) !important;
}

html[data-darkmode="dark"] #hero .post-category .cat-links a,
html[data-darkmode="dark"] .bloghash-pyml .post-category .cat-links a,
html[data-darkmode="dark"] #related_posts .post-category .cat-links a,
html[data-darkmode="dark"] .entry-thumb-image .post-category .cat-links a,
html[data-darkmode="dark"] .entry-media + .post-category .cat-links a {
	background-color: var(--bloghash-primary) !important;
	color: #ffffff !important;
	border-color: var(--bloghash-primary) !important;
}

html[data-darkmode="dark"] .post-category .cat-links a:hover,
html[data-darkmode="dark"] .post-category .cat-links a:focus {
	background-color: var(--bloghash-primary) !important;
	color: #ffffff !important;
}

/* In-post link contrast (WCAG AA).
   Scope strictly to prose containers so plugin widgets (social share buttons,
   icon grids, etc.) inside .entry-content are NOT recolored. */
.single-post .entry-content :is(p, li, blockquote, td, dd, h2, h3, h4, h5, h6) a:not(.bloghash-btn):not(.wp-block-button__link):not(.page-numbers):not([class^="cat-"]):not([rel="tag"]):not(:has(.ctaText)):not(:has(.postTitle)):not(:has(img)):not(:has(svg)) {
	color: #b3125e !important;
	text-decoration: underline !important;
	text-underline-offset: 0.18em;
}

.single-post .entry-content :is(p, li, blockquote, td, dd, h2, h3, h4, h5, h6) a:not(.bloghash-btn):not(.wp-block-button__link):not(.page-numbers):not([class^="cat-"]):not([rel="tag"]):not(:has(.ctaText)):not(:has(.postTitle)):not(:has(img)):not(:has(svg)):hover {
	color: #7a0d40 !important;
}

/* Dark mode. */
html[data-darkmode="dark"] .single-post .entry-content :is(p, li, blockquote, td, dd, h2, h3, h4, h5, h6) a:not(.bloghash-btn):not(.wp-block-button__link):not(.page-numbers):not([class^="cat-"]):not([rel="tag"]):not(:has(.ctaText)):not(:has(.postTitle)):not(:has(img)):not(:has(svg)) {
	color: #ff7eb6 !important;
}

html[data-darkmode="dark"] .single-post .entry-content :is(p, li, blockquote, td, dd, h2, h3, h4, h5, h6) a:not(.bloghash-btn):not(.wp-block-button__link):not(.page-numbers):not([class^="cat-"]):not([rel="tag"]):not(:has(.ctaText)):not(:has(.postTitle)):not(:has(img)):not(:has(svg)):hover {
	color: #ffd0e4 !important;
}

/* Ticker pause/play button: keep the original visual size (no extra padding
   or margin around it) and rely on the thumbnail-hit-area expansion below
   to satisfy Lighthouse's tap-targets rule. The button itself is the
   parent's default size; we only enforce a minimum so it is at least 44px
   tall (which it already is at height: 4.5rem). */
.ticker-slider-controls .ticker-slider-pause {
	width: 44px !important;
	min-width: 44px !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ticker-slider-controls .ticker-slider-pause:focus-visible {
	outline: 2px solid #ff7eb6;
	outline-offset: 2px;
}

/* Thumbnail link in each ticker slide: parent sizes the visible square at
   3.6rem (~36px). Lighthouse requires 24x24 minimum + 24px spacing OR a
   44x44 hit area. We keep the visual square 36x36 but expand the tappable
   area to 44x44 with negative inset so layout does not shift. THIS is
   what makes Lighthouse pass without needing extra padding/margin around
   the pause button (which would create an ugly visible rectangle). */
.ticker-slide-item .ticker-slider-backgrounds {
	position: relative;
}

.ticker-slide-item .ticker-slider-backgrounds a {
	position: absolute;
	inset: -4px;
	width: auto;
	height: auto;
	min-width: 44px;
	min-height: 44px;
}


/* Ticker post title: keep visual size similar to the previous h6 so layout
   isn't disrupted, even though the tag is now h3 for correct hierarchy. */
.bloghash-ticker .slide-inner .ticker-item-title {
	font-size: 1.4rem;
	line-height: 1.35;
	margin: 0;
	font-weight: 600;
}



/* =============================================================================
   Separate Mobile Navigation menu
   -----------------------------------------------------------------------------
   Two .bloghash-nav elements are output: mobile nav first (so the hamburger
   JS grabs it), desktop nav second.

   • Desktop: mobile nav hidden, desktop nav visible as usual.
   • Mobile breakpoint: both are hidden by the theme's breakpoint rule.
     Hamburger JS slides down the FIRST .bloghash-nav (mobile nav). ✓
   • When mobile overlay is open: desktop nav stays hidden;
     mobile nav is the one that was slid down.
   ============================================================================= */

/* Hide mobile nav on desktop (body does NOT have .bloghash-is-mobile). */
body:not(.bloghash-is-mobile) .bloghash-child-mobile-nav {
display: none !important;
}

/* On mobile, always keep the desktop nav invisible — even when the overlay
   is open — so only the mobile nav shows inside the panel. */
body.bloghash-is-mobile .bloghash-child-desktop-nav {
display: none !important;
}


/* Subscriber widget: <h5> replaced with <p class="sfsi-subscribe-label">
   for heading-hierarchy compliance. Match the h5 visual style exactly. */
.sfsi-subscribe-label {
font-size: 1em;
font-weight: 700;
margin: 0 0 .75em;
line-height: 1.4;
text-align: center;
}

/* Subscriber widget styles moved from plugin's inline body <style> block.
   Keeps visual output while allowing valid HTML structure. */
.sfsi_subscribe_Popinner {
	width: 100% !important;
	height: auto !important;
	padding: 18px 0 !important;
	background-color: #f7f7f7 !important;
}

.sfsi_subscribe_Popinner form {
	margin: 0 20px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sfsi_subscription_form_field {
	margin: 5px 0 !important;
	width: 100% !important;
	display: inline-flex;
	display: -webkit-inline-flex;
	justify-content: center;
}

.sfsi_subscription_form_field input {
	width: 100% !important;
	padding: 10px 18px !important;
	text-align: center !important;
}

.sfsi_subscribe_Popinner .sfsi-subscribe-label {
	display: block;
	width: 100%;
	margin: 0 auto .9rem;
	text-align: center;
}

.sfsi_subscribe_Popinner input[type=email],
.sfsi_subscribe_Popinner input[type=email]::placeholder,
.sfsi_subscribe_Popinner input[type=email]::-webkit-input-placeholder,
.sfsi_subscribe_Popinner input[type=email]:-ms-input-placeholder,
.sfsi_subscribe_Popinner input[type=email]::-ms-input-placeholder {
	font-family: Helvetica, Arial, sans-serif !important;
	font-style: normal !important;
	font-size: 14px !important;
	text-align: center !important;
}

.sfsi_subscribe_Popinner input[type=submit] {
	font-family: Helvetica, Arial, sans-serif !important;
	font-weight: 700 !important;
	color: #000 !important;
	font-size: 16px !important;
	text-align: center !important;
	background-color: #dedede !important;
}

.sfsi_shortcode_container {
	float: left;
}

.sfsi_shortcode_container .norm_row .sfsi_wDiv {
	position: relative !important;
}

.sfsi_shortcode_container .sfsi_holders {
	display: none;
}

/* Subscriber widget dark mode.
   The plugin had no dark-mode settings, so now that its CSS lives here,
   we can keep the form readable inside dark surfaces. */
html[data-darkmode="dark"] .sfsi_subscribe_Popinner {
	background-color: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
}

html[data-darkmode="dark"] .sfsi_subscribe_Popinner,
html[data-darkmode="dark"] .sfsi-subscribe-label {
	color: #f8f8fb !important;
}

html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=email] {
	background-color: #35345d !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	color: #f8f8fb !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=email]::placeholder,
html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=email]::-webkit-input-placeholder,
html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=email]:-ms-input-placeholder,
html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=email]::-ms-input-placeholder {
	color: rgba(248, 248, 251, 0.58) !important;
}

html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=submit] {
	background-color: #e9ebf2 !important;
	border: 0 !important;
	color: #171721 !important;
}

html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=submit]:hover,
html[data-darkmode="dark"] .sfsi_subscribe_Popinner input[type=submit]:focus {
	background-color: #ffffff !important;
	color: #111 !important;
}