/*
 * Styles theme.json cannot express. Loaded on the front end and in the editor.
 */

/* Header, main and footer sit flush. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Sticky header; anchor targets stop below it. */
.site-header-wrapper {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 104px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.site-header {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.site-logo {
	flex-shrink: 0;
	margin: 0;
}

/* Block-level link: no inline line box below the image, so the logo centres on the menu. */
.site-logo a {
	display: block;
}

.site-logo img {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Menu centred between logo and social icons; 18px from 1366px, 13px below (as on the old site). */
.site-header .site-nav {
	flex-grow: 1;
	font-size: 18px;
	letter-spacing: 0.05em;
}

.site-header .site-nav .wp-block-navigation-item__content {
	color: #303133;
	transition: color 0.2s;
}

/* Current section (set by navigation.js while scrolling) and hover: half-transparent, as before. */
.site-header .site-nav .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current]) {
	color: rgba(48, 49, 51, 0.5);
}

.site-header .site-social .wp-social-link svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 1365.98px) {
	.site-header .site-nav {
		font-size: 13px;
	}

	.site-header .site-nav .wp-block-navigation__container {
		gap: 20px;
	}
}

@media (max-width: 1100px) {
	.site-header .site-social {
		display: none;
	}
}

/* From 960px: logo left, menu centred on the page, social icons right. */
@media (min-width: 960px) {
	.site-header > .wp-block-group {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.site-header .site-social {
		justify-self: end;
	}
}

/* Hamburger below 960px (core switches only at 600px; the menu does not fit beside the logo). */
@media (min-width: 600px) and (max-width: 959.98px) {
	.site-header .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 959.98px) {
	.site-header .site-nav {
		flex-grow: 0;
	}

	.site-header .site-nav .wp-block-navigation__responsive-container-open svg {
		width: 30px;
		height: 30px;
	}
}

@media (max-width: 781px) {
	.site-logo img {
		width: 200px !important;
	}
}

/* Mobile menu overlay. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 80px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) {
	align-items: center;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 20px;
}

.site-footer a {
	text-decoration: none;
}

.site-footer p {
	margin-block-end: 0;
}

/* Back-to-top button, fades in once the page is scrolled. */
.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	margin: 0 !important;
}

.to-top a {
	position: relative;
	display: block;
	width: 36px;
	height: 36px;
	background: var(--wp--preset--color--darker);
	font-size: 0;
}

.to-top a::before {
	content: "";
	position: absolute;
	top: 58%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}

.to-top a:hover,
.to-top a:focus-visible {
	background: var(--wp--preset--color--muted);
}

@supports (animation-timeline: scroll()) {
	.to-top {
		animation: kcsr-reveal linear both;
		animation-timeline: scroll(root);
		animation-range: 0 400px;
	}

	@keyframes kcsr-reveal {
		from {
			opacity: 0;
			visibility: hidden;
		}
		to {
			opacity: 1;
			visibility: visible;
		}
	}
}

.editor-styles-wrapper .to-top {
	position: static;
}

/*
 * Hero: the 16:9 animation fills the screen below the header, but never gets taller than
 * 16:9 – on narrower screens (tablets, phones) the text in the video would be cut off.
 */
.hero.wp-block-cover {
	min-height: min(calc(100vh - 104px), calc(100vw * 9 / 16)) !important;
	padding: 0;
}

/* Event page: the full-width sections sit flush, without the block gap between them. */
main.event-content > * {
	margin-block-start: 0;
}

/* Bold spans in running text, as on the old site. */
.wp-block-post-content strong {
	font-weight: 700;
}

/* Section headings with the short rule underneath. */
.section-heading {
	margin-bottom: 0;
}

.section-heading + .wp-block-separator {
	margin-top: 27px !important;
}

/* Quote band: statement centred vertically in its 60vh band. */
.quote-band {
	align-content: center;
}

/* Programme: sessions in two columns, one on phones. */
.session > .wp-block-image {
	margin-bottom: 27px;
}

.session p {
	margin-block: 0 1em;
}

/* Speaker cards. */
.speaker-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--anthracite);
}

.speaker-card .speaker-photo {
	margin: 0;
}

.speaker-card .speaker-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 25%;
}

.speaker-card.has-dialog .speaker-photo img {
	cursor: pointer;
}

.speaker-card .speaker-text {
	padding: 15px;
}

.speaker-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.speaker-name__button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

.speaker-name__button:hover,
.speaker-name__button:focus-visible {
	text-decoration: underline;
}

.speaker-role {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
}

.speaker-bio {
	margin: 0;
	padding: 0 15px 15px;
	font-size: var(--wp--preset--font-size--small);
}

.speaker-card.has-dialog .speaker-bio {
	display: none;
}

.speaker-dialog {
	width: min(1000px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.speaker-dialog::backdrop {
	background: rgba(20, 22, 24, 0.8);
}

.speaker-dialog__close-form {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
}

.speaker-dialog__close {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.speaker-dialog__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 30px;
	padding: 40px;
}

.speaker-dialog__media img {
	display: block;
	width: 100%;
	height: auto;
}

.speaker-dialog__media .speaker-role {
	margin-top: 15px;
	font-size: var(--wp--preset--font-size--medium);
}

.speaker-dialog__text h2 {
	margin: 0 0 15px;
	font-size: var(--wp--preset--font-size--x-large);
}

.speaker-dialog__text p {
	margin: 0 0 1em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.speaker-dialog__body {
		grid-template-columns: 1fr;
		padding: 44px 20px 20px;
	}
}

/* Review: white card raised over the grey band. */
.review-card {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	border-radius: 3px;
}

.review-card video {
	display: block;
	width: 100%;
}

/* Slider (slider.js): one slide per child block, arrows on the sides, dots below. */
.slider.is-ready {
	position: relative;
}

.slider__viewport {
	overflow: hidden;
	transition: height 0.4s ease;
}

.slider__track {
	display: flex;
	align-items: flex-start;
	transition: transform 0.4s ease;
}

.slider__track > .slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0 !important;
}

.slider__arrow {
	position: absolute;
	top: calc(50% - 30px);
	z-index: 2;
	width: 36px;
	height: 90px;
	padding: 0;
	border: 0;
	background: #303133;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s;
}

.slider__arrow--prev {
	left: calc(-1 * var(--wp--preset--spacing--40));
}

.slider__arrow--next {
	right: calc(-1 * var(--wp--preset--spacing--40));
}

.slider__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: translate(-30%, -50%) rotate(-45deg);
}

.slider__arrow--next::before {
	transform: translate(-70%, -50%) rotate(135deg);
}

.slider:hover .slider__arrow:not(:disabled),
.slider__arrow:focus-visible {
	opacity: 1;
}

/* Touch screens have no hover: show the arrows that can be used. */
@media (hover: none) {
	.slider__arrow:not(:disabled) {
		opacity: 1;
	}
}

.slider__arrow:disabled {
	visibility: hidden;
}

.slider__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--30);
}

.slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
	opacity: 0.5;
	cursor: pointer;
}

.slider__dot[aria-current="true"],
.slider__dot:hover {
	opacity: 1;
}

.slider__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

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

/* Entrance animations, enabled only after reveal.js has set up the observer. */
.has-reveal :is(.fade-in, .fade-up, .zoom-in):not(.is-revealed) {
	opacity: 0;
}

.has-reveal .fade-in.is-revealed {
	animation: kcsr-fade-in 1s both;
}

.has-reveal .fade-up.is-revealed {
	animation: kcsr-fade-up 0.8s 0.2s both;
}

.has-reveal .zoom-in.is-revealed {
	animation: kcsr-zoom-in 0.6s 0.2s both;
}

@keyframes kcsr-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes kcsr-fade-up {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes kcsr-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.85);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal :is(.fade-in, .fade-up, .zoom-in),
	.to-top {
		opacity: 1 !important;
		visibility: visible !important;
		animation: none !important;
		transform: none !important;
	}
}

@media print {
	.has-reveal :is(.fade-in, .fade-up, .zoom-in) {
		opacity: 1 !important;
		animation: none !important;
	}
}