@charset "UTF-8";
/* CSS Document */

main .container .mirror.inner { max-width: 800px; }

.hero {
	position: relative;
	aspect-ratio:2.385/1;
}
.hero:before {
	content:"";
	display: block;
	position: absolute;
	inset:auto 0 0 0;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0.6) 100%);
	z-index: 1;
}
.hero figure {
	position: absolute;
	inset:0;
	background-image: url("../../images/hero/teacher-with-kids.webp");
	background-position:33% center;
	background-size: cover;
}
.hero figure figcaption {
	position: absolute;
	bottom: 25px;
	left:   25px;
	color: white;
	z-index: 2;
}
.hero figcaption > h1 { font-family: var(--banner_title);    font-weight: var(--banner_title_weight);   font-size:   var(--banner_title_fontsize);	  line-height: var(--banner_title_leading);    }
.hero figcaption > h2 { font-family: var(--banner_subtitle); font-weight: var(--banner_subtitle_weight);font-size:   var(--banner_subtitle_fontsize); line-height: var(--banner_subtitle_leading); }


/* states */

	html[data-pag="registration"] .panes .pane ul.control > li[data-label="registration"] { border-color:var(--color_secondary); border-bottom-width:4px; }


/* tabbed panes */

	.tabbed-panes {
		width: 100%;

		ul.control {
			display: grid;
			position: sticky;
			position: -webkit-sticky;
			top: 50px;
			background-color: beige;
			background-color: white;
			width: calc(100% + 60px);
			margin-left: -30px;
			grid-auto-flow:column;
			
			gap:0;
			padding-bottom: 15px;
			padding-bottom: 0;
			
			&[data-count="2"] { grid-template-columns: 1fr 1fr; }
			&[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }

			li {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				border-bottom: 2px solid var(--color_border);
				font-size: 1.25rem;
				line-height: 1.2;
				align-content: center;

				a {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					text-align: center;
					padding-top: 20px;
					padding-bottom: 15px;
					min-height: 40px;
					min-height: 0;
					i {

					}
					em {

					}
				}
			}
		}
		ul.contents {
			width: 100%;
			li {
				width: 100%;
			}
		;
			padding-top: 30px;
		}
	}

/* custom registration styles */

	.form-element .ff input[type="checkbox"] ~ em {/* font-size: 1.15rem; */}

	form[name="registration"] .form-element .fw em span { display: none; }
	form[name="registration"] .form-element .fw em span[data-invalid="1"] { display: block; }

	/*	
	form[name="registration"] .form-element[data-label="email"] .fw em span[data-reason="invalid"] { display: block; }
	form[name="registration"][data-reason="invalid" ] .form-element[data-label="email"] .fw em span[data-reason="invalid"] { display: block; }
	form[name="registration"][data-reason="exists"  ] .form-element[data-label="email"] .fw em span[data-reason="exists"] { display: block; }
	form[name="registration"][data-reason="mismatch"] .form-element[data-label="email"] .fw em span[data-reason="mismatch"] { display: block; }
	*/
	
	
	
	form[name="registration"] .conditional-content[data-label="succeeded"] p {
		text-wrap:balance;
	}
	.form-element[data-label="registration_code"] {
		position: relative;
		left: 50%;
		transform:translateX(-50%);
		width: 200px;
	}
	.form-element[data-label="registration_code"] .ff {
	
		border:2px solid var(--color_border);
	}
	.form-element[data-label="registration_code"] input[name="registration_code"] {
		font-size: 24px;
		text-align: center;
		letter-spacing: 2px;
	}