/* =========================================================================
   single-webinar.php — page-specific styles
   Only enqueued on singular Webinar pages (see functions.php), so nothing
   here can affect Work/Events/News/any other template.
   ========================================================================= */

/* --- CTA banner: give it a stable height so the background image's
   "cover" crop doesn't blow the circle graphic up on short content ------- */
.toa-ctab--webinar {
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Generic styling for embedded lead-gen forms ------------------------
   Source not yet confirmed (HubSpot / Fluent Forms / raw HTML) — these
   rules target plain HTML form elements so whatever markup is pasted into
   the post content still looks consistent with the rest of the site. Once
   the actual form source is confirmed, these can be replaced with
   plugin-specific selectors if needed. */
.toa-csb--webinar form {
	max-width: 420px;
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.toa-csb--webinar form label,
.toa-csb--webinar form p {
	font-family: var(--typography-family-body, "Sora", sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--primary-purple-purple-900, #410064);
	margin: 0;
}

.toa-csb--webinar form input[type="text"],
.toa-csb--webinar form input[type="email"],
.toa-csb--webinar form input[type="tel"],
.toa-csb--webinar form select,
.toa-csb--webinar form textarea {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--neutral-100, #DEDEDE);
	border-radius: 8px;
	font-family: var(--typography-family-body, "Sora", sans-serif);
	font-size: 0.9375rem;
	color: var(--primary-purple-purple-900, #410064);
	background: #fff;
}

.toa-csb--webinar form input[type="text"]:focus,
.toa-csb--webinar form input[type="email"]:focus,
.toa-csb--webinar form input[type="tel"]:focus,
.toa-csb--webinar form select:focus,
.toa-csb--webinar form textarea:focus {
	outline: 2px solid var(--primary-pink-pink-500, #FF3F8F);
	outline-offset: 1px;
	border-color: var(--primary-pink-pink-500, #FF3F8F);
}

.toa-csb--webinar form ul,
.toa-csb--webinar form li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toa-csb--webinar form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin-right: 0.5rem;
	vertical-align: middle;
	accent-color: var(--primary-pink-pink-500, #FF3F8F);
}

.toa-csb--webinar form input[type="submit"],
.toa-csb--webinar form button[type="submit"] {
	align-self: flex-start;
	padding: 0.75rem 1.75rem;
	border: none;
	border-radius: 999px;
	background: var(--primary-purple-purple-900, #410064);
	color: #fff;
	font-family: var(--typography-family-display, "Sora", sans-serif);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.toa-csb--webinar form input[type="submit"]:hover,
.toa-csb--webinar form button[type="submit"]:hover {
	background: var(--primary-purple-purple-600, #79369C);
}