espterm-front-end/sass/layout/_box.scss

.botpad {
	display:block;
	height: 5em;
}

.Box {
	display: block;
	max-width: 900px;

	margin-top: dist(0);
	padding: dist(-1) dist(0);

	// clear floats
	&::after {
		content: '';
		display: block;
		clear: both
	}

	@include media($phone) {
		margin-top: dist(-1);
	}

	h1, h2 {
		overflow: hidden;
	}

	h1 + & {
		margin-top: 0;
	}

	h2 {
		margin-top: 0;
		margin-bottom: 0 !important;
	}

	p:last-child {
		margin-bottom: 0.5em;
	}

	border-radius: 3px;
	background-color: rgba(white, .07);
	box-shadow: 0 0 4px black;
	border: 1px solid #4f4f4f;

	&.wide {
		width: initial;
		max-width: initial;
	}

	&.medium {
		max-width: 1200px;
	}

	//.Valfield {
	//	display: inline-block;
	//	min-width: 10em;
	//}

	// Submit Top Right
	&.str {
		position: relative;
		.Row.buttons {
			position: absolute;

			@include media($phone) {
				right: dist(0);
				top: 1.8em;
				margin: 1rem auto;
			}

			@include media($tablet-min) {
				right: 0;
				top: 0;
				margin-top: dist(-1);
			}
		}
	}

	&.str.mobopen .Row.buttons {
		top: 0;
		margin-top: dist(-1);
	}

	.Row.explain {
		display: block; // this stops flex messing up text with inline tags
		max-width: 600px; margin-left: 0;
		line-height: 1.2;

		@include media($phone) {
			margin-top: 60px;
		}

		&.nomargintop {
			margin-top: 12px !important;
		}

		&.padleft {

		}
	}
	&.mobopen .Row.explain {
		margin-top: 12px; // default from .Row

		@include media($phone) {
			margin-top: 18px;
		}
	}
}

@mixin mobcol-base {
	h2 {
		position: relative;
		cursor: pointer;
		padding: 2px 1.3rem 2px 5px;
		margin: 0 -5px 0 -5px;

		&::after {
			position: absolute;
			right: 4px;
			content: '▸';

			top:50%;
			font-size: 120%;
			font-weight: bold;
			transform: translate(0,-50%) rotate(90deg);
		}
	}

	&.expanded h2::after {
		transform: translate(-25%,-50%) rotate(-90deg);
		margin-bottom: dist(0);
	}

	.Row {
		display: none;
	}

	&.expanded {
		.Row {
			display: flex;
			&.explain { display: block; }

			&.v {
				display: block;
			}
		}
	}

	// desktop-expanded
	@include media($tablet-min) {
		&.d-expanded {
			.Row {
				display: flex;
				&.explain { display: block; }

				&.v {
					display: block;
				}
			}
		}
	}
}

.Box.fold {
	@include mobcol-base;
}

@include media($phone) {
	.Box.fold, .Box.mobcol {
		h2 {
			padding: 2px 1.3rem 2px 5px;
			margin: 0 -5px 0 -5px;
		}

		&.expanded h2::after {
			margin-bottom: dist(0);
		}
	}

	.Box.mobcol {
		@include mobcol-base;

		#ap-box {
			display: none;
		}

		&.expanded {
			#ap-box {
				display: block;
			}
		}
	}
}