/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==================================================================
   Main
   ================================================================== */

html,
body {
  overflow-x: clip !important;
}

/* ==================================================================
   Blocks
   ================================================================== */

.wp-block-image {
	& > img {
		border-radius: var(--radius-md) var(--radius-md) 0 0;
	}
	
	& > figcaption {
		background-color: var(--color-bg-card);
		border: 0 0 0 1px solid var(--color-border);
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		color: var(--color-text-muted);
		font-family: var(--font-family-mono);
		font-size: var(--text-sm);
		margin: 0;
		padding: var(--space-3) var(--space-5);
		text-align: left;
	}
}

/* ==================================================================
   Gravity Forms
   ================================================================== */

.gform_wrapper.gravity-theme.gform-theme--no-framework  {
	.gform_heading:has(.gform_description:empty) {
		display: none;
	}
	
	.gform_fields {
		grid-row-gap: var(--space-4);
	}
	
	.gfield_label {
		color: var(--color-text);
		font-family: var(--font-family-mono);
		font-size: var(--text-kicker);
		font-weight: 500;
		letter-spacing: var(--letter-spacing-kicker);
		margin-bottom: var(--space-2);
		text-transform: uppercase;
		
		.gfield_required {
			color: var(--color-primary);
		}
	}
	
	input[type="color"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="datetime"],
	input[type="email"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="time"],
	input[type="url"],
	input[type="week"],
	select,
	textarea {
		background-color:  var(--color-bg-deep);;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		color: var(--color-text);
		font-size: var(--text-sm);;
		line-height: var(--line-height-body-small);
		padding: var(--space-3) var(--space-4);
		transition: border-color 300ms;
		width: 100%;
		
		&:focus {
			outline: none;
    		border-color: var(--color-primary);
		}
	}
	
	::placeholder {
		color: var(--color-text-muted);
	}
	
	select {
		appearance: none;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="%23A4A7AE" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>');
		background-position: calc(100% - 10px) 50%;
		background-repeat: no-repeat;
		background-size: 16px 16px;
		padding-right: var(--space-10);
	}
	
	textarea {
		height: auto !important;
		resize: vertical;
	}
	
	.ginput_container_consent {
		align-items: center;
		display: flex;
		gap: var(--space-3);
		
		input[type="checkbox"] {
			flex-shrink: 0;
		}
	}
	
	input[type="checkbox"] {
		appearance: none;
		background-color: transparent;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		height: 18px;
		margin: 0;
		padding: 0;
		position: relative;
		transition: all 300ms;
		width: 18px;

		&:checked {
			background-color: var(--color-primary);
    		border-color: var(--color-primary);
			
			&::after {
				border: solid #0A1410;
				border-width: 0 2px 2px 0;
				content: '';
				height: 10px;
				left: 5px;
				position: absolute;
				top: 1px;
				transform: rotate(45deg);
				width: 5px;
			}
		}

		& + label {
			color: var(--color-text-muted);
			font-size: var(--text-xs);
			font-weight: 300;
			margin-bottom: 0;

			.gfield_required {
				display: none;
			}
		}
	}
	
	.gform_footer {
		margin: var(--space-6) 0 0;
		padding: 0;
		
		button {
			align-items: center;
			background-color: var(--color-primary);
			border-color: var(--color-border-strong);
			border-radius: var(--radius-sm);
			border-style: none;
			border-width: 1px;
			box-shadow: 0 8px 24px 0 var(--color-primary-glow);
			color: var(--color-bg-deep);
			display: inline-flex;
			font-family: "Inter";
			font-size: var(--text-base);
			font-weight: 600;
			gap: var(--space-3);
			justify-content: center;
			letter-spacing: -0.07px;
			margin: 0;
			padding: 15.8px 27.8px;
			text-align: center;
			transition: 0.5s;
			width: 100%;

			&::after {
				background-color: currentColor;
				content: '';
				flex-shrink: 0;
				height: 8px;
				-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.09375H9.29688L8.33594 1.15625V0L10.8359 2.59375V2.625L8.33594 5.21875V4.0625L9.28125 3.14062H0V2.09375Z' fill='%230A1410'/%3E%3C/svg%3E");
				mask-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.09375H9.29688L8.33594 1.15625V0L10.8359 2.59375V2.625L8.33594 5.21875V4.0625L9.28125 3.14062H0V2.09375Z' fill='%230A1410'/%3E%3C/svg%3E");
				-webkit-mask-position: center;
				mask-position: center;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-size: 100% 100%;
				mask-size: 100% 100%;
				transform: translateY(3px);
				transition: transform 0.25s ease;
				width: 14px;
			}
			
			&:hover {
				background-color: var(--color-primary-hover);
				box-shadow: 0 12px 32px 0 var(--color-primary-glow);
				transform: translateY(-1px);
			}
			
			&:hover::after {
				transform: translateY(3px) translateX(3px);
			}
		}
	}
}