/**
Theme Name: Rev21
Author: Stu Basden
Description:  A child of the Astra theme for Rev21.earth
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: rev21
Template: astra
*/

/* Purple Background */
.wp-block-group.is-style-rev21-bold {
	.htmx-frame {
		color: var(--ast-global-color-4);
		form {
			label {
				color: var(--ast-global-color-4);
			}
		}
		.btn-primary {
			border: 5px solid var(--ast-global-color-4);
			color: var(--ast-global-color-0);
			background-color: var(--ast-global-color-4);
			&:hover {
				border: 5px solid var(--ast-global-color-4);
				color: var(--ast-global-color-4);
				background-color: var(--ast-global-color-0);
			}
		}
		.invalid-feedback {
			color: #fcc;
			background: #a00;
		}
	}
}

/* Orange */
.wp-block-group.is-style-rev21-bright {
	.htmx-frame {
		color: var(--ast-global-color-2);
		form {
			label {
				color: var(--ast-global-color-2);
			}
		}
		.btn-primary {
			border: 5px solid var(--ast-global-color-2);
			color: var(--ast-global-color-2);
			background-color: var(--ast-global-color-4);
			&:hover {
				border: 5px solid var(--ast-global-color-2);
				color: var(--ast-global-color-1);
				background-color: var(--ast-global-color-2);
			}
		}
		.invalid-feedback {
			color: #fcc;
			background: #a00;
		}
	}
}

/* Black */
.wp-block-group.is-style-rev21-dark {
	.htmx-frame {
		color: var(--ast-global-color-1);
		form {
			label {
				color: var(--ast-global-color-1);
			}
		}
		.btn-primary {
			border: 5px solid var(--ast-global-color-1);
			color: var(--ast-global-color-2);
			background-color: var(--ast-global-color-1);
			&:hover {
				border: 5px solid var(--ast-global-color-1);
				color: var(--ast-global-color-1);
				background-color: var(--ast-global-color-2);
			}
		}
		.invalid-feedback {
			color: #faa;
			background: #600;
		}
	}
}

/* Mini Assembly Briefing attendance form */
#register-interest-assemblies {
	.htmx-frame {
		h4 {
			display: none;
		}
	}
}

/* Integrated Catalyst Forms */
.htmx-frame {
	.text-center {
		text-align: center;
	}
	font-size: 0.8em;
	form {
		> .row { 
			border-bottom: none;
			padding: 5px 0;
		}
		label {
			font-size: 1em;
		}
	}
	.form-text {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		gap: 20px;
		>label {
			width: 240px;
		}
		>input, select {
			max-width: 400px;
			border: 0;
			border-radius: 1em;
			padding: 10px;
		}
	}
	.form-checkbox-select {
		input[type="checkbox"] {
			margin-left: 1em;
		}
	}
	.form-select {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		gap: 20px;
		>label {
			width: 240px;
		}
		>select {
			max-width: 400px;
			height: fit-content;
			border: 0;
			border-radius: 1em;
			padding: 10px;
			appearance: none;
			background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
			background-color: white;
		}
	}
	.form-check {
		label {
			em {
				font-size: .8em;
			}
		}
	}
	.form-dropdown {
		width: 100%;
		background-color: rgba(0,0,0,0,1);
	}
	table {
		width: 100%;
		border: none;
		tr {
			display: grid;
            grid-template-columns: 1fr 3fr 1fr 1fr;
			border-bottom: none;
			&:nth-child(odd) {
				background: rgba(255,255,255,.1);
			}
		}
		td {
			border: none;
			&:nth-child(2) {
				font-weight: bold;
			}
		}
		.btn-primary {
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			border: 5px solid var(--ast-global-color-4);
			padding: 15px 30px;
			display: block;
			width: fit-content;
			text-decoration: none;
		}
	}
	.thank-you-message {
		border: 10px solid #43ac6f;
		padding: 10px 20px;
		background: #64bd8a;
		color: black;
		margin: 1em 0;
		div {
			a {
				&:only-child {
					display: inline-block;
					box-sizing: border-box;
					margin: 1em 0;
					border: 5px solid var(--ast-global-color-2);
                    padding: 15px 30px;
					text-align: center;
                    text-decoration: none;
                    color: var(--ast-global-color-2);
				}
			}
		}
	}
	.event-info-intro {
		border: 10px solid #43ac6f;
		padding: 10px 20px;
		background: #64bd8a;
		color: black;
		margin: 1em 0;
	}
	.occurrence-name {
		font-size: 2em;
	}
	.invalid-feedback {
		color: #600;
		background: rgba(60, 0, 0, .1);
		height: fit-content;
		padding: 5px 10px;
	}
	form[action="/formz/national/pathways/assemblies-pathway/events/4/participants"] {
		.form-dropdown-item.occurrence-register-pathway_step_12 {
			&:first-child::after {
				font-style: italic;
				content: "i.e. do you want to organise and host a mini-assembly?";
			}
			& > div + div + div {
				display: none;
			}
		}
	}
}

@media (max-width: 544px) {
	.htmx-frame {
		table {
			tr {
				display: block;
				td {
					display: block;
					&.text-center {
						display: flex;
						justify-content: center;
					}
				}
			}
		}
	}
}