/* place your custom style here and include the file in your page */

/* React mounts inside #root; pass the body background down so
   rules like ".footer-sticky #content { background-color: inherit }" keep working */
#root {
	background-color: inherit;
}

/* Icons for platforms not covered by the template (Audiomack / Amuse) */
.social-navigation a[href*="audiomack.com"]:after {
	content: "\F386"; /* mdi-music-circle */
}

.social-navigation a[href*="amuse.io"]:after {
	content: "\F025"; /* mdi-album */
}

/* Grateful Heart promo strip — KANGHA orange, image flush to bottom */
.sales-box {
	background-image: none;
	background-color: #f1802d;
	padding-bottom: 0;
}

.sales-box:after {
	display: none;
}

@media (min-width: 768px) {
	.sales-box .row {
		align-items: flex-end;
	}

	.sales-box .cover-image {
		margin-bottom: 0;
	}
}

/* Black buttons so they stand out on the orange background */
.sales-box .button.button-filled.button-color {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

.sales-box .button.button-filled.button-color:hover,
.sales-box .button.button-filled.button-color:focus {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #ffffff;
}

/* ── Appearance timeline (Events page) ──────────────────────────── */
.appearance-timeline {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
}

.appearance-item {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
}

/* Bold date column — the visual anchor of each row */
.appearance-period {
	flex: 0 0 8.5rem;
	text-align: right;
	font-family: var(--headings-font);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--primary-color);
	letter-spacing: .01em;
	padding-top: .15rem;
}

/* Content sits to the right of a connecting line with a marker dot */
.appearance-body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0 2.25rem 2rem;
	border-left: 2px solid var(--border-color);
}

.appearance-item:last-child .appearance-body {
	padding-bottom: .25rem;
}

.appearance-body:before {
	content: "";
	position: absolute;
	left: -7px;
	top: .5rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--primary-color);
	box-shadow: 0 0 0 4px var(--body-background-color);
}

.appearance-title {
	margin: 0 0 .35rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

.appearance-desc {
	margin: 0;
	opacity: .82;
}

/* Stack the date above the content on small screens */
@media (max-width: 575px) {
	.appearance-item {
		flex-direction: column;
		gap: .25rem;
	}

	.appearance-period {
		flex-basis: auto;
		text-align: left;
		padding-left: 2rem;
	}

	.appearance-body {
		width: 100%;
		padding-bottom: 2rem;
	}
}

/* Home hero portrait — keep Raphael's face in frame at every breakpoint */
.home #featured-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 0;
	object-fit: cover;
	object-position: center top;
}

/* ── Clickable gallery thumbnails + lightbox preview ─────────────── */
.gallery-thumb {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.gallery-thumb img {
	display: block;
	width: 100%;
	transition: transform var(--transition-duration), opacity var(--transition-duration);
}

.gallery-thumb:hover img,
.gallery-thumb:focus-visible img {
	transform: scale(1.05);
	opacity: .85;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background-color: rgba(9, 16, 16, .92);
	animation: lightbox-fade .2s ease-out;
}

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

.lightbox-figure {
	margin: 0;
	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
}

.lightbox-figure img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	margin: 0 auto;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.lightbox-counter {
	margin-top: 1rem;
	color: rgba(255, 255, 255, .75);
	font-size: .9rem;
	letter-spacing: .05em;
}

.lightbox-close,
.lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition-duration);
}

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
	background-color: var(--primary-color);
}

.lightbox-close {
	top: 1.25rem;
	right: 1.25rem;
}

.lightbox-nav {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }

@media (min-width: 768px) {
	.lightbox-prev { left: 2.5rem; }
	.lightbox-next { right: 2.5rem; }
}

/* ── Professional multi-column footer ───────────────────────────── */
#footer {
	text-align: left;
}

#footer .footer-main {
	padding-bottom: 2rem;
}

#footer .footer-heading {
	margin-bottom: 1rem;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 1.05rem;
	letter-spacing: .02em;
}

#footer .footer-brand p {
	max-width: 36ch;
	opacity: .8;
	font-size: .95rem;
}

/* Footer navigation — two labeled groups side by side */
#footer .footer-nav {
	display: flex;
	gap: 2rem;
}

#footer .footer-nav-group {
	flex: 1;
	min-width: 0;
}

#footer .footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .footer-menu li {
	margin-bottom: .55rem;
}

#footer .footer-menu a {
	color: var(--body-text-color);
	opacity: .8;
	transition: var(--transition-duration) color, var(--transition-duration) opacity;
}

#footer .footer-menu a:hover,
#footer .footer-menu a:focus {
	color: var(--primary-color);
	opacity: 1;
}

/* Newsletter column pushed to the right on desktop */
#footer .footer-subscribe p {
	opacity: .8;
	font-size: .95rem;
}

#footer .footer-subscribe .mc4wp-form {
	margin-top: .5rem;
	margin-left: 0;
	margin-right: 0;
	max-width: 440px;
}

/* Inline newsletter group: input flexes, button hugs the right */
#footer .footer-subscribe .one-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	margin-bottom: 0;
}

#footer .footer-subscribe .one-line input[type="email"] {
	flex: 1 1 auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 14px 18px;
}

#footer .footer-subscribe .one-line input[type="submit"] {
	flex: 0 0 auto;
	margin: 0;
	padding: 14px 28px;
	font-weight: 600;
	letter-spacing: .03em;
	border-radius: 0;
}

/* Social icons under the brand (override template left padding) */
#footer .footer-brand .social-navigation {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

#footer .footer-brand .social-navigation li {
	display: inline-block;
}

#footer .footer-brand .social-navigation a:first-child {
	padding-left: 0;
}

/* Bottom bar: copyright left, legal links right */
#footer .footer-bottom {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-start;
	padding-top: 1.75rem;
	border-top: 1px solid var(--border-color);
}

#footer .footer-bottom p {
	margin: 0;
	font-size: .9rem;
	opacity: .75;
}

#footer .footer-legal a {
	color: var(--body-text-color);
}

#footer .footer-legal a:hover,
#footer .footer-legal a:focus {
	color: var(--primary-color);
}

@media (min-width: 768px) {
	#footer .footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

/* Keep the template widget padding from re-centering our columns */
@media (min-width: 992px) {
	#footer .footer-main [class*="col-"] {
		padding-left: 15px;
		padding-right: 15px;
	}
}