/*
 * Teacher Application form (CF7 5076 / 5077)
 * Pages: /teachers-employment/ and /teachers-employment-bp/
 */

/* Widen the form container (theme constrains .contact-form to a narrow column) */
.entry-content div.contact-form {
	width: auto !important;
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 0 24px 48px;
	box-sizing: border-box;
}

.liyh-teacher-application {
	--liyh-navy: #16265c;
	--liyh-blue: #2d4bd6;
	--liyh-blue-light: #eaf0fb;
	--liyh-text: #1e2a48;
	--liyh-muted: #5f6b85;
	--liyh-help: #6a7690;
	--liyh-border: #e3e8f0;
	--liyh-input-border: #c9d2e0;
	--liyh-orange: #f08b1d;
	--liyh-radius-card: 14px;
	--liyh-radius-input: 8px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin: 0 auto;
	color: var(--liyh-text);
}

@media (min-width: 768px) {
	.liyh-teacher-application {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ---------- Intro ---------- */

.liyh-form-intro {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 0 12px;
}

.liyh-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	font-weight: 700;
	color: var(--liyh-blue);
	margin: 0 0 6px;
}

.liyh-form-intro h2 {
	color: var(--liyh-navy);
	margin: 0 0 8px;
	text-align: center;
}

.liyh-form-intro p {
	color: var(--liyh-muted);
	margin: 0 auto 4px;
	max-width: 640px;
	text-wrap: balance;
}

.liyh-required-note span {
	color: var(--liyh-orange);
	font-weight: 700;
}

/* ---------- Cards ---------- */

.liyh-teacher-application .liyh-form-section,
.liyh-teacher-application .liyh-submit-section {
	background: #fff;
	border: 1px solid var(--liyh-border);
	border-radius: var(--liyh-radius-card);
	box-shadow: 0 1px 3px rgba(22, 38, 92, 0.05);
	padding: 36px 32px;
	min-width: 0;
}

/* Section 5 spans the full row with two static internal columns */
@media (min-width: 768px) {
	.liyh-teacher-application section.liyh-form-section:nth-of-type(5) {
		grid-column: span 2;
	}

	.liyh-section5-cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 28px;
		align-items: start;
	}
}

.liyh-teacher-application .liyh-field,
.liyh-teacher-application .liyh-philosophy-card {
	break-inside: avoid;
}

/* ---------- Section headings ---------- */

.liyh-section-heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 22px;
}

.liyh-section-number {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--liyh-blue);
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.liyh-section-heading h3 {
	color: var(--liyh-navy);
	font-size: 20px;
	line-height: 1.25;
	margin: 8px 0 4px;
}

.liyh-section-heading p {
	color: var(--liyh-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Fields ---------- */

.liyh-field {
	margin-bottom: 18px;
}

.liyh-field:last-child {
	margin-bottom: 0;
}

.liyh-teacher-application label {
	width: auto;
	float: none;
}

.liyh-teacher-application .liyh-field label {
	display: block;
	width: auto;
	font-weight: 600;
	font-size: 14px;
	color: var(--liyh-text);
	margin-bottom: 6px;
	line-height: 1.4;
}

.liyh-required {
	color: var(--liyh-orange);
	font-weight: 700;
}

.liyh-optional {
	color: var(--liyh-help);
	font-weight: 400;
	font-size: 12px;
	margin-left: 4px;
}

.liyh-field-help {
	color: var(--liyh-help);
	font-size: 13px;
	line-height: 1.5;
	margin: -2px 0 8px;
}

.liyh-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
	align-items: start;
}

@media (min-width: 480px) {
	.liyh-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.liyh-address-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 12px;
}

@media (min-width: 480px) {
	.liyh-address-grid {
		grid-template-columns: 1.2fr 1fr 0.9fr;
	}
}

/* ---------- Inputs ---------- */

.liyh-teacher-application .wpcf7-form-control-wrap {
	display: block;
}

.liyh-teacher-application .liyh-control {
	width: 100%;
	background: #fff;
	border: 1px solid var(--liyh-input-border);
	border-radius: var(--liyh-radius-input);
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--liyh-text);
	line-height: 1.4;
	box-sizing: border-box;
}

.liyh-teacher-application .liyh-control::placeholder {
	color: #9aa3b5;
	opacity: 1;
}

.liyh-teacher-application .liyh-control:focus {
	outline: none;
	border-color: var(--liyh-blue);
	box-shadow: 0 0 0 3px rgba(45, 75, 214, 0.15);
}

.liyh-teacher-application select.liyh-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

.liyh-teacher-application textarea.liyh-control {
	resize: vertical;
	min-height: 96px;
}

.liyh-teacher-application .liyh-textarea-short {
	min-height: 72px;
}

.liyh-teacher-application .liyh-textarea-medium {
	min-height: 104px;
}

.liyh-teacher-application .liyh-textarea-large {
	min-height: 140px;
}

.liyh-teacher-application input[type="date"].liyh-control {
	min-height: 41px;
}

/* ---------- Checkbox lists (availability) ---------- */

.liyh-teacher-application .wpcf7-checkbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.liyh-teacher-application .wpcf7-checkbox .wpcf7-list-item {
	display: block;
	margin: 0;
}

.liyh-teacher-application .wpcf7-checkbox .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--liyh-text);
	cursor: pointer;
	line-height: 1.4;
}

.liyh-teacher-application .wpcf7-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	accent-color: var(--liyh-blue);
}

/* ---------- Instruments multi-select dropdown ---------- */

.liyh-multi-dropdown {
	position: relative;
}

.liyh-multi-dropdown summary {
	list-style: none;
	cursor: pointer;
	background: #fff;
	border: 1px solid var(--liyh-input-border);
	border-radius: var(--liyh-radius-input);
	padding: 10px 34px 10px 12px;
	font-size: 14px;
	color: #9aa3b5;
	line-height: 1.4;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	user-select: none;
}

.liyh-multi-dropdown summary::-webkit-details-marker {
	display: none;
}

.liyh-multi-dropdown summary.liyh-has-selection {
	color: var(--liyh-text);
}

.liyh-multi-dropdown[open] summary {
	border-color: var(--liyh-blue);
	box-shadow: 0 0 0 3px rgba(45, 75, 214, 0.15);
}

.liyh-multi-dropdown-content {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	background: #fff;
	border: 1px solid var(--liyh-border);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(22, 38, 92, 0.14);
	max-height: 280px;
	overflow-y: auto;
	padding: 10px 12px;
}

.liyh-multi-dropdown-content .wpcf7-checkbox {
	gap: 2px;
}

.liyh-multi-dropdown-content .wpcf7-checkbox .wpcf7-list-item label {
	padding: 6px 6px;
	border-radius: 6px;
}

.liyh-multi-dropdown-content .wpcf7-checkbox .wpcf7-list-item label:hover {
	background: var(--liyh-blue-light);
}

/* ---------- Philosophy card ---------- */

.liyh-philosophy-card {
	background: var(--liyh-blue-light);
	border-radius: 10px;
	padding: 18px 18px 14px;
	margin-bottom: 18px;
}

.liyh-philosophy-label {
	font-weight: 700;
	font-size: 14px;
	color: var(--liyh-navy);
	margin: 0 0 8px;
}

.liyh-philosophy-card blockquote {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--liyh-text);
	font-style: normal;
}

/* ---------- Conditional fields ---------- */

.liyh-conditional[hidden] {
	display: none !important;
}

/* ---------- Submit card ---------- */

.liyh-submit-section {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.liyh-submit-section::before {
	content: "";
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background-color: var(--liyh-blue-light);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%232d4bd6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.liyh-submit-section h3 {
	color: var(--liyh-navy);
	font-size: 22px;
	margin: 0;
}

.liyh-submit-section p {
	color: var(--liyh-muted);
	font-size: 14px;
	line-height: 1.55;
	max-width: 320px;
	margin: 0;
}

.liyh-submit-button {
	width: 100%;
}

.liyh-teacher-application .liyh-submit {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 320px;
	background: var(--liyh-navy);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	border: 0;
	border-radius: var(--liyh-radius-input);
	padding: 13px 24px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.liyh-teacher-application .liyh-submit:hover {
	background: var(--liyh-blue);
}

/* ---------- CF7 validation / response ---------- */

.liyh-teacher-application .wpcf7-not-valid-tip {
	display: block;
	color: #d63333;
	font-size: 12px;
	margin-top: 5px;
}

.liyh-teacher-application .liyh-control.wpcf7-not-valid,
.liyh-multi-dropdown.liyh-invalid summary {
	border-color: #d63333;
}

.liyh-teacher-application + .wpcf7-response-output,
.liyh-teacher-application .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 8px 0 0;
	padding: 12px 16px;
	border-radius: var(--liyh-radius-input);
	font-size: 14px;
}

/* CF7 wraps the response output outside our grid div; keep default otherwise */


/* =========================================================
   Missing-field highlighting + "what's missing" summary
   ========================================================= */

.liyh-teacher-application {
	--liyh-error: #d63333;
	--liyh-error-dark: #a52121;
	--liyh-error-soft: #fdf4f4;
	--liyh-error-border: #efb9b9;
}

/* ---------- Summary panel above the form ---------- */

.liyh-error-summary {
	grid-column: 1 / -1;
	background: var(--liyh-error-soft);
	border: 1px solid var(--liyh-error-border);
	border-left: 4px solid var(--liyh-error);
	border-radius: var(--liyh-radius-card);
	padding: 18px 22px;
	scroll-margin-top: 24px;
	outline: none;
}

.liyh-error-summary[hidden] {
	display: none !important;
}

.liyh-error-summary-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	color: var(--liyh-error-dark);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.liyh-error-summary-title::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d63333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10.29 3.86-8.18 14a2 2 0 0 0 1.71 3h16.36a2 2 0 0 0 1.71-3l-8.18-14a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.liyh-error-summary-help {
	margin: 0 0 12px;
	color: var(--liyh-muted);
	font-size: 13px;
	line-height: 1.5;
}

.liyh-error-summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px 28px;
}

@media (min-width: 768px) {
	.liyh-error-summary-list {
		grid-template-columns: 1fr 1fr;
	}
}

.liyh-error-summary-list li {
	position: relative;
	margin: 0;
	/* the theme paints a bullet.png on every `ul li`; ours uses its own dot */
	background: none;
	padding-left: 16px;
	font-size: 14px;
	line-height: 1.45;
}

.liyh-error-summary-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--liyh-error);
}

.liyh-error-summary-list a {
	color: var(--liyh-error-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.liyh-error-summary-list a:hover,
.liyh-error-summary-list a:focus {
	color: var(--liyh-error);
}

/* ---------- Flagged question ---------- */

.liyh-teacher-application .liyh-field-invalid {
	border-left: 3px solid var(--liyh-error);
	border-radius: 2px;
	padding-left: 14px;
	scroll-margin-top: 24px;
}

.liyh-teacher-application .liyh-field-invalid > label {
	color: var(--liyh-error-dark);
}

.liyh-teacher-application .liyh-field-invalid .liyh-control,
.liyh-teacher-application .liyh-control.wpcf7-not-valid,
.liyh-multi-dropdown.liyh-invalid summary,
.liyh-teacher-application .liyh-field-invalid .liyh-multi-dropdown summary {
	border-color: var(--liyh-error);
	background-color: var(--liyh-error-soft);
	box-shadow: 0 0 0 3px rgba(214, 51, 51, 0.12);
}

.liyh-teacher-application .liyh-field-invalid .liyh-control:focus,
.liyh-teacher-application .liyh-field-invalid .liyh-multi-dropdown summary:focus {
	border-color: var(--liyh-error);
	box-shadow: 0 0 0 3px rgba(214, 51, 51, 0.22);
}

/* Checkbox group (availability) — box only the group, not the dropdown interior */
.liyh-teacher-application .liyh-field-invalid > .wpcf7-form-control-wrap > .wpcf7-checkbox {
	background: var(--liyh-error-soft);
	border: 1px solid var(--liyh-error-border);
	border-radius: var(--liyh-radius-input);
	padding: 12px 14px;
}

/* ---------- Flagged section card ---------- */

.liyh-teacher-application .liyh-form-section.liyh-section-invalid {
	border-color: var(--liyh-error-border);
	box-shadow: 0 1px 3px rgba(214, 51, 51, 0.12);
}

.liyh-teacher-application .liyh-section-invalid .liyh-section-number {
	background: var(--liyh-error);
}

/* ---------- CF7 response output ---------- */

.wpcf7[data-wpcf7-id="5076"] form.invalid .wpcf7-response-output,
.wpcf7[data-wpcf7-id="5076"] form.unaccepted .wpcf7-response-output,
.wpcf7[data-wpcf7-id="5076"] form.payment-required .wpcf7-response-output,
.wpcf7[data-wpcf7-id="5077"] form.invalid .wpcf7-response-output,
.wpcf7[data-wpcf7-id="5077"] form.unaccepted .wpcf7-response-output,
.wpcf7[data-wpcf7-id="5077"] form.payment-required .wpcf7-response-output {
	border: 1px solid #efb9b9;
	background: #fdf4f4;
	color: #a52121;
	font-weight: 600;
}