/**
 * Concrete CMS 9.x compatibility + responsive fixes for Surge (Bootstrap 3 theme).
 * cms.css (Bootstrap 5) loads when logged in and can break floats/absolute header.
 */

html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* If a C9 announcement modal backdrop is left open it blocks all clicks */
body.modal-open:not(:has(#concrete-announcement-modal.show)):not(:has(.modal.show)) {
	overflow: auto;
}
body.modal-open:not(:has(#concrete-announcement-modal.show)):not(:has(.modal.show)) .modal-backdrop {
	display: none !important;
	pointer-events: none !important;
}

/* Service request tile grid — live uses 2 on top, 1 centered below when 3 tiles */
.bdr-service-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
	max-width: 560px;
	margin: 0 auto 20px;
	padding: 0 10px;
}
.bdr-service-tiles a {
	display: block;
	flex: 0 1 250px;
	max-width: 250px;
}
.bdr-service-tiles--live {
	max-width: 560px;
}
.bdr-service-tiles--live a:nth-child(3) {
	flex-basis: 250px;
}
.bdr-service-tiles img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 250px;
	border: 0;
}

/* Isolate theme navbar from BS5 cms.css flex/nav rules (desktop+) */
@media (min-width: 992px) {
	#header.navbar {
		display: block !important;
		flex-wrap: unset !important;
		flex-direction: unset !important;
	}
	#header .container {
		display: block !important;
	}
	#header .row {
		display: block !important;
	}
	#header .navbar-header {
		display: block !important;
		float: left;
	}
	#header #header-top-right {
		display: block !important;
		float: right;
	}
	#header #main-navigation {
		display: block !important;
		clear: both;
		width: 100%;
	}
	#header #main-navigation nav.pull-right {
		float: right !important;
	}
	#header ul#menu.nav.navbar-nav {
		display: block !important;
		float: right !important;
		margin: 0 !important;
		padding: 0 !important;
		flex-direction: unset !important;
		flex-wrap: unset !important;
		width: auto !important;
		height: auto !important;
	}
	#header ul#menu.nav > li {
		float: left !important;
		display: list-item !important;
		position: relative !important;
		margin: 0 5px 0 0 !important;
		padding: 0 !important;
		/* Same as live — no special active/selected color */
		border-radius: 7px !important;
		background: rgba(3, 124, 84, 0.8) !important;
		height: auto !important;
		width: auto !important;
	}
	/* Keep selected/path items identical to other nav buttons (live has no active style) */
	#header ul#menu.nav > li.nav-selected,
	#header ul#menu.nav > li.nav-path-selected,
	#header ul#menu.nav > li.nav-selected.nav-path-selected {
		background: rgba(3, 124, 84, 0.8) !important;
	}
	#header ul#menu.nav > li:hover {
		background-color: #01452F !important;
	}
	/*
	 * Live Surge nav link styles from main.css only — do not invent active styles.
	 * Override Bootstrap 3 desktop padding (15px) that makes buttons look larger.
	 */
	#header.navbar .nav > li > a,
	#header.navbar .navbar-nav > li > a,
	#header ul#menu.nav > li > a {
		display: block !important;
		float: none !important;
		padding: 10px 18px !important;
		margin: 0 !important;
		color: #ffffff !important;
		text-decoration: none !important;
		text-shadow: none !important;
		background: transparent !important;
		border: 0 !important;
		font-family: "Montserrat", Helvetica, sans-serif !important;
		font-weight: normal !important;
		font-size: inherit !important;
		line-height: normal !important;
		height: auto !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
	}
	.slicknav_menu {
		display: none !important;
	}
}

/* Phone + tablet: hamburger only — hide desktop button nav */
@media (max-width: 991px) {
	#header.navbar {
		display: block !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
	}
	#header .navbar-header,
	#header #header-top-right {
		float: none !important;
		width: 100% !important;
		text-align: center;
		display: block !important;
	}
	#header #header-top-right .pull-right {
		float: none !important;
	}
	#header #main-navigation {
		display: none !important;
	}
	#header ul#menu.nav.navbar-nav,
	.js #menu,
	#menu {
		display: none !important;
	}
	.js .slicknav_menu,
	.slicknav_menu {
		display: block !important;
		width: 100%;
		clear: both;
	}
	#responsive-nav {
		margin-top: 10px;
		width: 100%;
		clear: both;
	}
	body#Home .ccm-page #header,
	body#Home.home_boxes .ccm-page #header,
	body#Home #header.navbar {
		position: relative !important;
		background-color: #fff;
	}
	body#Home .ccm-page #header > .container,
	body#Home #header > .container {
		padding: 15px 15px 0 !important;
		background-color: #fff !important;
	}
	.buckets .col-sm-4,
	.buckets .col1,
	.bucket,
	.box-label,
	.bucketnotrans {
		width: 100% !important;
		float: none !important;
		margin: 0 0 20px !important;
		max-width: 100%;
	}
	/* Amenities bullets: 7% background-position overlaps text when column is full-width */
	.buckets .col1 ul {
		padding: 10px 0 0 0 !important;
	}
	.buckets .col1 ul li {
		width: 100% !important;
		box-sizing: border-box;
		background-position: 12px center !important;
		padding-left: 48px !important;
		padding-right: 12px !important;
	}
	.container {
		padding-left: 15px;
		padding-right: 15px;
		width: 100% !important;
		max-width: 100%;
	}
	#logo img,
	#logo img.img-responsive {
		display: inline-block;
		max-width: 100%;
		height: auto;
	}
	#video-banner .hero {
		height: 180px;
	}
	#video-banner .hero > video {
		min-height: 180px;
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	.bdr-service-tiles a {
		flex: 0 1 calc(50% - 16px);
		max-width: 280px;
	}
}

/* Phones: compact hero + single-column tiles */
@media (max-width: 767px) {
	body#Home .hero-container {
		display: block !important;
		height: 220px !important;
		min-height: 220px !important;
		max-height: 220px;
		overflow: hidden;
		position: relative !important;
	}
	body#Home .hero-container__img,
	body#Home .video-container.enabled {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: 220px !important;
		opacity: 1 !important;
	}
	body#Home .video-container.enabled video.hero-video {
		display: block !important;
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 220px !important;
		object-fit: cover;
		opacity: 1 !important;
	}
	body#Home .hero-slide:empty {
		display: none !important;
	}
	.bdr-service-tiles a {
		flex: 0 1 100%;
		max-width: 100%;
	}
	#video-banner .hero {
		height: 160px;
	}
	#video-banner .hero > video {
		min-height: 160px;
		height: 160px;
	}
}

/* Kill Bootstrap row gutters that cause ~15px horizontal scroll */
@media (max-width: 991px) {
	.container > .row,
	.ccm-page .container .row,
	#header .container .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.container {
		max-width: 100%;
	}
}


/* Guest home: keep overlay header (desktop) */
@media (min-width: 992px) {
	body#Home .ccm-page #header,
	body#Home.home_boxes .ccm-page #header {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 5;
	}
	body#Home .ccm-page #header > .container {
		padding: 15px 0 0;
		background-color: transparent;
	}
	body#Home .hero-container {
		display: block !important;
		height: 500px;
		min-height: 500px;
		position: relative;
		z-index: 0;
		overflow: hidden;
	}
	body#Home .hero-container__img,
	body#Home .video-container.enabled,
	body#Home .video-container.enabled video.hero-video {
		display: block !important;
		opacity: 1 !important;
	}
}

/* Tablet home: relative header + full-width hero */
@media (min-width: 768px) and (max-width: 991px) {
	body#Home .ccm-page #header,
	body#Home #header.navbar {
		position: relative !important;
		background-color: #fff;
	}
	body#Home .hero-container {
		display: block !important;
		height: 360px !important;
		min-height: 360px !important;
		overflow: hidden;
	}
	body#Home .hero-container__img,
	body#Home .video-container.enabled,
	body#Home .video-container.enabled video.hero-video {
		display: block !important;
		opacity: 1 !important;
		width: 100%;
		height: 360px;
		object-fit: cover;
	}
}

/* Logged-in / toolbar: document-flow header */
html.ccm-toolbar-visible body#Home .ccm-page #header,
html.ccm-toolbar-visible body#Home #header.navbar,
html.ccm-panel-ready body#Home .ccm-page #header {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	z-index: 5;
}
html.ccm-toolbar-visible body#Home .ccm-page #header > .container,
html.ccm-toolbar-visible body#Home #header > .container {
	background-color: #fff !important;
	padding: 15px !important;
}
html.ccm-toolbar-visible body {
	padding-top: 48px;
}
@media (min-width: 992px) {
	html.ccm-toolbar-visible body#Home .hero-container,
	html.ccm-panel-ready body#Home .hero-container {
		display: block !important;
		height: 500px !important;
		min-height: 500px !important;
	}
}
html.ccm-panel-ready body#Home div.ccm-page,
html.ccm-toolbar-visible body#Home div.ccm-page {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	transform: none !important;
}

body#Home .buckets {
	position: relative;
	z-index: 1;
	clear: both;
}
#logo img.img-responsive {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/* Gallery: stack on phones */
@media (max-width: 767px) {
	.ccm-gallery,
	.ccm-gallery table,
	.ccm-gallery tbody,
	.ccm-gallery tr,
	.ccm-gallery td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.ccm-gallery tbody tr td {
		padding: 0 12px 12px !important;
	}
	.ccm-gallery tbody tr td img {
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
	}
}

/* Forms: kill negative side margins that cause horizontal scroll */
@media (max-width: 767px) {
	.bdr-form-wrap form.ccm-ui.proform_slider,
	form.ccm-ui.proform_slider.bdr-form {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.text,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.email,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.phone,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.textarea,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.text_display {
		width: 100% !important;
		float: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.bdr-form-wrap form.ccm-ui.proform_slider .proforms_submit_group {
		margin-left: 0 !important;
	}
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.text input,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.email input,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.phone input,
	.bdr-form-wrap form.ccm-ui.proform_slider .clearfix.textarea textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* Service request image tiles */
@media (max-width: 767px) {
	.ccm-page img[alt$="-sr.png"],
	.ccm-page img[alt$="_sr.jpg"],
	.ccm-page img[alt$="-sr.jpg"] {
		max-width: 100%;
		height: auto;
	}
}

/* Common Area Booking calendar */
.bdr-calendar-wrap {
	text-align: center;
	margin: 0 auto;
	width: 100%;
}
.bdr-calendar-wrap iframe {
	display: inline-block;
	max-width: 100%;
	margin: 0 auto;
}