/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 * https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
 */
/*
1.	Switch
2.	Structure
3.	Marker
4.	Legend
5.	Address
*/

/*************
 * 1. Switch *
 *************/
.natcamap__switch{
	font-size: 18px;
	font-weight: 700;
}

	.natcamap__switch span,
	.natcamap__switch label{
		cursor: pointer;
	}

.natcamap input[type="checkbox"]{
	--active: #275EFE;
	--active-inner: #fff;
	--focus: 2px rgba(39, 94, 254, .25);
	--border: #BBC1E1;
	--border-hover: #275EFE;
	--background: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 21px;
	outline: none;
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin: 0;
	cursor: pointer;
	border: 1px solid var(--bc, var(--border));
	background: var(--b, var(--background));
	transition: background .3s, border-color .3s, box-shadow .2s;
}

.natcamap input[type="checkbox"]::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
}

.natcamap input[type="checkbox"]:checked{
	--b: var(--active);
	--bc: var(--active);
	--d-o: .3s;
	--d-t: .6s;
	--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}

.natcamap input[type="checkbox"]:focus{
	box-shadow: 0 0 0 var(--focus);
}

/* apply another border color on hover if not checked & not disabled */
.natcamap input[type='checkbox']:not(:checked):not(:disabled):hover{
	--bc: var(--border-hover);
}

.natcamap input[type="checkbox"] + label{
  display: inline-block;
  vertical-align: top;
}

.natcamap input[type="checkbox"].switch{
	width: 38px;
	border-radius: 11px;
	background: var(--strong-red);
	margin-right: .25rem;
	margin-left: .25rem;
}
	
	.natcamap #facilitytype input[type="checkbox"].switch{
		opacity: .75;
		transition: opacity .2s;
	}

		.natcamap #facilitytype input[type="checkbox"].switch:checked{
			opacity: 1;
		}

	.natcamap #artcc{ background: #9c27b0; }
	.natcamap #ccf{ background: #ffd600; }
	.natcamap #cc{ background: #427e90; }
	.natcamap #dod{ background: #c2185b; }
	.natcamap #fct{ background: #afb42b; }
	.natcamap #fsf{ background: #935040; }
	.natcamap #regionx{ background: #f57c00; }
	.natcamap #twac{ background: #0288d1; }
	.natcamap #twoac{ background: #ff5252; }
	.natcamap #tracon{ background: #7cb342; }	

/* the toggle knob */
.natcamap input[type="checkbox"].switch::after{
	left: 2px;
	top: 2px;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	background: var(--ab, var(--background));
	transform: translateX(var(--x, 0));
}

/* change color and position when checked */
.natcamap input[type="checkbox"].switch:checked{
	--ab: var(--active-inner);
	--x: 17px;
	background: var(--strong-blue);
}

#droppin{
	color: #4d4d4d;
	font-size: 13px;
	padding-top: 26px;
	margin-top: -1em;
	position: relative;
	float: right;
	display: none;
}

	.natcamap input[type="checkbox"].switch:checked ~ #droppin{
		display: block;
	}

#droppin::before {
	content: "\e901";
	font-family: 'icomoon';
	font-size: 26px;
	color: var(--strong-red);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/****************
 * 2. Structure *
 ****************/
.natcamap{
	margin-top: .5em;
}

.natcamap__container{
	display: none;
}

	.natcamap__container.active{
		display: block;
	}
	
	.natcamap > * + *{
		margin-top: 20px;
	}

.natcamap__container #map,
.natcamap__container #congressional-map{
	height: 55vh;
	width: 100%;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

/*************
 * 3. Marker *
 *************/
.natcamap__marker h4{
	line-height: 1.65;
}

.natcamap__marker p{
	margin-bottom: 0;
}

/*************
 * 4. Legend *
 *************/
.legend{
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
	padding: 20px;
	margin-top: 20px;
}

	.legend h3{
		margin-bottom: 5px;
	}

#regions > dl > div{
	float: left;
	width: 100%;
}
		
#regions dt{
	float: left;
	clear: left;
	width: 175px;
}

#regions dd{
	padding-bottom: 5px;
	margin-left: 185px;
}

.entry-content .legend ul{
	column-count: 1;
	margin-left: 0;
	list-style: none;
}

@media all and (min-width: 800px){
	.entry-content .legend ul{
		column-count: 2;
	}
}

@media all and (min-width: 1024px){
	.entry-content .legend ul{
		column-count: 3;
	}
}

/**************
 * 5. Address *
 **************/
.natcamap__container [role="group"]{
	margin-top: 40px;
}

.natcamap__container .input-block{
	position: relative;
	margin: 1rem;
}

@media all and (min-width: 1024px){
	.natcamap__container [role="group"]{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		--modifier: calc(40em - 100%);
	}

	.natcamap__container .input-block{
		flex-grow: 1;
		flex-basis: calc(var(--modifier) * 999);
	}
}	

.natcamap__container .input-block input,
.natcamap__container .input-block select{
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	border: solid 1px #7a7a7a;
	margin-bottom: 20px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 100%;
	height: 42px;
}

.natcamap__container .input-block input:hover,
.natcamap__container .input-block select:hover{
	border: solid 1px #171717;
}

.natcamap__container .input-block label{
	font-size: 15px;
	color: #999;
	position: absolute;
	top: 10px;
	left: 10px;
	pointer-events: none;
	transition: 0.2s ease all;
}

.natcamap__container .input-block input:focus ~ label,
.natcamap__container .input-block input:valid ~ label,
.natcamap__container .input-block select:focus ~ label,
.natcamap__container .input-block select:valid ~ label{
	top: -20px;
	left: 5px;
	font-size: 13px;
	color: #414141;
}

.natcamap__container .wp-block-button{
	margin-right: 1rem;
	margin-left: 1rem;
}

.natcamap__container .input-block select{
    display: block;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
	/* icon svg */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23171717%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) */
    background-position: right .7em top 50%;
    /* icon size */
    background-size: .65em auto;
}

/* Hide arrow icon in IE browsers */
.natcamap__container .input-block select::-ms-expand {
    display: none;
}