/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://mitsikeli.com
 Description:  Hello Elementor child theme with Lenis, GSAP and ScrollTrigger.
 Author:       Mitsikeli
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* Plain Elementor buttons: circle arrow slides to the other side on hover */
.elementor-button {
	--swap-circle: 3.4em;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: visible !important;
	height: var(--swap-circle) !important;
	padding-left: 1.7em !important;
	padding-right: calc(var(--swap-circle) + 0.5em) !important;
	border-radius: 999px !important;
	background-color: #111 !important;
	color: #fff !important;
	fill: #fff !important;
	transition: padding 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Hide any real Elementor icon element so it doesn't double up with the generated circle. */
.elementor-button .elementor-button-icon {
	display: none !important;
}

.elementor-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--swap-circle);
	height: var(--swap-circle);
	border-radius: 50%;
	background-color: inherit;
	background-image: url("/wp-content/uploads/2026/09/New-Project.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38%;
	transform: translateY(-50%);
	transition: right 0.45s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
}

/*
 * Arrow image on every button's ::after. The Customizer's Additional CSS sets
 * `background:` shorthand on .elementor-button::after (and !important white on
 * the #masthead one), which wipes any background-image set above, so these
 * repeat the image with enough specificity to win. New-Project.png is a white
 * arrow for the dark circles; the white header circle gets the dark
 * New-Project-1.png.
 */
body .elementor-button::after {
	background-image: url("/wp-content/uploads/2026/09/New-Project.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
}

body #masthead .elementor-button::after {
	background-image: url("/wp-content/uploads/2026/09/New-Project-1.png") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 55% !important;
}

.elementor-button:hover {
	padding-left: calc(var(--swap-circle) + 0.5em) !important;
	padding-right: 1.7em !important;
}

.elementor-button:hover::after {
	right: calc(100% - var(--swap-circle));
}

/* Contact Form 7: minimal underline fields, matching mitsikeli.com/contact-us */
.wpcf7-form {
	max-width: 60rem;
	font-family: "Cera-Pro", sans-serif;
}

.wpcf7-form .row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 3rem;
	row-gap: 2.75rem;
}

.wpcf7-form .row .col-lg-6 {
	flex: 1 1 calc(50% - 1.5rem);
	min-width: 240px;
}

.wpcf7-form .col-lg-12 {
	width: 100%;
	margin-top: 2.75rem;
}

.wpcf7-form p {
	margin: 0;
}

/* Text / email / tel inputs, select and textarea: underline only, no box */
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control {
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 0;
	background: transparent;
	padding: 0 0 1rem;
	font-family: inherit;
	font-size: 1.1rem;
	color: #111;
	outline: none;
	transition: border-color 0.3s ease;
}

.wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7-form textarea.wpcf7-form-control::placeholder {
	color: #111;
	opacity: 1;
}

.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus {
	border-bottom-color: #111;
}

.wpcf7-form textarea.wpcf7-form-control {
	resize: vertical;
	min-height: 2.5em;
}

/* Select: strip native chrome, add a custom chevron */
.wpcf7-form select.wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2em;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 1.1em;
}

/* Checkboxes / acceptance */
.wpcf7-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-list-item-label {
	margin-left: 0.5em;
}

.wpcf7-form input[type="checkbox"] {
	width: 1.1em;
	height: 1.1em;
	accent-color: #111;
	vertical-align: middle;
	cursor: pointer;
}

.wpcf7-form .wpcf7-acceptance a {
	color: inherit;
	text-decoration: underline;
}

/* Submit button: rounded left cap, square right, concave notch cut into the top-right corner */
.wpcf7-form input.wpcf7-submit {
	--notch: 1.4em;
	position: relative;
	display: inline-block;
	width: auto;
	border: none;
	border-radius: 999px 0 0 999px;
	background-color: #111;
	color: #fff;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	padding: 1.15em 2.2em 1.15em 2em;
	cursor: pointer;
	-webkit-mask-image: radial-gradient(circle var(--notch) at 100% 0%, transparent 99%, #000 100%);
	mask-image: radial-gradient(circle var(--notch) at 100% 0%, transparent 99%, #000 100%);
	transition: opacity 0.3s ease;
}

.wpcf7-form input.wpcf7-submit:hover {
	opacity: 0.85;
}

.wpcf7-form .wpcf7-spinner {
	margin-left: 0.75em;
}