/* L44 Form Event — the sign-up band.
 * -------------------------------------------------------------------------
 * A full-width strip of the page colour with the form on a 1000px measure
 * inside it. Two cells to a row at every width, as specified: on a phone that
 * makes each cell half the screen, which is tight but deliberate.
 */

.l44fe {
	/* This band is the one thing in this plugin a visitor sees — the sign-up
	   form on an event page, not a screen for whoever is running the door. So
	   it keeps the site's thousand, with the gutter added outside it rather
	   than taken out, the way every other public section is built. */
	--l44fe-inset: 35px;

	background: #dcdcdc;
	margin: 20px 0;
	padding: 26px 0 30px;
	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #181617;
}

.l44fe__inner {
	width: 100%;
	max-width: calc( 1000px + var(--l44fe-inset, 35px) * 2 );
	margin: 0 auto;
	padding-left: var(--l44fe-inset, 35px);
	padding-right: var(--l44fe-inset, 35px);
	box-sizing: border-box;
}

@media (max-width: 1000px) {
	.l44fe { --l44fe-inset: 15px; }
}

.l44fe__title {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Two columns, always — the specification, not a breakpoint decision. The 2px
   gap is the stroke between cells rather than a space. */
.l44fe__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.l44fe__cell { min-width: 0; }

.l44fe__cell input {
	appearance: none;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	padding: 0 16px;
	border: 0;
	background: #efefef;
	font: inherit;
	font-size: 15px;
	color: #181617;
	text-align: center;
	border-radius: 0;
	/* Not uppercased. The label is the thing set in capitals; what someone
	   types is their own name and address, and it should look as they wrote
	   it — the transform is only a display, so an email shown in capitals is
	   stored in lower case and the two disagree on screen. */
	text-transform: none;
}

.l44fe__cell input::placeholder {
	color: #6f6d6e;
	text-transform: uppercase;
	opacity: 1;
}

.l44fe__cell input:focus {
	outline: 2px solid #181617;
	outline-offset: -2px;
	background: #ffffff;
}

/* Holds the left half of a row so the button can sit on the right. Only drawn
   when the field count is even; an odd count already leaves the right column
   free on the last row. */
.l44fe__cell--spacer { background: transparent; }

.l44fe__btn {
	appearance: none;
	display: block;
	width: 100%;
	height: 50px;
	border: 0;
	border-radius: 0;
	background: #00a95c;
	color: #ffffff;
	font: inherit;
	font-size: 17px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.14s ease;
}

.l44fe__btn:hover { background: #00934f; }
.l44fe__btn[disabled] { opacity: 0.55; cursor: default; }

/* The second column, on the row below the button — so it sits under it and
   takes its width rather than running the full band.
   
   Set like the cells: same size, same ink. No text-transform, so it reads as
   the sentence it is and prints whatever capitals were typed in the editor. */
.l44fe__fine {
	grid-column: 2;
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.35;
	color: #181617;
}

/* The three states that replace the form. */
.l44fe__notice {
	padding: 16px 18px;
	font-size: 17px;
	line-height: 1.35;
	text-transform: uppercase;
	background: #efefef;
}
.l44fe__notice--ok   { background: #00a95c; color: #ffffff; }
.l44fe__notice--full { background: #efefef; color: #181617; }
.l44fe__notice--err  { background: #e45d50; color: #ffffff; margin-bottom: 14px; }

/* Off screen rather than display:none — a hidden field is skipped by some bots
   but read by all of them, and this one is meant to be found and filled in. */
.l44fe__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 900px) {
	.l44fe { margin: 20px 0; padding: 20px 0 22px; }
	.l44fe__title { font-size: 19px; }
	.l44fe__cell input { font-size: 13px; padding: 0 8px; }
	.l44fe__btn { font-size: 15px; }
	.l44fe__fine { font-size: 13px; }   /* as the cells are on a phone */
}

@media (prefers-reduced-motion: reduce) {
	.l44fe__btn { transition: none; }
}

/* ---- the shared sheet ----
   The same band, used as a page rather than a form. The table can be wider
   than a phone, so it scrolls inside its own box instead of pushing the page
   sideways. */
/* The sheet is a page of its own, and the site header is fixed — so the band
   starts underneath it. The figure here is a fallback the script replaces with
   the header's real height, which differs between the phone and desktop
   layouts and cannot be known from a stylesheet. */
.l44fe--sheet { margin: 0; padding: 150px 0 40px; }

@media (max-width: 900px) {
	.l44fe--sheet { padding-top: 110px; }
}
.l44fe__pick { margin: 0 0 16px; }
.l44fe__pick select { height: 44px; font: inherit; font-size: 15px; padding: 0 10px; max-width: 100%; }

.l44fe__scroll { overflow-x: auto; }

.l44fe__table {
	width: 100%;
	border-collapse: collapse;
	background: #efefef;
	font-size: 14px;
}
.l44fe__table th,
.l44fe__table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 2px solid #dcdcdc;
	white-space: nowrap;
}
.l44fe__table thead th {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	color: #6f6d6e;
}
.l44fe__table tfoot th {
	font-weight: 700;
	text-transform: uppercase;
	border-bottom: 0;
	background: #dcdcdc;
}