/*
Conditional sections are hidden until user data is loaded

Note:
Checking if a user is logged out is hidden until we've checked if the user is logged out.
That means you might see a blank page until a login form appears.
If you want content to be visible immediately and then hide afteward, use the body class directly in your own css.
*/
body:not(.loading) .is-site-loading,
body:not(.loading) .container-style-site-loading,

body:not(.user-no-cohort) .is-user-no-cohort,
body:not(.user-no-cohort) .container-style-no-cohort,

/* These classes also have a container style, see blocks.js -> register_container_styles() */
body:not(.user-is-logged-in) .is-user-logged-in,
body:not(.user-is-logged-in) .container-style-logged-in,

body:not(.user-is-logged-out) .is-user-logged-out,
body:not(.user-is-logged-out) .container-style-logged-out,

body:not(.user-is-facilitator) .is-user-facilitator,
body:not(.user-is-facilitator) .container-style-facilitator-only,

body:not(.user-is-developer) .is-user-developer,
body:not(.user-is-developer) .container-style-developer-only {
	display: none !important;
}

/*
Hide menus until cohort data is loaded
This is because some menu items get removed or redirected based on the cohort settings.
*/
body:not(.cohort-data-loaded) nav.dtla-menu {
	display: none;
}

/*
Hide lesson page content until data has been loaded
This could be applied to other post types too, if that is needed later
*/
body.single-lesson:not(.cohort-data-loaded) .hero-content > *,
body.single-lesson:not(.cohort-data-loaded) .site-content > *,
body.single-lesson:not(.cohort-data-loaded) .site-footer > * {
	color: transparent !important;
	visibility: hidden !important;
}

body.single-lesson:not(.cohort-data-loaded) .site-content > .container-style-logged-out {
	color: unset !important;
	visibility: visible !important;
}

/*
 * User cohort classes are generated in enqueue.php -> dtla_print_lessons_css() (because the cohort names are dynamic)
 * body:not(.user-cohort-alchemy-and-aim) .is-user-cohort-alchemy-and-aim { display: none; }
 */

/*
Cohort field generates classes to indicate if the field has content
For example, a cohort might not have any announcements and should instead be hidden
*/
.cohort-field.no-content,
.cohort-field-section.no-content {
	display: none !important;
}

/*
Certificate form
*/
.dtla-certificate-form .field label {
	display: block;
	margin: 0 0 5px;
}

.dtla-certificate-form .field input[type="text"] {
	text-align: center;
}


/* Validation error */
.dtla-validation-error {
	color: #e80000;
}

/* Icons */
.icon::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 5px;
}

.icon.icon-alert::before {
	/* https://iconmonstr.com/error-5-svg/ */
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e80000' d='M16.97 0H7.03L0 7.03v9.94L7.03 24h9.94L24 16.97V7.03L16.97 0zM12 19.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm.55-4.75a.55.55 0 0 1-1.1 0l-.8-8a1.36 1.36 0 1 1 2.7 0l-.8 8z'/%3E%3C/svg%3E");
}

/* Hide logo until custom logo is loaded */
body:not(.other-html-applied) .dtla-cohort-logo {
	visibility: hidden;
	opacity: 0;
}

/* Improved block list indentation */
.wp-block-list li {
	margin-left: 24px;
}


/*
Color Palettes

Used by:
- DTL styled radio buttons

Available classes:
- palette-courses, blue (default, very close to TDW)
- palette-dtl, teal
- palette-tdw, blue
*/
.palette-courses,
form.dtl-style-radio-buttons {
	--dtla-palette-radio-hover: #005182;
	--dtla-palette-radio-hover-secondary: #367ca1;
	--dtla-palette-radio-active: #005182;
	--dtla-palette-primary-normal: #005182;
	--dtla-palette-primary-hover: #00314e;
}

.palette-dtl {
	--dtla-palette-radio-hover: #1d6874;
	--dtla-palette-radio-hover-secondary: #518d98;
	--dtla-palette-radio-active: #1d6874;
	--dtla-palette-primary-normal: #1d6874;
	--dtla-palette-primary-hover: #103d43;
}

.palette-tdw {
	--dtla-palette-radio-hover: #025080;
	--dtla-palette-radio-hover-secondary: #296e98;
	--dtla-palette-radio-active: #025080;
	--dtla-palette-primary-normal: #025080;
	--dtla-palette-primary-hover: #013555;
}

/*
Centered radio/checkbox fields in Gravity Forms
(Similar support is defaulted to the DTL styled radio buttons below as well)

To use, add the class "centered-radio-buttons" to your form or to individual fields.
*/
.gform_wrapper.centered-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
.gform_wrapper .gfield.gfield--type-choice.centered-radio-buttons div:where(.gfield_checkbox, .gfield_radio),
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons div:where(.gfield_checkbox, .gfield_radio) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	gap: 20px;
}

.gform_wrapper.centered-radio-buttons_wrapper .gfield.gfield--type-choice input + label,
.gform_wrapper .gfield.gfield--type-choice.centered-radio-buttons input + label,
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice input + label,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons input + label {
	display: inline-block;
	max-width: none;

	margin: 0;
	padding: 5px 0;

	cursor: pointer;
}

@media ( min-width: 750px ) {
	@supports (display: grid) {
		.gform_wrapper.centered-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
		.gform_wrapper .gfield.gfield--type-choice.centered-radio-buttons div:where(.gfield_checkbox, .gfield_radio),
		.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
		.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons div:where(.gfield_checkbox, .gfield_radio) {
			max-width: 750px;
			margin: 0 auto;
		}
	}
}

@media ( max-width: 460px ) {
	.gform_wrapper.centered-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
	.gform_wrapper .gfield.gfield--type-choice.centered-radio-buttons div:where(.gfield_checkbox, .gfield_radio),
	.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
	.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons div:where(.gfield_checkbox, .gfield_radio) {
		flex-direction: column;
	}
}

/*
-----------------------
Start: DTL styled radio buttons

To use, add the class "dtl-style-radio-buttons" to your form or to individual fields.
Each selector below target the form first, or individual fields second.
*/

/* -> Field container */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons {
}

/* -> Field label */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice .gfield_label,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons .gfield_label {
}


/* -> Checkbox/Radio list container */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice div:where(.gfield_checkbox, .gfield_radio),
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons div:where(.gfield_checkbox, .gfield_radio) {
}

/* -> Checkbox/Radio input */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice input:where([type="radio"], [type="checkbox"]),
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons input:where([type="radio"], [type="checkbox"]) {
	opacity: 0;
	position: absolute;
	top: auto !important;
	transform: scale(0);
}

/* -> Input label element (default) */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice input + label,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons input + label {
	min-width: 110px;
	padding: 18px 12px;

	/* Use Georgia because Gotham does not work due to CORS issue on BB website */
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 18px;

	/*font-family: 'Gotham A', 'Gotham B', serif;*/
	/*font-size: 16px;*/

	line-height: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;

	border: 1px solid #CECECE;
	border-radius: 100px;

	color: #110D0A;
	background: #fff;
}

/* -> Input label element (hover) */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice .gchoice:hover label,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons .gchoice:hover label {
	background: var( --dtla-palette-radio-hover, #005182 );
	color: #fff;
}

/* -> Input label element (hover when another option is checked) */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice:has(input:checked) .gchoice:hover input:not(:checked) + label,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons:has(input:checked) .gchoice:hover input:not(:checked) + label {
	background: var( --dtla-palette-radio-hover-secondary, #367ca1 );
}

/* -> Input label element (checked) */
.gform_wrapper.dtl-style-radio-buttons_wrapper .gfield.gfield--type-choice input:checked + label,
.gform_wrapper .gfield.gfield--type-choice.dtl-style-radio-buttons input:checked + label {
	background: var( --dtla-palette-radio-active, #005182 );
	color: #fff;
}

/*
End: DTL styled radio buttons.
-----------------------
*/


/*
Darker submit buttons for Gravity Forms

To use, add the class "dark-submit-button" to your form.
Also supports palette colors (palette-courses, palette-dtl, palette-tdw) and defaults to palette-courses
*/
.gform_wrapper.dark-submit-button_wrapper .gform_footer input[type="submit"] {
	background: var( --dtla-palette-primary-normal, #005182 );
	color: #fff;
	border: none;
	border-radius: 100px;
	cursor: pointer;
}

.gform_wrapper.dark-submit-button_wrapper .gform_footer input[type="submit"]:where(:hover, :focus-visible) {
	background: var( --dtla-palette-primary-hover, #00314e );
	color: #fff;
}

/* Improved validation error message (displayed above form with white background) */
html body .gform_wrapper.gravity-theme .gform_validation_errors {
	max-width: 1100px;
	margin: 0 auto 20px;
	padding: 40px 0 !important;
}

html body .gform_wrapper.gravity-theme .gform_validation_errors>h2:has(.gform-icon)::before {
	display: none !important;
}

html body .gform_wrapper.gravity-theme .gform_validation_errors > h2.gform_submission_error .gform-icon {
	display: block;
	top: 50%;
	transform: translateY(-50%);
	height: auto;
}

/* Add padding to quiz result message container */
body .gform_wrapper.gravity-theme:has(.quiz-result-message) {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

body .quiz-result-message {
	padding: 20px 0;
}