/* ===== Elementor / WordPress integration overrides =====
 * - Reset Elementor default container max-width to our token
 * - Hide Hello Elementor default header/footer (we use Theme Builder)
 * - WooCommerce single-product heading color (legacy override)
 */

/* Use design tokens for Elementor's "Site" CSS variables (Elementor 3.5+) */
.elementor-kit-tongyii {
	--e-global-color-primary:   #7A4B37;
	--e-global-color-secondary: #8B4A32;
	--e-global-color-text:      #4B5563;
	--e-global-color-accent:    #5E6B55;
	--e-global-typography-primary-font-family: "Fredoka";
	--e-global-typography-secondary-font-family: "Fredoka";
	--e-global-typography-text-font-family: "DM Sans";
	--e-global-typography-accent-font-family: "Fredoka";
}

/* Plan C: child theme provides header.php / footer.php, so Hello Elementor's
 * own header/footer never render. The earlier `.site-header { display:none }`
 * rule (intended for the Theme Builder path) is removed — it would hide our
 * own PHP header. */

/* Hello Elementor's theme.css limits .site-header / .site-footer to
 * max-width: 1140px on desktop (the rule targets `:not(.dynamic-header)`,
 * which Elementor Pro adds when Theme Builder owns the header). Plan C uses
 * a PHP header instead, so we never get .dynamic-header → we stay capped.
 * The selectors below mirror the parent's :not() specificity, then push
 * !important to win. */
.topbar,
.site-header:not(.dynamic-header),
.site-footer:not(.dynamic-footer) {
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box;
}

/* Also reset any padding Hello Elementor adds to the .site-main wrapper
 * for our Elementor pages — Elementor sections handle their own layout. */
body.elementor-page .site-main,
body.elementor-page main#main {
	padding: 0;
	max-width: none;
}

/* Inline SVGs in topbar (address pin, mail icon, etc.) lack width/height
 * attributes — browsers fall back to ~300x150, which blows up the topbar.
 * Constrain them. .topbar-social svg already has its own rule. */
.topbar-right svg,
.topbar-left span.hours svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* wp_nav_menu() wraps each menu item in <li> — the preview HTML was flat
 * <a> tags, so the design has no styling for <li>. Reset bullets and
 * inline the list items so .main-nav's flex layout still works. */
.main-nav,
.main-nav ul,
.main-nav li,
.site-footer ul.footer-list,
.site-footer .footer-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav li {
	display: inline-flex;
	align-items: center;
}

/* Active page highlight — wp_nav_menu() puts current-* classes on the <li>,
 * but the design only styled .is-active on <a>. Map WP's classes to the same
 * visual treatment so the nav shows which page you're on. */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_parent > a,
.main-nav .current_page_ancestor > a {
	color: #fff;
	background: rgba(255,255,255,.16);
}
.site-footer .footer-list li {
	margin-bottom: .35rem;
}

/* ===== Single product detail page (single-product_item.php) ===== */
.product-single {
	padding: var(--space-9, 60px) 0;
	background: var(--bg-soft, #F2EEE9);
}
.product-single .crumbs {
	font-size: var(--fs-sm, .9rem);
	color: var(--text-muted, #6B6660);
	margin-bottom: var(--space-6, 24px);
}
.product-single .crumbs a { color: inherit; text-decoration: none; }
.product-single .crumbs a:hover { color: var(--brand-primary, #7A4B37); }
.product-single .crumbs .sep { margin: 0 .4em; opacity: .5; }

.product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-8, 40px);
	align-items: start;
	background: #fff;
	border-radius: 12px;
	padding: var(--space-7, 32px);
	box-shadow: 0 2px 14px rgba(0,0,0,.04);
}
.product-hero__media {
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-hero__img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}
.product-hero__placeholder {
	width: 100%;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F0EDE8;
	color: #9C9893;
	border-radius: 8px;
	font-style: italic;
}
.product-hero__title {
	margin: 0 0 var(--space-4, 14px);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--text-dark, #333);
	line-height: 1.15;
}
.product-hero__lead {
	color: var(--text-muted, #4B5563);
	margin: 0 0 var(--space-6, 24px);
	line-height: 1.7;
}

.product-specs {
	margin: 0 0 var(--space-7, 32px);
	border-top: 1px solid #E5E0DA;
}
.product-specs__row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--space-4, 14px);
	padding: 12px 0;
	border-bottom: 1px solid #E5E0DA;
}
.product-specs__row dt {
	font-weight: 600;
	color: var(--text-dark, #333);
}
.product-specs__row dd {
	margin: 0;
	color: var(--text-muted, #4B5563);
}

.product-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4, 14px);
}
.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 12px 22px;
	border: 1.5px solid var(--brand-primary, #7A4B37);
	color: var(--brand-primary, #7A4B37);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: background var(--dur, .2s) var(--ease, ease), color var(--dur, .2s) var(--ease, ease);
}
.btn-ghost:hover {
	background: var(--brand-primary, #7A4B37);
	color: #fff;
}

.product-content {
	max-width: 820px;
	margin: var(--space-8, 40px) auto 0;
	padding: var(--space-7, 32px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 14px rgba(0,0,0,.04);
	line-height: 1.75;
}
.product-content h2,
.product-content h3 {
	color: var(--text-dark, #333);
	margin-top: 1.6em;
}

@media (max-width: 768px) {
	.product-hero {
		grid-template-columns: 1fr;
		padding: var(--space-5, 18px);
	}
	.product-specs__row {
		grid-template-columns: 110px 1fr;
	}
}

/* Make the topbar background match the main nav (user preference). */
.topbar { background: var(--nav-bg); }

/* ===== Product category cards: split link (detail page) + inquiry icon ===== */
/* Card is now a <div> container; .cat-card__main is the detail-page link,
 * .cat-card__inquiry is a floating button to the contact form with a
 * ?product= param so the admin knows which product the lead is about. */
.cat-card { position: relative; }
.cat-card__main {
	display: block;
	text-decoration: none;
}
.cat-card__inquiry {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--inquiry, #8B4A32);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	transition: transform var(--dur, .2s) var(--ease, ease), background var(--dur, .2s) var(--ease, ease);
}
.cat-card__inquiry:hover {
	transform: scale(1.12);
	background: var(--brand-primary, #7A4B37);
	color: #fff;
}
.cat-card__inquiry svg { width: 18px; height: 18px; }

/* Real featured images fill the thumb (the base rule scales SVG placeholders
 * to 70%, which looks wrong for photos). */
.cat-card .thumb img.wp-post-image {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}
.cat-card__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	text-align: center;
	color: #B9B3AB;
	font-family: var(--font-heading, "Fredoka", sans-serif);
	font-size: 1.1rem;
}

/* ===== Blog listing (home.php) ===== */
.blog-hero {
	background: linear-gradient(135deg, #3E3A37 0%, #5E6B55 100%);
	color: #fff;
	padding: 64px 0;
	text-align: center;
}
.blog-hero__title {
	margin: 0 0 10px;
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: #fff;
}
.blog-hero__lead {
	margin: 0 auto;
	max-width: 620px;
	color: rgba(255,255,255,.85);
	line-height: 1.7;
}
.blog-list {
	padding: 56px 0 72px;
	background: var(--bg-soft, #F2EEE9);
}
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.blog-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,.05);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #EDE9E3;
}
.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blog-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #B9B3AB;
	font-family: var(--font-heading, "Fredoka", sans-serif);
	font-size: 1.4rem;
	letter-spacing: .08em;
}
.blog-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--inquiry, #8B4A32);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 5px 10px;
	border-radius: 4px;
}
.blog-card__body {
	padding: 20px 22px 8px;
	flex: 1;
}
.blog-card__title {
	margin: 0 0 10px;
	font-size: 1.18rem;
	line-height: 1.35;
}
.blog-card__title a {
	color: var(--text-dark, #333);
	text-decoration: none;
}
.blog-card__title a:hover { color: var(--brand-primary, #7A4B37); }
.blog-card__excerpt {
	margin: 0;
	color: var(--text-muted, #6B6660);
	line-height: 1.65;
	font-size: .95rem;
}
.blog-card__meta {
	padding: 14px 22px 20px;
	color: #9C968F;
	font-size: .85rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.blog-pagination {
	margin-top: 44px;
	text-align: center;
}
.blog-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 3px;
	border-radius: 6px;
	background: #fff;
	color: var(--text-dark, #333);
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
	background: var(--brand-primary, #7A4B37);
	color: #fff;
}
.blog-empty {
	text-align: center;
	color: var(--text-muted, #6B6660);
	padding: 60px 0;
}

/* ===== Blog single (single.php) ===== */
.blog-single__hero {
	background: linear-gradient(135deg, #3E3A37 0%, #5E6B55 100%);
	color: #fff;
	padding: 72px 0 56px;
	background-size: cover;
	background-position: center;
}
.blog-single__hero .crumbs {
	font-size: .85rem;
	color: rgba(255,255,255,.8);
	margin-bottom: 20px;
}
.blog-single__hero .crumbs a { color: inherit; text-decoration: none; }
.blog-single__hero .crumbs a:hover { color: #fff; text-decoration: underline; }
.blog-single__hero .crumbs .sep { margin: 0 .4em; opacity: .6; }
.blog-single__cat {
	display: inline-block;
	background: var(--inquiry, #8B4A32);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 5px 12px;
	border-radius: 4px;
	margin-bottom: 14px;
}
.blog-single__title {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	line-height: 1.2;
	max-width: 900px;
}
.blog-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.85);
	font-size: .9rem;
}
.blog-single__meta .sep { opacity: .6; }

.blog-single__body {
	background: var(--bg-soft, #F2EEE9);
	padding: 56px 0 72px;
}
.blog-single__body .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}
.blog-single__content {
	background: #fff;
	border-radius: 12px;
	padding: 40px 46px;
	box-shadow: 0 2px 14px rgba(0,0,0,.04);
	line-height: 1.8;
	color: #3A3733;
}
.blog-single__content h2 { font-size: 1.7rem; margin: 1.6em 0 .6em; color: var(--text-dark, #333); }
.blog-single__content h3 { font-size: 1.35rem; margin: 1.4em 0 .5em; color: var(--text-dark, #333); }
.blog-single__content p { margin: 0 0 1.2em; }
.blog-single__content img { max-width: 100%; height: auto; border-radius: 8px; }
.blog-single__content a { color: var(--brand-primary, #7A4B37); }
.blog-single__content ul,
.blog-single__content ol { margin: 0 0 1.2em 1.4em; }
.blog-single__content blockquote {
	border-left: 4px solid var(--brand-primary, #7A4B37);
	margin: 1.5em 0;
	padding: .5em 1.2em;
	background: #FAF7F3;
	color: #5A554F;
}
.blog-single__tags { margin-top: 28px; }
.blog-single__tags a {
	display: inline-block;
	background: #EDE9E3;
	color: #6B6660;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: .82rem;
	margin: 0 6px 6px 0;
	text-decoration: none;
}

.blog-single__cta {
	position: sticky;
	top: 100px;
	background: #fff;
	border-radius: 12px;
	padding: 28px 26px;
	box-shadow: 0 2px 14px rgba(0,0,0,.04);
	text-align: center;
}
.blog-single__cta h3 { margin: 0 0 10px; color: var(--text-dark, #333); }
.blog-single__cta p { color: var(--text-muted, #6B6660); line-height: 1.6; margin: 0 0 18px; font-size: .92rem; }

.blog-related {
	background: #fff;
	padding: 56px 0 72px;
}
.blog-related__heading {
	text-align: center;
	margin: 0 0 36px;
	font-size: 1.8rem;
	color: var(--text-dark, #333);
}

@media (max-width: 1024px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
	.blog-single__body .container { grid-template-columns: 1fr; }
	.blog-single__cta { position: static; }
}
@media (max-width: 640px) {
	.blog-grid { grid-template-columns: 1fr; }
	.blog-single__content { padding: 26px 22px; }
}

/* When Elementor's container kicks in, let our .container utility still center */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--container-max);
}

/* Match Phase 1 product card pill button when used inside Elementor */
.elementor-widget.cat-card-widget .cat-card .label {
	background: var(--brand-primary);
}

/* WooCommerce single product heading (in case Woo is also active) */
.single-product .product_title,
.single-product .elementor-location-single .product_title,
.single-product .elementor-location-single .elementor-heading-title {
	color: var(--text-dark) !important;
}

/* Hide Elementor default page title when Theme Builder Single covers it */
.elementor-page .entry-header { display: none; }

/* Make Elementor form fields match Phase 1 form style */
.elementor-form .elementor-field-type-text input,
.elementor-form .elementor-field-type-email input,
.elementor-form .elementor-field-type-tel input,
.elementor-form .elementor-field-type-textarea textarea,
.elementor-form .elementor-field-type-select select {
	background: #F7F7F7 !important;
	border: 1px solid #DDD !important;
	color: #222 !important;
	border-radius: 6px !important;
}
.elementor-form .elementor-button {
	background-color: var(--inquiry) !important;
	border-radius: 6px !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
}
.elementor-form .elementor-button:hover {
	background-color: var(--inquiry-d) !important;
}