/*
Theme Name: Hello Elementor Child
Theme URI: https://myhomemag.com/
Description: Child theme of Hello Elementor. Adds a right sidebar (Latest Articles, Related Articles, Subscribe) on single posts and category archives.
Author: MyHomeMag
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hello-elementor-child
*/

/* =========================================================
   MyHomeMag right-sidebar layout
   Desktop: content left (~2/3), sidebar right (~1/3).
   Mobile: single column, sidebar stacks below the content.
   ========================================================= */

.mhm-layout {
	display: block;
}

.mhm-main {
	min-width: 0;
}

.mhm-sidebar {
	margin-top: 2.5rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
}

/* Sidebar spacing: 32px between sections. */
.mhm-sidebar .mhm-widget { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(15, 42, 68, 0.15); }
.mhm-sidebar .mhm-widget:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.mhm-sidebar .mhm-widget-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: inherit;
}

.mhm-sidebar ul {
	list-style: disc;
	margin: 0 0 0 1.1em;
	padding: 0;
}

.mhm-sidebar ul li {
	margin-bottom: 8px;
}

.mhm-sidebar .mhm-subscribe-form input[type="email"],
.mhm-sidebar .mhm-subscribe-form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}

/* Two columns on desktop. */
@media (min-width: 901px) {
	.mhm-layout {
		display: flex;
		align-items: flex-start;
		gap: 2.5rem;
	}

	.mhm-main {
		flex: 1 1 0;
		min-width: 0;
	}

	.mhm-sidebar {
		flex: 0 0 31%;
		max-width: 340px;
		margin-top: 0;
	}
}

/* Category archives: neutralize the old two-column grid that was applied
   to <main> via Additional CSS, and keep the two-column article list
   inside the content column instead. */
@media (min-width: 769px) {
	body.archive.category main#content.mhm-has-sidebar {
		display: block;
	}

	body.archive.category main#content.mhm-has-sidebar .mhm-main > .page-content {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
		align-items: start;
	}

	body.archive.category main#content.mhm-has-sidebar .mhm-main > .page-content > article {
		min-width: 0;
	}
}

/* =========================================================
STEP 5 (2026-10-29, approved by Fatemeh): single article template extras.
Breadcrumbs + category label above the H1, team byline with publication
and updated dates below the H1, and a same-category Related Reading
section at the end of the article body. Article body, sidebar, TOC and
comments are untouched.
========================================================= */
.mhm-breadcrumbs {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 0.35rem;
}
.mhm-breadcrumbs a {
  color: #64748b;
  text-decoration: none;
}
.mhm-breadcrumbs a:hover,
.mhm-breadcrumbs a:focus {
  text-decoration: underline;
}
.mhm-breadcrumb-current {
  color: #334155;
}
.mhm-breadcrumb-sep {
  margin: 0 0.45em;
}
.mhm-cat-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.mhm-cat-label a {
  color: #c2185b;
  text-decoration: none;
}
.mhm-cat-label a:hover,
.mhm-cat-label a:focus {
  text-decoration: underline;
}
.mhm-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: #475569;
}
.mhm-entry-meta a {
  color: #c2185b;
  text-decoration: none;
}
.mhm-entry-meta a:hover,
.mhm-entry-meta a:focus {
  text-decoration: underline;
}
.mhm-meta-sep {
  color: #94a3b8;
}
.mhm-related {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e2e8f0;
}
.mhm-related-title {
  font-size: 1.35rem;
  margin: 0 0 1.1rem;
}
.mhm-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 600px) {
  .mhm-related-grid {
    grid-template-columns: 1fr;
  }
}
.mhm-related-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mhm-related-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.mhm-related-cat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.mhm-related-cat a {
  color: #c2185b;
  text-decoration: none;
}
.mhm-related-cat a:hover,
.mhm-related-cat a:focus {
  text-decoration: underline;
}
.mhm-related-card-title {
  font-size: 1.02rem;
  line-height: 1.4;
  margin: 0;
}
.mhm-related-card-title a {
  color: inherit;
  text-decoration: none;
}
.mhm-related-card-title a:hover,
.mhm-related-card-title a:focus {
  text-decoration: underline;
}
.mhm-related-more {
  margin: 1.25rem 0 0;
}
.mhm-related-more a {
  color: #c2185b;
  font-weight: 700;
  text-decoration: none;
}
.mhm-related-more a:hover,
.mhm-related-more a:focus {
  text-decoration: underline;
}
/* =========================================================
   P9-C (2026-10-31): Accessibility fixes.
   1) Easy TOC: larger touch targets, especially nested links.
   2) Contrast: darken failing amber/gray text (homepage + contact).
   3) Links: underline privacy-notice links (not color alone).
   Brand colors #0F2A44 / #E9A23B unchanged elsewhere.
   ========================================================= */

/* --- 1) Easy Table of Contents: larger, better-spaced touch targets --- */
#ez-toc-container ul.ez-toc-list a.ez-toc-link {
  display: block;
  font-size: 1rem;
  line-height: 1.55;
  padding: 0.65rem 0.5rem;
  margin: 0.15rem 0;
}
#ez-toc-container ul.ez-toc-list ul a.ez-toc-link {
  font-size: 0.95rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* --- 2) Contrast fixes --- */
/* Homepage: failing Elementor global gray #7A7A7A (~4.3:1) -> #595959 (~7.0:1 on white) */
body.home {
  --e-global-color-text: #595959;
}
/* Homepage eyebrow "BUILD IT RIGHT. FIX IT RIGHT.": #E9A23B (~2.2:1) -> #8C5A1A (~5.9:1) */
body.home .elementor-24589 .elementor-element.elementor-element-f0118fb .elementor-heading-title {
  color: #8C5A1A;
}
/* Homepage amber inline category links: #E9A23B -> #8C5A1A (override inline style) */
body.home .elementor-24589 a[style*="#E9A23B" i] {
  color: #8C5A1A !important;
}
/* Contact page (page-id-23139): failing gray text/labels -> #595959 (~7.0:1 on white) */
body.page-id-23139 {
  --e-global-color-text: #595959;
}
body.page-id-23139 .wpcf7-form label {
  color: #595959;
}

/* --- 3) Links must not rely on color alone: underline privacy-notice links --- */
.privacy-notice a {
  text-decoration: underline;
}

/* =========================================================
 * Week 1 pilot (2026-11-06): Fence Installation Cost
 * article only (post 24771). These classes are used only
 * in that article's content, so no other article is affected.
 * ========================================================= */
.mhm-subtitle {
	font-size: 1.15rem;
	line-height: 1.5;
	color: #475569;
	margin: 0 0 1.25rem;
}
.mhm-quick-answer {
	background: #f1f5f9;
	border-left: 4px solid #0e7490;
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
}
.mhm-quick-answer p {
	margin: 0;
}
.mhm-cost-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 0 0 1.5rem;
}
.mhm-cost-card {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	background: #fff;
}
.mhm-cost-card-tier {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0e7490;
	margin: 0 0 0.25rem;
}
.mhm-cost-card-material {
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.mhm-cost-card-price {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.mhm-cost-card-note {
	margin: 0;
	color: #475569;
}
@media (max-width: 640px) {
	.mhm-cost-cards {
		grid-template-columns: 1fr;
	}
}