/*
Theme Name: Astra Child - Houston Plumbing Solutions
Theme URI: https://houstonplumbingsolutions.com/
Description: Child theme for Houston Plumbing Solutions. Adds editorial blog archive and single post templates built on the site's existing design tokens. Everything else is inherited from Astra.
Author: Houston Plumbing Solutions
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Design tokens are injected as :root by functions.php, read from the Elementor
   global variables so the blog stays tied to the same source of truth. */

/* ---------- shared ---------- */
.hps-shell {
	width: 100%;
	max-width: var(--shell-max, 1180px);
	margin-inline: auto;
	padding-inline: var(--space-5, 22px);
}
.hps-section { padding-block: var(--space-8, 48px); }
.hps-section--tint {
	background: var(--color-tint, #F4F7FB);
	border-top: 1px solid var(--color-line-soft, #E4EBF3);
}
.hps-eyebrow {
	display: inline-block;
	font-family: var(--font-head, Archivo), sans-serif;
	font-size: var(--text-xs, 12px);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-rust, #C1441E);
	margin: 0;
}
.hps-eyebrow--sky { color: var(--color-sky, #6FA3D8); }
.hps-meta {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-sm, 14px);
	color: var(--color-muted, #5A6B84);
	margin: 0;
}

/* a quiet pipe-run motif: hairline with a short rust segment */
.hps-rule {
	height: 2px;
	background: var(--color-line, #DCE3EC);
	position: relative;
	margin-block: var(--space-6, 28px);
}
.hps-rule::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 56px;
	background: var(--color-rust, #C1441E);
}

/* ---------- breadcrumbs ---------- */
.hps-crumbs {
	background: var(--color-tint, #F4F7FB);
	border-bottom: 1px solid var(--color-line-soft, #E4EBF3);
}
.hps-crumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2, 8px);
	padding-block: var(--space-3, 12px);
	font-size: var(--text-sm, 14px);
	font-family: var(--font-body, sans-serif);
}
.hps-crumbs a { color: var(--color-navy, #14284B); text-decoration: none; }
.hps-crumbs a:hover { color: var(--color-rust, #C1441E); text-decoration: underline; }
.hps-crumbs__sep { color: var(--color-field-line, #C9D5E3); }
.hps-crumbs__current { color: var(--color-ink, #13233D); font-weight: 600; }

/* ---------- archive hero ---------- */
.hps-hero {
	background: var(--color-navy, #14284B);
	padding-block: var(--space-9, 64px);
}
.hps-hero__inner { max-width: 820px; }
.hps-hero h1 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 800;
	font-size: var(--size-display, 50px);
	line-height: var(--line-tight, 1.12);
	letter-spacing: -0.02em;
	color: var(--color-white, #fff);
	margin: var(--space-3, 12px) 0 var(--space-4, 16px);
}
.hps-hero p {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-lg, 19px);
	line-height: var(--line-body, 1.62);
	color: var(--color-pale-blue, #C8D8EC);
	margin: 0;
	max-width: var(--text-max, 70ch);
}

/* ---------- topic chips ---------- */
.hps-topics { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
.hps-chip {
	display: inline-flex;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	background: var(--color-tint, #F4F7FB);
	border: 1px solid var(--color-line, #DCE3EC);
	border-radius: var(--radius-pill, 999px);
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-md, 16px);
	font-weight: 600;
	color: var(--color-navy, #14284B);
	text-decoration: none;
}
.hps-chip:hover { background: var(--color-navy, #14284B); color: var(--color-white, #fff); }
.hps-chip[aria-current="page"] { background: var(--color-navy, #14284B); color: var(--color-white, #fff); border-color: var(--color-navy, #14284B); }

/* ---------- cards ---------- */
.hps-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white, #fff);
	border: 1px solid var(--color-line, #DCE3EC);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	text-decoration: none;
	height: 100%;
}
.hps-card:hover { box-shadow: 0 10px 28px rgba(19, 35, 61, 0.10); }
.hps-card__media {
	aspect-ratio: 16 / 9;
	background: var(--color-tint, #F4F7FB);
	overflow: hidden;
}
.hps-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hps-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
	padding: var(--space-5, 22px);
	flex: 1 1 auto;
}
.hps-card__title {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--text-lg, 19px);
	line-height: 1.25;
	color: var(--color-ink, #13233D);
	margin: 0;
}
.hps-card:hover .hps-card__title { color: var(--color-rust, #C1441E); }
.hps-card__excerpt {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-md, 16px);
	line-height: var(--line-body, 1.62);
	color: var(--color-body, #33425B);
	margin: 0;
}
.hps-card__more {
	margin-top: auto;
	padding-top: var(--space-3, 12px);
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-md, 16px);
	font-weight: 600;
	color: var(--color-navy, #14284B);
}
.hps-card:hover .hps-card__more { color: var(--color-rust, #C1441E); }

/* ---------- featured card ---------- */
.hps-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	background: var(--color-white, #fff);
	border: 1px solid var(--color-line, #DCE3EC);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	text-decoration: none;
}
.hps-featured:hover { box-shadow: 0 10px 28px rgba(19, 35, 61, 0.10); }
.hps-featured__media { aspect-ratio: 4 / 3; background: var(--color-tint, #F4F7FB); }
.hps-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hps-featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
	padding: var(--space-7, 36px);
	justify-content: center;
}
.hps-featured__title {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 800;
	font-size: var(--size-h2, 31px);
	line-height: 1.18;
	color: var(--color-ink, #13233D);
	margin: 0;
}
.hps-featured:hover .hps-featured__title { color: var(--color-rust, #C1441E); }
.hps-featured__excerpt {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-base, 17px);
	line-height: var(--line-body, 1.62);
	color: var(--color-body, #33425B);
	margin: 0;
}
.hps-featured__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: var(--space-4, 16px) var(--space-5, 22px);
	background: var(--color-rust, #C1441E);
	border: 1px solid var(--color-rust, #C1441E);
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--text-md, 16px);
	letter-spacing: 0.06em;
	color: var(--color-white, #fff);
	text-decoration: none;
	margin-top: var(--space-2, 8px);
}
.hps-featured:hover .hps-featured__cta { background: var(--color-rust-dark, #A5371A); border-color: var(--color-rust-dark, #A5371A); }

/* ---------- grid ---------- */
.hps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5, 22px);
}
.hps-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
	margin-bottom: var(--space-6, 28px);
}
.hps-section-head h2 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--size-h2, 31px);
	line-height: 1.2;
	color: var(--color-ink, #13233D);
	margin: 0;
}
.hps-section-head p {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-base, 17px);
	line-height: var(--line-body, 1.62);
	color: var(--color-muted, #5A6B84);
	margin: 0;
	max-width: var(--text-max, 70ch);
}

/* ---------- pagination ---------- */
.hps-pagination { margin-top: var(--space-8, 48px); }
.hps-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.hps-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--space-3, 12px);
	border: 1px solid var(--color-line, #DCE3EC);
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 600;
	font-size: var(--text-md, 16px);
	color: var(--color-navy, #14284B);
	text-decoration: none;
}
.hps-pagination .page-numbers:hover { border-color: var(--color-navy, #14284B); }
.hps-pagination .page-numbers.current {
	background: var(--color-navy, #14284B);
	border-color: var(--color-navy, #14284B);
	color: var(--color-white, #fff);
}
.hps-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- empty state ---------- */
.hps-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4, 16px);
	padding: var(--space-8, 48px);
	background: var(--color-white, #fff);
	border: 1px solid var(--color-line, #DCE3EC);
	border-left: var(--border-accent, 6px) solid var(--color-rust, #C1441E);
	border-radius: var(--radius-md, 12px);
}
.hps-empty h2 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--size-h3, 25px);
	color: var(--color-ink, #13233D);
	margin: 0;
}
.hps-empty p {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-base, 17px);
	line-height: var(--line-body, 1.62);
	color: var(--color-body, #33425B);
	margin: 0;
	max-width: var(--text-max, 70ch);
}

/* ---------- buttons ---------- */
.hps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4, 16px) var(--space-5, 22px);
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--text-md, 16px);
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
}
.hps-btn--primary { background: var(--color-rust, #C1441E); border-color: var(--color-rust, #C1441E); color: var(--color-white, #fff); }
.hps-btn--primary:hover { background: var(--color-rust-dark, #A5371A); border-color: var(--color-rust-dark, #A5371A); color: var(--color-white, #fff); }
.hps-btn--light { background: var(--color-white, #fff); border-color: var(--color-white, #fff); color: var(--color-navy, #14284B); }
.hps-btn--light:hover { background: var(--color-pale-blue, #C8D8EC); color: var(--color-navy, #14284B); }
.hps-btn--outline-light { background: var(--color-navy, #14284B); border: 2px solid var(--color-sky, #6FA3D8); color: var(--color-white, #fff); }
.hps-btn--outline-light:hover { background: var(--color-navy-soft, #1B3459); color: var(--color-white, #fff); }

/* ---------- single: article header ---------- */
.hps-article-head { padding-block: var(--space-8, 48px) var(--space-6, 28px); }
.hps-article-head__inner { max-width: 820px; }
.hps-article-head h1 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 800;
	font-size: var(--size-h1, 40px);
	line-height: var(--line-tight, 1.12);
	letter-spacing: -0.02em;
	color: var(--color-ink, #13233D);
	margin: var(--space-3, 12px) 0 var(--space-4, 16px);
}
.hps-article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3, 12px);
}
.hps-article-head__standfirst {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-lg, 19px);
	line-height: var(--line-body, 1.62);
	color: var(--color-muted, #5A6B84);
	margin: 0 0 var(--space-4, 16px);
	max-width: var(--text-max, 70ch);
}
.hps-article-figure {
	margin: 0 0 var(--space-8, 48px);
	border-radius: var(--radius-md, 12px);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-tint, #F4F7FB);
}
.hps-article-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- single: article body ---------- */
.hps-article { max-width: 760px; margin-inline: auto; padding-bottom: var(--space-8, 48px); }
.hps-article > * { margin-block: 0 var(--space-5, 22px); }
.hps-article p,
.hps-article li {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-base, 17px);
	line-height: var(--line-body, 1.62);
	color: var(--color-body, #33425B);
}
.hps-article h2 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--size-h2, 31px);
	line-height: 1.2;
	color: var(--color-ink, #13233D);
	margin: var(--space-8, 48px) 0 var(--space-4, 16px);
}
.hps-article h3 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--size-h3, 25px);
	line-height: 1.25;
	color: var(--color-ink, #13233D);
	margin: var(--space-7, 36px) 0 var(--space-3, 12px);
}
.hps-article h4 {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 700;
	font-size: var(--text-xl, 22px);
	color: var(--color-ink, #13233D);
	margin: var(--space-6, 28px) 0 var(--space-3, 12px);
}
.hps-article ul,
.hps-article ol { padding-left: var(--space-5, 22px); }
.hps-article ul { list-style: none; padding-left: 0; }
.hps-article ul li {
	position: relative;
	padding-left: var(--space-5, 22px);
	margin-bottom: var(--space-2, 8px);
}
.hps-article ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--color-rust, #C1441E);
}
.hps-article ol li { margin-bottom: var(--space-2, 8px); }
.hps-article a { color: var(--color-navy, #14284B); text-decoration: underline; }
.hps-article a:hover { color: var(--color-rust, #C1441E); }
.hps-article strong { color: var(--color-ink, #13233D); }
.hps-article img,
.hps-article figure img { max-width: 100%; height: auto; border-radius: var(--radius-md, 12px); display: block; }
.hps-article figure { margin-block: var(--space-6, 28px); }
.hps-article figcaption {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-sm, 14px);
	color: var(--color-muted, #5A6B84);
	margin-top: var(--space-2, 8px);
}
.hps-article blockquote {
	margin: var(--space-7, 36px) 0;
	padding: var(--space-5, 22px) var(--space-6, 28px);
	background: var(--color-rust-tint, #FDF6F3);
	border: 1px solid var(--color-rust-line, #F2DDD4);
	border-left: var(--border-accent, 6px) solid var(--color-rust, #C1441E);
	border-radius: var(--radius-md, 12px);
}
.hps-article blockquote p { margin-bottom: 0; color: var(--color-ink, #13233D); font-size: var(--text-lg, 19px); }
.hps-article blockquote p + p { margin-top: var(--space-3, 12px); }
.hps-article table { width: 100%; border-collapse: collapse; }
.hps-article th,
.hps-article td { border: 1px solid var(--color-line, #DCE3EC); padding: var(--space-3, 12px); text-align: left; font-family: var(--font-body, sans-serif); font-size: var(--text-md, 16px); }
.hps-article th { background: var(--color-tint, #F4F7FB); color: var(--color-ink, #13233D); font-family: var(--font-head, Archivo), sans-serif; }

/* ---------- single: post navigation ---------- */
.hps-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 16px); }
.hps-postnav__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 8px);
	padding: var(--space-5, 22px);
	border: 1px solid var(--color-line, #DCE3EC);
	border-radius: var(--radius-md, 12px);
	text-decoration: none;
	background: var(--color-white, #fff);
}
.hps-postnav__item:hover { border-color: var(--color-rust, #C1441E); }
.hps-postnav__item--next { text-align: right; align-items: flex-end; }
.hps-postnav__label {
	font-family: var(--font-head, Archivo), sans-serif;
	font-size: var(--text-xs, 12px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted, #5A6B84);
}
.hps-postnav__title {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 600;
	font-size: var(--text-md, 16px);
	color: var(--color-ink, #13233D);
	line-height: 1.3;
}
.hps-backlink {
	display: inline-block;
	margin-top: var(--space-6, 28px);
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-md, 16px);
	font-weight: 600;
	color: var(--color-navy, #14284B);
	text-decoration: none;
}
.hps-backlink:hover { color: var(--color-rust, #C1441E); text-decoration: underline; }

/* ---------- single: related services ---------- */
.hps-services { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
.hps-service-link {
	display: flex;
	flex: 1 1 210px;
	padding: var(--space-4, 16px);
	border: 1px solid var(--color-line, #DCE3EC);
	border-radius: var(--radius-md, 12px);
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 600;
	font-size: var(--text-md, 16px);
	color: var(--color-ink, #13233D);
	text-decoration: none;
	background: var(--color-white, #fff);
}
.hps-service-link:hover { border-color: var(--color-rust, #C1441E); color: var(--color-rust, #C1441E); }

/* ---------- CTA band ---------- */
.hps-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6, 28px);
	padding: var(--space-7, 36px);
	background: var(--color-navy, #14284B);
	border-radius: var(--radius-md, 12px);
}
.hps-cta__copy { display: flex; flex-direction: column; gap: var(--space-2, 8px); flex: 1 1 320px; }
.hps-cta__title {
	font-family: var(--font-head, Archivo), sans-serif;
	font-weight: 800;
	font-size: var(--size-h3, 25px);
	color: var(--color-white, #fff);
	margin: 0;
}
.hps-cta__text {
	font-family: var(--font-body, sans-serif);
	font-size: var(--text-md, 16px);
	line-height: var(--line-body, 1.62);
	color: var(--color-pale-blue, #C8D8EC);
	margin: 0;
}
.hps-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.hps-hero h1 { font-size: var(--size-display-tablet, 38px); }
	.hps-grid { grid-template-columns: repeat(2, 1fr); }
	.hps-featured { grid-template-columns: 1fr; }
	.hps-featured__media { aspect-ratio: 16 / 9; }
	.hps-featured__body { padding: var(--space-6, 28px); }
	.hps-featured__title { font-size: var(--size-h2-tablet, 27px); }
	.hps-section-head h2 { font-size: var(--size-h2-tablet, 27px); }
	.hps-article-head h1 { font-size: var(--size-h1-tablet, 32px); }
	.hps-article h2 { font-size: var(--size-h2-tablet, 27px); }
}
@media (max-width: 767px) {
	.hps-hero { padding-block: var(--space-8-mobile, 36px); }
	.hps-hero h1 { font-size: var(--size-display-mobile, 31px); }
	.hps-hero p { font-size: var(--text-lg-mobile, 18px); }
	.hps-section { padding-block: var(--space-8-mobile, 36px); }
	.hps-grid { grid-template-columns: 1fr; }
	.hps-featured__title { font-size: var(--size-h2-mobile, 23px); }
	.hps-section-head h2 { font-size: var(--size-h2-mobile, 23px); }
	.hps-article-head h1 { font-size: var(--size-h1-mobile, 27px); }
	.hps-article h2 { font-size: var(--size-h2-mobile, 23px); }
	.hps-article h3 { font-size: var(--size-h3-mobile, 21px); }
	.hps-article p, .hps-article li { font-size: var(--text-base-mobile, 16px); }
	.hps-postnav { grid-template-columns: 1fr; }
	.hps-postnav__item--next { text-align: left; align-items: flex-start; }
	.hps-cta { padding: var(--space-5, 22px); }
	.hps-btn { width: 100%; }
	.hps-featured__cta { width: 100%; }
}

/* Astra wraps content in a flex .ast-container capped at the content width.
   These templates lay out their own full-bleed sections, so it is neutralised here only. */
.hps-blog-template .site-content > .ast-container {
	display: block;
	max-width: none;
	padding-inline: 0;
}