/**
 * blog.css
 * template-parts/blog/*.php: single post content, archive/search cards
 * already share ui/card styling (buttons.css) — this file covers what's
 * specific to blog content itself.
 */

/* ---------- Single post: professional article surface ----------
   The old layout was just bare heading + text straight on the page
   background — reads as an unfinished draft, not a published article.
   Wrapping it in a defined white card (border + soft shadow, generous
   padding) gives it the "reading surface" feel of an actual
   publication, matching the card language used everywhere else on
   the site (didgat-card, business page, etc). */
.blog-post {
	background: var(--dg-surface);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-7) var(--space-7);
}

@media (max-width: 640px) {
	.blog-post {
		padding: var(--space-5) var(--space-4);
		border-radius: var(--radius-md);
	}
}

.blog-post .entry-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--dg-border);
}

/* Small category pill above the title — gives the header a point of
   entry/context instead of jumping straight to a big bold headline. */
.entry-category-badge {
	display: inline-block;
	background: var(--dg-primary-100);
	color: var(--dg-primary-800);
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--radius-full);
	padding: var(--space-1) var(--space-4);
	margin-bottom: var(--space-3);
}

.entry-category-badge:hover {
	background: var(--dg-primary-200);
}

.blog-post .entry-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1.4;
	margin-bottom: 0;
}

.entry-meta {
	color: var(--dg-text-secondary);
	font-size: 0.875rem;
}

.blog-post .entry-thumbnail {
	margin-bottom: var(--space-7);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.entry-content {
	max-width: 72ch;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.9;
	color: var(--dg-text-primary);
}

/* ---------- Table of contents (auto-built by assets/js/app.js) ----------
   Collapsible box injected right after the article header. Starts
   closed ([data-open="false"], set by the script); the toggle button
   flips it to [data-open="true"] to expand. No JS reliance for
   layout — CSS alone hides/shows via the attribute. Kept deliberately
   compact when open (small type, tight spacing, capped height with
   its own scroll) instead of a tall block that pushes the article
   text far down the page. */
.toc {
	max-width: 72ch;
	margin: 0 auto var(--space-6);
	background: var(--dg-background);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: none;
	border: none;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--dg-text-primary);
	cursor: pointer;
}

.toc__toggle-icon {
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid var(--dg-text-secondary);
	border-bottom: 2px solid var(--dg-text-secondary);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.toc[data-open="false"] .toc__toggle-icon {
	transform: rotate(-135deg);
}

.toc[data-open="false"] .toc__list {
	display: none;
}

.toc__list {
	list-style: none;
	margin: 0;
	padding: var(--space-2) var(--space-4) var(--space-3);
	border-top: 1px solid var(--dg-border);
	max-height: 220px;
	overflow-y: auto;
}

.toc__item + .toc__item {
	margin-top: 2px;
}

.toc__item--h3 {
	margin-inline-start: var(--space-4);
}

.toc__link {
	display: block;
	padding: 3px 0;
	color: var(--dg-text-secondary);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-decoration: none;
}

.toc__link:hover {
	color: var(--dg-primary-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content > * + * {
	margin-top: var(--space-5);
}

.entry-content h2,
.entry-content h3 {
	font-weight: 700;
	line-height: 1.5;
	color: var(--dg-text-primary);
	margin-top: var(--space-8);
	margin-bottom: var(--space-1);
	scroll-margin-top: var(--space-8);
}

.entry-content h2 {
	font-size: 1.375rem;
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--dg-primary-100);
}

.entry-content h3 {
	font-size: 1.125rem;
}

.entry-content a {
	color: var(--dg-primary-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content a:hover {
	color: var(--dg-primary-800);
}

.entry-content img {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.entry-content blockquote {
	border-inline-start: 4px solid var(--dg-secondary);
	background: var(--color-brand-50, var(--dg-background));
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-4) var(--space-5);
	color: var(--dg-text-secondary);
	font-style: italic;
}

.entry-content table {
	overflow-x: auto;
	display: block;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--dg-border);
	padding: var(--space-2) var(--space-3);
}

/* ---------- Prev/next post navigation ----------
   WordPress's get_the_post_navigation() renders
   nav.post-navigation > .nav-links > .nav-previous/.nav-next, each
   wrapping an <a> with a .nav-subtitle ("قبلی نوشته"/"نوشته بعدی")
   and .nav-title (the linked post's title). Styled as a pair of
   bordered cards instead of bare text links. */
.post-navigation {
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--dg-border);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	min-width: 0;
}

.post-navigation .nav-next {
	grid-column: 2;
	text-align: end;
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-md);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.post-navigation a:hover {
	border-color: var(--color-brand-300, var(--dg-secondary));
	background: var(--dg-background);
}

.post-navigation .nav-subtitle {
	display: block;
	font-size: 0.8125rem;
	color: var(--dg-text-secondary);
	margin-bottom: var(--space-1);
}

.post-navigation .nav-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	color: var(--dg-text-primary);
}

@media (max-width: 560px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 1;
		text-align: start;
	}
}

.related-posts__grid .didgat-card {
	height: 100%;
}

/* ---------- Compact blog card (archive/search/homepage latest-posts) ----------
   Scoped to .archive__grid so business cards (.business-archive__grid)
   and any other .didgat-card usage elsewhere are unaffected. */
/* aspect-ratio alone (no max-height) keeps the crop proportion
   identical at every card width. The previous max-height: 200px
   fought the aspect-ratio on wide desktop/tablet cards (auto-fit
   grid columns can grow well past the 260px minimum), so the box
   ended up much wider than 16:9 relative to its capped height and
   object-fit: cover cropped away roughly half the image — fine on
   narrow mobile cards (close to 200px tall already) but broken on
   desktop/tablet. */
.archive__grid .didgat-card__media {
	aspect-ratio: 16 / 9;
}

.archive__grid .didgat-card__body {
	padding: var(--space-4);
}

.archive__grid .didgat-card__title {
	font-size: 1rem;
	margin-block: var(--space-1) var(--space-2);
}

.archive__grid .didgat-card__excerpt {
	font-size: 0.875rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- [didgat_top_commented_posts] plugin output ----------
   The shortcode already ships its own responsive grid/carousel CSS;
   this just keeps the outer bare .dg-hotcmt-grid from taking the full
   browser width when it isn't wrapped in .container (see
   template-parts/sections/top-commented.php, which now always wraps
   it in .section + .container so this is mostly a safety net). */
.top-commented .dg-hotcmt-grid {
	margin: 0;
}

/* The plugin renders each item's outer box with its own (gray) inline
   background. The section is now white (template-parts/sections/
   top-commented.php), so just the outer grid-item wrapper is forced
   white and gets a border/shadow for definition against the equally-
   white page background — nothing inside it (stars, badges, etc.) is
   touched, since that's the plugin's own markup/colors and overriding
   those broke the star rating colors. */
.top-commented .dg-hotcmt-grid > * {
	background: var(--dg-surface) !important;
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* ---------- [display_latest_comments] plugin output ----------
   That function only outputs bare `.latest-comments-wrapper >
   .comment-item` divs with no layout CSS at all, so every comment
   stacked full-width — this is what made the section look "stuck to
   the page and stretched". Turned into the same responsive card grid
   the rest of the site uses; the plugin's PHP/markup/data logic is
   untouched, only its container is now styled. */
.latest-comments-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-5);
	align-items: stretch;
}

.latest-comments-wrapper .comment-item {
	position: relative;
	background: var(--dg-surface);
	color: var(--dg-text-primary);
	border: 1px solid var(--dg-border);
	border-radius: var(--radius-lg);
	/* No box-shadow here on purpose — with overflow:hidden set below (on
	   this same element, needed to clip the ::before gradient/rounded
	   corners), a shadow doesn't get clipped by that overflow (it's
	   drawn outside the box regardless), so the previous soft 32px-blur
	   shadow was showing as a grey halo/rounded patch below and around
	   each card instead of a subtle depth cue. The border above is
	   enough definition against the white section background. */
	padding: var(--space-4) var(--space-5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	/* Base font size for everything the plugin renders inside a card
	   (name/date header, stars, comment text, buttons). The plugin ships
	   no font-sizing of its own, so on mobile it was inheriting the
	   page's large base size — this brings it down to a sane card size
	   and every child inherits it unless overridden below. */
	font-size: 0.9375rem;
	line-height: 1.6;
}

.latest-comments-wrapper .comment-item::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 40%);
	pointer-events: none;
}

.latest-comments-wrapper .comment-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.latest-comments-wrapper .comment-divider {
	display: none;
}

.latest-comments-wrapper .comment-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	color: var(--dg-text-primary);
}

.latest-comments-wrapper .bottom-section {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

/* Reorder the card body: comment text near the top (right under the
   name/date/stars header), the "view review" button + "I recommend"
   label pushed down to the bottom, just above the divider/logo. Only
   works on direct children of .bottom-section, which is where the
   plugin + initRecommendRow() in app.js place all of these. */
.latest-comments-wrapper .comment-text {
	order: 1;
	margin-top: 0;
}

.latest-comments-wrapper .comment-divider {
	order: 2;
}

.latest-comments-wrapper .dg-recommend-row {
	order: 3;
	margin-top: var(--space-2);
	margin-bottom: 0;
}

.latest-comments-wrapper .post-thumbnail {
	order: 4;
}

.latest-comments-wrapper .view-comment-button {
	/* Moved from flex-start to flex-end so the button sits on the
	   physical left side of the card (this is an RTL layout, so
	   flex-end on the cross-axis = left). */
	align-self: flex-end;
	border-radius: var(--radius-full) !important;
}

/* Wrapper that assets/js/app.js builds around the "recommend" label +
   the view-comment button, so the label stays on the right and the
   button on the left, on the same row, in the button's old spot. */
.dg-recommend-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	margin-bottom: var(--space-3);
}

.dg-recommend-row .view-comment-button {
	align-self: center;
}

.latest-comments-wrapper .post-thumbnail {
	margin-top: auto !important;
	padding-top: var(--space-5);
	border-top: 1px solid var(--dg-border);
}

.latest-comments-wrapper .post-thumbnail img {
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.latest-comments-wrapper .post-thumbnail span {
	font-size: 0.875rem;
	color: var(--dg-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Responsive tuning for the plugin's comment cards ----------
   On phones the plugin's own name/date/star markup was inheriting a
   large base font size, making cards feel oversized and cramped. Scale
   everything down in two steps instead of one hard cutoff so tablets
   and small phones both look right. */
@media (max-width: 640px) {
	.latest-comments-wrapper .comment-item {
		font-size: 0.875rem;
	}

	.latest-comments-wrapper .comment-text {
		-webkit-line-clamp: 3;
	}
}

/* ---------- Mobile: Trustpilot-style 2-row horizontal carousel ----------
   Below the tablet breakpoint, stop stacking every comment full-width
   (too tall/oversized to scroll through) and instead lay cards out two
   at a time, stacked on top of each other, with each pair of cards
   forming one horizontally swipeable "page" — same interaction as the
   Trustpilot reviews widget. Swiping right reveals the next two. */
@media (max-width: 782px) {
	.latest-comments-wrapper {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 84%;
		gap: var(--space-3);
		align-items: start;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-2);
		/* Hide the scrollbar visually while keeping it usable/scrollable. */
		scrollbar-width: none;
	}

	.latest-comments-wrapper::-webkit-scrollbar {
		display: none;
	}

	.latest-comments-wrapper .comment-item {
		scroll-snap-align: start;
		font-size: 0.8125rem;
		padding: var(--space-3) var(--space-4);
		/* No fixed/max height here — the business logo + name
		   (.post-thumbnail) sits at the bottom of this card and was
		   getting clipped by overflow:hidden once a max-height forced
		   the card shorter than its actual content. Letting it size to
		   its content (height still kept in check via the shorter
		   line-clamp below) keeps the logo/name always visible. */
	}

	.latest-comments-wrapper .comment-text {
		-webkit-line-clamp: 2;
		font-size: 0.8125rem;
	}

	.latest-comments-wrapper .post-thumbnail {
		padding-top: var(--space-2);
		margin-top: var(--space-2) !important;
	}

	.latest-comments-wrapper .dg-recommend-row {
		margin-top: var(--space-1);
	}
}

@media (max-width: 380px) {
	.latest-comments-wrapper {
		grid-auto-columns: 88%;
	}

	.latest-comments-wrapper .comment-item {
		font-size: 0.75rem;
		padding: var(--space-3);
	}
}