/*
 * FPCEM public registration styles, ported from the Flask app's
 * static/fpcem.css (the registration-page sections) and scoped under
 * .fpcem-public so a theme's own styles are never touched.
 * Type is Montserrat with honest fallbacks; the two colors that matter
 * (--bq-navy for text, --bq-red for buttons) are custom properties, so a
 * child theme can restyle the form without editing this file.
 */

.fpcem-public {
	--bq-card: #ffffff;
	--bq-ink: #1f3b57;
	--bq-ink-soft: #4d6b80;
	--bq-navy: #1f3b57;
	--bq-red: #a8322a;
	--bq-red-deep: #862720;
	--bq-line: #d9dfe4;
	--bq-shadow: 0 10px 30px rgba(0, 40, 67, .12);
	--bq-sans: "Montserrat", "Trebuchet MS", "Gill Sans", sans-serif;

	color: var(--bq-ink);
	font-family: var(--bq-sans);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
}

.fpcem-public *,
.fpcem-public *::before,
.fpcem-public *::after { box-sizing: border-box; }

.fpcem-public [hidden] { display: none !important; }

.fpcem-public h1 {
	font-weight: 700;
	margin: 0;
	letter-spacing: -.2px;
}

/* --------------------------------------------------------------- forms */
.fpcem-public label.f {
	display: block;
	margin: 15px 0 5px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--bq-ink);
}
.fpcem-public label.f .opt { font-weight: 500; color: var(--bq-ink-soft); }

.fpcem-public input[type=text],
.fpcem-public input[type=email],
.fpcem-public input[type=tel],
.fpcem-public input[type=number] {
	width: 100%;
	padding: 11px 12px;
	font: inherit;
	color: var(--bq-ink);
	background: #fff;
	border: 1.5px solid #c4cfd7;
	border-radius: 7px;
}
.fpcem-public input:focus {
	outline: 2px solid var(--bq-red);
	outline-offset: 1px;
	border-color: var(--bq-red);
}

.fpcem-public .btn {
	display: inline-block;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	padding: 11px 22px;
	border-radius: 6px;
	border: 1.5px solid var(--bq-red-deep);
	background: var(--bq-red);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: transform .06s ease, background .15s ease;
}
.fpcem-public .btn:hover { background: var(--bq-red-deep); color: #fff; }
.fpcem-public .btn:active { transform: translateY(1px); }
.fpcem-public .btn.ghost { background: transparent; color: var(--bq-red); }
.fpcem-public .btn.ghost:hover { background: rgba(154, 22, 35, .07); color: var(--bq-red); }
.fpcem-public .btn.small { padding: 6px 12px; font-size: 13.5px; }

.fpcem-public .error {
	background: #fbe9e5;
	border: 1px solid #e4b6ab;
	color: #8c2f1d;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 14px;
}

/* ----------------------------------------------------- registration page */
.fpcem-public .invite {
	max-width: 640px;
	margin: 34px auto;
	background: var(--bq-card);
	border: 1px solid var(--bq-line);
	border-radius: 14px;
	box-shadow: var(--bq-shadow);
	overflow: hidden;
}
.fpcem-public .invite .invite-head {
	background: var(--bq-navy);
	color: #fff;
	padding: 34px 34px 26px;
	text-align: center;
	border-bottom: 4px solid var(--bq-red);
}
.fpcem-public .invite .invite-head h1 {
	font-size: 34px;
	font-weight: 800;
	margin: 8px 0 6px;
	color: #fff;
}
.fpcem-public .invite .invite-head .when {
	color: #b9cddb;
	font-weight: 600;
	font-size: 14.5px;
}
.fpcem-public .invite .invite-body { padding: 28px 34px 34px; }

@media (max-width: 560px) {
	.fpcem-public .invite { margin: 12px auto; }
	.fpcem-public .invite .invite-head { padding: 26px 20px 20px; }
	.fpcem-public .invite .invite-head h1 { font-size: 27px; }
	.fpcem-public .invite .invite-body { padding: 22px 18px 26px; }
}

/* Guest rows: first, last, relationship, allergies, remove. */
.fpcem-public .guest-row {
	display: grid;
	grid-template-columns: 1fr 1fr 110px 1.2fr 34px;
	gap: 8px;
	margin-top: 8px;
}
@media (max-width: 640px) {
	.fpcem-public .guest-row { grid-template-columns: 1fr 1fr; }
}
.fpcem-public .guest-row button.x,
.fpcem-public .child-row button.x {
	border: 0;
	background: none;
	color: var(--bq-red);
	font-size: 18px;
	cursor: pointer;
	padding: 0;
}
.fpcem-public .guest-row select {
	padding: 11px 10px;
	font: inherit;
	border: 1.5px solid #c4cfd7;
	border-radius: 7px;
	background: #fff;
	color: var(--bq-ink);
}

/* Child rows: name, age, allergies, remove. */
.fpcem-public .child-row {
	display: grid;
	grid-template-columns: 1.4fr .5fr 1.2fr 34px;
	gap: 8px;
	margin-top: 8px;
}

.fpcem-public .reveal { margin-top: 8px; }

/* Honeypot: parked far off-screen, never display:none, so bots still see it. */
.fpcem-public .hp { position: absolute; left: -9999px; }

.fpcem-public .checkline {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0 4px;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--bq-ink);
}
.fpcem-public .checkline input {
	width: 18px;
	height: 18px;
	accent-color: var(--bq-red);
}

.fpcem-public .fine { color: var(--bq-ink-soft); font-size: 12.5px; }

/* The mailing address: whole lines stack, and city / state / ZIP share a
   row. Each part can be switched off on its own, so the row is a wrapping
   flex rather than a fixed grid: turn off city and state and the ZIP box
   simply takes the width by itself. */
.fpcem-public .bq-addr { border: 0; margin: 0; padding: 0; }
/* A legend does not inherit the label styling, so it is set to match the
   other field labels and sit a little prouder, as the heading for the
   group beneath it. */
.fpcem-public .bq-addr > legend {
	display: block;
	padding: 0;
	margin: 18px 0 0;
	font-weight: 800;
	font-size: 13.5px;
	color: var(--bq-ink);
}
/* The first control under the legend supplies its own top margin. */
.fpcem-public .bq-addr > label.f:first-of-type { margin-top: 6px; }
.fpcem-public .bq-addr-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fpcem-public .bq-addr-row > div { flex: 1 1 7rem; min-width: 0; }
.fpcem-public .bq-addr-row .bq-city { flex: 2 1 10rem; }
.fpcem-public .bq-addr-row input { width: 100%; }

/* First/last name side by side. */
.fpcem-public .name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 520px) {
	.fpcem-public .name-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- public event picker */
.fpcem-public .pickgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
}
.fpcem-public .pickcard {
	display: block;
	text-decoration: none;
	color: var(--bq-ink);
	background: #fff;
	border: 1.5px solid var(--bq-line);
	border-top: 5px solid var(--bq-red);
	border-radius: 12px;
	padding: 22px 24px;
	box-shadow: 0 8px 22px rgba(0, 56, 90, .07);
	transition: transform .12s ease, box-shadow .12s ease;
}
.fpcem-public .pickcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(0, 56, 90, .14);
}
.fpcem-public .pickcard .pk-city {
	font-size: 26px;
	font-weight: 800;
	color: var(--bq-navy);
	letter-spacing: -.3px;
}
.fpcem-public .pickcard .pk-when {
	font-size: 15px;
	font-weight: 700;
	color: var(--bq-red);
	margin-top: 4px;
}
.fpcem-public .pickcard .pk-time {
	font-size: 13.5px;
	color: var(--bq-ink-soft);
	font-weight: 600;
}
.fpcem-public .pickcard .pk-venue {
	font-size: 14px;
	margin-top: 12px;
	line-height: 1.45;
}
.fpcem-public .pickcard .pk-speakers {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bq-navy);
	margin-top: 12px;
	border-top: 1px dashed var(--bq-line);
	padding-top: 10px;
}
.fpcem-public .pickcard .pk-go {
	margin-top: 14px;
	font-weight: 800;
	color: var(--bq-red);
	font-size: 14.5px;
}

@media (prefers-reduced-motion: reduce) {
	.fpcem-public *,
	.fpcem-public *::before,
	.fpcem-public *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------- branding */
/* The logo the organization uploads on FPCEM > Form Settings. The
   invite-head is the navy band, so the logo sits on brand color. */
.fpcem-public .bq-logo {
	display: block; margin: 0 auto 12px; height: 52px; width: auto;
	max-width: 230px; object-fit: contain;
}
/* On the navy band the logo sits on a white chip, so dark-on-light
   logos (most of them) stay legible without asking anyone to export
   a special version. */
.fpcem-public .invite-head .bq-logo {
	background: #fff; padding: 9px 16px; border-radius: 9px;
	height: 66px; box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.fpcem-public .bq-logo-row { text-align: center; margin: 0 0 18px; }
.fpcem-public .bq-logo-row .bq-logo { margin-bottom: 0; }