/*
 * C12 Current site-specific CSS.
 *
 * Edit in WordPress under Appearance > C12 Site CSS.
 * This file is loaded after Divi's main stylesheet.
 */

/*
 * Speakers: leave Divi's rows, columns, widths, and breakpoints untouched.
 * JavaScript measures each already-rendered visual row and supplies only the
 * content-derived identity height needed to align that row's buttons.
 */
body.c12-site-code.c12-speaker-dialog-ready #main-content .c12-speaker-identity {
	box-sizing: border-box;
	height: auto !important;
	min-height: var(--c12-speaker-row-height, 0px) !important;
	max-height: none !important;
	margin-bottom: 16px !important;
	overflow: visible !important;
	transition: none !important;
}

body.c12-site-code.c12-speaker-dialog-ready #main-content .c12-speaker-identity .c12-speaker-bio-content {
	display: none !important;
}

body.c12-site-code.c12-speaker-dialog-ready #main-content .dipi_reveal .dipi-reveal {
	margin-top: 0 !important;
}

body.c12-site-code #main-content .c12-speaker-trigger {
	white-space: nowrap;
}

/*
 * Sponsors: the copy section is authoring-only. It holds one block per sponsor
 * - that sponsor's logo plus its popup copy - and never renders on the front
 * end. It stays visible inside the Divi builder so the copy can be edited.
 */
body.c12-site-code #main-content .c12-sponsor-copy {
	display: none !important;
}

body.et-fb.c12-site-code #main-content .c12-sponsor-copy,
body.et-bfb.c12-site-code #main-content .c12-sponsor-copy {
	display: block !important;
}

/*
 * Sponsors tiers.
 *
 * Column widths and every breakpoint are Divi's own - a tier is just a normal
 * Divi row, so a 4-column row goes 4 -> 2 -> 1 and a 6-column row goes
 * 6 -> 3 -> 1 exactly as Divi does everywhere else on the site.
 *
 * Two things Divi cannot express on its own:
 *   1. A tier holding fewer logos than it has slots should centre them rather
 *      than stack them left, so the spare slots are hidden and the row centres.
 *   2. The copy module sits under each logo but never shows on the front end,
 *      which makes it :last-child - so Divi's "zero the last module's margin"
 *      rule lands on the hidden element and the logo keeps a stray margin.
 */
body.c12-site-code #main-content .c12-sponsor-tier {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

body.c12-site-code #main-content .c12-sponsor-tier > .et_pb_column:not(:has(.et_pb_module)) {
	display: none;
}

body.c12-site-code #main-content .c12-sponsor-tier .et_pb_image {
	margin-bottom: 0;
}

/*
 * Divi's own column rules are inconsistent across types: 1_3 and 1_2 collapse
 * to full width at 980px, while 1_4 and 1_6 stay multi-column all the way down
 * to 479px. On a page of stacked tiers that reads as a bug - the top tiers show
 * one logo per line while the bottom still shows three.
 *
 * So the tiers get one consistent ladder instead: two across on tablet, one on
 * phone. Single-logo tiers are left alone.
 */
@media (min-width: 768px) and (max-width: 980px) {
	body.c12-site-code #main-content .c12-sponsor-tier > .et_pb_column:not(.et_pb_column_4_4) {
		width: 47.25%;
		margin-right: 5.5%;
	}

	body.c12-site-code #main-content .c12-sponsor-tier > .et_pb_column:not(.et_pb_column_4_4):nth-child(2n) {
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	body.c12-site-code #main-content .c12-sponsor-tier > .et_pb_column {
		width: 100%;
		margin-right: 0;
	}
}

/* The copy sits under its logo in the layout, but only ever shows in the popup. */
body.c12-site-code #main-content .c12-sponsor-tier .et_pb_text {
	display: none !important;
}

/*
 * In the builder the copy is visible so it can be edited, which means the
 * logos need to sit at the top of each cell rather than centred on it.
 */
body.et-fb.c12-site-code #main-content .c12-sponsor-tier .et_pb_text,
body.et-bfb.c12-site-code #main-content .c12-sponsor-tier .et_pb_text {
	display: block !important;
}

body.et-fb.c12-site-code #main-content .c12-sponsor-tier,
body.et-bfb.c12-site-code #main-content .c12-sponsor-tier {
	align-items: flex-start;
}

/* Sponsors: the logo is the trigger, so it needs to read as clickable. */
body.c12-site-code #main-content .c12-speaker-trigger--logo {
	cursor: pointer;
	transition: transform 220ms ease, opacity 220ms ease;
}

body.c12-site-code #main-content .c12-speaker-trigger--logo:hover,
body.c12-site-code #main-content .c12-speaker-trigger--logo:focus-visible {
	outline: none;
	transform: scale(1.05);
	opacity: 0.82;
}

body.c12-site-code #main-content .c12-speaker-trigger--logo:focus-visible img {
	outline: 3px solid rgba(241, 90, 58, 0.55);
	outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
	body.c12-site-code #main-content .c12-speaker-trigger--logo {
		transition: none;
	}

	body.c12-site-code #main-content .c12-speaker-trigger--logo:hover,
	body.c12-site-code #main-content .c12-speaker-trigger--logo:focus-visible {
		transform: none;
	}
}

/*
 * Trigger generated for cards that have no Divi Pixel Reveal module. Values
 * mirror the Reveal button already used on Speakers so the two are
 * indistinguishable on a page that mixes both.
 */
body.c12-site-code #main-content .c12-speaker-actions {
	margin-top: 16px;
	text-align: center;
}

body.c12-site-code #main-content .c12-speaker-trigger--generated {
	display: inline-block;
	margin: 0;
	padding: 10px 39px;
	color: #ff5b22;
	font-weight: 700;
	font-size: 18px;
	font-family: Poppins, Helvetica, Arial, Lucida, sans-serif;
	line-height: 1.7em;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid #ff5b22;
	border-radius: 40px;
	cursor: pointer;
	transition: color 300ms ease, background-color 300ms ease;
}

body.c12-site-code #main-content .c12-speaker-trigger--generated:hover,
body.c12-site-code #main-content .c12-speaker-trigger--generated:focus-visible {
	color: #fff;
	background: #ff5b22;
}

body.c12-site-code #main-content .c12-speaker-trigger--generated:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(241, 90, 58, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	body.c12-site-code #main-content .c12-speaker-trigger--generated {
		transition: none;
	}
}

/* Speakers: biographies stay readable if Divi Pixel is used as the fallback. */
body.c12-site-code #main-content .dipi-reveal-container .et_pb_text_inner p {
	color: #2f2f2f !important;
	opacity: 1 !important;
	visibility: visible !important;
}

body.c12-site-code #main-content .dipi-reveal-container .et_pb_text_inner p a {
	color: #f15a3a !important;
}

/* Divi Visual Builder: always expose the full biography for direct editing. */
body.et-fb.c12-site-code #main-content [id$="-bio"],
body.et-bfb.c12-site-code #main-content [id$="-bio"] {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

/*
 * Speakers biography dialog. It is injected only after the script has
 * initialized successfully; otherwise Divi Pixel's native Reveal remains.
 */
html.c12-speaker-dialog-open,
body.c12-site-code.c12-speaker-dialog-open {
	overflow: hidden;
}

html.c12-speaker-dialog-open {
	scrollbar-gutter: stable;
}

body.c12-site-code .c12-speaker-dialog {
	box-sizing: border-box;
	width: min(36rem, calc(100vw - 32px));
	max-width: 36rem;
	max-height: calc(100vh - 36px);
	max-height: calc(100dvh - 36px);
	margin: auto;
	padding: 0;
	overflow: visible;
	color: #2f2f2f;
	background: #fff;
	border: 1px solid rgba(25, 29, 36, 0.1);
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(20, 25, 34, 0.26), 0 8px 24px rgba(20, 25, 34, 0.15);
	overscroll-behavior: contain;
}

body.c12-site-code .c12-speaker-dialog--measuring {
	visibility: hidden;
	animation: none !important;
}

/*
 * The arrow overlaps the dialog by 1px so it covers the dialog's own border,
 * and each placement throws its shadow outward, away from the bubble. A
 * downward shadow on every placement used to fall across the white face and
 * read as a grey seam at the join.
 */
body.c12-site-code .c12-speaker-dialog-arrow {
	position: absolute;
	z-index: 3;
	display: none;
	width: 0;
	height: 0;
	pointer-events: none;
}

body.c12-site-code .c12-speaker-dialog[open] {
	animation: c12-speaker-dialog-in 200ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

body.c12-site-code .c12-speaker-dialog::backdrop {
	background: rgba(17, 22, 30, 0.58);
}

body.c12-site-code .c12-speaker-dialog-shell {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow: hidden;
}

@media (min-width: 768px) {
	body.c12-site-code .c12-speaker-dialog--anchored {
		position: fixed;
		right: auto;
		bottom: auto;
		margin: 0;
	}

	body.c12-site-code .c12-speaker-dialog--right {
		transform-origin: left var(--c12-speaker-dialog-arrow-offset, 50%);
	}

	body.c12-site-code .c12-speaker-dialog--left {
		transform-origin: right var(--c12-speaker-dialog-arrow-offset, 50%);
	}

	body.c12-site-code .c12-speaker-dialog--bottom {
		transform-origin: var(--c12-speaker-dialog-arrow-offset, 50%) top;
	}

	body.c12-site-code .c12-speaker-dialog--top {
		transform-origin: var(--c12-speaker-dialog-arrow-offset, 50%) bottom;
	}

	body.c12-site-code .c12-speaker-dialog--right .c12-speaker-dialog-arrow {
		display: block;
		top: var(--c12-speaker-dialog-arrow-offset, 50%);
		left: -11px;
		border-top: 10px solid transparent;
		border-right: 12px solid #fff;
		border-bottom: 10px solid transparent;
		transform: translateY(-50%);
		filter: drop-shadow(-3px 2px 2px rgba(20, 25, 34, 0.12));
	}

	body.c12-site-code .c12-speaker-dialog--left .c12-speaker-dialog-arrow {
		display: block;
		top: var(--c12-speaker-dialog-arrow-offset, 50%);
		right: -11px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 12px solid #fff;
		transform: translateY(-50%);
		filter: drop-shadow(3px 2px 2px rgba(20, 25, 34, 0.12));
	}

	body.c12-site-code .c12-speaker-dialog--bottom .c12-speaker-dialog-arrow {
		top: -11px;
		left: var(--c12-speaker-dialog-arrow-offset, 50%);
		display: block;
		border-right: 10px solid transparent;
		border-bottom: 12px solid #fff;
		border-left: 10px solid transparent;
		transform: translateX(-50%);
		filter: drop-shadow(0 -3px 2px rgba(20, 25, 34, 0.12));
	}

	body.c12-site-code .c12-speaker-dialog--top .c12-speaker-dialog-arrow {
		bottom: -11px;
		left: var(--c12-speaker-dialog-arrow-offset, 50%);
		display: block;
		border-top: 12px solid #fff;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		transform: translateX(-50%);
		filter: drop-shadow(0 3px 2px rgba(20, 25, 34, 0.12));
	}
}

body.c12-site-code .c12-speaker-dialog-body {
	min-height: 0;
	padding: clamp(2.75rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem) clamp(1.75rem, 4vw, 2.75rem);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

body.c12-site-code .c12-speaker-dialog-close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 2;
	display: grid;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	place-items: center;
	color: #44464f;
	font: 400 1.8rem/1 Arial, sans-serif;
	background: #f1f2f4;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

body.c12-site-code .c12-speaker-dialog-close:hover,
body.c12-site-code .c12-speaker-dialog-close:focus-visible {
	color: #fff;
	background: #f15a3a;
	outline: none;
	transform: scale(1.06);
}

body.c12-site-code .c12-speaker-dialog-close:focus-visible {
	box-shadow: 0 0 0 3px rgba(241, 90, 58, 0.3);
}

body.c12-site-code .c12-speaker-dialog-content {
	color: #2f2f2f;
}

body.c12-site-code .c12-speaker-dialog-content h3 {
	margin: 0 1.75rem 0.35rem;
	padding: 0;
	color: #f15a3a !important;
	font-size: clamp(1.45rem, 2.25vw, 2rem);
	line-height: 1.18;
	text-align: center;
}

body.c12-site-code .c12-speaker-dialog-content h4,
body.c12-site-code .c12-speaker-dialog-content h5 {
	margin: 0;
	padding: 0;
	color: #383942 !important;
	line-height: 1.35;
	text-align: center;
}

body.c12-site-code .c12-speaker-dialog-content h4 {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.c12-site-code .c12-speaker-dialog-content h5 {
	margin-top: 0.15rem;
	font-size: 1rem;
	font-weight: 600;
}

body.c12-site-code .c12-speaker-dialog-content p {
	margin-top: 1rem;
	padding: 0;
	color: #3e4048 !important;
	font-size: 1rem;
	line-height: 1.68;
	text-align: left;
}

body.c12-site-code .c12-speaker-dialog-content p:first-of-type:empty {
	display: none;
}

body.c12-site-code .c12-speaker-dialog-content p:last-child {
	margin-bottom: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}

body.c12-site-code .c12-speaker-dialog-content a {
	color: #f15a3a !important;
}

@keyframes c12-speaker-dialog-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 767px) {
	body.c12-site-code .c12-speaker-dialog {
		width: calc(100vw - 24px);
		max-width: none;
		height: fit-content;
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		margin: auto auto 12px;
		border-radius: 14px;
	}

	body.c12-site-code .c12-speaker-dialog-body {
		padding: 3.5rem 1.3rem 1.5rem;
	}

	body.c12-site-code .c12-speaker-dialog-content p {
		font-size: 0.95rem;
		line-height: 1.58;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.c12-site-code .c12-speaker-dialog[open] {
		animation: none;
	}

	body.c12-site-code .c12-speaker-dialog-close {
		transition: none;
	}
}
