/* ============================================================================
   Home Team Construction — base
   ----------------------------------------------------------------------------
   Document defaults, the shared button, and the site chrome.

   Sections bring their own stylesheet (assets/css/components/<name>.css) and
   scope every rule under their own class. Nothing here may assume a section is
   present, and nothing here may be specific enough to override one: section
   rules are two classes deep (.htc-hero .htc-btn, 0-2-0) and the button below
   is one (0-1-0), so a section always wins on its own buttons.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;

	/* The header is sticky, so an anchor target would otherwise land under it.
	   One declaration here covers every in-page jump on the site.

	   The header's height plus a breath, not the height alone. At exactly
	   --htc-header-h the heading lands flush against the header's bottom border
	   — measured at 0px clearance — which reads as the jump having overshot even
	   though it is correct. --htc-s3 is the same clearance the contents rails on
	   the blog post and the privacy policy use, so a heading and the rail entry
	   pointing at it sit on the same line.

	   Components must NOT add scroll-margin-top to their headings to adjust
	   this. Scroll-margin on the target adds to the scroll-padding on the
	   scroller rather than replacing it, so a component-level value silently
	   doubles the offset. */
	scroll-padding-top: calc(var(--htc-header-h) + var(--htc-s3));
}

body {
	margin: 0;
	background: var(--htc-white);
	color: var(--htc-text);
	font-family: var(--htc-font-body);
	font-size: var(--htc-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Scoped to body (0-0-2) for the same reason as the heading rule below:
   hozio-studio's base.css carries unlayered `a { color: var(--brand-text) }`
   and `a:visited { color: var(--brand-text) }` — #114899 — and loads after the
   theme, so at equal specificity every link it did not otherwise colour turned
   that blue once visited.

   :visited is matched explicitly. Browsers restrict which properties a visited
   link may take and will not inherit a colour into it from the unvisited rule,
   so `body a` alone leaves the plugin's :visited rule standing. Colour is one
   of the few properties still permitted there, which is what makes this
   fixable at all. */
body a,
body a:visited {
	color: var(--htc-link);
}

/* Scoped to body (0-0-2) rather than a bare element selector (0-0-1) on
   purpose. hozio-studio's base.css carries an unlayered
   `h1, h2, h3, h4 { font-family: var(--font-heading) }` — DM Serif Display —
   and is enqueued ~16 stylesheets after the theme, so at equal specificity it
   won the tie and turned every h1-h4 serif while h5/h6 and class-styled text
   stayed correct. That is the "random eyebrow here, h1 there" symptom.
   Layering would not help: the plugin's rule is unlayered, and unlayered
   always outranks layered styles. */
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--htc-font-display);
	color: var(--htc-black);
	line-height: 1.15;
}

.htc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--htc-s2) var(--htc-s3);
	background: var(--htc-black);
	color: var(--htc-white);
	font-weight: 600;
	text-decoration: none;
}

.htc-skip:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
   Shared button.

   Carried over from the hero component, which is the canonical definition —
   44px minimum target, square corners per the brand kit, and the 15% black
   overlay the Elementor kit used as its hover state.
   --------------------------------------------------------------------------- */

.htc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--htc-s2) var(--htc-s4);
	border: 2px solid transparent;
	border-radius: var(--htc-radius);
	font-family: var(--htc-font-body);
	font-size: var(--htc-body);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.htc-btn--primary {
	background: var(--htc-red);
	border-color: var(--htc-red);
	color: var(--htc-white);
}

.htc-btn--primary:hover {
	box-shadow: inset 0 0 0 999px rgba(2, 1, 1, .15);
}

.htc-btn--primary:focus-visible {
	outline: 2px solid var(--htc-black);
	outline-offset: 2px;
}

.htc-btn--secondary {
	background: transparent;
	border-color: var(--htc-black);
	color: var(--htc-black);
}

.htc-btn--secondary:hover {
	background: var(--htc-black);
	color: var(--htc-white);
}

.htc-btn--secondary:focus-visible {
	outline: 2px solid var(--htc-red);
	outline-offset: 2px;
}

/* ===========================================================================
   HEADER

   Rebuilt, not ported. The artifacts' cmp-header was 457 lines aimed at
   ElementsKit's generated markup with zero htc- selectors, so none of it
   survives Elementor's removal. Structure and the per-category panel images
   come from the live site via htc_nav().
   =========================================================================== */

.htc-header {
	/* The live site pins this row with Elementor's sticky: top, enabled on
	   desktop, tablet and mobile, offset 0, and with no shrink or shadow
	   effects attached. position:sticky reproduces that without Elementor's
	   fixed-plus-placeholder trick or any JS, and it still positions the mega
	   panel: sticky establishes a containing block exactly as relative did. */
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--htc-white);
	border-bottom: 1px solid var(--htc-divider);
}

.htc-header__inner {
	display: flex;
	align-items: center;
	gap: var(--htc-s4);
	max-width: calc(var(--htc-container) + var(--htc-s4) * 2);
	margin-inline: auto;
	padding: var(--htc-header-pad) var(--htc-s4);
}

.htc-header__logo {
	flex-shrink: 0;
	line-height: 0;
}

.htc-header__logo img {
	/* Sized by height, not width: --htc-header-h is derived from --htc-logo-h,
	   so the row height has to be the value that is actually set. The logo is
	   1024x293, so 54px tall is 189px wide — what it was before. */
	height: var(--htc-logo-h);
	width: auto;
}

.htc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--htc-s3);
	margin-left: auto;
	flex-shrink: 0;
}

.htc-header__phone {
	color: var(--htc-black);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.htc-header__phone:hover {
	color: var(--htc-red);
}

/* The admin bar is fixed at 32px tall from 783px up, and a sticky header at
   top:0 would pin underneath it for every logged-in editor. Below 783px WP
   switches the bar to position:absolute, so it scrolls away and the header
   goes back to the top of the viewport. */
.admin-bar .htc-header {
	top: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar .htc-header {
		top: 0;
	}
}

/* --htc-header-h is derived from --htc-logo-h, so nothing in the row may be
   taller than the logo or the derivation goes stale. The button's own padding
   makes it 55px; matching it to the logo keeps the number honest and the bar
   compact — which matters most at tablet, where the logo drops to 46px and the
   button would otherwise still set a 88px row. */
.htc-header__actions .htc-btn {
	height: var(--htc-logo-h);
	padding-block: 0;
}

/* ---- Nav ----

   The nav and its items stretch to the full height of the bar. Nothing about
   the links looks different for it — they stay centred at their own height —
   but it puts every item's bottom edge on the same line as the header's inner
   content, which is what lets both kinds of panel hang from the bar's bottom
   edge rather than from wherever their trigger happens to end. */

.htc-nav {
	align-self: stretch;
}

.htc-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	height: 100%;
	gap: var(--htc-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.htc-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.htc-nav__link,
.htc-nav__link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--htc-s1) 0;
	border: 0;
	background: none;
	color: var(--htc-black);
	font-family: var(--htc-font-body);
	font-size: var(--htc-small);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.htc-nav__link:hover,
.htc-nav__item.is-open .htc-nav__toggle {
	color: var(--htc-red);
}

.htc-nav__link:focus-visible {
	outline: 2px solid var(--htc-red);
	outline-offset: 3px;
}

.htc-nav__caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 160ms ease;
}

.htc-nav__item.is-open .htc-nav__caret {
	transform: rotate(180deg);
}

/* ---- Dropdown panel ----

   Both kinds of panel hang from the same line: the header's bottom edge plus
   --htc-panel-drop. They need different arithmetic to get there because they
   measure from different boxes. This one resolves 100% against its item, which
   ends at the header's inner content, so it has the header's bottom padding and
   border left to cross; the mega panel below resolves against .htc-header's
   padding box and only has the border. */

.htc-nav__panel {
	position: absolute;
	top: calc(100% + var(--htc-header-pad) + var(--htc-panel-drop) + 1px);
	left: 0;
	z-index: 60;
	display: flex;
	gap: var(--htc-s4);
	min-width: 320px;
	padding: var(--htc-s3);
	background: var(--htc-white);
	border: 1px solid var(--htc-divider);
	box-shadow: 0 18px 40px rgba(16, 16, 16, .12);
}

/* `display:flex` above beats the user-agent rule that `hidden` relies on, so
   without this every panel renders open at once. Attribute + class is 0-2-0
   and wins over the 0-1-0 display rules in both the desktop and mobile blocks,
   whatever their order. */
.htc-nav__panel[hidden] {
	display: none;
}

/* The trigger sits above the panel with a gap between them. Without this the
   pointer crosses dead space on its way down and the menu closes. The gap is
   the same for both panels now that they hang from the same line — item bottom
   to header bottom, plus --htc-panel-drop — so one rule covers it. */
.htc-nav__panel::before {
	content: "";
	position: absolute;
	top: calc((var(--htc-header-pad) + var(--htc-panel-drop) + 1px) * -1);
	left: 0;
	right: 0;
	height: calc(var(--htc-header-pad) + var(--htc-panel-drop) + 1px);
}

/* ---- Services mega panel ----

   The panel spans the container rather than hanging off the Services item, so
   the li has to stop being the containing block. position:static on the item
   hands that job back to .htc-header, which is relative. */

.htc-nav__item--mega {
	position: static;
}

.htc-nav__panel--mega {
	display: block;
	top: calc(100% + var(--htc-panel-drop) + 1px);
	left: var(--htc-s4);
	right: var(--htc-s4);
	min-width: 0;
	max-width: var(--htc-container);
	margin-inline: auto;
	padding: var(--htc-s4);
}

.htc-nav__groups {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--htc-s4);
}

.htc-nav__group-img {
	width: 100%;
	height: 96px;
	object-fit: cover;
	margin-bottom: var(--htc-s2);
}

.htc-nav__group-title {
	margin: 0 0 var(--htc-s1);
	padding-bottom: var(--htc-s1);
	border-bottom: 2px solid var(--htc-red);
	font-family: var(--htc-font-body);
	font-size: var(--htc-eyebrow);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--htc-black);
}

.htc-nav__all {
	display: inline-block;
	margin-top: var(--htc-s3);
	padding-top: var(--htc-s3);
	border-top: 1px solid var(--htc-divider);
	width: 100%;
	color: var(--htc-red);
	font-size: var(--htc-small);
	font-weight: 700;
	text-decoration: none;
}

.htc-nav__all:hover {
	text-decoration: underline;
}

.htc-nav__sublist {
	display: grid;
	gap: var(--htc-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.htc-nav__sublist a,
.htc-nav__sublist a:visited {
	display: block;
	padding: 6px 0;
	color: var(--htc-black);
	font-size: var(--htc-small);
	text-decoration: none;
	white-space: nowrap;
}

.htc-nav__sublist a:hover {
	color: var(--htc-red);
}

/* nowrap is right for the single-column Resources dropdown, which should size
   to its longest link. In the six-column mega panel it makes long names —
   "Asphalt Shingle Roof Replacement" — overflow into the next column. */
.htc-nav__panel--mega .htc-nav__sublist a {
	white-space: normal;
}

/* ---- Resources list panel ----

   The base .htc-nav__panel min-width was set with the mega panel in mind and
   left this one about three times wider than its longest link ("Contact Us"),
   with a card's worth of padding around a three-item list. Shrink-to-fit is
   what a single-column dropdown wants: a floor wide enough that it still reads
   as a panel rather than a tooltip, and no ceiling past the longest label. The
   rows carry their own vertical padding, so the box needs only enough of its
   own to sit off the text. */
.htc-nav__panel--list {
	min-width: 180px;
	width: max-content;
	padding: var(--htc-s1) var(--htc-s2);
}

/* Rows span the panel so the hover target doesn't stop at the text now that
   the panel hugs the labels. The sublist's own gap would double up on the
   rows' padding at this tighter size, so it goes. */
.htc-nav__panel--list .htc-nav__sublist {
	width: 100%;
	gap: 0;
}

/* ---- Burger, mobile only ---- */

.htc-header__burger {
	display: none;
	align-items: center;
	gap: var(--htc-s1);
	margin-left: auto;

	/* No border. It read as a second button competing with the red CTA beside
	   it, and the live site's burger is a bare icon too. min-height keeps the
	   44px tap target the border used to imply, and hover and focus states
	   below replace the affordance it was carrying. */
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--htc-black);
	font-family: var(--htc-font-body);
	font-size: var(--htc-small);
	font-weight: 600;
	cursor: pointer;
}

.htc-header__burger:hover {
	color: var(--htc-red);
}

.htc-header__burger:focus-visible {
	outline: 2px solid var(--htc-red);
	outline-offset: 4px;
}

.htc-header__burger-box {
	position: relative;
	width: 20px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Custom tablet breakpoint from the live Elementor kit — see tokens.css. */
@media (max-width: 1150px) {

	/* Pinned, the desktop row is too much screen to give up. The live site
	   answers the same way: its header row drops to a 76px min-height here and
	   64px on phones. */
	:root {
		--htc-logo-h: 48px;
	}

	.htc-header__inner {
		flex-wrap: wrap;
	}

	.htc-header__burger {
		display: inline-flex;
	}

	/* Source order is logo, burger, nav, actions. On the live site the burger
	   is the last thing in the row, past the call and quote buttons, so the
	   row is reordered to logo | phone | quote | burger. */
	.htc-header__actions {
		order: 1;
		margin-left: auto;
	}

	.htc-header__burger {
		order: 2;
		margin-left: 0;
	}

	.htc-nav {
		order: 4;
		flex-basis: 100%;
		display: none;
	}

	/* A sticky element taller than the viewport cannot be scrolled to — the
	   page moves under it while its own overflow stays put. The open menu is
	   six items plus a six-group service stack, so it is capped to whatever is
	   left below the header row and scrolls itself. */
	.htc-nav.is-open {
		display: block;
		max-height: calc(100vh - var(--htc-header-h));
		max-height: calc(100dvh - var(--htc-header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* height:auto and nowrap undo the desktop stretch. Left in, a column with a
	   height — and the open menu has one, it is capped and scrolls — wraps into
	   as many columns as it needs, which puts About Us next to Services. */
	.htc-nav__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		height: auto;
		gap: 0;
	}

	.htc-nav__item {
		display: block;
		border-top: 1px solid var(--htc-divider);
	}

	.htc-nav__link {
		width: 100%;
		justify-content: space-between;
		padding: var(--htc-s2) 0;
		font-size: var(--htc-body);
	}

	/* Inline disclosure on small screens — an absolutely positioned panel has
	   nowhere to go once the nav is a full-width stack. */
	.htc-nav__panel,
	.htc-nav__panel--mega {
		position: static;
		display: block;
		min-width: 0;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0 0 var(--htc-s2);
		border: 0;
		box-shadow: none;
	}

	/* The category images are decorative and the panel is a scrolling stack
	   here — six of them would bury the links. */
	.htc-nav__group-img {
		display: none;
	}

	.htc-nav__groups {
		grid-template-columns: 1fr;
		gap: var(--htc-s3);
	}

	.htc-nav__group-title {
		margin-top: var(--htc-s2);
	}
}

/* ---- Phones ----

   Three rows of header is 257px of a 390px-wide phone screen, and pinned that
   is a third of the viewport gone. The live site's mobile header is a single
   64px row — logo, phone, burger — and this is that row: a smaller logo, an
   icon-only burger, and the quote button dropped so the three fit across.
   Tap-to-call is the mobile CTA that survives, which is the live site's call
   as well as the one made in deliverables/css-only/header-footer.css. */
@media (max-width: 767px) {

	:root {
		--htc-logo-h: 40px;
	}

	/* Logo, phone and burger come to ~286px against 297px of room on a 360px
	   screen once a desktop scrollbar is in play, so the gap comes down with
	   them. */
	.htc-header__inner {
		gap: var(--htc-s1);
		padding-inline: var(--htc-s3);
	}

	/* And when even that is not enough — a 360px screen with a desktop
	   scrollbar, a narrower phone — the logo gives up width instead of the
	   burger dropping to a second row. It has to be max-width and not
	   flex-shrink: a wrapping flex container breaks the line before it shrinks
	   anything, so only a smaller hypothetical size keeps the row intact. The
	   170px is what the rest of the row needs — phone 102, burger 44, two 8px
	   gaps — with a little to spare. Sized by max-height rather than height so
	   that capping the width scales the logo down whole. */
	.htc-header__logo {
		max-width: calc(100% - 170px);
	}

	.htc-header__logo img {
		height: auto;
		max-height: var(--htc-logo-h);
		max-width: 100%;
	}

	.htc-header__phone {
		font-size: var(--htc-small);
	}

	/* Icon only here, as on the live site. With the label gone and no border
	   left to pad, the button is widened to a 44px square and the icon pushed
	   to its right edge, so the target stays thumb-sized and the icon still
	   lines up with the gutter. */
	.htc-header__burger {
		width: 44px;
		justify-content: flex-end;
	}

	.htc-header__burger-text {
		display: none;
	}

	.htc-header__actions .htc-btn {
		display: none;
	}
}

/* ===========================================================================
   FOOTER
   =========================================================================== */

.htc-footer {
	background: var(--htc-grey-dark);
	color: var(--htc-white);
}

.htc-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: var(--htc-s5) var(--htc-s4);
	max-width: calc(var(--htc-container) + var(--htc-s4) * 2);
	margin-inline: auto;
	padding: var(--htc-s7) var(--htc-s4) var(--htc-s5);
}

.htc-footer a,
.htc-footer a:visited {
	color: var(--htc-white);
	text-decoration: none;
}

.htc-footer a:hover {
	color: var(--htc-red);
}

.htc-footer a:focus-visible {
	outline: 2px solid var(--htc-white);
	outline-offset: 3px;
}

.htc-footer__brand img {
	width: 220px;
	height: auto;
}

.htc-footer__social {
	display: flex;
	gap: var(--htc-s2);
	margin: var(--htc-s3) 0 0;
	padding: 0;
	list-style: none;
}

.htc-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	color: var(--htc-white);
	transition: border-color .15s ease, color .15s ease;
}

.htc-footer__social a:hover,
.htc-footer__social a:focus-visible {
	border-color: var(--htc-red);
	color: var(--htc-red);
}

.htc-footer__social svg {
	width: 18px;
	height: 18px;
}

.htc-footer__heading {
	margin: 0 0 var(--htc-s2);
	color: var(--htc-white);
	font-size: var(--htc-h5);
	font-weight: 700;
}

.htc-footer__list {
	display: grid;
	gap: var(--htc-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.htc-footer__address,
.htc-footer__line {
	margin: 0 0 var(--htc-s2);
	font-style: normal;
	font-size: var(--htc-small);
}

.htc-footer__hours {
	color: var(--htc-border);
}

.htc-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--htc-s2);
	justify-content: space-between;
	margin: 0;
	padding-top: var(--htc-s3);
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: var(--htc-small);
}

.htc-footer__legal-links {
	display: flex;
	gap: var(--htc-s2);
}

@media (max-width: 1150px) {

	.htc-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {

	.htc-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   Generic page shell — blog, and any page without its own template.
   =========================================================================== */

.htc-shell {
	max-width: calc(var(--htc-container) + var(--htc-s4) * 2);
	margin-inline: auto;
	padding: var(--htc-s6) var(--htc-s4);
}

.htc-entry__content {
	max-width: var(--htc-measure);
}

@media (prefers-reduced-motion: reduce) {

	.htc-btn,
	.htc-nav__caret {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Form status line

   Written by assets/js/forms.js after a submit. It lives here rather than in a
   component stylesheet because all four forms share it, and because component
   CSS is enqueued from inside a part — too late for the head, so it would
   flash unstyled. base.css is always in the head.

   Carries no styling until the script sets a state, so an empty status line is
   invisible rather than a stray gap.
--------------------------------------------------------------------------- */

.htc-form-status {
	margin: var(--htc-s2) 0 0;
	font-size: var(--htc-small);
	line-height: 1.5;
}

.htc-form-status:empty {
	display: none;
}

.htc-form-status[data-state] {
	padding: var(--htc-s2) var(--htc-s3);
	border-radius: var(--htc-radius);
	border-left: 3px solid transparent;
}

.htc-form-status[data-state='sending'] {
	color: var(--htc-grey-dark);
	background: var(--htc-bg-light);
	border-left-color: var(--htc-border);
}

.htc-form-status[data-state='success'] {
	color: var(--htc-black);
	background: var(--htc-blue-light);
	border-left-color: var(--htc-blue);
}

.htc-form-status[data-state='error'] {
	color: var(--htc-black);
	background: var(--htc-bg-light);
	border-left-color: var(--htc-red);
}

/* Submitting: dim the controls without collapsing the layout. */
form[data-sending] .elementor-field,
form[data-sending] .htc-form__input,
form[data-sending] .htc-form__textarea {
	opacity: 0.6;
}

form[data-sending] [type='submit'] {
	cursor: progress;
}