/*
Theme Name: Warmbier Child
Theme URI: https://www.warmbier.com/
Description: Child theme of Divi holding the site-specific styles for warmbier.com.
Author: Werbezentrum Bodensee
Template: Divi
Version: 1.0.0
Text Domain: warmbier-child
*/

/* -------------------------------------------------------------------------
 * Contact Form 7 – visual parity with the Divi contact form module.
 *
 * The reference is the Divi module on https://www.warmbier.com/kontakt/:
 * transparent inputs with a 1px #666 border, 12px/24px padding, 16px/1.8em
 * text, a 150px message box, an 18px square checkbox and a black pill button
 * aligned to the right next to the math captcha.
 * ---------------------------------------------------------------------- */

.wb-form {
	--wb-form-border: #666666;
	--wb-form-text: #555555;
	--wb-form-gap: 15px;
}

/* Labels stay in the accessibility tree but are visually hidden, exactly like
   Divi, which renders the field label with display:none and relies on the
   placeholder. */
.wb-form .wb-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wb-form .wb-form__field + .wb-form__field {
	margin-top: var(--wb-form-gap);
}

.wb-form .wpcf7-form-control-wrap {
	display: block;
}

.wb-form input.wb-form__input,
.wb-form textarea.wb-form__input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 24px;
	background-color: transparent;
	border: 1px solid var(--wb-form-border);
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	line-height: 1.8em;
	color: var(--wb-form-text);
	text-decoration-line: none;
}

.wb-form textarea.wb-form__input {
	height: 150px;
	min-height: 150px;
	resize: vertical;
}

.wb-form input.wb-form__input::placeholder,
.wb-form textarea.wb-form__input::placeholder {
	color: var(--wb-form-text);
	font-size: 16px;
	font-style: normal;
	line-height: 1.8em;
	opacity: 1;
}

/* Consent checkbox ------------------------------------------------------ */

.wb-form .wb-form__acceptance {
	/* Divi's checkbox field nests the options list in an inline wrapper, which
	   leaves one empty line box above the consent row. The offset is part of
	   the reference layout, so it is reproduced explicitly here. */
	padding-top: 18px;
}

.wb-form .wb-form__acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wb-form .wb-form__acceptance label {
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--wb-form-text);
}

.wb-form .wb-form__acceptance input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--wb-form-border);
	border-radius: 0;
	vertical-align: middle;
	cursor: pointer;
}

/* Divi marks a checked box with the "N" glyph of its own icon font. */
.wb-form .wb-form__acceptance input[type="checkbox"]:checked::before {
	content: "N";
	display: block;
	font-family: ETmodules;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	color: #2ea3f2;
}

.wb-form .wb-form__acceptance .wpcf7-list-item-label {
	vertical-align: middle;
}

.wb-form .wb-form__acceptance a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Captcha and submit button --------------------------------------------- */

.wb-form .wb-form__bottom {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 18px;
	/* Slightly larger than the regular field gap so the captcha/button row
	   lands on the same baseline as in the Divi reference. */
	margin-top: 18px;
	text-align: right;
}

.wb-form .wb-form__submit {
	position: relative;
	display: flex;
}

/* The CF7 spinner has no counterpart in the Divi form; it is taken out of the
   flow so it cannot shift the button away from the right edge. */
.wb-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 100%;
	margin: 0 12px 0 0;
	transform: translateY(-50%);
}

.wb-form .wb-form__captcha label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--wb-form-text);
}

.wb-form input.wb-form__captcha-input {
	width: 88px;
	flex: 0 0 88px;
}

.wb-form input.wb-form__button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 12px 24px;
	background-color: #000000;
	border: 0 solid #333;
	border-radius: 100px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.7em;
	text-transform: uppercase;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.wb-form input.wb-form__button:hover {
	background-color: rgba(0, 0, 0, 0.85);
}

/* Validation and response messages --------------------------------------- */

.wb-form .wpcf7-not-valid {
	border: 1px solid red !important;
}

.wb-form .wb-form__acceptance input[type="checkbox"].wpcf7-not-valid {
	border: 1px solid red !important;
}

/* Divi turns the whole consent row red when the box is left unchecked. */
form.wpcf7-form.unaccepted:has(.wb-form) .wb-form__acceptance label,
form.wpcf7-form.unaccepted:has(.wb-form) .wb-form__acceptance .wpcf7-list-item-label,
form.wpcf7-form.invalid:has(.wb-form) .wb-form__acceptance:has(input[type="checkbox"]:not(:checked)) label,
form.wpcf7-form.invalid:has(.wb-form) .wb-form__acceptance:has(input[type="checkbox"]:not(:checked)) .wpcf7-list-item-label {
	color: red;
}

form.wpcf7-form.unaccepted:has(.wb-form) .wb-form__acceptance input[type="checkbox"],
form.wpcf7-form.invalid:has(.wb-form) .wb-form__acceptance input[type="checkbox"]:not(:checked) {
	border-color: red;
}

.wb-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.6em;
	color: red;
}

form.wpcf7-form:has(.wb-form) .wpcf7-response-output {
	margin: var(--wb-form-gap) 0 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	line-height: 1.8em;
	color: var(--wb-form-text);
}

form.wpcf7-form.invalid:has(.wb-form) .wpcf7-response-output,
form.wpcf7-form.unaccepted:has(.wb-form) .wpcf7-response-output,
form.wpcf7-form.payment-required:has(.wb-form) .wpcf7-response-output {
	color: red;
}

/* Responsive sizes mirror the Divi module breakpoints. */
@media only screen and (max-width: 980px) {
	.wb-form input.wb-form__input,
	.wb-form textarea.wb-form__input,
	.wb-form input.wb-form__input::placeholder,
	.wb-form textarea.wb-form__input::placeholder,
	.wb-form .wb-form__acceptance label,
	.wb-form .wb-form__captcha label,
	form.wpcf7-form:has(.wb-form) .wpcf7-response-output {
		font-size: 15px;
	}
}

@media only screen and (max-width: 767px) {
	.wb-form input.wb-form__input,
	.wb-form textarea.wb-form__input,
	.wb-form input.wb-form__input::placeholder,
	.wb-form textarea.wb-form__input::placeholder,
	.wb-form .wb-form__acceptance label,
	.wb-form .wb-form__captcha label,
	form.wpcf7-form:has(.wb-form) .wpcf7-response-output {
		font-size: 14px;
	}
}