/*
Theme Name: Trend Sliding Doors
Theme URI: https://example.com
Author: Trend Sliding Doors
Description: Modern block theme for Trend Sliding Doors — a home improvement content site covering sliding doors, window treatments, and room dividers. Built for readability and ad viewability.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trend-sliding-doors
*/

/* ---------------------------------------------------------------
   Legacy content compatibility
   Existing post content (65+ posts, 2011-2026) is raw HTML from the
   classic editor. These are core WordPress classes emitted by the
   [caption], [gallery] shortcodes and manual image alignment — style
   them so old posts render well without touching any post content.
------------------------------------------------------------------ */

.alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
	background: var(--wp--preset--color--tertiary);
	padding: 0.6em;
	border-radius: 6px;
}

.wp-caption img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.wp-caption-text,
.wp-caption .wp-caption-text {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
	padding: 0.5em 0.2em 0.2em;
	text-align: center;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 1.5em 0;
	list-style: none;
	padding: 0;
}

.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.gallery-caption {
	font-size: 0.8rem;
	opacity: 0.75;
	margin-top: 0.3em;
}

.size-full,
.wp-post-image {
	max-width: 100%;
	height: auto;
}

.entry-content img {
	border-radius: 6px;
}

/* Chrome (and others) apply their own default :visited color when no
   explicit rule exists — without this, previously-clicked post titles
   render in the browser's muted default instead of the theme's rust. */
a:visited {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
   Ad-optimized layout
   The site's sole revenue is display advertising, so the sidebar is
   built as dedicated, sticky ad real estate on desktop and collapses
   below content on mobile. Ad slots are plain placeholders — paste
   real ad unit code into these blocks via the Site Editor once an
   AdSense account is connected.
------------------------------------------------------------------ */

.content-with-sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50, 2rem);
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* wp:template-part wraps its output in a .wp-block-template-part div, so
   that wrapper — not .content-sidebar itself — is the actual flex item. */
.content-with-sidebar > .content-main {
	flex: 1 1 600px;
	min-width: 0;
}

.content-with-sidebar > .wp-block-template-part {
	flex: 0 1 320px;
	width: 320px;
	min-width: 0;
}

@media (min-width: 782px) {
	.content-with-sidebar > .wp-block-template-part {
		position: sticky;
		top: 1.5rem;
	}
}

@media (max-width: 781px) {
	.content-with-sidebar > .wp-block-template-part {
		flex-basis: 100%;
		width: 100%;
	}
	.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--tertiary);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	opacity: 0.6;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: 90px;
	margin: 1.5rem 0;
}

.ad-slot--leaderboard {
	min-height: 90px;
	max-width: 1200px;
	margin: 0 auto 1.5rem;
}

.ad-slot--sidebar {
	min-height: 250px;
}

.ad-slot--in-content {
	min-height: 100px;
}

.ad-slot--native {
	min-height: 70px;
	grid-column: 1 / -1;
}

.ad-slot-live {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

/* Featured-categories grid (wp:categories block restyled as cards) */
.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.category-grid li {
	margin: 0;
	background: var(--wp--preset--color--tertiary);
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

.category-grid a {
	font-weight: 600;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Post card rows (index/archive/search listings)
   The .wp-post-image legacy-compat rule above sets height:auto,
   which was overriding these thumbnails and letting each one render
   at its own natural aspect ratio — hence the uneven row heights and
   titles that didn't line up. Force a fixed, cropped box instead, and
   top-align the row (WP's flex layout defaults to center).
------------------------------------------------------------------ */

.post-card-row {
	align-items: flex-start;
}

.post-card-row .wp-block-post-featured-image {
	width: 220px;
	height: 160px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 6px;
}

.post-card-row .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card-row > .wp-block-group {
	min-width: 0;
}

.post-card-row .wp-block-post-title {
	margin: 0 0 0.35rem;
	line-height: 1.25;
}

.post-card-row .wp-block-post-date {
	display: block;
	margin: 0 0 0.6rem;
	opacity: 0.7;
}

.post-card-row .wp-block-post-excerpt {
	max-width: 62ch;
}

/* Grid post cards (homepage grid, related-posts grid) — same title-vs-body
   hierarchy and vertical-rhythm fix as .post-card-row, adapted for a
   stacked card instead of an image+text row. */
.post-grid-card .wp-block-post-featured-image {
	margin-bottom: 0.75rem;
	border-radius: 6px;
	overflow: hidden;
}

.post-grid-card .wp-block-post-title {
	margin: 0 0 0.4rem;
	line-height: 1.25;
}

.post-grid-card .wp-block-post-excerpt {
	margin: 0;
}

.tsd-rating-badge {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.popular-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.popular-posts-list li {
	margin: 0 0 0.6em;
}