/* =================================================================
   Pug Forever Homes - brand mark and site navigation
   ================================================================= */

/* ---------- brand mark ---------- */
.pfh-brand { display: inline-block; line-height: 0; }
/* The wordmark sits inside a wide badge, so the mark needs real height to
   stay legible. These sizes keep it readable from a phone up. */
.pfh-brand__img {
	display: block;
	height: 122px;
	width: auto;
	max-width: 100%;
	aspect-ratio: 1200 / 820;
	object-fit: contain;
}
.pfh-brand--footer { display: block; margin-bottom: 1.1rem; }
/* Explicit width as well as height: Safari gives an SVG with no intrinsic
   size a width of zero when width is left to auto. */
.pfh-brand--footer .pfh-brand__img { width: 217px; height: 148px; max-width: 100%; }

@media (max-width: 1200px) { .pfh-brand__img { height: 108px; } }
@media (max-width: 1024px) { .pfh-brand__img { height: 100px; } }
@media (max-width: 767px) {
	.pfh-brand__img { height: 88px; }
	.pfh-brand--footer .pfh-brand__img { width: 164px; height: 112px; }
}
@media (max-width: 480px) { .pfh-brand__img { height: 78px; } }
@media (max-width: 360px) { .pfh-brand__img { height: 68px; } }

/* The header's logo column is a percentage-width flex container whose widget
   computes to zero width, which squeezes the badge out. Let the column and the
   widget size themselves to the mark instead, and give the mark a real width
   rather than relying on width:auto. */
header.pfh-banner .elementor-296 .elementor-element.elementor-element-bfb8765 {
	--width: auto;
	flex: 0 0 auto;
}
header.pfh-banner .elementor-element-6adf719 {
	width: auto;
	flex: 0 0 auto;
	max-width: none;
}
header.pfh-banner .pfh-brand { display: block; }
header.pfh-banner .pfh-brand__img { width: 179px; height: 122px; max-width: none; }

@media (max-width: 1200px) { header.pfh-banner .pfh-brand__img { width: 158px; height: 108px; } }
@media (max-width: 1024px) { header.pfh-banner .pfh-brand__img { width: 146px; height: 100px; } }
@media (max-width: 767px)  { header.pfh-banner .pfh-brand__img { width: 129px; height: 88px; } }
@media (max-width: 480px)  { header.pfh-banner .pfh-brand__img { width: 114px; height: 78px; } }
@media (max-width: 360px)  { header.pfh-banner .pfh-brand__img { width: 100px; height: 68px; } }

/* The badge is tall, so the header rail tightens up around it. */
header.pfh-banner .elementor-296 .elementor-element.elementor-element-50a39ce {
	padding-top: 14px;
	padding-bottom: 14px;
}
@media (max-width: 767px) {
	header.pfh-banner .elementor-296 .elementor-element.elementor-element-50a39ce {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ---------- menu: a panel over the page, not one that grows the header ---------- */
header.pfh-banner { position: relative; z-index: 1001; }

@media (max-width: 1024px) {
	header.pfh-banner .elementor-menu-toggle {
		width: 58px;
		height: 58px;
		padding: 0;
		border: 0;
		border-radius: 16px;
		background-color: #A2521B;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color .18s ease;
	}
	header.pfh-banner .elementor-menu-toggle:hover,
	header.pfh-banner .elementor-menu-toggle.elementor-active {
		background-color: #834115;
		color: #FFFFFF;
	}
	header.pfh-banner .elementor-menu-toggle:focus-visible {
		outline: 3px solid #834115;
		outline-offset: 3px;
	}
	header.pfh-banner .elementor-menu-toggle i,
	header.pfh-banner .elementor-menu-toggle svg {
		font-size: 30px;
		width: 30px;
		height: 30px;
		color: #FFFFFF;
		fill: #FFFFFF;
	}

	header.pfh-banner nav.elementor-nav-menu--dropdown {
		position: fixed;
		top: var(--pfh-header-h, 108px);
		left: 0;
		right: 0;
		width: auto;
		margin: 0;
		max-height: calc(100vh - var(--pfh-header-h, 108px) - 14px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #FBF7F1;
		border-top: 1px solid #E7DCCC;
		border-bottom-left-radius: 24px;
		border-bottom-right-radius: 24px;
		box-shadow: 0 26px 52px -22px rgba(36, 31, 27, .5);
		z-index: 1000;
	}
	header.pfh-banner nav.elementor-nav-menu--dropdown .elementor-nav-menu--dropdown,
	header.pfh-banner nav.elementor-nav-menu--dropdown ul { background: transparent; }
	header.pfh-banner nav.elementor-nav-menu--dropdown a.elementor-item {
		padding: 1.05rem 1.5rem;
		font-size: 1.06rem;
		font-weight: 600;
		color: #241F1B;
		border-bottom: 1px solid #F0E7DA;
	}
	header.pfh-banner nav.elementor-nav-menu--dropdown a.elementor-item:hover,
	header.pfh-banner nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		background: #F7EBDF;
		color: #834115;
	}

	/* The panel floats over a dimmed page instead of pushing it down. */
	html.pfh-nav-open { overflow: hidden; }
	html.pfh-nav-open body::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(26, 19, 14, .48);
		z-index: 900;
	}
}

@media (prefers-reduced-motion: reduce) {
	header.pfh-banner .elementor-menu-toggle { transition: none; }
}

/* ---------- tick lists ---------- */
.pfh-checks {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: .8rem;
}
.pfh-checks--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem 2.5rem;
}
@media (max-width: 700px) {
	.pfh-checks--2 { grid-template-columns: 1fr; }
}
.pfh-checks li {
	position: relative;
	padding-left: 2.1rem;
	line-height: 1.65;
	color: var(--pfh-body);
}
.pfh-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	width: 1.32rem;
	height: 1.32rem;
	border-radius: 50%;
	background: var(--pfh-sage-soft);
}
.pfh-checks li::after {
	content: "";
	position: absolute;
	left: .42rem;
	top: .56em;
	width: .46rem;
	height: .24rem;
	border-left: 2px solid var(--pfh-sage);
	border-bottom: 2px solid var(--pfh-sage);
	transform: rotate(-45deg);
}
.pfh-checks + .pfh-prose { margin-top: 2rem; }