/**
 * WP Post Date & Updated Meta Enhancer - Frontend CSS
 * Includes Date Meta, Rank Math Breadcrumbs, Interlinks, & Discover Enhancers
 */

/* -------------------------------------------------------------
 * 1. BREADCRUMBS (ABOVE TITLE)
 * ------------------------------------------------------------- */
.wpdme-breadcrumb {
	font-size: 14px !important;
	color: #222222 !important;
	margin-top: 4px;
	margin-bottom: 8px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.wpdme-breadcrumb a,
.wpdme-breadcrumb-home,
.wpdme-breadcrumb-cat {
	color: #222222;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: color 0.15s ease;
}

.wpdme-breadcrumb a:hover,
.wpdme-breadcrumb a:focus {
	text-decoration: underline !important;
}

.wpdme-breadcrumb-sep {
	margin: 0 4px !important;
	color: #222222 !important;
	font-weight: 600 !important;
	font-size: 0 !important; /* Hide old / character */
	display: inline-block !important;
}

.wpdme-breadcrumb-sep::after {
	content: "»" !important;
	font-size: 14px !important;
	color: #222222 !important;
	font-weight: 600 !important;
	display: inline-block !important;
}

/* -------------------------------------------------------------
 * 2. POST META BAR (AUTHOR & DATES)
 * ------------------------------------------------------------- */
.post-meta-custom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px !important;
	margin-top: 6px;
	margin-bottom: 14px;
	font-size: 14px !important;
	color: #555555;
	line-height: 1.4;
}

.post-meta-custom .author {
	font-weight: 500;
	color: #555555;
	font-size: 14px !important;
}

.post-meta-custom .author-name,
.post-meta-custom .author-name-link {
	color: #555555;
	font-weight: 500;
	font-size: 14px !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

.post-meta-custom .author-name-link:hover {
	text-decoration: underline !important;
}

.post-meta-custom a:visited,
.post-meta-custom .author-name-link:visited {
	color: inherit !important;
}

.post-meta-custom .separator,
.post-meta-custom .meta-date-sep {
	color: #999999 !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	margin: 0 0px !important;
}

.post-meta-custom .post-date,
.post-meta-custom .updated-date {
	color: #555555;
	font-weight: 400;
	font-size: 14px !important;
	background-color: transparent;
	padding: 0;
	display: inline-flex;
	white-space: nowrap;
}

.post-meta-line-2 .meta-date-sep {
	color: #999999 !important;
	margin: 0 1px;
}

/* -------------------------------------------------------------
 * 3. INLINE INTERLINK RELATED POST BANNERS (LIGHTWEIGHT COLORS)
 * ------------------------------------------------------------- */
.wpdme-inline-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	border: 1px solid #e2e8f0;
	border-left: 3.5px solid #0284c7;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 20px 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	line-height: 1.45;
	box-sizing: border-box;
	clear: both;
}

.wpdme-banner-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	color: #0284c7;
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.5 !important;
	white-space: nowrap;
}

.wpdme-banner-link {
	color: #222222 !important;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.wpdme-banner-link:hover {
	text-decoration: underline !important;
}

/* Sliding Arrow Animation on Hover */
.wpdme-banner-link:after {
	content: " →";
	display: inline-block;
	margin-left: 0;
	opacity: 0;
	transition: opacity 0.15s ease, margin-left 0.15s ease;
	font-weight: bold;
}

.wpdme-banner-link:hover:after {
	opacity: 1;
	margin-left: 5px;
}

/* -------------------------------------------------------------
 * 4. BACK TO TOP BUTTON (EXACT RUSHLANE SQUARE BOX STYLE 1)
 * ------------------------------------------------------------- */
.wpdme-back-to-top {
	position: fixed;
	bottom: 15px !important;
	right: 5px !important;
	width: 35px !important;
	height: 35px !important;
	background-color: #376298 !important;
	color: #ffffff !important;
	border-radius: 0 !important; /* Sharp Square Box - Exact Rushlane Style 1 */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	z-index: 99999;
	text-decoration: none !important;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 70px, 0);
	transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.3s ease, visibility 0.3s ease;
	cursor: pointer;
}

.wpdme-back-to-top.wpdme-show {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}

.wpdme-back-to-top:hover {
	background-color: #002244;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.wpdme-back-to-top svg {
	display: block;
	color: #ffffff;
	transition: transform 0.2s ease;
}

.wpdme-back-to-top:hover svg {
	transform: translateY(-2px);
}

/* -------------------------------------------------------------
 * 5. GOOGLE DISCOVER CLEAN RELATED POSTS GRID (EXACT REFERENCE UI)
 * ------------------------------------------------------------- */
.wpdme-bottom-related-section {
	margin-top: 10px !important;
	margin-bottom: 30px !important;
	padding: 20px !important;
	background-color: var(--base-3, #ffffff) !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	clear: both !important;
	box-sizing: border-box !important;
}

.wpdme-bottom-related-header {
	margin-bottom: 20px;
}

.wpdme-bottom-related-heading,
.entry-content .wpdme-bottom-related-heading,
.single .entry-content .wpdme-bottom-related-heading {
	font-size: 21px !important;
	font-weight: 700 !important;
	color: #222222 !important;
	background: transparent !important;
	border: none !important;
	border-left: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
	letter-spacing: -0.3px !important;
	line-height: 1.35 !important;
}

.wpdme-bottom-related-heading-link {
	color: #222222 !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	transition: color 0.15s ease !important;
}

.wpdme-bottom-related-heading-link:hover {
	text-decoration: none !important;
}

.wpdme-bottom-related-heading-link svg {
	transition: transform 0.15s ease !important;
}

.wpdme-bottom-related-heading-link:hover svg {
	transform: translateX(3px) !important;
}

.sc_card h2,
.sc_card h3,
.sc_card h4,
.entry-content .sc_card h2,
.entry-content .sc_card h3,
.entry-content .sc_card h4,
.single .entry-content .sc_card h3 {
	background: transparent !important;
	border: none !important;
	border-left: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 0 6px 0 !important;
}

.wpdme-bottom-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 22px;
	row-gap: 28px;
}

.wpdme-clean-post-card {
	display: flex;
	flex-direction: column;
}

.wpdme-clean-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	color: inherit;
}

.wpdme-clean-thumb-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	border-radius: 8px;
	overflow: hidden;
	background-color: #f1f5f9;
	margin-bottom: 10px;
}

.wpdme-clean-thumb-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.25s ease;
}

.wpdme-clean-card-link:hover .wpdme-clean-thumb-wrap img {
	transform: none !important;
	opacity: 0.95;
}

.wpdme-clean-placeholder-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f8fafc, #e2e8f0);
	border-radius: 8px;
}

.wpdme-clean-post-title,
.entry-content .wpdme-clean-post-title,
.single .entry-content .wpdme-clean-post-title {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: #222222 !important;
	background: transparent !important;
	border: none !important;
	border-left: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	line-height: 1.38 !important;
	margin: 0 0 6px 0 !important;
	transition: color 0.15s ease !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.wpdme-clean-card-link:visited .wpdme-clean-post-title,
.wpdme-clean-card-link:hover .wpdme-clean-post-title {
	color: #222222 !important;
}

.wpdme-clean-post-date {
	font-size: 12.5px !important;
	color: #64748b !important;
	font-weight: 400 !important;
	margin-top: auto !important;
}

/* -------------------------------------------------------------
 * 6. MOBILE RESPONSIVE ADJUSTMENTS
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
	.wpdme-breadcrumb {
		font-size: 13px;
		margin-bottom: 6px;
	}

	.wpdme-meta-item + .wpdme-meta-item::before {
		margin: 0 4px;
	}

	.post-meta-custom .updated-date {
		font-size: inherit;
		padding: 0;
	}

	.wpdme-inline-banner {
		padding: 8px 12px;
		gap: 6px;
		margin: 16px 0;
	}

	.wpdme-banner-link {
		font-size: 13.5px;
	}

	.wpdme-back-to-top {
		bottom: 50px !important;
		right: 5px !important;
		width: 35px !important;
		height: 35px !important;
		background-color: #376298 !important;
	}

	/* Prevent Page Header, Category Header & Author Box from sticking to left/right edges on mobile */
	.page-header,
	.archive-header,
	.author-box,
	.author-info,
	.taxonomy-description,
	.category-header {
		margin-left: 10px !important;
		margin-right: 10px !important;
		margin-top: 15px !important;
		box-sizing: border-box !important;
	}

	.wpdme-bottom-related-section {
		margin-left: 0px !important;
		margin-right: 0px !important;
		margin-top: 10px !important;
		padding: 20px !important;
		border-radius: 0 !important;
		box-sizing: border-box !important;
	}

	.wpdme-bottom-related-heading,
	.entry-content .wpdme-bottom-related-heading,
	.single .entry-content .wpdme-bottom-related-heading {
		font-size: 20px !important;
	}

	.wpdme-bottom-related-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 14px;
		row-gap: 20px;
	}

	.wpdme-clean-post-title {
		font-size: 14px;
		line-height: 1.35;
	}

	.wpdme-clean-post-date {
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.wpdme-bottom-related-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 10px;
		row-gap: 16px;
	}

	.wpdme-clean-thumb-wrap {
		border-radius: 6px;
		margin-bottom: 6px;
	}

	.wpdme-clean-post-title,
	.entry-content .wpdme-clean-post-title,
	.single .entry-content .wpdme-clean-post-title {
		font-size: 12px !important;
		line-height: 1.35 !important;
		margin-bottom: 4px !important;
		-webkit-line-clamp: 3 !important;
	}

	.wpdme-clean-post-date {
		font-size: 11.5px !important;
	}
}

/* -------------------------------------------------------------
 * 8. OFFICIAL WHATSAPP & TELEGRAM JOIN BUTTONS (SINGLE LINE MOBILE)
 * ------------------------------------------------------------- */
.wpdme-join-box,
.wpdme-join-box p {
	margin: 0 !important;
	padding: 0 !important;
}

.wpdme-join-box {
	width: 100% !important;
	margin: 12px 0 16px 0 !important;
	clear: both !important;
	box-sizing: border-box !important;
}

.wpdme-join-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 8px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	align-items: center !important;
}

.wpdme-join-grid > p {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wpdme-join-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 10px 8px !important;
	border-radius: 6px !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
	transition: opacity 0.2s ease, transform 0.15s ease !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.wpdme-join-btn:hover {
	opacity: 0.92 !important;
	transform: translateY(-1px) !important;
}

.wpdme-join-wa {
	background-color: #2d953b !important;
}

.wpdme-join-tg {
	background-color: #0088cc !important;
}

.wpdme-join-btn svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
}

.wpdme-join-btn span,
.wpdme-join-text {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: 14px !important;
}

@media (max-width: 480px) {
	.wpdme-join-grid {
		gap: 6px !important;
	}

	.wpdme-join-btn {
		padding: 9px 5px !important;
		font-size: 14px !important;
		gap: 5px !important;
	}

	.wpdme-join-btn svg {
		width: 16px !important;
		height: 16px !important;
	}

	.wpdme-join-btn span,
	.wpdme-join-text {
		font-size: 14px !important;
	}
}

@media (min-width: 769px) {
	.wpdme-join-box.wpdme-mobile-only {
		display: none !important;
	}
}

/* -------------------------------------------------------------
 * 9. RANK MATH & SCHEMA FAQ BLOCK SPACING FIX (QUESTION & ANSWER GAP)
 * ------------------------------------------------------------- */
.rank-math-question,
.schema-faq-question,
.wp-block-rank-math-faq-block h2,
.wp-block-rank-math-faq-block h3,
.wp-block-rank-math-faq-block h4,
.rank-math-block .rank-math-question,
.schema-faq-section .schema-faq-question,
.rank-math-list-item .rank-math-question,
.rank-math-list-item h3,
.rank-math-list-item h4 {
	margin-top: 0 !important;
	margin-bottom: 8px !important;
	padding-bottom: 0 !important;
	line-height: 1.4 !important;
}

.rank-math-answer,
.schema-faq-answer,
.wp-block-rank-math-faq-block .rank-math-answer,
.schema-faq-section .schema-faq-answer,
.rank-math-list-item .rank-math-answer {
	margin-top: 4px !important;
	line-height: 1.55 !important;
}

.rank-math-answer p,
.schema-faq-answer p,
.rank-math-list-item .rank-math-answer p {
	margin-top: 0 !important;
	margin-bottom: 4px !important;
}

.rank-math-list-item,
.schema-faq-section,
.wp-block-rank-math-faq-block .rank-math-list-item {
	margin-bottom: 14px !important;
}

/* -------------------------------------------------------------
 * 10. GENERATEPRESS SITE TITLE HEADER FONT-WEIGHT HARMONIZATION
 * Ensures Site Title "HB Result" has identical font weight on
 * Homepage (h1.main-title) and Single Posts (p.main-title)
 * ------------------------------------------------------------- */
.main-title,
.main-title a,
h1.main-title,
p.main-title,
h1.main-title a,
p.main-title a,
.site-branding .main-title,
.navigation-branding .main-title {
	font-weight: 600 !important;
}