/**
 * Landing page header/footer styles.
 * Loaded ONLY by single-landing-page.php, so nothing here affects the rest of the site.
 *
 * Values measured from https://marine.libertyawningsandshades.com/ :
 *   container 1140px | header bar 110px tall, #fff | logo 50px tall
 *   nav/call link  Lato 600 18px/18px  #3E3E3E
 *   footer  40px 0 padding, two 50% columns, Lato 10px/16px #3A3A3A
 *
 * Note: marine's dark top bar (.top-widget, phone + social icons) is display:none on the
 * live site, so it is intentionally not reproduced here.
 */

.las-landing {
	margin: 0;
	background: #fff;
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #3a3a3a;
}

.las-landing *,
.las-landing *::before,
.las-landing *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- header */

.las-lp-header {
	background: #fff;
	width: 100%;
}

.las-lp-header__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.las-lp-header__logo a {
	display: block;
	line-height: 0;
}

.las-lp-header__logo img {
	height: 50px;
	width: auto;
	max-width: none;
	max-height: 50px;
	display: block;
}

.las-lp-header__call {
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	color: #3e3e3e;
	text-decoration: none;
	white-space: nowrap;
}

.las-lp-header__call:hover,
.las-lp-header__call:focus {
	color: #8c2e13;
	text-decoration: none;
}

/* ----------------------------------------------------------------- main */

.las-lp-main {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------- footer */

.las-lp-footer {
	padding: 40px 0;
	background: #fff;
	width: 100%;
}

.las-lp-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.las-lp-footer__col {
	width: 50%;
	padding: 0 7.5px;
}

.las-lp-footer__col p {
	margin: 0 0 16px;
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: 16px;
	font-weight: 400;
	color: #3a3a3a;
}

.las-lp-footer__col p:last-child {
	margin-bottom: 0;
}

.las-lp-footer__col strong {
	font-weight: 700;
	color: #3a3a3a;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 767px) {
	.las-lp-header__inner {
		min-height: 80px;
		padding: 12px 16px;
		gap: 12px;
	}

	.las-lp-header__logo img {
		height: 40px;
		max-height: 40px;
	}

	.las-lp-header__call {
		font-size: 16px;
	}

	.las-lp-footer__inner {
		padding: 0 16px;
	}

	.las-lp-footer__col {
		width: 100%;
		padding: 0;
	}

	.las-lp-footer__col:first-child {
		margin-bottom: 24px;
	}
}

/* Screen-reader-only skip link, since the theme's own stylesheet is not loaded here. */
.las-landing .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.las-landing .screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 16px;
	clip: auto;
	background: #fff;
	color: #3a3a3a;
}

/*
 * The site loads a global inline rule:  p { font-size:18px; margin:10px 5px 20px auto;
 * padding-left:0 } ALL !important. !important beats specificity, so these declarations must
 * be !important too in order to restore marine's 10px/16px footer text. Scoped to the footer
 * columns only - nothing else on the page is touched.
 */
.las-lp-footer__col p {
	font-size: 10px !important;
	line-height: 16px !important;
	margin: 0 0 16px !important;
	padding-left: 0 !important;
}

.las-lp-footer__col p:last-child {
	margin-bottom: 0 !important;
}

/* ==========================================================================
 * Gravity Forms sitting on a landing-page hero image (.las-hero-form).
 *
 * Nothing is "overriding" Gravity Forms here - the opposite. marine's vds theme ships its own
 * GF styling; this site uses GF's stock Orbital theme, whose labels are dark navy (#112337)
 * and therefore unreadable on a dark hero photo. These rules reproduce marine's treatment,
 * measured from the live page: white 14px labels, white 30px inputs with a 1px grey border and
 * square corners, 16px grid row-gap, and a full-width #963A23 submit button.
 *
 * Scoped to .las-hero-form so a form placed on a light background elsewhere on a landing page
 * keeps GF's normal dark-on-light styling.
 * ========================================================================== */

.las-hero-form .gform_wrapper .gform_fields {
	row-gap: 16px;
}

.las-hero-form .gform_wrapper .gfield_label,
.las-hero-form .gform_wrapper .gform_required_legend {
	color: #fff;
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 4px;
}

.las-hero-form .gform_wrapper .gfield_required {
	color: #ffb4a2;
}

/*
 * Only text that sits directly ON the hero photo goes white. The file-upload drop zone has its
 * own WHITE panel, so its inner text must keep Gravity Forms' default dark colour - making
 * .gform_drop_instructions white turned "Drop files here or" invisible.
 */
.las-hero-form .gform_wrapper .gfield_description,
.las-hero-form .gform_wrapper .ginput_preview {
	color: #fff;
	font-size: 13px;
}

.las-hero-form .gform_wrapper input[type="text"],
.las-hero-form .gform_wrapper input[type="email"],
.las-hero-form .gform_wrapper input[type="tel"],
.las-hero-form .gform_wrapper input[type="url"],
.las-hero-form .gform_wrapper input[type="number"],
.las-hero-form .gform_wrapper select,
.las-hero-form .gform_wrapper textarea {
	background-color: #fff;
	color: #000;
	border: 1px solid #767676;
	border-radius: 0;
	padding: 4px 10px;
	font-size: 15px;
	min-height: 30px;
	line-height: 1.4;
	width: 100%;
}

/*
 * !important is required here. Gravity Forms' framework/Orbital theme colours the submit button
 * through its own custom-property chain (--gf-ctrl-btn-bg-color-primary -> --gf-color-primary,
 * default #204ce5), which outranks a plain scoped rule. Confined to .las-hero-form, so no other
 * Gravity Form on the site is affected.
 */
.las-hero-form .gform_wrapper .gform_footer input[type="submit"],
.las-hero-form .gform_wrapper .gform_footer button,
.las-hero-form .gform_wrapper .gform-footer input[type="submit"],
.las-hero-form .gform_wrapper .gform-footer button {
	background: #963a23 !important;
	background-color: #963a23 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 14px 36px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	width: 100% !important;
	inline-size: 100% !important;
	cursor: pointer;
}

.las-hero-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.las-hero-form .gform_wrapper .gform_footer button:hover,
.las-hero-form .gform_wrapper .gform-footer input[type="submit"]:hover,
.las-hero-form .gform_wrapper .gform-footer button:hover {
	background: #7d301d !important;
	background-color: #7d301d !important;
}

/*
 * Vertically centre the hero's text column against the much taller form column, matching
 * marine's hero (display:flex; align-items:center). Elementor emits --align-items:center for
 * this container but another rule resets the variable to flex-start, so set it outright.
 * Desktop only - below the tablet breakpoint the columns stack and centring would be wrong.
 */
@media (min-width: 1025px) {
	.las-hero-form .e-con-inner > .e-con {
		align-items: center;
	}
}

/* "Max. file size" sits below the panel, on the photo, so it does go white. */
.las-hero-form .gform_wrapper .gform_fileupload_rules,
.las-hero-form .gform_wrapper .gfield_upload_rules {
	color: #fff;
}

/*
 * File-upload drop zone, styled to sit ON the hero photo: transparent panel with a dashed white
 * border, white prompt text, and a light "Select files" button. GF's default is a solid white
 * panel with a blue button and a cloud glyph (a ::before pseudo-element), all of which is
 * overridden here. !important is needed for the same reason as the submit button - GF's theme
 * drives these through its own custom-property chain.
 */
.las-hero-form .gform_wrapper .gform_drop_area {
	background: transparent !important;
	background-color: transparent !important;
	border: 2px dashed #fff !important;
	border-radius: 0 !important;
	padding: 22px 16px !important;
	text-align: center;
}

/* GF's cloud glyph is a pseudo-element on the drop area. */
.las-hero-form .gform_wrapper .gform_drop_area::before,
.las-hero-form .gform_wrapper .gform_drop_area::after {
	display: none !important;
	content: none !important;
}

.las-hero-form .gform_wrapper .gform_drop_instructions {
	display: block;
	color: #fff !important;
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 12px;
}

.las-hero-form .gform_wrapper .gform_button_select_files {
	background: #f1f1f1 !important;
	background-color: #f1f1f1 !important;
	color: #333 !important;
	border: 0 !important;
	border-radius: 3px !important;
	padding: 9px 22px !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	width: auto !important;
	inline-size: auto !important;
}

.las-hero-form .gform_wrapper .gform_button_select_files:hover {
	background: #e3e3e3 !important;
	background-color: #e3e3e3 !important;
}

/*
 * SELECT dropdown arrow.
 * Gravity Forms draws the arrow as a background-image and swaps it on hover/focus with the
 * `background` SHORTHAND (var(--gf-ctrl-select-icon-hover)). A shorthand resets background-repeat
 * to `repeat` and position to 0 0, so the little chevron tiled across the whole control - that was
 * the "weird zigzag overlay" on hover. Forcing repeat/position/size keeps a single arrow on the
 * right in every state. (This is also why the base rule above uses background-color, not the
 * `background` shorthand - the shorthand would wipe GF's arrow entirely.)
 */
.las-hero-form .gform_wrapper select,
.las-hero-form .gform_wrapper select:hover,
.las-hero-form .gform_wrapper select:focus,
.las-hero-form .gform_wrapper select:focus-visible {
	background-color: #fff !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 16px auto !important;
	padding-right: 32px;
}

/*
 * In-page CTA buttons (Elementor button widget).
 * The site's Elementor kit puts `border: 1px solid #fff` on every .elementor-button. Setting the
 * widget's own border control to "none" emits nothing, so the kit rule survives - clear it here.
 * Full width comes from the widget's align="justify" setting in the page data, not from CSS.
 */
.las-landing .elementor-button,
.las-landing .elementor-button:hover,
.las-landing .elementor-button:focus {
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
}

/*
 * Let Elementor's own typography win inside text widgets on landing pages.
 *
 * The site ships a global inline rule `p { font-size:18px; margin:10px 5px 20px auto;
 * padding-left:0 } ALL !important` (see the footer rules above). Elementor applies a text
 * widget's font-size to the WIDGET element, leaving the inner <p> to inherit - but that global
 * !important beats inheritance, so every custom text size set in the builder was silently
 * ignored (testimonial quotes stayed 18px instead of 14px, feature captions stayed 18px
 * instead of 16px). Forcing the <p> to inherit restores Elementor's intended sizes without
 * hard-coding any single value.
 */
.las-landing .elementor-widget-text-editor p {
	font-size: inherit !important;
	line-height: inherit !important;
	margin: 0 0 1em !important;
	padding-left: 0 !important;
}

.las-landing .elementor-widget-text-editor p:last-child {
	margin-bottom: 0 !important;
}

/* Hero feature bullets sit on the photo and need no list indent. */
.las-landing .las-hero-form .elementor-widget-text-editor ul {
	list-style: none;
	margin: 0;
	padding: 0;
}