/**
 * CWBC Home — BugHerd DeKalb #5 / #6 (Mike), applied on DEV for ChicagoWest too.
 * Scoped to .home so other templates stay untouched.
 */

/* #5 — Move hero arrows + pagination into the dark gray titles band (not over photo). */
@media (max-width: 991px) {
	.home .page-hero .background-image {
		overflow: visible !important;
	}

	.home .page-hero .background-image .swiper-image {
		overflow: visible !important;
		position: relative !important;
	}

	.home .page-hero .titles {
		padding-top: 70px !important;
	}

	.home .page-hero .background-image .swiper-image .slider-control .swiper-button-prev,
	.home .page-hero .background-image .swiper-image .slider-control .swiper-button-next,
	.home .page-hero .slider-control .swiper-button-prev,
	.home .page-hero .slider-control .swiper-button-next {
		top: auto !important;
		bottom: -55px !important;
		margin-top: 0 !important;
		z-index: 12 !important;
	}

	.home .page-hero .swiper-pagination,
	.home .page-hero .background-image .swiper-image .swiper-pagination {
		display: block !important;
		position: absolute !important;
		left: 60px !important;
		right: 60px !important;
		top: auto !important;
		bottom: -62px !important;
		width: auto !important;
		z-index: 11 !important;
		/* Same fix as DCC BugHerd #3 — the container spans the same width as
		 * the arrow track, so it must ignore pointer-events itself (only the
		 * visible dots stay clickable) or it silently blocks arrow clicks. */
		pointer-events: none !important;
	}

	.home .page-hero .swiper-pagination-bullet {
		pointer-events: auto !important;
	}
}

@media (max-width: 767px) {
	.home .page-hero .titles {
		padding-top: 56px !important;
	}

	.home .page-hero .background-image .swiper-image .slider-control .swiper-button-prev,
	.home .page-hero .background-image .swiper-image .slider-control .swiper-button-next,
	.home .page-hero .slider-control .swiper-button-prev,
	.home .page-hero .slider-control .swiper-button-next {
		width: 35px !important;
		height: 35px !important;
		top: auto !important;
		bottom: -42px !important;
		margin-top: 0 !important;
	}

	.home .page-hero .swiper-pagination,
	.home .page-hero .background-image .swiper-image .swiper-pagination {
		bottom: -48px !important;
	}
}

/* #6 — Gray separators between hamburger menu items (#3a3c44). Skip final CTA li. */
@media (max-width: 991px) {
	.home #navbarNavDropdown #main_nav_menu > li:not(:last-child) {
		border-bottom: 1px solid #3a3c44;
	}
}

/*
 * #11 — Hero body paragraph text was invisible on mobile: the base theme
 * only colors `.slide-control p` (real <p> tags), but the actual markup
 * wraps copy in `.slide-content-inner` (a plain <div>), which never
 * matched that selector and fell back to the sitewide default text color
 * (#32333c) — the EXACT color .page-hero uses as its solid mobile
 * background-color. Text and background were rendered in the identical
 * color, so it was present in the DOM but 100% invisible. Give the div its
 * own explicit color, same treatment already used on the DCC draft page.
 */
@media (max-width: 991px) {
	.home .page-hero .titles .slide-content-inner {
		color: #9597a1 !important;
	}

	.home .page-hero .titles .slide-control.active .slide-content-inner {
		color: #ffffff !important;
	}
}