/* ============================================
   Heaven Malone — consolidated site styles
   ============================================ */

/* ---- Page backgrounds ---- */
body.event {
	background-color: #f3f3f4;
}

/* ---- Responsive content blocks ---- */
@media screen and (max-width: 767px) {
	.contentDark {
		padding: 40px 28px 60px;
		overflow: auto;
		min-width: 85%;
	}
}

/* ============================================
   Hero crossfade
   ============================================ */
@keyframes fade {
	0%      { opacity: 0; }
	11.11%  { opacity: 1; }
	33.33%  { opacity: 1; }
	44.44%  { opacity: 0; }
	100%    { opacity: 0; }
}
.fadein { position: relative; }
.fadein > div {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	animation-name: fade;
	animation-iteration-count: infinite;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ---- Homepage: 5 frames, 12s loop ---- */
body.home .fadein > div { animation-duration: 12s; }
body.home .fadein > div:nth-child(1) {
	background-image: url(../images/stage-heaven-min.jpg);
	background-image: image-set(url(../images/stage-heaven-min.webp) type("image/webp"), url(../images/stage-heaven-min.jpg) type("image/jpeg"));
	animation-delay: 0s;
}
body.home .fadein > div:nth-child(2) {
	background-image: url(../images/tao-heaven-1.jpg);
	background-image: image-set(url(../images/tao-heaven-1.webp) type("image/webp"), url(../images/tao-heaven-1.jpg) type("image/jpeg"));
	animation-delay: 3s;
}
body.home .fadein > div:nth-child(3) {
	background-image: url(../images/heaven_cannes_6-min.jpg);
	background-image: image-set(url(../images/heaven_cannes_6-min.webp) type("image/webp"), url(../images/heaven_cannes_6-min.jpg) type("image/jpeg"));
	animation-delay: 6s;
}
body.home .fadein > div:nth-child(4) {
	background-image: url(../images/tao-heaven-2.jpg);
	background-image: image-set(url(../images/tao-heaven-2.webp) type("image/webp"), url(../images/tao-heaven-2.jpg) type("image/jpeg"));
	animation-delay: 9s;
}
body.home .fadein > div:nth-child(5) {
	background-image: url(../images/stage-heaven-min.jpg);
	background-image: image-set(url(../images/stage-heaven-min.webp) type("image/webp"), url(../images/stage-heaven-min.jpg) type("image/jpeg"));
	animation-delay: 12s;
}

/* ---- Event page: 4 frames, 9s loop ---- */
body.event .fadein > div { animation-duration: 9s; }
body.event .fadein > div:nth-child(1) {
	background-image: url(../images/stage-heaven-min.jpg);
	background-image: image-set(url(../images/stage-heaven-min.webp) type("image/webp"), url(../images/stage-heaven-min.jpg) type("image/jpeg"));
	animation-delay: 0s;
}
body.event .fadein > div:nth-child(2) {
	background-image: url(../images/heaven_cannes_1-min.jpg);
	background-image: image-set(url(../images/heaven_cannes_1-min.webp) type("image/webp"), url(../images/heaven_cannes_1-min.jpg) type("image/jpeg"));
	animation-delay: 3s;
}
body.event .fadein > div:nth-child(3) {
	background-image: url(../images/heaven_cannes_6-min.jpg);
	background-image: image-set(url(../images/heaven_cannes_6-min.webp) type("image/webp"), url(../images/heaven_cannes_6-min.jpg) type("image/jpeg"));
	animation-delay: 6s;
}
body.event .fadein > div:nth-child(4) {
	background-image: url(../images/stage-heaven-min.jpg);
	background-image: image-set(url(../images/stage-heaven-min.webp) type("image/webp"), url(../images/stage-heaven-min.jpg) type("image/jpeg"));
	animation-delay: 9s;
}

/* ---- Event page menu positioning ---- */
body.event .menu,
body.event ul.tags {
	position: relative;
	top: auto;
	margin-top: 20px;
}

/* ============================================
   Notable Events
   ============================================ */
#notableevents ul {
	column-width: 280px;
	column-gap: 32px;
	margin-bottom: 0;
}
#notableevents li {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* ============================================
   Cities & Venues / Press
   ============================================ */
#venues a {
	color: #fff;
}
#venuesAlign,
#pressAlign {
	column-width: 260px;
	column-gap: 24px;
}
#venuesAlign ul,
#pressAlign ul {
	margin-top: 0;
}
/* Press entries (magazine + its articles) stay together. */
#pressAlign ul {
	break-inside: avoid;
	page-break-inside: avoid;
}
/* Venues: long city lists (e.g. Chicago) may split across columns,
   but never break right after the city header. */
#venuesAlign li.city {
	break-after: avoid-column;
	page-break-after: avoid;
}

/* Breathing room between Press and the SoundCloud embed. */
#press iframe {
	display: block;
	margin-top: 80px;
}

/* ============================================
   Page chrome
   ============================================ */
.page-bg-light {
	background-color: #f3f3f4;
}
.site-footer {
	padding: 20px;
	width: auto;
	text-align: center;
	background-color: #f3f3f4;
}

/* ============================================
   Bio + decorative images
   ============================================ */
#bio {
	text-align: left;
}
.bio-logo-wrap {
	text-align: center;
	width: 100%;
	padding-top: 13%;
}
.bio-logo-wrap img {
	width: 30%;
	height: auto;
}
.heaven-bird {
	display: block;
	width: 10%;
	height: auto;
	padding: 10%;
	margin-left: auto;
	margin-right: auto;
}

/* Social icons in the top menu */
.button-icon img {
	height: 50%;
}

/* ============================================
   Section text-alignment overrides
   ============================================ */
#press,
#notableevents {
	text-align: left;
}
#notableevents {
	padding-top: 60px;
}

/* Generic utility to hide an element while keeping it in the DOM. */
.hidden {
	display: none;
}

/* Empty-state for upcoming events */
.events-empty {
	text-align: center;
}

/* ============================================
   Event page specifics
   ============================================ */
body.event #bio > .container {
	background-color: transparent;
}
body.event .invert a,
body.event .largeButton a {
	border-radius: 5px;
}
.event-details {
	font-size: 0.9em;
	padding-bottom: 20px;
}