@import url("https://use.typekit.net/oly4kpp.css");

:root{

	--text-color: #000;
	--reverse-text-color: #fff;
	--text-highlight-color: #fff;
	
	--contrast-text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.3);

	--summit-highlight-color: rgba(0, 0, 0, 1);
	--summit-bg-color: rgba(29, 211, 175, 1);
	--summit-bg-color: rgb(165, 223, 0);
	--summit-bg-hover-color: rgba(29, 211, 175, .1);
	--summit-contrast-color: #086375;
	--summit-header-bg-color: #1dd3b0;
	
	--ai-theme-color: #ff6e61;
	--ai-highlight-color: #0f2f52;
	--ai-contrast-color: #086375;
	--ai-header-bg-color: #1dd3b0;
	--reverse-heading-color: #f2f2f2;
	
	--code-theme-color: #563AAB;
	--code-theme-highlight-color: #D62C9F;
	--code-theme-highlight-color-2: #3EA78A;
	--code-theme-contrast-color: #F05652;
	--code-theme-contrast-color-2: #4F7CC7;
	
	--leaders-theme-color: #222EFF;
	--leaders-theme-highlight-color: #6B7FF2;
	--leaders-theme-highlight-color-2: #B733FF;
	--leaders-theme-contrast-color: #52F2E2;
	--leaders-theme-contrast-color-2: #EF35F2;

	--dev-summit-theme-color: #563AAB;
	--dev-summit-theme-highlight-color: #D62C9F;
	--dev-summit-theme-highlight-color-2: #3EA78A;
	--dev-summit-theme-contrast-color: #F05652;
	--dev-summit-theme-contrast-color-2: #4F7CC7;
	
	--next-theme-color: #222EFF;
	--leaders-theme-highlight-color: #6B7FF2;
	--next-theme-highlight-color-2: #B733FF;
	--next-theme-contrast-color: #52F2E2;
	--next-theme-contrast-color-2: #EF35F2;
		
	--summit-header-bg-image: url(/event-common-images/chrome/summit23-header.jpg);
	--summit-header-bg-image-square: url(/event-common-images/chrome/summit23-header–square.jpg);
	--summit-header-bg-image-narrow: url(/event-common-images/chrome/summit23-bg-narrow.png);
	
	--code-header-bg-image: url(/event-common-images/chrome/code24-header.svg);
	--code-header-bg-image-narrow: url(/event-common-images/chrome/code24-header.svg);

	--leaders-header-bg-image: url(/event-common-images/chrome/code-leaders24-header.png);
	--leaders-header-bg-image-narrow: url(/event-common-images/chrome/code-leaders24-header.png);

	--dev-summit-header-bg-image: url(/event-common-images/chrome/dev-summit-header.png);
	--dev-summit-bg-image-narrow: url(/event-common-images/chrome/dev-summit-header-square.png);

	--next-header-bg-image: url(/event-common-images/chrome/code-leaders24-header.png);
	--next-header-bg-image-narrow: url();


	--summit-font: "montserrat", "Helvetica Neue",  Helvetica, Arial, sans-serif;

}

/* about-summit embed */
/* implements the new summit style for embed */

@media (min-width: 768px) {

	.events2024 {
		display: flex;
		flex-wrap: wrap;
		padding-block-end: 1em;
	}
}

.events-wrapper {
	display: none;
}

.events2024 > h2 {
	width: 100%;
	font-size: 2em;
	line-height: 1.1;
	color: var(--light-text-color);
	margin-bottom: .5em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto;
	font-weight: 600;
	font-family: var(--summit-font);
}

.events2024 > p {
	width: 100%;
	text-align: center;
	font-family: var(--summit-font);
}

	.event-highlights {
		font-family: var(--summit-font);
		width: 50%;
		margin: 0 auto;
		padding: 0;
		aspect-ratio: 2.5;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
	}
	
		
	#about-code {
		background-color: var(--code-theme-color);
		background-image: var(--code-header-bg-image-narrow);
	}
	
	#about-leaders {
		background-color: var(--leaders-theme-color);
		background-image: var(--leaders-header-bg-image-narrow);
	}
	
	#about-dev-summit {
		background-color: var(--dev-summit-theme-color);
		background-image: var(--dev-summit-bg-image-narrow);
	}

	#about-next {
		filter: grayscale(100%);
		background-color: var(--next-theme-color);
		background-image: var(--next-header-bg-image-narrow);
	}
	
	
	
/* from header */

/* specific adjustments based on content */


#about-code header h1 span.logo-event-name {
	font-size: 2em;
	font-size: 7cqw;
}

#about-leaders header h1 span.logo-org-name {
	font-size: 1.37cqw
}

#about-leaders header h1 span.logo-event-name {
	font-size: 1.5em;
	font-size: 4.25cqw;
}

#about-dev-summit header h1 span.logo-org-name {
	font-size: 2.25cqw
}

#about-dev-summit header h1 span.logo-event-name span {
	display: block;
}

#about-dev-summit header h1 span.logo-event-name {
	font-size: 1.5em;
	font-size: 3.25cqw;
}

#about-dev-summit header h1 span.logo-event-name span:last-child {
	font-size: 1.5em;
	font-size: 4.8cqw;
}

#about-next header h1 span.logo-org-name {
	font-size: 2.15cqw
}


#about-next header h1 span.logo-event-name {
	font-size: 1.5em;
	font-size: 7.25cqw;
}

/* applies to all event highlights blocks */

.event-highlights {
	width: 24%;
	padding-inline: 1%;
	background-clip: border-box; /* This will extend the background to the outside edge of the border (behind the padding) */
	border-radius: .5em;

}

.event-highlights header {
	width: 100%;
	margin-left: 3%;
	font-size: 1em;
	font-size: min(.9cqw, 1em);
	display: flex;
	flex-direction: column;
	text-shadow: var(--contrast-text-shadow);
	text-stroke: 1px rgb(0, 0, 0, .4);
	-webkit-text-stroke: 1px rgb(0, 0, 0, .4);
	
}

.event-highlights header h1 {
color: var(--highlight-text-color);
text-align: left;
line-height: 1;}


.event-highlights header h1 {
color: var(--code-theme-contrast-color)
}

.event-highlights header h1 {
width: fit-content;
min-height: 3em;
margin-left: 0;
padding-left: 0;
font-size: 4em;
margin-bottom: .6em;
color: var(--text-highlight-color);
font-family: var(--summit-font);
font-weight: 900;
text-transform: uppercase;

}
 

.event-highlights header h1 > span {
display: block;
margin-bottom: 0;
padding: 0;
width: fit-content;
font-size: .8em
}

event logo in the header
.event-highlights header h1 {
	display: flex;
	flex-direction: column;
	width: fit-content;
	gap: .1em
}

.event-highlights header h1 span {
	width: fit-content;
	margin: 0;
	padding: 0
}

.event-highlights header h1 span.logo-org-name {
	font-size: .59em;
	font-size: 2.3cqw;
	text-transform: uppercase;
	font-weight: 600;
	font-variant: small-caps
}

.event-highlights header h1 span.logo-event-name {
	font-size: 1.8em;
	text-transform: uppercase;
	font-weight: 900;
	line-height: .8;
	
}

.event-highlights header h1 span.logo-city-date {
display: flex;
line-height: 1;
width: 100%;
justify-content: space-between;
margin-top: .2em;
font-size: 1.2cqw
}

.event-highlights header h1 span.logo-event-city, .event-highlights header h1 span.logo-event-date {
/* 
	font-size: .4em;
 */
}


.event-highlights header .tagline {
color: var(--text-highlight-color);
width: 100%;
font-size: 1.8em;
font-weight: 600;
font-family: var(--summit-font);
margin: 0;
line-height: 1.1;
text-align: left;

}

/* logo block from event */

.event-highlights header h2 {
font-size: 1.6em;
color: var(--code-theme-contrast-color);
text-align: center;
font-family: var(--summit-font);
line-height: 1;
display: none
}

.event-highlights header h2 span{
	display: block
}

.event-highlights header h2 .city {
	font-weight: 600
}

.event-highlights header h2 .dates {
	font-size: .8em
}

.event-highlights header h2 {
	width: 24%;
	display: inline-block
}

.event-highlights header h2:first-of-type {
	margin-left: 18%;
	
}

.event-highlights header h2 strong {
font-weight: 900}

.event-highlights header h3 {
font-size: 1.3em;
font-size: 1.8vw;color: var(--code-theme-contrast-color);
text-align: center;
font-family: var(--summit-font);
font-weight: 100;
line-height: 1.1;
}

.event-highlights header .tagline {
color: var(--text-highlight-color);
width: 100%;
font-size: 1.6em;
font-weight: 600;
font-family: var(--summit-font);
margin: 1em auto 2em auto;
line-height: 1.1;
text-align: left;
min-height: 4em;
}

.event-highlights header p:last-of-type {
	text-align: right;
}

.event-highlights header p:last-of-type a:link {
	font-weight: 900;
	padding: .5em 2em;
	font-size: 1.2em;
	background-color: var(--code-theme-highlight-color);
	color: var(--reverse-text-color);
	border-radius: 1em;
}

@media screen and (max-width: 1000px) {

	.events2024 {
		flex-wrap: wrap;
		row-gap: 1%
	}
	
	
	.event-highlights {
		width: 49%;
		margin: 0 auto 1% auto;
		padding-block: 1em;
	}
	
	.event-highlights header .tagline {
		width: 60%;
		margin-inline: 0;
		
	}
	
	.event-highlights header p:last-of-type {
		width: 50%;
		text-align: left;
	}
}


/* narrow adjustments */
@media screen and (max-width: 768px) {


#about-code header h1 {
	font-size: 1cqw
}

#about-code header h1 span.logo-event-name {
	font-size: 28em
}

#about-code header h1 span.logo-org-name {
	font-size: 9.15em
}

#about-leaders header h1 {
	font-size: 1cqw
}

#about-leaders header h1 span.logo-org-name {
	font-size: 5.85em
}

#about-leaders header h1 span.logo-event-name {
	font-size: 18em
}

#about-dev-summit header h1 {
	font-size: 1cqw
}

#about-dev-summit header h1 span.logo-org-name {
	font-size: 9.05em
}

#about-dev-summit header h1 span.logo-event-name {
	font-size: 13.3em;
}

#about-dev-summit header h1 span.logo-event-name span:last-child {
	font-size: 1.5em;
}

#about-next header h1 {
	font-size: 1cqw
}

#about-next header h1 span.logo-org-name {
	font-size: 9.395em
}


#about-next header h1 span.logo-event-name {
	font-size: 31em;
}

	.event-highlights {
        width: 96%;
        margin: 0 auto 2% auto;
        padding-block: 1em;
	}
	
	
	.event-highlights header  {
		width: fit-content;
		margin-inline: auto;
		font-size: 1em;
		margin-block-start: 2em;
/* 		font-size: 5cqw; */
	}
	
	.event-highlights header h1 {
		width: 90%;
		margin-inline: auto;
	}
	
	.event-highlights header h1 span.logo-city-date {
		font-size: 5em
	}
	
	.event-highlights p, .event-highlights header .tagline {
		font-size: 1em;
		width: 90%;
		margin-inline: auto;
		min-height: auto;
	}

	.event-highlights header p:last-of-type {
			font-size: 1em;
			width: 80%;
			margin-inline: auto;
			text-align: center;
	}
	
}