/* Parallax — cover must clip the oversized image */
.wp-block-cover {
	overflow: hidden !important;
}

/* Make the image taller than the container so translateY never shows a gap */
.wp-block-cover__image-background {
	position: absolute !important;
	inset: auto !important;
	top: -20% !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 140% !important;
	object-fit: cover !important;
	will-change: transform;
}

/* Text scrim — the .uudio-scrim span is injected by JS */
.uudio-scrim {
	display: inline;
	background-color: #d8613c;
	padding: 0.12em 0.38em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	line-height: 1.6;
}

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container h3,
.wp-block-cover .wp-block-cover__inner-container p:not(.wp-block-button__link) {
	line-height: 1.6;
}

/* ==========================================================================
   Tape label — masking tape effect with torn edges
   Usage: add CSS class "tape-label" to any Gutenberg heading block
   ========================================================================== */
.tape-label {
	position:  relative;
	display:   block;
	width:     fit-content;
	padding:   0.3em 2.75em;
	color:     #231508 !important; /* dark text — kraft tape is light */
	isolation: isolate;
}

.tape-label::before {
	content:  '';
	position: absolute;

	/* Horizontally wider than the element */
	left:  -1.5rem;
	right: -1.5rem;

	/* Vertically centred on the heading — works regardless of line count */
	top:    50%;
	height: calc(100% + 1rem);
	transform: translateY(-50%) rotate(-0.6deg);

	/* Real masking tape PNG — transparent background preserves the torn edges */
	background-image:    url('../images/tape.png');
	background-size:     100% 100%;
	background-repeat:   no-repeat;
	background-position: center;

	/* Lift shadow follows the actual PNG shape, not a rectangle */
	filter:  sepia(0.8) saturate(1.2) brightness(0.9) drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.45));
	z-index: -1;
}

/* ==========================================================================
   Contact Form 7 — editorial style
   ========================================================================== */

.wpcf7 {
	background: #EDE8DC;
	padding:    2.5rem 2.5rem 0;
	position:   relative;
	color:      #0D1626;
}

/* Large "FORM" — top right */
.wpcf7::before {
	content:        'FORM';
	position:       absolute;
	top:            1rem;
	right:          2rem;
	font-size:      clamp(3rem, 9vw, 5.5rem);
	font-weight:    900;
	line-height:    1;
	letter-spacing: -0.02em;
	color:          #0D1626;
	pointer-events: none;
	z-index:        0;
}

.wpcf7-form {
	position: relative;
	z-index:  1;
}

/* Hide default CF7 response box — LED handles feedback */
.wpcf7 .wpcf7-response-output {
	display: none !important;
}

/* Each <p> in CF7 = one field row, separated by a line */
.wpcf7 p {
	margin:        0;
	padding:       1rem 0;
	border-bottom: 1px solid rgba(13, 22, 38, 0.15);
	display:       flex;
	gap:           2rem;
	flex-wrap:     wrap;
	align-items:   flex-end;
}

.wpcf7 p > span,
.wpcf7 p > .wpcf7-form-control-wrap {
	flex:      1;
	min-width: 100px;
}

/* Labels */
.wpcf7 label {
	display:        block;
	font-weight:    700;
	font-size:      0.72rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color:          #0D1626;
	margin-bottom:  0.4rem;
	font-family:    system-ui, -apple-system, sans-serif;
}

/* Inputs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	width:         100%;
	background:    transparent;
	border:        none;
	border-radius: 0;
	padding:       0.3rem 0;
	font-size:     0.9375rem;
	color:         #0D1626;
	font-family:   var(--wp--preset--font-family--body, Georgia, serif);
	outline:       none;
	-webkit-appearance: none;
	appearance:    none;
	box-shadow:    none;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: rgba(13, 22, 38, 0.3);
}

.wpcf7 textarea {
	resize:     vertical;
	min-height: 80px;
}

/* Submit button — bleeds to the edges of the cream box */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	display:        block;
	width:          calc(100% + 5rem);
	margin-left:    -2.5rem;
	background:     #0D1626;
	color:          #E6ECF4;
	border:         none;
	padding:        1.375rem 2.5rem;
	font-family:    system-ui, -apple-system, sans-serif;
	font-weight:    700;
	font-size:      0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor:         pointer;
	transition:     background 0.2s;
}

.wpcf7 input[type="submit"]:hover {
	background: #1A2740;
}

/* Signal — floats in the top-right corner of the form, no background */
.uudio-signal {
	position:    absolute;
	top:         1.25rem;
	left:        2.5rem;
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	z-index:     10;
}

.uudio-signal-text {
	font-family:    system-ui, -apple-system, sans-serif;
	font-size:      0.65rem;
	font-weight:    600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          transparent;
	transition:     color 0.5s ease;
}

.uudio-signal.is-sent .uudio-signal-text {
	color: #00d44a;
}

/* Red LED variant — default state for the form */
.uudio-led.is-red {
	background: radial-gradient(circle at 38% 32%, #ff9090, #e01010);
	box-shadow:
		0 0 4px  #e01010,
		0 0 10px #e01010,
		0 0 22px rgba(200, 30, 30, 0.55),
		inset 0 1px 2px rgba(0, 0, 0, 0.4);
	animation: led-flicker-red 3.8s infinite;
}

@keyframes led-flicker-red {
	0%,  16%,  18%,  20%,  50%,  52%,  54%,  100% {
		opacity: 1;
		box-shadow:
			0 0 4px  #e01010,
			0 0 10px #e01010,
			0 0 22px rgba(200, 30, 30, 0.55);
	}
	17%, 51% { opacity: 0.2;  box-shadow: none; }
	19%, 53% {
		opacity: 0.8;
		box-shadow: 0 0 3px #e01010, 0 0 7px #e01010;
	}
}

/* Green LED — success state */
.uudio-led.is-green {
	background: radial-gradient(circle at 38% 32%, #80ffaa, #00d44a);
	box-shadow:
		0 0 4px  #00e040,
		0 0 10px #00e040,
		0 0 22px rgba(0, 200, 55, 0.55),
		inset 0 1px 2px rgba(0, 0, 0, 0.4);
	animation: led-flicker 3.8s infinite;
}

/* ==========================================================================
   Process steps — "How it works" timeline component
   ========================================================================== */
.uudio-process {
	padding: 2.5rem 0;
}

.up-label {
	font-family:    'Montserrat', sans-serif;
	font-size:      0.7rem;
	font-weight:    600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          #6880A0;
	margin:         0 0 0.75rem;
}

.up-title {
	font-size:   clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color:       #E6ECF4;
	margin:      0 0 0.4rem;
}

.up-subtitle {
	font-size: 0.9rem;
	color:     #6880A0;
	margin:    0 0 2.5rem;
}

/* Track — flex row of steps with connecting line */
.up-track {
	display:         flex;
	align-items:     flex-start;
	position:        relative;
	gap:             0;
}

/* Horizontal line from centre of first circle to centre of last */
.up-track::before {
	content:    '';
	position:   absolute;
	top:        1.125rem; /* half the circle height */
	left:       calc(100% / (var(--step-count) * 2));
	right:      calc(100% / (var(--step-count) * 2));
	height:     1px;
	background: rgba(104, 128, 160, 0.35);
	z-index:    0;
}

.up-step {
	flex:           1;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding:        0 0.5rem;
	position:       relative;
	z-index:        1;
}

/* Numbered circle */
.up-circle {
	width:         2.25rem;
	height:        2.25rem;
	border-radius: 50%;
	border:        1px solid #6880A0;
	background:    #0D1626;
	color:         #E6ECF4;
	font-family:   'Montserrat', sans-serif;
	font-size:     0.8rem;
	font-weight:   600;
	display:       flex;
	align-items:   center;
	justify-content: center;
	margin-bottom: 0.875rem;
	flex-shrink:   0;
}

.up-step-title {
	display:        block;
	font-family:    'Montserrat', sans-serif;
	font-size:      0.875rem;
	font-weight:    700;
	color:          #E6ECF4;
	margin-bottom:  0.35rem;
}

.up-step-desc {
	font-size:   0.775rem;
	color:       #6880A0;
	line-height: 1.5;
	margin:      0;
}

/* Responsive — stack vertically on small screens */
@media (max-width: 640px) {
	.up-track {
		flex-direction: column;
		gap:            1.5rem;
	}
	.up-track::before {
		display: none;
	}
	.up-step {
		flex-direction: row;
		text-align:     left;
		gap:            1rem;
	}
	.up-circle {
		margin-bottom: 0;
		flex-shrink:   0;
	}
}

/* ==========================================================================
   Kadence Lottie — uniform height, no overflow into adjacent elements
   ========================================================================== */
.kb-lottie-container,
.wp-block-kadence-lottieanimation {
	height:   13rem !important;
	overflow: hidden;
	position: relative; /* keeps it in normal flow, prevents overlap */
}

.kb-lottie-container lottie-player,
.wp-block-kadence-lottieanimation lottie-player {
	width:      100% !important;
	height:     100% !important;
	object-fit: contain;
}

/* ==========================================================================
   Skew button — parallelogram shape
   Adjust via CSS variables on the element:
     --btn-color      border + text colour
     --btn-bg         background (default transparent)
     --btn-size       font-size (scales padding automatically)
     --btn-skew       slant angle (default -18deg)
   ========================================================================== */
.skew-btn {
	--btn-bg:    #d8613c;
	--btn-color: #ffffff;
	--btn-size:  1rem;
	--btn-skew:  -18deg;
	--btn-width: auto;

	display:         inline-block;
	width:           var(--btn-width);
	padding:         calc(var(--btn-size) * 0.75) calc(var(--btn-size) * 2.5);
	border:          2px solid var(--btn-bg);
	background:      var(--btn-bg);
	color:           var(--btn-color);
	font-size:       var(--btn-size);
	font-family:     inherit;
	text-align:      center;
	text-decoration: none;
	cursor:          pointer;
	transform:       skewX(var(--btn-skew));
	transition:      background 0.2s, border-color 0.2s, color 0.2s;
}

.skew-btn:hover {
	background:   transparent;
	border-color: var(--btn-bg);
	color:        var(--btn-bg);
}

.skew-btn span {
	display:   inline-block;
	transform: skewX(calc(var(--btn-skew) * -1));
}

/* ==========================================================================
   LED indicator — mix equipment signal light
   ========================================================================== */
.uudio-led {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #80ffaa, #00d44a);
	box-shadow:
		0 0 4px  #00e040,
		0 0 10px #00e040,
		0 0 22px rgba(0, 200, 55, 0.55),
		inset 0 1px 2px rgba(0, 0, 0, 0.4);
	animation: led-flicker 3.8s infinite;
	flex-shrink: 0;
}

/* Lens glint */
.uudio-led::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 5px;
	width: 6px;
	height: 4px;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 50%;
}

/* Irregular flicker — stays bright, drops briefly at seemingly random points */
@keyframes led-flicker {
	0%,  16%,  18%,  20%,  50%,  52%,  54%,  100% {
		opacity: 1;
		box-shadow:
			0 0 4px  #00e040,
			0 0 10px #00e040,
			0 0 22px rgba(0, 200, 55, 0.55);
	}
	17%, 51% {
		opacity: 0.25;
		box-shadow: none;
	}
	19%, 53% {
		opacity: 0.85;
		box-shadow:
			0 0 3px  #00e040,
			0 0 7px  #00e040;
	}
}