/* Responsive-only fixes. */

.custom-hero-font-2,
.hero-title,
h1.custom-text-10,
h2.custom-text-10,
h3.custom-text-10,
h4.custom-text-10 {
	overflow-wrap: anywhere;
}

/* Keep service card headings readable regardless of global heading theme */
.dn-service-box h4 {
	color: #000 !important;
}

/* Improve readability on light cards/blocks where default body gray is too low-contrast */
.dn-service-box p,
.dn-contact__content p,
.dn-contact__content .address span {
	color: #666 !important;
}

/* Prevent global dark heading rules from whitening contact block labels on light backgrounds */
.dn-contact__content .title.text-color-dark,
.dn-contact__content .contact-info h5,
.dn-contact__content .contact-info h5 a {
	color: #000 !important;
}

/* Fix invisible text on light outline buttons (white text on white hover bg) */
html body .btn-outline.btn-light:hover,
html body .btn-outline.btn-light.hover,
html body .btn-outline.btn-light:focus,
html body .btn-outline.btn-light.focus,
html body .btn-outline.btn-light:active,
html body .btn-outline.btn-light.active,
.show>html body .btn-outline.btn-light.dropdown-toggle,
.btn-outline.btn-light:hover,
.btn-outline.btn-light:focus,
.btn-outline.btn-light:active {
	color: #111 !important;
}

/* Footer contact typography normalization */
.footer-widgets.contact {
	max-width: 360px;
}

.footer-widgets.contact .address {
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0;
	margin-bottom: 12px;
}

.footer-widgets.contact .contacts ul>li {
	margin-bottom: 8px;
}

.footer-widgets.contact .contacts ul>li>a.email {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	word-break: break-word;
}

.footer-widgets.contact .contacts ul>li>a.mobile {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

@media (max-width: 991px) {
	.footer-widgets.contact {
		max-width: 100%;
	}

	.footer-widgets.contact .address {
		font-size: 17px;
	}

	.footer-widgets.contact .contacts ul>li>a.email {
		font-size: 17px;
	}

	.footer-widgets.contact .contacts ul>li>a.mobile {
		font-size: 20px;
	}
}

/* Keep header nav stable on medium desktop widths after adding new menu items */
@media (max-width: 1599px) and (min-width: 992px) {
	#header #mainNav > li > a {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 0.92rem !important;
		white-space: nowrap;
	}
}

@media (max-width: 1199px) and (min-width: 992px) {
	#header #mainNav > li > a {
		padding-left: 8px !important;
		padding-right: 8px !important;
		font-size: 0.84rem !important;
	}
}

@media (max-width: 1399px) {

	.custom-hero-font-2,
	.hero-title {
		font-size: clamp(2.5rem, 7.2vw, 4.8rem) !important;
		line-height: 1.06 !important;
		letter-spacing: -0.02em !important;
	}

	h1.custom-text-10,
	h2.custom-text-10,
	h3.custom-text-10,
	h4.custom-text-10 {
		font-size: clamp(2.1rem, 5.6vw, 4.1rem) !important;
		line-height: 1.08 !important;
	}
}

@media (max-width: 1199px) {
	.pd-t-180 {
		padding-top: 140px !important;
	}

	.pd-t-140 {
		padding-top: 110px !important;
	}

	.pd-t-100 {
		padding-top: 76px !important;
	}

	.pd-b-100 {
		padding-bottom: 76px !important;
	}

	.pd-t-60 {
		padding-top: 48px !important;
	}

	.pd-b-60 {
		padding-bottom: 48px !important;
	}

	.mrt-60 {
		margin-top: 40px !important;
	}

	.mrt-50 {
		margin-top: 34px !important;
	}
}

@media (max-width: 991px) {

	.custom-hero-font-2,
	.hero-title {
		font-size: clamp(2rem, 8.8vw, 3.4rem) !important;
		line-height: 1.08 !important;
	}

	.text-10 {
		font-size: clamp(2rem, 8.2vw, 3.1rem) !important;
		line-height: 1.1 !important;
	}

	.text-9 {
		font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
		line-height: 1.12 !important;
	}

	.pd-t-180 {
		padding-top: 120px !important;
	}

	.pd-t-140 {
		padding-top: 96px !important;
	}

	.pd-t-100 {
		padding-top: 64px !important;
	}

	.pd-b-100 {
		padding-bottom: 64px !important;
	}
}

@media (max-width: 767px) {
	.pd-t-180 {
		padding-top: 105px !important;
	}

	.pd-t-140 {
		padding-top: 84px !important;
	}

	.pd-t-100 {
		padding-top: 56px !important;
	}

	.pd-b-100 {
		padding-bottom: 56px !important;
	}

	.pd-t-60 {
		padding-top: 40px !important;
	}

	.pd-b-60 {
		padding-bottom: 40px !important;
	}

	.mrt-60 {
		margin-top: 30px !important;
	}

	.mrt-50 {
		margin-top: 26px !important;
	}

	.main .container,
	.main .container-fluid {
		padding-left: 18px;
		padding-right: 18px;
	}

	.error-wrapper h1 {
		font-size: clamp(3rem, 16vw, 5rem) !important;
		line-height: 1.08 !important;
	}

	.error-wrapper h2 {
		font-size: clamp(1.5rem, 7vw, 2.6rem) !important;
		line-height: 1.15 !important;
	}
}

@media (max-width: 1199px) and (min-width: 768px) {
	.error-wrapper h1 {
		font-size: clamp(4.6rem, 11vw, 6.3rem) !important;
		line-height: 1.08 !important;
	}

	.error-wrapper h2 {
		font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
		line-height: 1.14 !important;
	}
}

/* ==========================================================================
   MOBILE NAV MENU READABILITY FIX
   The header-logo.css forces all nav links to --zia-header-text (dark) with
   !important, which works on desktop but on mobile the menu has a white bg
   so text needs to stay dark and readable. We ensure proper contrast and
   override any color bleeding issues.
   ========================================================================== */
@media (max-width: 991px) {

	/* Ensure mobile nav links are dark and readable on white menu bg */
	#header .header-nav-main nav>ul>li>a {
		color: #333 !important;
		font-weight: 600;
	}

	#header .header-nav-main nav>ul>li>a:hover,
	#header .header-nav-main nav>ul>li>a:focus {
		color: #111 !important;
		background-color: #f0f0f0 !important;
	}

	#header .header-nav-main nav>ul>li>a.active,
	#header .header-nav-main nav>ul>li>a.current-page-active,
	#header .header-nav-main nav>ul>li.active>a {
		color: #fff !important;
		background-color: var(--zia-accent, #2f7d1a) !important;
	}

	/* Make the mobile menu background opaque white */
	#header .header-nav-main:before {
		background: #fff !important;
	}

	/* Menu border separators */
	#header .header-nav-main nav>ul li {
		border-bottom-color: #e0e0e0 !important;
	}
}

/* ==========================================================================
   HEADER LOGO SIZE FIX ON MOBILE
   Prevents the logo from becoming too large when scrolling back to top.
   Constrains the logo to a reasonable max size on mobile devices.
   ========================================================================== */
@media (max-width: 991px) {

	/* Override the global 150px size from header-logo.css */
	#header .header-logo img,
	#header .zia-header-logo-img {
		width: 80px !important;
		height: 80px !important;
		max-width: 80px !important;
		max-height: 80px !important;
		transition: all 0.3s ease;
	}

	/* When sticky/scrolled, keep logo small */
	html.sticky-header-active #header .header-logo img,
	html.sticky-header-active #header .zia-header-logo-img {
		width: 55px !important;
		height: 55px !important;
		max-width: 55px !important;
		max-height: 55px !important;
	}

	/* Reduce header container padding on mobile */
	#header .header-container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#header .header-logo {
		margin: 8px 0 !important;
	}
}

@media (max-width: 575px) {

	#header .header-logo img,
	#header .zia-header-logo-img {
		width: 65px !important;
		height: 65px !important;
		max-width: 65px !important;
		max-height: 65px !important;
	}

	html.sticky-header-active #header .header-logo img,
	html.sticky-header-active #header .zia-header-logo-img {
		width: 48px !important;
		height: 48px !important;
		max-width: 48px !important;
		max-height: 48px !important;
	}
}

/* ==========================================================================
   BACKROUND IMAGE FIX ON MOBILE
   Prevents background images from being cut off on responsive devices
   by adjusting background-position and background-size.
   ========================================================================== */
@media (max-width: 991px) {
	.page-header.page-header-background {
		background-position: center center !important;
		background-size: cover !important;
		min-height: 280px !important;
	}

	.zia-hero {
		background-position: 75% center !important;
		/* Adjust horizontally to keep subject in frame */
		background-attachment: scroll !important;
		/* Disable parallax on mobile if it causes issues */
	}

	/* CTA / Parallax sections */
	.section-parallax,
	.parallax,
	section[data-plugin-parallax] {
		background-position: center center !important;
		background-size: cover !important;
		background-attachment: scroll !important;
	}

	/* Scrollable parallax wrapper - prevent cut-off */
	.scrollable-parallax-wrapper {
		overflow: visible !important;
	}

	/* Fix specifically for pages with top-shifted background positions (like Services/FAQ) */
	section.page-header[style*="background-position"] {
		background-position: center center !important;
	}
}

@media (max-width: 575px) {
	.page-header.page-header-background {
		min-height: 220px;
		background-position: center top !important;
	}

	.zia-hero {
		background-position: 80% center !important;
	}
}