/* ===== CSS VARIABLES ===== */
:root {
	--bg-light-override: #f2f2f7;
	--glyph-gray-secondary: #6e6e73;
	--glyph-gray-tertiary: #86868b;

	/* Purple Theme Colors */
	--purple-primary: 49, 32, 112;
	--purple-secondary: 155, 106, 209;
	--purple-light: 242, 235, 250;
	--purple-lighter: 220, 200, 247;

	/* Dark Purple Theme Colors */
	--purple-dark-primary: 18, 9, 49;
	--purple-dark-secondary: 38, 13, 64;
	--purple-dark-light: 21, 9, 35;

	/* Badge Colors */
	--badge-apple: rgb(73, 29, 125);
	--badge-wwdc: rgb(239, 157, 48);

	/* Box Shadow Colors */
	--shadow-purple-1: 75, 61, 105;
	--shadow-purple-2: 155, 107, 211;
	--shadow-purple-3: 84, 60, 145;
	--shadow-purple-light-1: 230, 215, 255;
	--shadow-purple-light-2: 180, 150, 232;

	/* UI Colors */
	--dark-ui-bg: rgb(51, 51, 54);
	--callout-dark-bg: #262740;

	/* System Colors */
	--white: 255, 255, 255;
	--black: 0, 0, 0;
}

.theme-dark {
	--glyph-gray-secondary: #86868b;
	--glyph-gray-tertiary: #6e6e73;
	--bg-light-override: #000000;
}

.tile {
	--sk-tile-background: #ffffff;
}
.theme-dark .tile {
	--sk-tile-background: #1d1d1f;
}

.badge-community {
	--sk-badge-background: rgba(114, 53, 187, 0.25) !important;
	--sk-badge-text-color: rgba(114, 53, 187, 1) !important;
}
.theme-dark .badge-community {
	--sk-badge-background: rgba(153, 88, 230, 0.25) !important;
	--sk-badge-text-color: rgba(153, 88, 230, 1) !important;
}

.badge-community-alt {
	--sk-badge-background: rgba(255, 146, 0, 0.25) !important;
	--sk-badge-text-color: rgba(255, 146, 0, 1) !important;
}
.theme-dark .badge-community-alt {
	--sk-badge-background: rgba(255, 146, 0, 0.25) !important;
	--sk-badge-text-color: rgba(255, 146, 0, 1) !important;
}

/* ===== BASE LAYOUT & GLOBAL STYLES ===== */
bg-gradient,
.theme-light .bg-gradient,
body[data-color-scheme="light"] .bg-gradient,
.theme-dark .bg-gradient,
body[data-color-scheme="dark"] .bg-gradient {
	background: radial-gradient(
		ellipse at top left,
		rgb(165 76 189) 0%,
		rgb(61 40 174) 65%,
		rgba(133, 51, 228, 1) 100%
	) !important;
}

.ribbon,
.theme-light .ribbon,
body[data-color-scheme="light"] .ribbon {
	border-top: 1px solid #d2d2d7;
}
.theme-dark .ribbon,
body[data-color-scheme="dark"] .ribbon {
	border-top: 1px solid #424245;
}

.bg-light {
	background-color: var(--bg-light-override) !important;
}

.grid.grid-gutterless {
	width: 100%;
}

.theme-dark .callout {
	background-color: var(--callout-dark-bg) !important;
}

section.section-hero {
	color: #ffffff;
}

section.section-hero .eyebrow sf-symbol {
	font-size: 80px;
}

section.section-hero img {
	max-width: 250px;
	filter: saturate(1.3);
}

.lighter {
	color: var(--glyph-gray-tertiary);
}

/* ===== FILTER LAYOUT STYLES ===== */
.section-filters {
	display: flex;
	justify-content: center;
	align-items: center;
}

.section-filters .section-content {
	display: flex;
	justify-content: center;
}

.filters-container {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: 1200px;
}

.regional-filter-container {
	flex: 1;
	display: flex;
	justify-content: flex-start;
}

.wwdc-filter-container {
	flex-shrink: 0;
}

/* ===== WWDC FILTER DROPDOWN STYLING ===== */
.wwdc-filter-dropdown {
	background-color: #e8e8ed;
	white-space: nowrap;
	border-radius: 999px;
	padding: 12px 20px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: rgba(29, 29, 31, 0.9);
	transition: all 0.2s ease;
	border: none;
	height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(29, 29, 31, .9)" stroke-width="2"><polyline points="6,9 12,15 18,9"></polyline></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px;
}

.wwdc-filter-dropdown:focus {
	outline: none;
}

.wwdc-filter-dropdown option {
	background-color: rgb(var(--white));
	color: #1d1d1f;
	padding: 8px 12px;
}

.theme-dark .wwdc-filter-dropdown,
body[data-color-scheme="dark"] .wwdc-filter-dropdown {
	background-color: var(--dark-ui-bg);
	color: rgba(245, 245, 247, 0.9);
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(245, 245, 247, .9)" stroke-width="2"><polyline points="6,9 12,15 18,9"></polyline></svg>');
}

.theme-dark .wwdc-filter-dropdown option,
body[data-color-scheme="dark"] .wwdc-filter-dropdown option {
	background-color: var(--dark-ui-bg);
	color: rgba(245, 245, 247, 0.9);
}

/* ===== TAB NAVIGATION STYLES ===== */
.tn-p {
	margin: 0;
	display: flex;
	width: fit-content;
}

.tn-p .tn {
	margin: 0;
	width: fit-content;
}

/* ===== TILES ===== */
.tile-full .tile-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--tile-custom-gap, 1.25em);
	padding: 1.5em;
}

a.tile-link .tile-rounded {
	transition: box-shadow 0.2s ease-in-out;
}
a.tile-link:hover .tile-rounded {
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.01),
		0 7px 14px 0 rgba(0, 0, 0, 0.1),
		0 3px 6px 0 rgba(0, 0, 0, 0.02);
}

.tile sf-symbol {
	font-size: 24px;
	width: 24px;
	display: inline-flex;
	vertical-align: text-bottom;
}

sf-symbol + p {
	display: inline-flex;
	position: relative;
}

sf-symbol.calendar-icon {
	margin-top: 6px;
}
sf-symbol.calendar-icon + p {
	margin-top: -6px;
}

.typography-eyebrow.smaller {
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0.25em;
}

.typography-eyebrow.lighter {
	color: var(--glyph-gray-tertiary);
}

/* ===== STANDARD EVENT TILES ===== */
.event-item.hidden {
	display: none;
}

.section-events .tile svg.top-icon {
	height: 59px;
	position: absolute;
	left: 24px;
	top: 9px;
}

.section-events .tile-content {
	padding-top: 62px;
}

.grid-item .tile-rounded .typography-eyebrow strong {
	font-weight: 800;
}

/* ===== BADGES ===== */

.badges {
	float: right;
	padding-right: 25px;
}

/* ===== APPLE ATTENDING BANNER AND BADGE STYLES ===== */
a.tile-link .tile-rounded .apple-attending-banner {
	padding: 25px 0 0 25px;
}

.apple-attending-banner + .tile-content {
	padding-top: 10px;
}

.apple-attending {
	margin-right: 1em;
	display: inline-block;
}

/* ===== WWDC BANNER AND BADGE STYLES ===== */
a.tile-link .tile-rounded .wwdc-banner {
	padding: 25px 0 0 25px;
}

.wwdc-banner + .tile-content {
	padding-top: 10px;
}

.theme-dark .grid-item[data-wwdc="true"] .tile-rounded,
body[data-color-scheme="dark"] .grid-item[data-wwdc="true"] .tile-rounded {
	color: rgb(var(--white)) !important;
}

/* ===== UTILITY STYLES ===== */
.no-results {
	text-align: center;
	padding: 2rem;
	color: var(--glyph-gray-tertiary);
	grid-column: 1 / -1;
	display: none;
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */
@media only screen and (max-width: 1068px) {
	.tn-p {
		max-width: 496px;
	}
}

@media only screen and (max-width: 734px) {
	.filters-container {
		gap: 0.75rem;
	}

	.tn-p {
		max-width: calc(100vw - 40px);
		width: 100%;
	}

	.filters-container {
		gap: 0.75rem;
		padding: 0;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.regional-filter-container {
		width: 100%;
		display: flex;
		justify-content: center;
		min-width: 0;
		align-self: center;
		order: 1;
		margin-bottom: 0.5rem;
	}

	.wwdc-filter-container {
		flex-shrink: 0;
		width: auto;
		margin-bottom: 0.5rem;
		align-self: flex-end;
		order: 2;
	}

	.tn-p .tn {
		width: 100%;
	}

	.tn-items {
		justify-content: space-between;
	}

	.tn-label {
		white-space: nowrap;
	}

	.tn-paddle {
		display: block;
	}

	.wwdc-filter-dropdown {
		padding: 12px 16px;
		padding-right: 32px;
		min-width: 120px;
		height: 44px;
		background-size: 14px;
		background-position: right 10px center;
	}

	.wwdc-filter-dropdown:hover {
		background-size: 14px;
	}

	.theme-dark .wwdc-filter-dropdown:hover,
	body[data-color-scheme="dark"] .wwdc-filter-dropdown:hover {
		background-size: 14px;
	}
}

@media only screen and (max-width: 480px) {
	.tn-p {
		max-width: calc(100vw - 32px);
	}

	.filters-container {
		gap: 0.5rem;
	}

	.tn-platter {
		--tabnav-platter-padding: 12px;
	}

	.wwdc-filter-dropdown {
		padding: 12px 12px;
		padding-right: 28px;
		min-width: 110px;
		background-size: 12px;
		background-position: right 8px center;
	}

	.wwdc-filter-dropdown:hover {
		background-size: 12px;
	}

	.theme-dark .wwdc-filter-dropdown:hover,
	body[data-color-scheme="dark"] .wwdc-filter-dropdown:hover {
		background-size: 12px;
	}
}

@media only screen and (max-width: 375px) {
	.tn-p {
		max-width: calc(100vw - 24px);
	}

	.filters-container {
		gap: 0.25rem;
	}

	.tn-platter {
		--tabnav-platter-padding: 10px;
	}

	.wwdc-filter-dropdown {
		padding: 10px 10px;
		padding-right: 26px;
		min-width: 100px;
		background-position: right 6px center;
	}
}

#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section.section-wwdc-events {
	margin-top: 4em;
}
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#main section.section.section-wwdc-events {
		margin-top: 3em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}