/***
 * This CSS will be included in WordCamp Europe 2025 every time
 * you will make a repository commit and reload remote CSS from the website
 * admin view (Appearance -> Remote CSS) or visiting
 * https://europe.wordcamp.org/2025/wp-admin/admin-ajax.php?action=wcrcss_webhook
 * https://europe.wordcamp.org/2025/ CSS will be synched with this file
 *
 * Development environment is on https://wceutest.wordcamp.org/2025 and also includes
 * this remote CSS. Update CSS from the website admin view (Appearance -> Remote CSS)
 * or visiting https://wceutest.wordcamp.org/2025/wp-admin/admin-ajax.php?action=wcrcss_webhook

 * Don't use post IDs as selectors because they can change between development environment and production.
 * Instead, use the slug; e.g. body.post-slug-call-for-volunteers, body.page-slug-accommodation or better,
 * create a class and use it on the element because we can reuse these classes.
 *
 * CSS vars defined on website Theme (vars values can change during the development process):
 *  --wp--preset--color--custom-orange-primary: #f04614;
 *  --wp--preset--color--custom-light-blue-primary: #1ec8dc;
 *  --wp--preset--color--custom-black-primary: #00000f;
 *  --wp--preset--color--custom-pink-secondary: #faaff0;
 *  --wp--preset--color--custom-yellow-secondary: #ffe65f;
 *  --wp--preset--color--custom-white-secondary: #f5f5f5;
 *
 *  --wp--preset--font-family--body: "Inter", sans-serif;
 *  --wp--preset--font-family--heading: Cardo;
 */
/* Styles for the Header Intro with Blend Element */
:root {
/*
	Some custom properties for sizes, so we don't need to repeat the values.
	Most sizes use clamp() to have a min and max value, and a value that grows with the viewport width.
	The values in comments are the viewport width range where the value is applied.
	e.g 40px for 1200px screen, and 400px for 2400px screen. The inbetwen values are calculated by the browser.

	---

	Remote CSS seems to remove custom properties, so we only need them here as reference.

  	--width__blend-element: clamp( 40px, calc(-320px + 30vw), 400px ); screen size: 1200 - 2400
	--height__blend-element: 100%;

	--height__second-row: clamp( 60px, calc( 60px + 7.5vw ), 180px ); screen size: 0 - 1600
	--height__third-row: clamp( 20px, calc( 20px + 2vw ), 40px ); screen size: 0 - 1000

	--width__second-row-first-col: clamp( 200px, calc( 80px + 60vw ), 800px ); screen size: 200 - 1200
	 */
}

/* Remove spacing from the top of the post content */
:where(.wp-site-blocks) > .wp-block-post-content,
:where(.wp-site-blocks) > :has(.wp-block-post-content),
:where(.wp-site-blocks) > .wp-block-template-part {
	margin-block-start: 0;
}

.wp-block-group:has(>.blend-element) {
	position: relative;
/* the blend is element is absolute, so we need relative here */
}

/* Remove outline on parent menu element in mobile menu, which was visible for a split second, when tapping a child link */
@media (max-width: 599px) {
	.wp-block-navigation .wp-block-navigation-item:focus {
		outline: none;
	}
}

/* The blend element, which overlays some of the colors */
.blend-element {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	padding: 0;
	width: clamp(40px, calc(-320px + 30vw), 400px);
	height: 100%;
	background: #1ec8dc;
	mix-blend-mode: multiply;
}

/* Use the same color for the header, as is used in the blend element */
body:has(.blend-element.has-custom-pink-secondary-background-color) header.wp-block-template-part > .wp-block-group.has-background {
	background: linear-gradient(90deg, var(--wp--preset--color--custom-pink-secondary) 45% , var(--wp--preset--color--base-2) 45%) !important;
}

body:has(.blend-element.has-custom-light-blue-primary-background-color) header.wp-block-template-part > .wp-block-group.has-background {
	background: linear-gradient(90deg, var(--wp--preset--color--custom-light-blue-primary) 45% , var(--wp--preset--color--base-2) 45%) !important;
}

body:has(.blend-element.has-custom-orange-primary-background-color) header.wp-block-template-part > .wp-block-group.has-background {
	background: linear-gradient(90deg, var(--wp--preset--color--custom-orange-primary) 45% , var(--wp--preset--color--base-2) 45%) !important;
}

body:has(.blend-element.has-custom-yellow-secondary-background-color) header.wp-block-template-part > .wp-block-group.has-background {
	background: linear-gradient(90deg, var(--wp--preset--color--custom-yellow-secondary) 45% , var(--wp--preset--color--base-2) 45%) !important;
}

.second-row .wp-block-spacer {
	height: clamp(60px, calc(60px + 7.5vw), 180px) !important;
/* we need important, because the spacer has a fixed height */
}

.second-row .wp-block-column:first-child {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	width: clamp(200px, calc(80px + 60vw), 800px) !important;
/* we need important, because the column has a fixed width */
}

.third-row .wp-block-spacer {
	height: clamp(20px, calc(20px + 2vw), 40px) !important;
/* we need important, because the spacer has a fixed height */
}

/* Styles for smaller screens. Does not need to be 799, can be somethin else in the future. */
@media screen and (max-width: 799px) {
	.blend-element {
		width: clamp(40px, calc(40px + 15vw), 160px);
		height: calc(clamp(60px, calc(60px + 7.5vw), 180px) + (clamp(60px, calc(60px + 7.5vw), 180px) / 3 * 2) + clamp(20px, calc(20px + 2vw), 40px));
	}
	
	.first-row > .wp-block-group {
		padding-top: calc(clamp(60px, calc(60px + 7.5vw), 180px) / 2);
		padding-bottom: clamp(60px, calc(60px + 7.5vw), 180px);
	}
}

/* Additional Heading styles */
h1.wc25-medium {
	font-size: 4.5rem;
	line-height: 1;
}

h1.wc25-small {
	font-size: 3.5rem;
	line-height: 1;
}

h2.wc25-medium {
	font-size: 3.5rem;
	line-height: 1;
}

h2.wc25-small {
	font-size: 3rem;
	line-height: 1;
}

h3.wc25-medium {
	font-size: 3rem;
	line-height: 1;
}

h3.wc25-small {
	font-size: 2.5rem;
	line-height: 1;
}

h4.wc25-medium {
	font-size: 2.5rem;
	line-height: 1;
}

h4.wc25-small {
	font-size: 2rem;
	line-height: 1;
}

h5.wc25-medium {
	font-size: 1.75rem;
	line-height: 1.29;
}

h5.wc25-small {
	font-size: 1.5rem;
	line-height: 1.33;
}

h6.wc25-medium {
	font-size: 1.25rem;
	line-height: 1.4;
}

h6.wc25-small {
	font-size: 1.125rem;
	line-height: 1.33;
}

/* Additional paragraph styles */
p.wc25-p-small {
	font-size: .875rem;
	line-height: 1.43;
}

p.wc25-p-default {
	font-size: 1rem;
	line-height: 1.5;
}

p.wc25-p-large {
	font-size: 1.25rem;
	line-height: 1.4;
}

p.wc25-p-large-small {
	font-size: 1.125rem;
	line-height: 1.44;
}

p.wc25-p-large-bold {
	font-weight: 700;
}

p.wc25-p-large-bold-small {
	font-size: 1.125rem;
	line-height: 1.44;
}

/* Camptix block - tickets page */
.tix_tickets_table {
	border-spacing: 0;
	border-collapse: collapse;
}

.tix_tickets_table input[type="text"],
.tix_tickets_table input[type="url"],
.tix_tickets_table input[type="email"],
.tix_tickets_table select {
	font-size: 1em;
}

.tix_tickets_table textarea {
	font-size: 1em;
	height: 4em;
}

/* Home smartphone rules */
@media (max-width:767px) {
	/*-- responsive ticket table --*/
	.tix_tickets_table table,
		.tix_tickets_table thead,
		.tix_tickets_table tbody,
		.tix_tickets_table th,
		.tix_tickets_table td,
		.tix_tickets_table tr {
		display: block;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.tix_tickets_table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.tix_tickets_table td {
	/* Behave  like a "row" */
		border: 0;
		position: relative;
		padding-left: 50%;
	}
	
	.tix_tickets_table td:before {
	/* Now like a table header */
		position: absolute;
	/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	
	.tix-column-remaining::before {
		content: "Remaining: ";
	}
	
	.tix-column-quantity::before {
		content: "Quantity: ";
	}
	
	.tix-tickets-list .tix-column-description {
		padding: 0 !important;
		border: 0;
		text-align: center !important;
	}
	
	.tix-js .tix_tickets_table tbody .tix-ticket-title,
		.tix-js .tix_tickets_table tbody .tix-column-description {
		font-weight: bold;
		display: block;
		width: auto;
		background: var(--wp--preset--color--custom-light-blue-primary);
		padding: 10px 20px;
	}
	
	.tix-js .tix_tickets_table .tix-column-description label + br {
		display: none;
	}
	
	.tix-js .tix_tickets_table tbody .tix-column-description {
		background: #fff;
		padding: 0;
	}
	
	.tix-js .tix_tickets_table .tix-ticket-excerpt {
		display: block;
		padding: 10px 20px;
		font-weight: normal;
	}
	
	/*-- responsive ticket form --*/
	.tix-ticket-form td.tix-left,
		.tix-private-form td.tix-left,
		.tix-attendee-form td.tix-left,
		.tix-receipt-form td.tix-left,
		.tix_invoice_table td.tix-left,
		.tix-ticket-form td.tix-right,
		.tix-private-form td.tix-right,
		.tix-attendee-form td.tix-right,
		.tix-receipt-form td.tix-right,
		.tix_invoice_table td.tix-right {
		width: 90% !important;
	}
	
	.tix-js .tix_tickets_table.tix-attendee-form .tix-right {
		padding-top: .5em !important;
	}
	
	.tix-js .tix_tickets_table.tix-attendee-form .tix-left,
						.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details .tix-left {
		text-align: left !important;
	}
	
	.tix-js .tix_tickets_table.tix-attendee-form .tix-right {
		padding-left: 20px;
	}
	
	.tix-ticket-form input[type="text"],
						.tix-ticket-form input[type="email"],
						.tix-ticket-form input[type="url"],
						.tix-ticket-form textarea,
						.tix-private-form input[type="text"],
						.tix-private-form input[type="email"],
						.tix-private-form input[type="url"],
						.tix-private-form textarea,
						.tix-attendee-form input[type="text"],
						.tix-attendee-form input[type="email"],
						.tix-attendee-form input[type="url"],
						.tix-attendee-form textarea,
						.tix-receipt-form input[type="text"],
						.tix-receipt-form input[type="email"],
						.tix-receipt-form input[type="url"],
						.tix-receipt-form textarea,
						.tix_invoice_table input[type="text"],
						.tix_invoice_table input[type="email"],
						.tix_invoice_table input[type="url"],
						.tix_invoice_table textarea {
		width: 100% !important;
	}
	
	tix-order-summary .tix-column-description {
		width: 80% !important;
	}
	
	.tix-js .tix_tickets_table.tix-attendee-form tbody td,
						.tix_tickets_table.tix-attendee-form tbody th {
		padding: 5px 0 !important;
	}
	
	.tix-attendee-form tr {
		padding-bottom: 40px !important;
	}
	
	.tix-left {
		font-weight: 600 !important;
	}
}

/* End of media rule @media (max-width:767px) */
.tix-js {
	font-size: 1.1em;
}

.tix-js .tix_tickets_table th,
.tix-js .tix_tickets_table td {
	padding: 5px 20px;
}

.tix-js .tix_tickets_table thead th {
	background-color: var(--wp--preset--color--custom-light-blue-primary);
	border: 1px solid var(--wp--preset--color--custom-light-blue-primary);
	font-weight: bold;
}

.tix-js .tix_tickets_table tbody .tix-ticket-title {
	font-weight: bold;
}

.tix-js .tix_tickets_table tbody th,
.tix-js .tix_tickets_table tbody td {
	border: 1px solid #ccc;
	text-align: center;
}

.tix-js .tix_tickets_table tbody .tix-column-price,
.tix-js .tix_tickets_table tbody .tix-column-remaining {
	font-weight: bold;
}

.tix-js .tix_tickets_table tbody .tix-column-quantity select {
	padding: 8px 7px;
}

.tix-js .tix_tickets_table.tix-order-summary {
	width: 100%;
	margin-top: 2rem;
}

.tix-js .tix_tickets_table.tix-order-summary .tix-row-total td:last-child {
	border-top: 1px solid gray;
}

.tix-js .tix_tickets_table.tix-order-summary tbody th,
.tix-js .tix_tickets_table.tix-attendee-form tbody th,
.tix-js .tix_tickets_table.tix-order-summary tbody td,
.tix-js .tix_tickets_table.tix-attendee-form tbody td {
	border: none;
	padding: 5px 20px;
}

.tix-js .tix_tickets_table tbody th,
.tix-js .tix_tickets_table th.tix-column-description {
	text-align: left;
}

.tix-js .tix_tickets_table.tix-attendee-form .tix-left {
	text-align: right;
	padding-right: .5em;
}

.tix-js .tix_tickets_table.tix-attendee-form .tix-right {
	text-align: left;
	padding-left: .5em;
}

.tix-js .tix_tickets_table.tix-attendee-form .tix-left,
.tix-js .tix_tickets_table.tix-attendee-form .tix-right {
	padding-top: 1.5em;
/*! vertical-align: bottom; */
}

.tix-js .tix_tickets_table.tix-attendee-form .tix-row-health-advisory .tix-left {
	text-align: left;
}

.tix-js .tix_tickets_table.tix-attendee-form .tix-row-health-advisory .tix-left p {
	margin-bottom: 1em;
}

.tix-js .tix_tickets_table.tix-attendee-form .tix-row-health-advisory .tix-left::after {
	content: none;
}

.tix-js .camptix-invoice-toggle-wrapper {
	display: block;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.tix-js .camptix-invoice-toggle-wrapper label {
	font-weight: bold;
}

.tix-js .camptix-invoice-toggle-wrapper table label {
	font-weight: normal;
}

.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details {
	width: 100%;
	margin-bottom: 2em;
}

.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details td {
	border: none;
}

.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details .tix-left {
	text-align: right;
	padding-right: .5em;
	width: 40%;
}

.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details .tix-right {
	text-align: left;
	padding-left: .5em;
	width: 60%;
}

.tix_invoice_table input[type="text"],
.tix_invoice_table input[type="email"],
.tix_invoice_table input[type="url"],
.tix_invoice_table textarea {
	width: 70%;
}

.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details .tix-left,
.tix-js .camptix-invoice-toggle-wrapper .camptix-invoice-details .tix-right {
	padding-top: 1.5em;
	vertical-align: bottom;
}

.tix-js .tix-submit {
	display: block;
	margin-bottom: 3em;
}

.tix-js input[type='submit'],
.tix-checkout-button {
	font-size: 1.2rem;
	margin-top: 2rem;
	border: 2px solid var(--wp--preset--color--custom-light-blue-primary) !important;
	padding: 15px 30px !important;
	background-color: var(--wp--preset--color--custom-light-blue-primary);
	color: #000;
	text-transform: uppercase;
	cursor: pointer;
}

.tix-js #tix-coupon-input {
	font-size: 1.2rem;
	padding: 13px;
}

/* END Camptix block - tickets page */
/*
	START of the Organizers.
	For the usage with the (old) "Organizer list with bio (Organizers List)" block.
 */
.type-wcb_organizer figure {
	width: 100% !important;
/* Because we need to set a size on the avatar, we need to override it */
	height: auto !important;
	aspect-ratio: 1 / 1;
/* Keep it square */
	margin-bottom: calc(2 * clamp(16px, calc(8px + 2vw), 40px));
/* 2 times the size of the border-bottom of wordcamp-image__avatar-container */
}

.type-wcb_organizer figure {
	position: relative;
/* So we can use absolute positioning for the pseudo-elements */
	border-bottom: clamp(16px, calc(8px + 2vw), 40px) solid var(--wp--preset--color--custom-yellow-secondary);
/* 16px on screens with 400px. 40px on screens with 1600px */
}

.type-wcb_organizer figure::before,
.type-wcb_organizer figure::after {
	content: " ";
	position: absolute;
	bottom: 0;
	height: clamp(16px, calc(8px + 2vw), 40px);
/* 16px on screens with 400px. 40px on screens with 1600px */
}

.type-wcb_organizer figure::before {
	left: 0;
	width: 15%;
	background: var(--wp--preset--color--custom-yellow-secondary);
}

.type-wcb_organizer figure::after {
	right: 0;
	width: 25%;
	bottom: calc(-2 * clamp(16px, calc(8px + 2vw), 40px));
	background: var(--wp--preset--color--custom-light-blue-primary);
}

.type-wcb_organizer img {
	display: block;
/* Make sure the image is block-level and no invisible margin is applied */
}

/* The team lead (First person in the Loop) */
.type-wcb_organizer:first-child figure {
	border-bottom-color: var(--wp--preset--color--custom-pink-secondary);
}

.type-wcb_organizer:first-child figure:before {
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.type-wcb_organizer:first-child figure:after {
	background-color: var(--wp--preset--color--custom-orange-primary);
}

/* The Lead Organizes (Needs the classname "team-lead-organizers" on the Loop or some parent block */
.team-lead-organizers .type-wcb_organizer figure {
	border-bottom-color: var(--wp--preset--color--custom-orange-primary);
}

.team-lead-organizers .type-wcb_organizer figure:before {
	background-color: var(--wp--preset--color--custom-orange-primary);
}

.team-lead-organizers .type-wcb_organizer figure:after {
	background-color: var(--wp--preset--color--custom-light-blue-primary);
}

/* END of the Organizers */
/*
	START of the Organizers.
	For the usage with the (new) "Organizers" block.
*/
/* The list of organizers uses an , which has a default padding left, so we need to set this to 0 */
.wordcamp-organizers {
	padding-left: 0;
}

/* Increase spacing between organizers */
@media ( min-width: 400px ) {
	.wordcamp-post-list.has-layout-grid {
		gap: clamp(20px, calc(20px + 2.5vw), 60px);
	}
}

/* Display flex is needed, so we can easily change the order of name + avatar */
.wordcamp-organizer {
	display: flex;
	flex-direction: column;
}

.wordcamp-organizer .wordcamp-organizers__title {
	margin: 0;
	order: 2;
/* Show the name of the organizer after the avatar */
	font-size: var(--wp--preset--font-size--large) !important;
}

.wordcamp-organizer .wordcamp-organizers__content {
	order: 3;
/* Show the bio of the organizer (W.org profile link) after the title (name) */
}

.wordcamp-organizer .wordcamp-image__avatar-container {
	margin-bottom: clamp(16px, calc(8px + 2vw), 40px);
/* the size of the border-bottom of wordcamp-image__avatar-container */
}

.wordcamp-organizer .wordcamp-image__avatar-container img {
	display: /* Make sure the image is block-level and no invisible margin is applied */
block;
	width: 100% !important;
/* Because we need to set a size on the avatar, we need to override it */
	height: auto !important;
	aspect-ratio: 1 / 1;
/* Keep it square */
}

.wordcamp-organizer .wordcamp-image__avatar-container {
	order: 1;
/* Show the avatar of the organizer before the name */
	position: relative;
/* So we can use absolute positioning for the pseudo-elements */
	border-bottom: clamp(16px, calc(8px + 2vw), 40px) solid var(--wp--preset--color--custom-yellow-secondary);
/* 16px on screens with 400px. 40px on screens with 1600px */
}

.wordcamp-organizer .wordcamp-image__avatar-container::before,
.wordcamp-organizer .wordcamp-image__avatar-container::after {
	content: " ";
	position: absolute;
	bottom: 0;
}

.wordcamp-organizer .wordcamp-image__avatar-container::before {
	left: 0;
	width: 15%;
	height: clamp(16px, calc(8px + 2vw), 40px);
/* 16px on screens with 400px. 40px on screens with 1600px */
	background: var(--wp--preset--color--custom-yellow-secondary);
}

.wordcamp-organizer .wordcamp-image__avatar-container::after {
	right: 0;
	width: 25%;
	bottom: calc(-2 * clamp(16px, calc(8px + 2vw), 40px));
	height: calc(2 * clamp(16px, calc(8px + 2vw), 40px));
	background: var(--wp--preset--color--custom-pink-secondary);
	mix-blend-mode: multiply;
}

/* The team lead (First person in the list) */
.wordcamp-post-list__post:first-child .wordcamp-organizer .wordcamp-image__avatar-container {
	border-bottom-color: var(--wp--preset--color--custom-pink-secondary);
}

.wordcamp-post-list__post:first-child .wordcamp-organizer .wordcamp-image__avatar-container:before {
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.wordcamp-post-list__post:first-child .wordcamp-organizer .wordcamp-image__avatar-container:after {
	background-color: var(--wp--preset--color--custom-light-blue-primary);
}

/* The team co-lead (Second person in the list for selected teams) */
.team-communications .wordcamp-post-list__post:nth-child(2) .wordcamp-organizer .wordcamp-image__avatar-container,
.team-design .wordcamp-post-list__post:nth-child(2) .wordcamp-organizer .wordcamp-image__avatar-container {
	border-bottom-color: var(--wp--preset--color--custom-pink-secondary);
}

.team-communications .wordcamp-post-list__post:nth-child(2) .wordcamp-organizer .wordcamp-image__avatar-container:before,
.team-design .wordcamp-post-list__post:nth-child(2) .wordcamp-organizer .wordcamp-image__avatar-container:before {
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.team-communications .wordcamp-post-list__post:nth-child(2) .wordcamp-organizer .wordcamp-image__avatar-container:after,
.team-design .wordcamp-post-list__post:nth-child(2) .wordcamp-organizer .wordcamp-image__avatar-container:after {
	background-color: var(--wp--preset--color--custom-light-blue-primary);
}

/* The Lead Organizes (Needs the classname "team-lead-organizers" on the list or some parent block */
.team-lead-organizers .wordcamp-organizer .wordcamp-image__avatar-container {
	border-bottom-color: var(--wp--preset--color--custom-orange-primary) !important;
}

.team-lead-organizers .wordcamp-organizer .wordcamp-image__avatar-container:before {
	background-color: var(--wp--preset--color--custom-orange-primary) !important;
}

.team-lead-organizers .wordcamp-organizer .wordcamp-image__avatar-container:after {
	background-color: var(--wp--preset--color--custom-light-blue-primary) !important;
}

/* END of the Organizers */
/* Button Styles, General Hover Effect  */
.wp-block-button__link {
	transition: background-color 160ms ease-in-out, color 160ms ease-in-out;
}

.wp-block-buttons:not(.is-style-color-grid-buttons) .wp-block-button__link:hover {
	color: #FFF !important;
	background-color: var(--wp--preset--color--custom-black-primary) !important;
}

.wp-block-buttons:not(.is-style-color-grid-buttons) .wp-block-button__link.has-custom-black-primary-background-color:hover {
	background-color: var(--wp--preset--color--custom-orange-primary) !important;
}

/* Button Styles with arrow. To start with an extra class, maybe later, we'll apply this to all buttons */
.is-style-arrow-button a {
	position: relative;
/* 1.5rem from the button padding, 1.25em for the width of the arrow, and .75em for the space between the arrow and the text */
	padding-right: calc(1.5rem + 1.25em + .75em);
}

.is-style-arrow-button a::after {
	content: " ";
	position: absolute;
	top: 50%;
	right: 1.5rem;
	width: 1.25em;
	height: 1.25em;
/* slightly move the arrow up, so it's centered with the text */
	margin-top: -.1em;
	background-image: url('https://europe.wordcamp.org/2025/files/2025/02/arrow-button-arrow-white.png');
	background-size: cover;
	transform: translate3d(0, -50%, 0);
}

/* Use dark arrow, if the button has the black primary color */
.is-style-arrow-button a.has-custom-black-primary-color::after {
	background-image: url('https://europe.wordcamp.org/2025/files/2025/02/arrow-button-arrow-black.png');
}

/* Use orange arrow, if the button has the orange primary color */
.is-style-arrow-button a.has-custom-orange-primary-color::after {
	background-image: url('https://europe.wordcamp.org/2025/files/2025/02/arrow-button-arrow-orange.png');
}

/* Styles for buttons with a grid of colors, used primarily on frontpage */
.is-style-color-grid-buttons {
	gap: clamp(10px, calc(10px + 0.625vw), 20px);
	font-size: clamp(14px, calc(14px + 0.375vw), 20px);
}

.is-style-color-grid-buttons .wp-block-button {
	position: relative;
	flex-grow: 1;
	transition: transform 120ms ease-in-out;
}

.is-style-color-grid-buttons .wp-block-button::before,
.is-style-color-grid-buttons .wp-block-button::after {
	content: " ";
	position: absolute;
	z-index: 1;
}

.is-style-color-grid-buttons .wp-block-button::before {
	top: 0;
	left: 0;
	height: 100%;
	width: clamp(8px, calc(8px + 0.5vw), 16px);
	transform-origin: left;
	transition: transform 120ms ease-in-out;
}

.is-style-color-grid-buttons .wp-block-button::after {
	bottom: 0;
	left: 0;
	width: 100%;
	height: clamp(8px, calc(8px + 0.5vw), 16px);
	mix-blend-mode: multiply;
}

.is-style-color-grid-buttons .wp-block-button:hover {
	transform: translate3d(1px, -1px, 0);
}

.is-style-color-grid-buttons .wp-block-button:hover::before {
	transform: scaleX(2);
}

/* Different colors the buttons */
.is-style-color-grid-buttons .wp-block-button:nth-child(4n+1)::before {
	background-color: var(--wp--preset--color--custom-light-blue-primary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n+1)::after {
	background-color: var(--wp--preset--color--custom-orange-primary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n+2)::before {
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n+2)::after {
	background-color: var(--wp--preset--color--custom-yellow-secondary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n+3)::before {
	background-color: var(--wp--preset--color--custom-yellow-secondary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n+3)::after {
	background-color: var(--wp--preset--color--custom-orange-primary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n)::before {
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.is-style-color-grid-buttons .wp-block-button:nth-child(4n)::after {
	background-color: var(--wp--preset--color--custom-orange-primary);
}

.is-style-color-grid-buttons .wp-block-button__link {
	position: relative;
	padding-left: clamp(20px, calc(0px + 6.25vw), 100px);
	padding-right: calc(clamp(20px, calc(0px + 6.25vw), 100px) + 2em);
	padding-top: clamp(10px, calc(10px + 0.625vw), 20px);
	padding-bottom: calc(clamp(10px, calc(10px + 0.625vw), 20px) + clamp(8px, calc(8px + 0.5vw), 16px));
	font-size: 1em;
/* add white background for the bottom color item. otherwhise we'd get a dirty color, because of mix-blend-mode: multiply in combination with grey background */
	background-image: linear-gradient(0deg, #fff clamp(8px, calc(8px + 0.5vw), 16px), #fff clamp(8px, calc(8px + 0.5vw), 16px), transparent 10px);
}

.is-style-color-grid-buttons .wp-block-button__link::after {
	content: " ";
	position: absolute;
	right: clamp(10px, calc(10px + 0.625vw), 20px);
	top: 50%;
	margin-top: calc(-0.5 * clamp(8px, calc(8px + 0.5vw), 16px));
	width: 2em;
	height: 2em;
	background-image: url('https://europe.wordcamp.org/2025/files/2025/02/arrow-button-arrow-black-on-white.png');
	background-size: cover;
	transform: translate3d(0, -50%, 0);
}

.is-style-color-grid-buttons .wp-block-button__link:hover::after {
	background-image: url('https://europe.wordcamp.org/2025/files/2025/02/arrow-button-arrow-orange-on-white.png');
}

@media screen and (min-width: 500px) and (max-width: 999px) {
	.is-style-color-grid-buttons .wp-block-button {
		flex-basis: calc(50% - clamp(10px, calc(10px + 0.625vw), 20px));
	}
}

@media screen and (min-width: 1000px) {
	.is-style-color-grid-buttons .wp-block-button {
		flex-basis: calc(33% - (clamp(10px, calc(10px + 0.625vw), 20px) / 3 * 2));
	}
}

/* Some styles for mix-blend-mode on different elements */
.is-style-mbm-left-yellow {
	position: relative;
}

.is-style-mbm-left-yellow::before {
	content: " ";
	position: absolute;
	z-index: 9;
	bottom: 0;
	left: 0;
	width: var(--wp--preset--spacing--40);
	height: 100%;
	background: var(--wp--preset--color--custom-yellow-secondary);
	mix-blend-mode: multiply;
}

.is-style-mbm-left-yellow .wp-block-image {
	margin-left: var(--wp--preset--spacing--40);
}

/* START of the Tix Attendees. */
#tix-attendees {
	max-width: var(--wp--style--global--wide-size);
}

#tix-attendees .tix-attendee-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
	gap: 20px;
	padding: 0;
	margin: 0;
}

/* Id to overwrite some default styles */
#tix-attendees .tix-attendee-list li {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: auto;
	width: auto;
	float: none;
	position: relative;
	align-items: center;
	padding-bottom: 40px;
}

#tix-attendees .tix-attendee-list li img {
	width: 192px;
	height: auto;
	display: block;
	z-index: 1;
/* outline-width: 6px; */
/* outline-style: solid; */
}

/* Pink outline for 1st, 5th, 9th, etc. attendees */
/* #tix-attendees .tix-attendee-list li:nth-child(16n+1) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+2) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+3) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+4) img {
	outline-color: var(--wp--preset--color--custom-pink-secondary);
}
 */
/* Blue outline for 2nd, 6th, 10th, etc. attendees */
/* #tix-attendees .tix-attendee-list li:nth-child(16n+5) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+6) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+7) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+8) img {
	outline-color: var(--wp--preset--color--custom-light-blue-primary);
} */
/* Yellow outline for 3rd, 7th, 11th, etc. attendees */
/* #tix-attendees .tix-attendee-list li:nth-child(16n+9) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+10) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+11) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+12) img {
	outline-color: var(--wp--preset--color--custom-yellow-secondary);
} */
/* Orange outline for 4th, 8th, 12th, etc. attendees */
/* #tix-attendees .tix-attendee-list li:nth-child(16n+13) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+14) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+15) img,
#tix-attendees .tix-attendee-list li:nth-child(16n+0) img {
	outline-color: var(--wp--preset--color--custom-orange-primary);
} */
#tix-attendees .tix-attendee-list li .tix-attendee-name {
	display: block;
	margin-left: 0;
}

#tix-attendees .tix-attendee-list li .tix-attendee-name .tix-first,
#tix-attendees .tix-attendee-list li .tix-attendee-name .tix-last {
	display: block;
	font-size: 32px;
	text-align: center;
}

#tix-attendees .tix-attendee-list li .tix-attendee-name .tix-first {
	margin-top: 10px;
	font-weight: 700;
}

#tix-attendees .tix-attendee-list li::before {
	content: "";
	display: inline-block;
	position: absolute;
	inset: 0;
	margin: 0 auto;
	width: 192px;
	height: 192px;
	background-image: url('//europe.wordcamp.org/2025/files/2025/03/attendees.jpg');
	background-size: cover;
}

#tix-attendees .tix-attendee-list li:nth-child(4n+1)::before {
	transform: rotate(0deg);
}

#tix-attendees .tix-attendee-list li:nth-child(4n+2)::before {
	transform: rotate(90deg);
}

#tix-attendees .tix-attendee-list li:nth-child(4n+3)::before {
	transform: rotate(180deg);
}

#tix-attendees .tix-attendee-list li:nth-child(4n)::before {
	transform: rotate(270deg);
}

#tix-attendees .tix-attendee-url {
	margin-top: 0;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	visibility: hidden;
	text-align: center;
	margin-right: 0;
	margin-left: 0;
	font-size: 0;
}

#tix-attendees .tix-attendee-url:before {
	content: "";
	display: inline-block;
	position: static;
	visibility: visible;
	height: 24px;
	width: 24px;
}

#tix-attendees .tix-wordpress-org-profile-url:has(+ .tix-company-or-personal-website)::before {
	margin-right: 42px;
/* Space between icons */
}

/* Apply margin-left only if this link is preceded by a WordPress.org profile link */
#tix-attendees .tix-wordpress-org-profile-url + .tix-company-or-personal-website::before {
	margin-left: 42px;
/* Space between icons */
}

#tix-attendees .tix-company-or-personal-website:before {
	background: url('//europe.wordcamp.org/2025/files/2025/03/website.png') no-repeat center center;
	background-size: contain;
}

#tix-attendees .tix-wordpress-org-profile-url:before {
	background: url('//europe.wordcamp.org/2025/files/2025/03/wordpress.png') no-repeat center center;
	background-size: contain;
}

/* END of the Tix Attendees */
/* START of Speakers */
.wp-block-post-template .type-wcb_speaker .wp-block-wordcamp-avatar {
	position: relative;
	width: 100% !important;
	height: auto !important;
	border-radius: 0;
	border-bottom: clamp(16px, calc(8px + 2vw), 40px) solid #000;
}

.wp-block-post-template .type-wcb_speaker .wp-block-wordcamp-avatar::before {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 33.3333333333%;
	height: clamp(16px, calc(8px + 2vw), 40px);
}

.wp-block-post-template .type-wcb_speaker img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Different colors for the speakers, repating every 6th speaker */
.wp-block-post-template .type-wcb_speaker:nth-child(6n+1) .wp-block-wordcamp-avatar {
	border-bottom-color: var(--wp--preset--color--contrast);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+2) .wp-block-wordcamp-avatar {
	border-bottom-color: var(--wp--preset--color--custom-light-blue-primary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+3) .wp-block-wordcamp-avatar {
	border-bottom-color: var(--wp--preset--color--custom-pink-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+4) .wp-block-wordcamp-avatar {
	border-bottom-color: var(--wp--preset--color--custom-light-blue-primary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+5) .wp-block-wordcamp-avatar {
	border-bottom-color: var(--wp--preset--color--custom-orange-primary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+6) .wp-block-wordcamp-avatar {
	border-bottom-color: var(--wp--preset--color--custom-pink-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+1) .wp-block-wordcamp-avatar::before {
	background-color: var(--wp--preset--color--custom-yellow-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+2) .wp-block-wordcamp-avatar::before {
	background-color: var(--wp--preset--color--custom-yellow-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+3) .wp-block-wordcamp-avatar::before {
	background-color: var(--wp--preset--color--custom-yellow-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+4) .wp-block-wordcamp-avatar::before {
	background-color: var(--wp--preset--color--custom-yellow-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+5) .wp-block-wordcamp-avatar::before {
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.wp-block-post-template .type-wcb_speaker:nth-child(6n+6) .wp-block-wordcamp-avatar::before {
	background-color: var(--wp--preset--color--custom-orange-primary);
}

/* Single view of speaker */
.single-wcb_speaker .wp-block-wordcamp-avatar {
	position: relative;
	width: 100% !important;
	height: auto !important;
	border-radius: 0;
}

.single-wcb_speaker .wp-block-wordcamp-avatar img {
	display: block;
	width: 60%;
	height: auto;
	border-radius: 0;
}

.single-wcb_speaker .wp-block-wordcamp-avatar::before,
.single-wcb_speaker .wp-block-wordcamp-avatar::after {
	content: " ";
	position: absolute;
	right: 0;
	width: 40%;
}

.single-wcb_speaker .wp-block-wordcamp-avatar::before {
	top: 0;
	height: 60%;
	background-color: var(--wp--preset--color--custom-pink-secondary);
}

.single-wcb_speaker .wp-block-wordcamp-avatar::after {
	bottom: 0;
	height: 40%;
	background-color: var(--wp--preset--color--custom-orange-primary);
}

.single-speaker-color-stack {
	height: 100%;
}

/* END of Speakers */
/* START of Sessions */
.wp-block-wordcamp-speaker-sessions {
	margin-top: 0;
}

.wp-block-wordcamp-speaker-sessions p:first-child {
	margin-top: .25em;
}

.wp-block-wordcamp-speaker-sessions p:last-child {
	margin-bottom: 0;
}

.wp-block-wordcamp-speaker-sessions a {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.wordcamp-speaker-sessions__session-info {
	margin-top: .5em;
}

/* END of Sessions */
/* START of Schedule */
.wordcamp-schedule .wordcamp-schedule__day {
	grid-gap: 0 !important;
	background: #FFF5BF;
}

.wordcamp-schedule .wordcamp-schedule__column-header {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: clamp(8px, calc(4px + 1vw), 16px) clamp(12px, calc(6px + 1.5vw), 24px) !important;
	background: #FFEB7F !important;
	border: 1px solid #FFFFFF !important;
}

/* use blue color for the column header of the first day */
#wordcamp-schedule__day-2025-06-06-tracks-all .wordcamp-schedule__column-header {
	background: var(--wp--preset--color--custom-light-blue-primary) !important;
}

/* use pink color for the column header of the second day */
#wordcamp-schedule__day-2025-06-07-tracks-all .wordcamp-schedule__column-header {
	background: var(--wp--preset--color--custom-pink-secondary) !important;
}

.wordcamp-schedule .wordcamp-schedule__session,
.wordcamp-schedule .wordcamp-schedule__time-slot-header {
	padding: clamp(12px, calc(6px + 1.5vw), 24px);
	background-color: #fff8cf !important;
	border: 1px solid #FFFFFF !important;
	box-shadow: none !important;
	font-size: clamp(14px, calc(13px + 0.25vw), 16px);
}

.wordcamp-schedule p:has( + .wordcamp-schedule__session-speakers ) {
	margin-bottom: .25em;
}

.wordcamp-schedule .wordcamp-schedule__session-speakers {
	margin-top: 0;
	font-weight: 600;
}

/* Favorites solution */
.wcb-favourite-session .wcb-session-favourite-icon a.fav-session-button,
.wordcamp-schedule div.wcb-session-favourite-icon a.fav-session-button:hover,
.wordcamp-schedule div.wcb-session-favourite-icon a.fav-session-button:focus:hover,
.wordcamp-schedule .wcb-favourite-session div.wcb-session-favourite-icon a.fav-session-button:focus {
	color: #ffb900;
}

.wordcamp-schedule .wcb-favourite-session div.wcb-session-favourite-icon a.fav-session-button:hover,
.wordcamp-schedule div.wcb-session-favourite-icon a.fav-session-button:focus {
	color: #aaa;
}

/* Enable background-color on favourite sessions, use Yellow-60 */
.wordcamp-schedule .wordcamp-schedule__session.wcb-favourite-session {
	background-color: #fff09f !important;
}

@media screen and (min-width: 550px) {
	.wordcamp-schedule:not(.is-style-single-column-layout) .wordcamp-schedule__session.is-spanning-some-tracks .wordcamp-schedule__session-title {
		justify-content: center;
		text-align: center;
	}
	
	body:not(.block-editor-page) .wordcamp-schedule:not(.is-style-single-column-layout) .wordcamp-schedule__session.is-overlapping-another-session {
		padding-bottom: 0 !important;
	}
}

/* END of Schedule */
/* Limit max-height of the footer logos */
.footer-location-logos img {
	width: auto;
	max-height: 60px;
}