/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
*/

/* ===== Custom CSS ===== */
html, body {
	overflow-x: hidden !important;
}

/* Hello Elementor's reset.css styles every bare <button> with a pink (#cc3366)
   border + text and a 0.3s transition. Any button restyled by a later- or
   footer-loaded stylesheet then visibly flashes from pink to its real colour on
   load. Neutralise that default here. This stylesheet is enqueued after
   reset.css (see functions.php), so these plain selectors win by source order.
   Components with their own styling (Elementor buttons, the calculator .pill,
   etc.) still override this exactly as before. */
button,
[type="button"],
[type="submit"] {
	border-color: transparent;
	color: inherit;
}
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	background-color: transparent;
	color: inherit;
}

/* ===== Newsletter subscribe form (Gravity Forms #1) =====
   Re-skins the default Gravity Forms markup into the inline pill layout:
   [rounded email input] [blue Subscribe pill], with privacy microcopy centred
   underneath. Scoped to GF's own auto-generated wrapper ID (#gform_wrapper_1)
   so it applies automatically wherever form #1 is placed — NO manual Elementor
   wrapper class is required. (.subscribe-form is kept as an optional extra hook
   in case the form is ever wrapped in one.) Only form #1 is affected.
   NOTE: three things must be set in the GF editor (CSS can't change them):
     1. Email field placeholder -> "your@email.com"
     2. Submit button text       -> "Subscribe"
     3. Email field is required (already is)
   The "Email (Required)" label and the form title are hidden here, so the
   shortcode's title="true" is harmless. */
#gform_wrapper_1 form,
.subscribe-form .gform_wrapper form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 560px;
	margin: 0 auto;
}

/* hide the "Subscribe" form title and the field's "Email (Required)" label */
#gform_wrapper_1 .gform_heading,
#gform_wrapper_1 .gform_title,
#gform_wrapper_1 .gfield_label,
.subscribe-form .gform_heading,
.subscribe-form .gform_title,
.subscribe-form .gfield_label {
	display: none !important;
}

/* the input column grows; the button column stays auto-width */
#gform_wrapper_1 .gform_body,
#gform_wrapper_1 .gform-body,
.subscribe-form .gform_body,
.subscribe-form .gform-body {
	flex: 1 1 280px;
	margin: 0;
}

/* GF lays fields out in a 12-col CSS grid by default — collapse to a block */
#gform_wrapper_1 .gform_fields,
.subscribe-form .gform_fields {
	display: block;
	grid-template-columns: none;
}
#gform_wrapper_1 .gfield,
#gform_wrapper_1 .ginput_container,
.subscribe-form .gfield,
.subscribe-form .ginput_container {
	margin: 0 !important;
	padding: 0 !important;
}

/* Equal control height for the input and the Subscribe button.
   Gravity Forms' "orbital" theme (gform-theme--orbital) sizes the email
   <input> and the submit <button> from its own --gf-ctrl-* variables, so a
   shared `padding` alone renders them at slightly different heights (the input
   ends up shorter). Pin BOTH to one explicit height with box-sizing:border-box
   and a matching min-height (to beat orbital's variable-driven min-height), and
   move to horizontal-only padding so the text vertically centres within that
   height. Change this single value to resize both together. */

/* rounded pill email input */
#gform_wrapper_1 input[type="email"],
.subscribe-form .gform_wrapper input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	height: 54px;
	min-height: 54px;
	border: 1px solid #d9dce3;
	border-radius: 9999px;
	padding: 0 24px;
	font-size: 16px;
	line-height: 1.2;
	color: #4b5563;
	background: #fff;
	box-shadow: none;
}
#gform_wrapper_1 input[type="email"]::placeholder,
.subscribe-form .gform_wrapper input[type="email"]::placeholder {
	color: #9aa1ad;
}
#gform_wrapper_1 input[type="email"]:focus,
.subscribe-form .gform_wrapper input[type="email"]:focus {
	outline: none;
	border-color: #2f6df6;
	box-shadow: 0 0 0 3px rgba(47, 109, 246, .15);
}

/* blue Subscribe pill — specificity beats the bare [type=submit] reset above */
#gform_wrapper_1 .gform_footer,
.subscribe-form .gform_footer {
	margin: 0 !important;
	padding: 0 !important;
	width: auto;
}
#gform_wrapper_1 .gform_footer input[type="submit"],
#gform_wrapper_1 .gform_footer button[type="submit"],
#gform_wrapper_1 #gform_submit_button_1,
#gform_wrapper_1.gform_wrapper .gform_footer input[type="submit"],
.subscribe-form .gform_footer input[type="submit"],
.subscribe-form .gform_footer button[type="submit"],
.subscribe-form .gform_wrapper .gform_footer input[type="submit"] {
	width: auto;
	box-sizing: border-box;
	height: 54px;
	min-height: 54px;
	background-color: #2f6df6;
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: 0 40px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
#gform_wrapper_1 .gform_footer input[type="submit"]:hover,
#gform_wrapper_1 .gform_footer input[type="submit"]:focus,
#gform_wrapper_1 .gform_footer button[type="submit"]:hover,
#gform_wrapper_1 .gform_footer button[type="submit"]:focus,
.subscribe-form .gform_footer input[type="submit"]:hover,
.subscribe-form .gform_footer input[type="submit"]:focus {
	background-color: #1f57d0;
	color: #fff;
}

/* privacy microcopy, centred under the form.
   NOTE: injected ONLY from the GF wrapper. If the form sits inside a
   .subscribe-form container, adding a .subscribe-form::after here too would
   render the line twice (one ::after per wrapper element), so don't. */
#gform_wrapper_1::after {
	content: "No spam. Unsubscribe anytime. We respect your privacy";
	display: block;
	text-align: center;
	color: #9aa1ad;
	font-size: 14px;
	margin-top: 16px;
}

/* validation message spacing, in case an invalid email is submitted */
#gform_wrapper_1 .validation_message,
.subscribe-form .gform_wrapper .validation_message {
	flex: 1 1 100%;
	margin-top: 6px;
	font-size: 13px;
}