/*
Theme Name: Brandon Child
Theme URI: http://themes.muffingroup.com/brandon
Template: brandon
Author: Avalanche Ice
Description: Child theme of Brandon, used to override footer.php (removes the parent-theme footer credit link) without losing changes on theme updates.
Version: 1.0.0
*/

@import url("../brandon/style.css");

/* ------------------------------------------------------------------
 * Mobile header fix: the client's logo image is wider than the
 * theme's default, so when centered it extends under the absolutely
 * positioned hamburger toggle (#Header a.responsive-menu-toggle),
 * which sits pinned to the right edge of the same container.
 * Reserve space for the toggle and left-align the logo instead of
 * centering it, so the two never overlap regardless of logo width.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
	#Header .logo {
		box-sizing: border-box;
		padding-right: 55px;
		text-align: left;
	}
	#Header .logo #logo {
		box-sizing: border-box;
		max-width: 100%;
	}
	#Header .logo img {
		max-width: 100%;
		height: auto;
	}
	/* Parent theme hardcodes top:55px for the toggle, tuned for a
	 * shorter default logo. This logo is taller, so its own vertical
	 * center sits lower in the header — recenter the toggle on it. */
	#Header a.responsive-menu-toggle {
		top: 50% !important;
		transform: translateY(-50%);
	}
}

/* ------------------------------------------------------------------
 * Mobile content fix: page-builder "text + image" columns contain
 * images with an inline `float:right; width:200px` style set directly
 * in the page content. In a narrow mobile column that leaves almost
 * no room for the text, which wraps to one word per line beside the
 * image. Drop the float and let the image sit above the text instead.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
	.content_wrapper .column_column img {
		float: none !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
		margin: 0 auto 15px;
	}
}

/* ------------------------------------------------------------------
 * Google Maps embed containment: the map wrapper (.google-map) is
 * position:static, so when the Maps JS API can't load (no/invalid
 * API key) it absolutely-positions its "can't load Google Maps"
 * notice relative to the nearest positioned ancestor instead — which
 * on mobile is .section_wrapper near the TOP of the page, so the
 * notice renders over the intro text instead of over the map. Giving
 * the map wrapper its own positioning context keeps any absolutely
 * positioned child (this notice, or real map controls once a valid
 * API key is configured) contained inside the map box itself.
 * ------------------------------------------------------------------ */
.column_map,
.google-map {
	position: relative;
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Homepage callback-form CTA ("Interested in leasing...?"): it was a
 * faint gray heading over flat gray fields on a background almost
 * identical to the page, with zero padding before the footer, so it
 * read as an afterthought despite being the site's main lead-capture
 * form. Turn it into a branded band using the site's actual active
 * color scheme — this site runs the "blue" skin (css/skins/blue/
 * style.css): #3D9BDD is the primary accent (buttons, highlights,
 * menu) and #2D547D is the submit-button/hover color that skin
 * already defines for input[type="submit"] everywhere else on the
 * site. Padding matches the theme's own CTA shortcode convention
 * (.call_to_action uses 30px 20px) rather than inventing new spacing.
 * ------------------------------------------------------------------ */
.quick_form {
	background: #3D9BDD;
	border-radius: 4px;
	padding: 35px 25px;
	margin: 0 0 30px;
}
.quick_form .title {
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.4;
	max-width: 680px;
	margin: 0 auto 25px;
}
/* The base theme lays the fields + button out with inline-block spans
 * and text-align:center. Whatever doesn't fit on the fields' line
 * wraps to its own centered line — and since CF7's loading spinner is
 * visibility:hidden (not display:none) while idle, it still occupies
 * ~290px of space on that second line right next to the button,
 * throwing the visible centering off. Flexbox sidesteps all of that:
 * fields and button sit in one deliberate row (wrapping as a whole on
 * narrow screens), and the spinner is taken out of flow so it can
 * never affect alignment, idle or submitting. */
.quick_form .wpcf7 form p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 15px;
}
.quick_form .wpcf7-form-control-wrap {
	flex: 1 1 200px;
	max-width: 280px;
	width: auto !important;
	margin-right: 0 !important;
}
.quick_form .wpcf7-text {
	background: #fff;
	border: none;
	border-radius: 3px;
	height: 46px;
	line-height: 46px;
}
.quick_form input[type="submit"] {
	flex: 0 0 auto;
	align-self: center;
	background: #2D547D;
	color: #fff;
	font-weight: 700;
	border-radius: 3px;
	height: 46px;
	line-height: 46px;
	padding: 0 35px;
	margin: 0;
	transition: background-color 0.2s ease;
}
/* Theme's default button has a decorative rotated-square "flag" via
 * :before/:after, positioned for the theme's own taller button
 * padding. This compact flat button doesn't use that style, so the
 * flag ends up misplaced — drop it instead of trying to recalibrate
 * its position for custom dimensions. */
.quick_form input[type="submit"]:before,
.quick_form input[type="submit"]:after {
	content: none;
	display: none;
}
.quick_form input[type="submit"]:hover {
	background: #244669;
}
.quick_form .wpcf7-spinner {
	position: absolute !important;
	margin-left: 10px;
}
@media only screen and (max-width: 767px) {
	.quick_form .title {
		font-size: 19px;
	}
	.quick_form .wpcf7-form-control-wrap,
	.quick_form input[type="submit"] {
		flex-basis: 100%;
		max-width: 100%;
	}
}