/**
 * PA Webinars.
 *
 * Loaded only on a webinar page, and after the theme's own stylesheets, so every rule
 * here wins a specificity tie on its own merits. There is no !important in this file.
 */

.pa-wb {
	--pa-wb-navy: #002c54;
	--pa-wb-blue: #0072aa;
	--pa-wb-green: #43a548;
	--pa-wb-wash: #f3f7f9;
	--pa-wb-line: #dcdada;
	--pa-wb-ink: #3f4a56;
}

/* ---------------------------------------------------------------- shared */

.pa-wb .pa-wb-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pa-wb-green);
	margin-bottom: 0.6rem;
}

.pa-wb .pa-wb-section {
	margin-top: 4rem;
}

.pa-wb .pa-wb-section-title {
	margin-bottom: 0.35rem;
}

.pa-wb .pa-wb-section-note {
	color: var(--pa-wb-ink);
	font-size: 0.9rem;
	margin-bottom: 1.6rem;
}

/* ------------------------------------------------------------------ hero */

/*
 * The theme's text-and-photo block sizes its left column to the picture beside it. The
 * hero here carries a little more than the usual title and paragraph, so the column is
 * allowed to scroll rather than spill out of the block.
 */
.pa-wb .pa-wb-hero .left .content {
	max-height: 100%;
	overflow: auto;
}

.pa-wb .pa-wb-subtitle {
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--pa-wb-blue);
	margin-bottom: 1rem;
}

.pa-wb .pa-wb-hero-when {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pa-wb-navy);
	margin-bottom: 1.4rem;
}

.pa-wb .pa-wb-dot {
	color: var(--pa-wb-line);
	margin: 0 0.45rem;
}

/*
 * Nothing here sets `display`. The theme centres the label inside .button-default with
 * inline-flex against a fixed 40px height, so overriding the display to inline-block
 * leaves the text sitting at the top of the pill with the centring rules inert.
 */
.pa-wb .pa-wb-hero-cta {
	margin-top: 0.2rem;
}

/* ----------------------------------------------------------------- facts */

.pa-wb .pa-wb-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--pa-wb-line);
	border: 1px solid var(--pa-wb-line);
	border-radius: 14px;
	overflow: hidden;
	margin-top: 2.5rem;
}

.pa-wb .pa-wb-fact {
	background: #fff;
	padding: 1.3rem 1.4rem;
}

.pa-wb .pa-wb-fact-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-wb-blue);
	margin-bottom: 0.4rem;
}

.pa-wb .pa-wb-fact-value {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pa-wb-navy);
}

.pa-wb .pa-wb-intro {
	max-width: 54rem;
	margin-top: 2.2rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--pa-wb-ink);
}

/* --------------------------------------------------------------- speaker */

.pa-wb .pa-wb-speaker {
	display: grid;
	grid-template-columns: 17rem 1fr;
	gap: 2.6rem;
	align-items: center;
	margin-top: 4rem;
	padding: 2.2rem;
	background: var(--pa-wb-wash);
	border-radius: 18px;
}

.pa-wb .pa-wb-speaker-photo {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	/* 4:5, matching how the portrait was cropped. */
	aspect-ratio: 4 / 5;
	background: #e7edf1;
}

.pa-wb .pa-wb-speaker-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* The theme's green accent bar, reused so the block belongs to the same family. */
.pa-wb .pa-wb-speaker-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	background: var(--pa-wb-green);
}

.pa-wb .pa-wb-speaker-text h2 {
	margin-bottom: 0.3rem;
}

.pa-wb .pa-wb-speaker-role {
	font-size: 1rem;
	font-weight: 600;
	color: var(--pa-wb-blue);
	margin-bottom: 0.9rem;
}

.pa-wb .pa-wb-speaker-text p {
	color: var(--pa-wb-ink);
	line-height: 1.65;
	margin-bottom: 0.6rem;
}

/* ------------------------------------------------------------- programme */

.pa-wb .pa-wb-programme {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--pa-wb-line);
}

.pa-wb .pa-wb-programme-item {
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--pa-wb-line);
}

.pa-wb .pa-wb-programme-title {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-size: 1.08rem;
	line-height: 1.35;
	color: var(--pa-wb-navy);
	margin: 0 0 0.3rem;
}

.pa-wb .pa-wb-programme-num {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--pa-wb-green);
}

.pa-wb .pa-wb-programme-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--pa-wb-ink);
}

/* The welcome and the close are signposts, not sessions, so they sit back a little. */
.pa-wb .pa-wb-programme-item.is-plain .pa-wb-programme-title {
	font-size: 0.98rem;
	color: var(--pa-wb-ink);
	font-weight: 600;
}

/* --------------------------------------------------------- two up panels */

.pa-wb .pa-wb-two-up {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
}

/* One panel on its own reads as a deliberate block rather than an orphaned column. */
.pa-wb .pa-wb-two-up-single {
	grid-template-columns: 1fr;
}

.pa-wb .pa-wb-two-up-single .pa-wb-ticks {
	columns: 2;
	column-gap: 2.5rem;
}

.pa-wb .pa-wb-two-up-single .pa-wb-ticks li {
	break-inside: avoid;
}

.pa-wb .pa-wb-panel {
	padding: 2rem 2.1rem;
	border: 1px solid var(--pa-wb-line);
	border-radius: 18px;
}

.pa-wb .pa-wb-panel h2 {
	font-size: 1.4rem;
	margin-bottom: 1.1rem;
}

.pa-wb .pa-wb-panel-green {
	background: var(--pa-wb-navy);
	border-color: var(--pa-wb-navy);
}

.pa-wb .pa-wb-panel-green h2 {
	color: #fff;
}

/*
 * One class deeper than the .pa-wb-ticks rule below, which sets the ink colour and would
 * otherwise win on source order and leave this list dark text on a dark panel.
 */
.pa-wb .pa-wb-panel-green .pa-wb-ticks li {
	color: #fff;
}

.pa-wb .pa-wb-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pa-wb .pa-wb-ticks li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.85rem;
	line-height: 1.55;
	color: var(--pa-wb-ink);
}

.pa-wb .pa-wb-ticks li:last-child {
	margin-bottom: 0;
}

.pa-wb .pa-wb-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--pa-wb-green);
}

/* -------------------------------------------------------------- register */

.pa-wb .pa-wb-register {
	padding: 2.6rem;
	background: var(--pa-wb-wash);
	border-radius: 18px;
	margin-bottom: 4rem;
}

.pa-wb .pa-wb-register-head {
	max-width: 42rem;
	margin-bottom: 2rem;
}

.pa-wb .pa-wb-register-head p {
	color: var(--pa-wb-ink);
	margin-top: 0.5rem;
}

/* The theme styles its inputs against a white page; these sit on the wash. */
.pa-wb .pa-wb-form .input-default {
	background: #fff;
}

.pa-wb .pa-wb-form-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}

.pa-wb .pa-wb-privacy {
	flex: 1 1 18rem;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #6b7682;
}

.pa-wb .pa-wb-privacy a {
	color: var(--pa-wb-blue);
	text-decoration: underline;
}

/*
 * The honeypot. Taken out of the layout and hidden from assistive technology, but still
 * a real, focusable text field as far as an automated client can tell.
 */
.pa-wb .pa-wb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pa-wb .pa-wb-message {
	margin-top: 1.2rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.pa-wb .pa-wb-message.is-error {
	color: #b3261e;
}

.pa-wb .pa-wb-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* --------------------------------------------------------------- success */

.pa-wb .pa-wb-success {
	text-align: center;
	padding: 1rem 0 0.5rem;
}

.pa-wb .pa-wb-success-mark {
	width: 3.4rem;
	height: 3.4rem;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: var(--pa-wb-green);
	color: #fff;
	font-size: 1.7rem;
	line-height: 3.4rem;
}

.pa-wb .pa-wb-success-text {
	max-width: 34rem;
	margin: 0 auto 2rem;
	color: var(--pa-wb-ink);
	line-height: 1.6;
}

/* The theme aligns .button-default to the start of its flex parent; this one is centred
   under the confirmation, so the alignment has to be overridden rather than inherited. */
.pa-wb .pa-wb-calendar-button {
	align-self: center;
}

.pa-wb .pa-wb-calendar-note {
	margin: 0.85rem 0 0;
	font-size: 0.82rem;
	color: #6b7682;
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 991px) {
	.pa-wb .pa-wb-facts {
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * An odd number of facts in a two column grid leaves an empty cell, and the grid's
	 * gap colour shows through it as a stray block. The last one takes the whole row.
	 */
	.pa-wb .pa-wb-fact:last-child {
		grid-column: 1 / -1;
	}

	.pa-wb .pa-wb-speaker {
		grid-template-columns: 1fr;
		gap: 1.8rem;
		text-align: center;
	}

	.pa-wb .pa-wb-speaker-photo {
		width: 14rem;
		margin: 0 auto;
	}

	.pa-wb .pa-wb-two-up {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575px) {
	.pa-wb .pa-wb-section {
		margin-top: 2.8rem;
	}

	.pa-wb .pa-wb-facts {
		grid-template-columns: 1fr;
	}

	.pa-wb .pa-wb-two-up-single .pa-wb-ticks {
		columns: 1;
	}

	.pa-wb .pa-wb-speaker,
	.pa-wb .pa-wb-register {
		padding: 1.6rem 1.3rem;
	}

	.pa-wb .pa-wb-panel {
		padding: 1.6rem 1.4rem;
	}
}

/* ------------------------------------------- external registration */

/*
 * Shown in place of the form when registration is handled on another site. It keeps the
 * same wash panel as the form it replaces, so the page's shape does not change.
 */
.pa-wb .pa-wb-external {
	text-align: center;
	padding: 1rem 0 0.5rem;
}

.pa-wb .pa-wb-external-text {
	max-width: 34rem;
	margin: 0.7rem auto 1.8rem;
	color: var(--pa-wb-ink);
	line-height: 1.6;
}

.pa-wb .pa-wb-external-button {
	align-self: center;
}

.pa-wb .pa-wb-external-note {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	color: #6b7682;
}