/* ======================================
   Dancing roof characters - BOURBON STREET
   ====================================== */
.dancing-roof-characters {
    background: url('../../images/dancing-roof-characters.svg') no-repeat center center / contain;
    height: 95px;
}

@media (max-width: 768px) {
    .dancing-roof-characters {
        height: 50px;
    }
}

/* ======================================
   Title textured background - BOURBON STREET
   ====================================== */

/* Shared base styles for textured backgrounds */
.title-textured-background,
.title-textured-background-green {
	position: relative;
	display: inline; /* allow natural line wraps */
	line-height: 1;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: left 50%, right 50%, center 50%;
	background-size: auto 76%, auto 76%, auto 76%;
	padding: 0 1em; // reserve space for caps so text never overlaps
	-webkit-box-decoration-break: clone; /* paint background on wrapped lines */
	box-decoration-break: clone;
	z-index: 1;
	margin: -.15em -1em;
	
	text-transform: uppercase;
	color: var(--white);
	text-align: center;
	font-size: 77px; /* style like h1 */
}

/* Default variant (beige/tan) */
.title-textured-background {
	/* Layered backgrounds: left cap, right cap, middle texture */
	background-image: url('../../images/title-textured-background-before.png'),
				  url('../../images/title-textured-background-after.png'),
				  url('../../images/title-textured-background-middle.png');
}

/* Green variant - standalone class for specific pages */
.title-textured-background-green {
	/* Layered backgrounds: left cap, right cap, middle texture */
	background-image: url('../../images/title-textured-background-before-green.png'),
				  url('../../images/title-textured-background-after-green.png'),
				  url('../../images/title-textured-background-middle-green.png');
}

@media (max-width: 1200px) {
	.title-textured-background,
	.title-textured-background-green {
		font-size: 65px;
	}
}

@media (max-width: 768px) {
	.title-textured-background,
	.title-textured-background-green {
		font-size: 48px;
	}
}

@media (max-width: 480px) {
	.title-textured-background,
	.title-textured-background-green {
		font-size: 36px;
	}
}