/**
Theme Name: deepfluid Child-Theme
Author: jut-so GmbH
Author URI: https://jut-so.de
Description: deepfluid Custom Child Theme basierend auf dem Hello Elementor Theme. 
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jut-so-child-theme
Template: hello-elementor
*/

/* variable.css and layout.css included via functions.php */

/* Default headline margins
 * Note: Pay attention to widget spacing. 
 * When using heading widget, margin-bottom is set to 0
 * then the spacing is controlled by the widget spacing
  .elementor-widget.elementor-widget.elementor-widget-heading .elementor-widget-container 
 */

body {
	-webkit-font-smoothing: antialiased;
	/* requested by design for retina displays */
	font-synthesis:none;
}
/* iOs horizontal scroll fix */
html,body {
	overflow-x:hidden;
}

h1, h2, h3, h4, h5, h6,
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6 {
	margin: .5em 0 .5em 0;
}

/* Utility classes for headlines */
.h1,
.h1 .elementor-heading-title,
[class*="elementor-kit-"] .h1 {
    font-family: var(--h1-font-family);
	color: var(--h1-default-color);
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
	font-weight: var(--h1-font-weight);
}

.h2,
.h2 .elementor-heading-title,
[class*="elementor-kit-"] .h2 {
    font-family: var(--h2-font-family);
	color: var(--h2-default-color);
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	font-weight: var(--h2-font-weight);
}

.h3,
.h3 .elementor-heading-title,
[class*="elementor-kit-"] .h3 {
    font-family: var(--h3-font-family);
	color: var(--h3-default-color);
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	font-weight: var(--h3-font-weight);
}

.h4,
.h4 .elementor-heading-title,
[class*="elementor-kit-"] .h4 {
    font-family: var(--h4-font-family);
	color: var(--h4-default-color);
	font-size: var(--h4-font-size);
	line-height: var(--h4-line-height);
	font-weight: var(--h4-font-weight);
}
main .elementor-widget-text-editor a {
	transition: all 0.2s ease;
}
main .elementor-widget-text-editor a:hover {
	color: var(--primary500) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

::-moz-selection {
    background: #7D1E5A;
    color: #fff
}

::selection {
    background: #7D1E5A;
    color: #fff
}

/* Secondary button */
.secondary-button .elementor-button {
	color: var(--light-green);
    background-color: transparent;
    border-style: solid;
    border-color: var(--light-green);
}

.soft-shadow-300 {
	box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.04), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.03), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.02), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.02), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.02), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.01);
}
.soft-shadow-300-center {
	box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.04), 0 0 33.422px 0 rgba(0, 0, 0, 0.03), 0 0 17.869px 0 rgba(0, 0, 0, 0.02), 0 0 10.017px 0 rgba(0, 0, 0, 0.02), 0 0 5.32px 0 rgba(0, 0, 0, 0.02), 0 0 2.214px 0 rgba(0, 0, 0, 0.01);
}

/* Icon buttons */
.icon-btn {
	--icon-btn-size: 1.25em;
}

.icon-btn svg {
	width: var(--icon-btn-size);
	height: var(--icon-btn-size);
}

.icon-btn .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap:8px;
}

/* Icon button hover: crossfade + slide between chevron (default) and arrow (::after) SVGs */
.down-btn .elementor-button-icon,
.right-btn .elementor-button-icon,
.light-btn .elementor-button-icon {
	--icon-btn-size: 1.25em;
	--icon-transition-duration: 0.2s;
	--icon-transition-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--icon-slide-x: 15%;
	--icon-slide-y: 8%;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-btn-size);
	height: var(--icon-btn-size);
	flex-shrink: 0;
	overflow: hidden;
}

.down-btn .elementor-button-icon svg,
.right-btn .elementor-button-icon svg,
.light-btn .elementor-button-icon svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 1;
	transition:
		transform var(--icon-transition-duration) var(--icon-transition-ease),
		opacity calc(var(--icon-transition-duration) * 0.75) ease-out;
}

.down-btn .elementor-button-icon::after,
.right-btn .elementor-button-icon::after,
.light-btn .elementor-button-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition:
		transform var(--icon-transition-duration) var(--icon-transition-ease),
		opacity calc(var(--icon-transition-duration) * 0.75) ease-out;
}

.down-btn .elementor-button-icon::after {
	background-image: url("/wp-content/uploads/arrow_down-1.svg");
	transform: translateY(calc(var(--icon-slide-y) * -1));
}

.right-btn .elementor-button-icon::after {
	background-image: url("/wp-content/uploads/arrow_right.svg");
	transform: translateX(calc(var(--icon-slide-x) * -1));
}

.light-btn .elementor-button-icon::after {
	background-image: url("/wp-content/uploads/arrow_forward-prim-clr-hover.svg");
	transform: translateX(calc(var(--icon-slide-x) * -1));
}

.down-btn:hover .elementor-button-icon svg {
	opacity: 0;
	transform: translateY(var(--icon-slide-y));
}

.right-btn:hover .elementor-button-icon svg,
.light-btn:hover .elementor-button-icon svg {
	opacity: 0;
	transform: translateX(var(--icon-slide-x));
}

.down-btn:hover .elementor-button-icon::after,
.right-btn:hover .elementor-button-icon::after,
.light-btn:hover .elementor-button-icon::after {
	opacity: 1;
	transform: translate(0, 0);
}

.card-border {
	border: 1.5px solid var(--neutralwhite20percent) !important;
	border-radius:12px;
}

.card-drop-shadow {
	box-shadow: 0 0 80px 0 rgba(113, 250, 255, 0.04), 0 0 33.422px 0 rgba(113, 250, 255, 0.03), 0 0 17.869px 0 rgba(113, 250, 255, 0.02), 0 0 10.017px 0 rgba(113, 250, 255, 0.04);
}

.cyan-text {
	color: var(--secondary300);
}

.divider-line {
	height: 100%;
	width: 1.5px;
	background-color: var(--neutralwhite20percent);
}

.divider-line.dark-line {
	background-color: var(--neutral300);
}

@media (max-width: 767px) {
	.divider-line {
		height: 1.5px;
		width: 100%;
	}
}

.text-page-content h2,
.text-page-content h3,
.text-page-content h4 {
	color: #111111D9 !important;
	margin-bottom:0.5em;
}
.text-page-content h2,
.text-page-content h3,
.text-page-content h4 {
	margin-top:1em;
}
.text-page-content h2:first-of-type {
	margin-top:0;
}

/* ---- Shared by both versions ---- */
.light-gradient-btn a,
.dark-gradient-btn a {
  position: relative;
  border-radius: 4px;
}
@media (max-width: 1024px) {
	.light-gradient-btn a,
	.dark-gradient-btn a {
		border-radius: 8px;
	}
}

/* Base ring (always visible) + gradient ring (fades in) share all geometry */
.light-gradient-btn a::before,
.light-gradient-btn a::after,
.dark-gradient-btn a::before,
.dark-gradient-btn a::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;                 /* border thickness */
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Both layers transition opacity now */
.light-gradient-btn a::before,
.light-gradient-btn a::after,
.dark-gradient-btn a::before,
.dark-gradient-btn a::after {
  transition: opacity .25s ease;
}

/* Base ring: visible at rest, fades OUT on hover */
.light-gradient-btn a::before,
.dark-gradient-btn a::before {
  opacity: 1;
}
.light-gradient-btn a:hover::before,
.dark-gradient-btn a:hover::before {
  opacity: 0;
}

/* Gradient ring: hidden at rest, fades IN on hover (unchanged) */
.light-gradient-btn a::after,
.dark-gradient-btn a::after {
  opacity: 0;
}
.light-gradient-btn a:hover::after,
.dark-gradient-btn a:hover::after {
  opacity: 1;
}

/* ---- Dark version ---- */
.dark-gradient-btn a::before {
  background: #4511BE;           /* base ring */
}
.dark-gradient-btn a::after {
  background: linear-gradient(
    90deg,
    #4511BE 0%,
    #3A999D 25%,
    #71FAFF 50%,
    #3A999D 75%,
    #4511BE 100%
  );
}

/* ---- Light version ---- */
.light-gradient-btn a::before {
  background: #fff;              /* base ring */
}
.light-gradient-btn a::after {
  background: linear-gradient(
    90deg,
    #270A4F 0%,
    #7D1E5A 60%,
    #E65A4D 80%,
    #FFB647 100%
  );
}

.elementor-kit-8 button, 
.elementor-kit-8 input[type="button"], 
.elementor-kit-8 input[type="submit"], 
.elementor-kit-8 .elementor-button,
.jutso-carousel__button,
.jutso-hover-item-box__tag {
	border-radius: 4px !important;
}
@media (max-width: 1024px) {	
	.elementor-kit-8 button, 
	.elementor-kit-8 input[type="button"], 
	.elementor-kit-8 input[type="submit"], 
	.elementor-kit-8 .elementor-button,
	.jutso-carousel__button,
	.jutso-carousel__button,
	.jutso-hover-item-box__tag {
		border-radius: 8px !important;
	}
}

.elementor-message {
	margin-top: 32px !important;
}
.elementor-message.elementor-message-danger:before,
.elementor-message.elementor-message-success:before {
	display: none !important;
}

.deepfluid-form input:focus,
.deepfluid-form input:focus-visible,
.deepfluid-form textarea:focus,
.deepfluid-form textarea:focus-visible,
.deepfluid-form select:focus,
.deepfluid-form select:focus-visible {
	border-color: var(--primary500) !important;
}

/* Custom acceptance checkbox — .deepfluid-form */
.deepfluid-form .elementor-field-type-acceptance .elementor-field-option {
	position: relative;
}

.deepfluid-form .elementor-field-type-acceptance .elementor-field-option label {
	display: block;
	margin: 0;
	padding-left: 24px;
	position: relative;
	cursor: pointer;
}

.deepfluid-form .elementor-field-type-acceptance .elementor-field-option label::before {
	content: '';
	position: absolute;
	left: 0;
	top:1px;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	border: 1.5px solid #DDE3ED;
	background-color: #F5F7FA;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px;
	box-sizing: border-box;
	pointer-events: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.deepfluid-form .elementor-field-type-acceptance .elementor-acceptance-field:checked + label::before {
	background-color: var(--primary500);
	border-color: var(--primary500);
	background-image: url("/wp-content/uploads/checkmark-white.svg");
}

.deepfluid-form .elementor-field-type-acceptance .elementor-acceptance-field {
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0 !important;
	min-height: unset !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.deepfluid-form .elementor-field-type-acceptance .elementor-acceptance-field:focus-visible + label::before {
	outline: 2px solid var(--primary500);
	outline-offset: 2px;
}