/* Overlay container */
.construction-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Keeps the website functional underneath */
	z-index: 9999; /* Ensures overlay is on top of all content */
	overflow: hidden; /* Prevents scrolling issues with the overlay */
}

/* Base tape styles */
.tape {
	position: absolute;
	background-color: #DA3F69; /* Magenta color */
	color: white;
	font-family: Arial, sans-serif;
	font-weight: bold;
	padding: 15px 30px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Drop shadow */
	transform-origin: center;
	pointer-events: none; /* Prevent interaction with tapes */
	transition: opacity 0.3s ease; /* Smooth opacity transition */
}

/* Main tape style */
.tape.main {
	width: calc(100% + 40px); /* Extend beyond viewport without clipping */
	text-align: center;
	top: calc(45% - 80px); /* Move the main tape higher */
	left: 50%;
	transform: translateX(-50%) rotate(-3deg); /* Center and slant */
	z-index: 100; /* Ensure this is above random tapes */
}

.tape.main h1 {
	font-size: 2.5rem;
	margin: 0;
	text-transform: uppercase;
}

/* Contact tape style */
.tape.contact {
	width: calc(100% + 40px); /* Extend beyond viewport */
	text-align: center;
	font-size: 1.2rem;
	top: calc(45% - 20px); /* Move the contact tape higher */
	left: 50%; /* Center the tape */
	transform: translateX(-50%) rotate(2deg); /* Center and slant */
	z-index: 100; /* Ensure this is above random tapes */
	text-transform: none; /* Regular casing for email */
	padding: 15px 10px;
	box-sizing: border-box;
	white-space: normal; /* Allow text to break and wrap properly */
	line-height: 1.4;
	word-wrap: break-word; /* Allow wrapping inside the tape */
	overflow: hidden; /* Prevent text overflow */
}

/* Ensure the email link is clickable and changes color on hover */
.tape.contact a {
	color: white;
	text-decoration: none;
	pointer-events: auto; /* Enable interactivity */
}

.tape.contact a:hover {
	color: #F2B700; /* Highlight color on hover */
}

/* Random tape styles */
.tape.random {
	background-color: #DA3F69;
	color: rgba(255, 255, 255, 0.4); /* Faint text for random tapes */
	font-size: 1.2rem;
	padding: 10px 20px;
	white-space: nowrap;
	z-index: 10; /* Ensure random tapes are behind main tapes */
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Random placements with slant */
.tape.random:nth-child(3) {
	width: 150%;
	top: 10%;
	left: -20%;
	transform: rotate(3deg);
}

.tape.random:nth-child(4) {
	width: 130%;
	top: 30%;
	left: -10%;
	transform: rotate(-10deg);
}

.tape.random:nth-child(5) {
	width: 140%;
	top: 70%;
	left: -15%;
	transform: rotate(15deg);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
	.tape.main {
		font-size: 1.8rem; /* Smaller font for smaller screens */
		top: 30%; /* Adjusted placement for smaller screens */
		padding: 10px 15px;
	}

	.tape.main h1 {
		font-size: 1.8rem;
		padding: 0 5%;
	}

	.tape.contact {
		font-size: 1rem; /* Smaller font for smaller screens */
		top: 50%; /* Adjusted placement for smaller screens */
		padding: 10px 5%;
		width: calc(100% + 40px); /* Extend beyond the viewport */
		word-wrap: break-word; /* Ensure email text wraps instead of overflowing */
		white-space: normal; /* Allow text to break into lines */
		line-height: 1.5;
		left: 50%; /* Center the tape */
		transform: translateX(-50%) rotate(2deg);
		overflow: hidden; /* Prevent text overflow */
	}

	/* Ensure the contact tape text wraps correctly on small screens */
	.tape.contact p {
		margin: 0;
		font-size: 1rem;
	}
}

/* Unique Cookie Notification container */
.unique-cookie-notification {
	position: fixed;
	bottom: 0; /* Position at the bottom of the screen */
	left: 0;
	width: 100%;
	background-color: #DA3F69; /* Magenta color */
	color: white;
	font-family: Arial, sans-serif;
	font-weight: bold;
	z-index: 9999; /* Keeps it on top of other content */
	padding: 20px 0; /* Increased padding for better click area */
	box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	text-align: center;
	pointer-events: auto; /* Allow interaction with the notification */
}

/* Unique Scrolling content */
.unique-cookie-content {
	display: inline-block;
	white-space: nowrap;
	animation: unique-scroll-left 15s linear infinite; /* Slower scroll */
}

/* Styling for the H4 text */
.unique-cookie-content h4 {
	margin: 0;
	padding: 0 20px;
	display: inline-block;
	font-size: 1.2rem; /* Slightly larger font size */
	text-transform: none; /* Normal text case */
}

/* Styling for the email link - Always in hover state with button style */
.unique-cookie-content a {
	color: #DA3F69; /* Magenta text color */
	text-decoration: none;
	font-size: 1.25rem; /* Larger font size for better clickability */
	padding: 10px 15px; /* Larger padding to increase clickable area */
	background-color: #F2B700; /* Highlighted background color (same as hover) */
	border-radius: 5px; /* Rounded corners for button-like appearance */
	display: inline-block;
	cursor: pointer; /* Changes cursor to pointer when hovering */
}

/* Removed hover effect since we want it active all the time */
.unique-cookie-content a:hover {
	background-color: #F2B700; /* No need for hover now */
	color: #DA3F69; /* No need for hover color change */
}

/* Keyframes for the scrolling animation */
@keyframes unique-scroll-left {
	0% {
		transform: translateX(100%); /* Start off-screen to the right */
	}
	100% {
		transform: translateX(-150%); /* End off-screen to the left */
	}
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.unique-cookie-notification {
		font-size: 0.9rem;
	}

	.unique-cookie-content h4 {
		font-size: 1rem; /* Adjust font size for smaller screens */
	}

	.unique-cookie-content a {
		font-size: 1.2rem; /* Larger email link on mobile */
		padding: 10px 20px; /* Larger padding for easier clicking */
	}
}