/*
These styles could be moved to the theme.
Why are these styles here? Because several people edited vanilla-style.css and nobody knows what to do about it.
These styles need to go live when we launch the account plugin.
*/

/* start: nav and admin bar fixes */
/*
note: many page templates abuse the "nav_fixed" class even if the navigation should not overlap the header image.
use nav_fixed here: https://radleysustaire.com/s3/56d530/chrome
do not use it here: https://radleysustaire.com/s3/32f16b/chrome
*/
html body {
	/* do not position the body. it messes with z-indexes, absolute positioning, and javascript positioning such as the dropdowns from chosen and select2 */
	position: static;
}

@supports ( position: sticky ) {
	/* Position sticky is better */
	.site-nav {
		position: sticky !important;
		top: 0;
	}

	body.admin-bar .site-nav {
		top: 46px;
	}

	@media ( min-width: 782px ) {
		body.admin-bar .site-nav {
			top: 32px;
		}
	}

	/* Fixed position may still be used if it needs to float over a header or something */
	body.nav__fixed .site-nav {
		position: fixed !important;
	}
}

@supports not ( position: sticky ) {
	/* Fallback if no position:sticky support */
	@media ( max-width: 599.9px ) {
		.site-nav {
			position: static;
		}
		.site-nav.sticky {
			position: fixed;
		}

		body.admin-bar .site-nav.sticky {
			top: 0;
		}
	}

	@media ( min-width: 600px ) and ( max-width: 781.9px ) {
		body.admin-bar .site-nav {
			top: 46px;
		}
	}

	@media ( min-width: 782px ) {
		body.admin-bar .site-nav {
			top: 32px;
		}
	}
}
/* end: admin bar fix */


/* start: book page template fix when no header image provided
see: https://bbfeb2022.wpengine.com/book/the-power-of-vulnerability/
*/
section.single-book__hero {
	background: #a9915d;
}
/* end: book page template fix when no header image provided */


/* Start: Custom checkboxes and radio buttons */
/* This was previously part of the woocommerce plugin, hence the class names */
label.bb-wc-cb-label {
	display: inline-block !important;
	margin: 0 3px 0 0 !important;
	cursor: pointer;
}

input.bb-wc-cb-input {
	position: absolute !important;
	z-index: -1 !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.bb-wc-cb-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
}

.bb-wc-cb-icon::before {
	display: inline-block;
	height: 100%;
	width: 100%;
}


input.bb-wc-cb-input[type="checkbox"] + .bb-wc-cb-icon::before {
	/* svg: checkbox, unchecked */
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Crect width='14' height='14' x='.5' y='.5' stroke='%23000' rx='2.5'/%3E%3C/svg%3E");
}

input.bb-wc-cb-input[type="checkbox"]:checked + .bb-wc-cb-icon::before {
	/* svg: checkbox, checked */
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Crect width='14' height='14' x='.5' y='.5' stroke='%23000' rx='2.5'/%3E%3Crect width='11' height='11' x='2' y='2' fill='%23000' rx='1.75'/%3E%3C/svg%3E");
}

input.bb-wc-cb-input[type="radio"] .bb-wc-cb-icon::before {
	/* svg: radio, unchecked */
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Ccircle cx='7.5' cy='7.5' r='7' stroke='%23000'/%3E%3C/svg%3E");
}

input.bb-wc-cb-input[type="radio"]:checked + .bb-wc-cb-icon::before {
	/* svg: radio, checked */
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 15 15'%3E%3Ccircle cx='7.5' cy='7.5' r='7' stroke='%23000'/%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='%23000'/%3E%3C/svg%3E");
}
/* end: Custom checkboxes and radio buttons */

/* start: image captcha plugin */
.gfield--type-gfic {
	padding: 0 !important;
	margin: 20px 0 !important;
}

.gfield--type-gfic > label.gfield_label {
	display: none;
}

.gfield--type-gfic > br {
	display: none;
}


.gfield--type-gfic .cf7ic-style1 {
	font-size: 18px;
	padding: 0;
	margin: 0;
}

.captcha-image label span.bb-wc-cb-icon {
	display: none;
}

.captcha-image .cf7ic-icon-wrapper {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin: 20px 0 0;
}

.captcha-image .cf7ic-icon-wrapper label {
	cursor: pointer;
}

.captcha-image .cf7ic-icon-wrapper .fa {
	background-color: transparent;
	border-radius: 100px;
	padding: 10px;

	height: 50px;
	width: 50px;
	font-size: 26px;
	line-height: 30px;
}

.captcha-image .cf7ic-icon-wrapper input:checked + .fa,
.captcha-image .cf7ic-icon-wrapper input:checked + span.bb-wc-cb-icon + .fa {
	background-color: #000;
}

.captcha-image .cf7ic-icon-wrapper .fa::before {
	color: #000;
}

.captcha-image .cf7ic-icon-wrapper input:checked + .fa::before,
.captcha-image .cf7ic-icon-wrapper input:checked + span.bb-wc-cb-icon + .fa::before {
	color: #fff;
}
/* end: image captcha plugin */


/* start: gravity forms validation style */
/* note: I am using :not(.x) to override other css that is using more than one :not() selector. */
/*
body .gform_wrapper.gravity-theme .gform_validation_errors {
	background: #3a474d;
	padding: 20px 35px !important;
}

body .gform_wrapper.gravity-theme:not(.x) .gform_validation_errors h2.gform_submission_error {
	font-size: 22px;
	margin: 15px 0 30px;
	text-align: left;
}

body .gform_wrapper.gravity-theme .gform_validation_errors ol {
	margin: 0 0 15px !important;
	text-align: left;
}

body .gform_wrapper.gravity-theme:not(.x) .gform_validation_errors h2.gform_submission_error,
body .gform_wrapper.gravity-theme .gform_validation_errors li,
body .gform_wrapper.gravity-theme .gform_validation_errors a {
	color: #ecece3 !important;
	font-family: "Basis", -apple-system, system-ui, sans-serif;
}

body .gform_wrapper.gravity-theme .gform_validation_errors li,
body .gform_wrapper.gravity-theme .gform_validation_errors a {
	color: #ecece3 !important;
	font-size: 18px;
}

@media ( max-width: 800px ) {
	body .gform_wrapper.gravity-theme:not(.x) .gform_validation_errors h2.gform_submission_error {
		font-size: 20px;
	}
	body .gform_wrapper.gravity-theme .gform_validation_errors li,
	body .gform_wrapper.gravity-theme .gform_validation_errors a {
		font-size: 16px;
	}
}

body .gform_wrapper.gravity-theme:not(.x) .gfield_validation_message {
	color: #ecece3 !important;
	background: #3A484E !important;
	padding: 8px 20px !important;
	border-radius: 100px;
	text-align: center;

	width: fit-content;
	margin: 10px auto 0;
}
*/
/* end: gravity forms validation style */