/**
 * IdealFoundations — Insight (blog) listing + single article styles.
 * Extracted from the approved designs (blog (3).html + signs-of-problem-soil (2).html).
 *
 * ALL rules are scoped under `.ifi` so they never leak into the rest of the
 * site. The site-wide header/footer ("chrome") are unchanged and styled by
 * if-home/if-chrome.css.
 *
 * Note: content block widths are intentionally WIDER than the sample design
 * (which used 760px) — the client asked for the roomier width of the old
 * layout.
 */

.ifi {
	--orange: #FF6600;
	--orange-dark: #cc5200;
	--black: #242424;
	--gray: #939598;
	--gray-light: #F5F5F5;
	--radius: 4px;
	--transition: 0.22s ease;
	font-family: 'Barlow', 'Inter', sans-serif;
	color: #242424;
	background: #fff;
}

.ifi *,
.ifi *::before,
.ifi *::after { box-sizing: border-box; }

.ifi img { max-width: 100%; display: block; }
.ifi a { text-decoration: none; color: inherit; }
.ifi ul { list-style: none; margin: 0; padding: 0; }

/* Shared button (matches chrome .btn look) */
.ifi .btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 24px; border-radius: var(--radius);
	font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
	font-size: 1rem; letter-spacing: 1px; text-transform: uppercase;
	cursor: pointer; border: none;
	transition: background var(--transition), transform var(--transition);
}
.ifi .btn-primary { background: var(--orange); color: #fff; }
.ifi .btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }

/* =====================================================================
   LISTING — blog hero
   ===================================================================== */
.ifi .blog-hero { background: var(--black); padding: 52px 4% 36px; }
.ifi .blog-hero-inner { max-width: 1240px; margin: 0 auto; }
.ifi .blog-eyebrow { color: var(--orange); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.ifi .blog-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2.7rem; line-height: 1.1; color: #fff; max-width: 760px; margin: 0; }
.ifi .blog-hero h1 em { color: var(--orange); font-style: normal; }
.ifi .blog-hero p { color: rgba(255, 255, 255, 0.55); font-size: 1.02rem; margin-top: 14px; max-width: 600px; line-height: 1.6; }

.ifi .blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ifi .blog-filter { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--transition), color var(--transition); }
.ifi .blog-filter:hover { color: #fff; }
.ifi .blog-filter.active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* =====================================================================
   LISTING — grid + cards
   ===================================================================== */
.ifi .blog-section { padding: 44px 4% 80px; max-width: 1240px; margin: 0 auto; }

.ifi .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
@media (max-width: 900px) { .ifi .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ifi .blog-grid { grid-template-columns: 1fr; } }

.ifi .article-card { border: 1px solid #ececec; border-radius: 8px; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); display: flex; flex-direction: column; background: #fff; }
.ifi .article-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); transform: translateY(-3px); }
.ifi .article-card-cover { aspect-ratio: 16/10; background: var(--black); position: relative; overflow: hidden; }
.ifi .article-card-cover svg,
.ifi .article-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.ifi .article-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ifi .article-tag { display: inline-block; align-self: flex-start; background: rgba(255, 102, 0, 0.1); color: var(--orange-dark); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; margin-bottom: 12px; }
.ifi .article-card-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--black); margin-bottom: 10px; margin-top: 0; }
.ifi .article-card-excerpt { color: #666; font-size: 0.88rem; line-height: 1.6; flex: 1; margin: 0; }
.ifi .article-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; font-size: 0.75rem; color: #999; }
.ifi .article-card-readmore { color: var(--orange-dark); font-weight: 600; font-size: 0.85rem; }

/* Featured post — full-width */
.ifi .featured-post { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; margin-bottom: 48px; }
.ifi .featured-post-cover { aspect-ratio: 16/10; }
.ifi .featured-post-cover svg,
.ifi .featured-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.ifi .featured-label { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.ifi .featured-post-body { padding: 8px 32px 8px 0; }
.ifi .featured-badge { background: var(--black); color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
.ifi .featured-post-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.9rem; line-height: 1.15; color: var(--black); margin-bottom: 14px; margin-top: 0; }
.ifi .featured-post-excerpt { color: #666; font-size: 0.98rem; line-height: 1.65; margin-bottom: 18px; }
.ifi .featured-post-meta { color: #999; font-size: 0.82rem; margin-bottom: 20px; }
@media (max-width: 900px) { .ifi .featured-post { grid-template-columns: 1fr; } .ifi .featured-post-body { padding: 0 24px 24px; } }

/* Pagination — works for both the_posts_pagination() (nav > .nav-links)
   and the preview's paginate_links() (nav > a.page-numbers directly). */
.ifi .blog-pagination { margin-top: 48px; }
.ifi .blog-pagination,
.ifi .blog-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.ifi .blog-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ifi .blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 15px; border-radius: 6px; border: 1px solid #e2e2e2; color: #555; background: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.4px; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.ifi .blog-pagination a.page-numbers:hover { border-color: var(--orange); color: var(--orange-dark); }
.ifi .blog-pagination .page-numbers.current { background: var(--orange); border-color: var(--orange); color: #fff; }
.ifi .blog-pagination .page-numbers.dots { border-color: transparent; background: transparent; min-width: 24px; padding: 0 4px; }
.ifi .blog-pagination .page-numbers.prev,
.ifi .blog-pagination .page-numbers.next { padding: 0 18px; }
@media (max-width: 480px) {
	.ifi .blog-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; font-size: 0.88rem; }
	.ifi .blog-pagination .page-numbers.prev,
	.ifi .blog-pagination .page-numbers.next { padding: 0 13px; }
}

/* Bottom CTA band */
.ifi .blog-cta { background: var(--black); padding: 48px 4%; text-align: center; }
.ifi .blog-cta-eyebrow { color: var(--orange); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.ifi .blog-cta h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.9rem; color: #fff; margin-bottom: 12px; margin-top: 0; }
.ifi .blog-cta p { color: rgba(255, 255, 255, 0.55); max-width: 520px; margin: 0 auto 22px; }
.ifi .blog-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ifi .blog-cta-phone { color: #fff; font-weight: 600; font-size: 1rem; }

/* No results */
.ifi .blog-empty { text-align: center; color: #666; padding: 40px 0; font-size: 1rem; }

/* =====================================================================
   SINGLE — page hero (breadcrumb + tag + title)
   Namespaced .ifi-page-hero to avoid clashing with the theme's own
   .page-hero (parts/page-hero.php).
   ===================================================================== */
.ifi .ifi-page-hero { background: var(--black); padding: 48px 5% 40px; }
.ifi .ifi-page-hero-inner { max-width: 1000px; margin: 0 auto; }
.ifi .page-breadcrumb { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin-bottom: 16px; }
.ifi .page-breadcrumb a { color: rgba(255, 255, 255, 0.7); }
.ifi .page-breadcrumb a:hover { color: var(--orange); }
.ifi .page-hero-tag { display: inline-block; background: rgba(255, 102, 0, 0.15); color: var(--orange); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.8px; text-transform: uppercase; padding: 5px 12px; border-radius: 3px; margin-bottom: 16px; }
.ifi .ifi-page-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1.12; color: #fff; margin: 0; max-width: 900px; }

/* =====================================================================
   SINGLE — article body (WIDER than the 760px sample, per client)
   ===================================================================== */
.ifi .article-wrap { max-width: 1000px; margin: 0 auto; padding: 40px 5% 20px; }
.ifi .article-meta-row { display: flex; align-items: center; gap: 12px; color: #888; font-size: 0.85rem; margin-bottom: 8px; }
.ifi .article-meta-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.ifi .article-meta-text { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ifi .article-meta-text strong { color: var(--black); font-weight: 600; }

.ifi .article-cover { max-width: 1000px; margin: 0 auto; padding: 0 5% 40px; }
.ifi .article-cover svg { width: 100%; height: 100%; }
.ifi .article-cover img { width: 100%; height: auto; border-radius: 8px; }

.ifi .article-body { max-width: 1000px; margin: 0 auto; padding: 0 5% 60px; font-size: 1.05rem; line-height: 1.8; color: #333; }
.ifi .article-body h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--black); margin: 40px 0 16px; }
.ifi .article-body h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--black); margin: 28px 0 12px; }
.ifi .article-body p { margin-bottom: 20px; }
/* Links inside post content: the global .ifi a reset strips colour and
   underline, so restore a clear link style here. Exclude .btn buttons so the
   CTA button keeps its white text on the orange background. */
.ifi .article-body a:not(.btn) { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); }
.ifi .article-body a:not(.btn):hover { color: var(--orange); }
.ifi .article-body a.btn { text-decoration: none; }
.ifi .article-body a.btn-primary { color: #fff; }
/* Restore normal list bullets/numbers inside post content (the global
   theme reset and .ifi ul{list-style:none} strip them otherwise). */
.ifi .article-body ul,
.ifi .article-body ol { margin: 0 0 20px 22px; padding-left: 18px; }
.ifi .article-body ul { list-style: disc; }
.ifi .article-body ol { list-style: decimal; }
.ifi .article-body ul ul { list-style: circle; }
.ifi .article-body ul ul ul { list-style: square; }
.ifi .article-body li { margin-bottom: 10px; display: list-item; list-style: inherit; }
.ifi .article-body img { border-radius: 8px; margin: 20px 0; }
.ifi .article-body blockquote { border-left: 3px solid var(--orange); padding: 6px 0 6px 22px; margin: 32px 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem; color: var(--black); font-weight: 600; line-height: 1.4; }
.ifi .article-body strong { color: var(--black); }

.ifi .article-cta-band { background: var(--gray-light); border-radius: 8px; padding: 32px; text-align: center; margin: 44px 0 12px; }
.ifi .article-cta-band h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.4rem; margin-bottom: 8px; margin-top: 0; }
.ifi .article-cta-band p { color: #666; margin-bottom: 18px; font-size: 0.95rem; }

/* Share row */
.ifi .article-share { display: flex; align-items: center; gap: 14px; max-width: 1000px; margin: 0 auto; padding: 0 5% 8px; }
.ifi .article-share-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: #999; }
.ifi .article-share a,
.ifi .article-share button { width: 36px; height: 36px; border-radius: 50%; background: var(--gray-light); color: #555; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: background var(--transition), color var(--transition); }
.ifi .article-share a:hover,
.ifi .article-share button:hover { background: var(--orange); color: #fff; }
.ifi .article-share svg { width: 16px; height: 16px; fill: currentColor; }
.ifi .article-share-copied { font-size: 0.78rem; color: var(--orange-dark); font-weight: 600; opacity: 0; transition: opacity var(--transition); }
.ifi .article-share-copied.show { opacity: 1; }

/* Prev / next nav */
.ifi .article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto 8px; padding: 24px 5% 0; }
.ifi .article-nav-link { border: 1px solid #eee; border-radius: 8px; padding: 16px 18px; transition: border-color var(--transition), box-shadow var(--transition); }
.ifi .article-nav-link:hover { border-color: var(--orange); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
.ifi .article-nav-dir { color: #999; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px; }
.ifi .article-nav-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; color: var(--black); line-height: 1.3; }
.ifi .article-nav-link.next { text-align: right; }
@media (max-width: 640px) { .ifi .article-nav { grid-template-columns: 1fr; } .ifi .article-nav-link.next { text-align: left; } }

/* Related posts */
.ifi .related-section { background: var(--gray-light); padding: 56px 5%; margin-top: 40px; }
.ifi .related-inner { max-width: 1200px; margin: 0 auto; }
.ifi .related-inner > h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: 28px; text-transform: uppercase; letter-spacing: 0.5px; }
.ifi .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .ifi .related-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   OVERFLOW GUARDS — keep article content inside the viewport on mobile.
   Some content (image captions with inline pixel widths, the ez-toc
   "Outlines" box, embeds, tables) can otherwise overflow horizontally.
   ===================================================================== */

/* Never let the article body itself cause horizontal scroll. */
.ifi .article-body { overflow-wrap: break-word; word-wrap: break-word; }

/* Images + captions: ignore any hardcoded pixel width, fit the column. */
.ifi .article-body img,
.ifi .article-cover img {
	max-width: 100% !important;
	height: auto !important;
}
.ifi .article-body .wp-caption,
.ifi .article-body figure,
.ifi .article-body [id^="attachment_"] {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	margin-left: 0;
	margin-right: 0;
}
.ifi .article-body .wp-caption-text,
.ifi .article-body figcaption {
	font-size: 0.85rem;
	color: #777;
	padding: 8px 2px 0;
	line-height: 1.5;
}

/* ez-toc "Outlines" table-of-contents box. */
.ifi .article-body #ez-toc-container,
.ifi .article-body .ez-toc-container {
	max-width: 100% !important;
	width: auto !important;
	box-sizing: border-box;
}
.ifi .article-body #ez-toc-container ul,
.ifi .article-body #ez-toc-container nav {
	max-width: 100%;
}
/* Keep the ez-toc "Outlines" list clean (no bullets), even though we
   restored bullets for normal content lists above. */
.ifi .article-body #ez-toc-container ul,
.ifi .article-body #ez-toc-container ol,
.ifi .article-body #ez-toc-container li {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
}
.ifi .article-body #ez-toc-container a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Embeds (videos/maps) scale to the column width. */
.ifi .article-body iframe,
.ifi .article-body embed,
.ifi .article-body object,
.ifi .article-body video {
	max-width: 100%;
}

/* Wide tables get their own horizontal scroll instead of breaking layout. */
.ifi .article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}