/* ==========================================================================
   Roly Rolls - Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
	/* Primary Colors */
	--ColorPurple: #8D00F1;
	--ColorPurpleDark: #461667;
	--ColorPurpleLight: #E4D9FF;

	/* Accent Colors */
	--ColorPink: #D03079;
	--ColorPinkLight: #E84A93;
	--ColorRed: #FF1053;
	--ColorOrange: #FF6B35;

	/* Neutral Colors */
	--ColorWhite: #FFFFFF;
	--ColorOffWhite: #FAFAFF;
	--ColorLightGray: #E5E5E5;
	--ColorGray: #666666;
	--ColorDarkGray: #333333;

	/* Typography */
	--FontDisplay: 'Cherry Swash', cursive;
	--FontHeader: 'Asap', sans-serif;
	--FontNavigation: 'Asap', sans-serif;
	--FontButton: 'Asap Condensed', sans-serif;
	--FontBody: 'Neuton', serif;
	--FontFooter: 'Asap', sans-serif;

	/* Layout */
	--MaxWidth: 1000px;
	--BorderRadius: 8px;
	--BorderRadiusLg: 25px;

	/* Transitions */
	--TransitionFast: 0.15s ease;
	--TransitionBase: 0.25s ease;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
	box-sizing: 		border-box;
}

html {
	font-size: 			16px;
	scroll-behavior: 	smooth;
}

body {
	font-family: 		var(--FontBody);
	font-size: 			16px;
	line-height: 		1;

	margin: 			0;
	padding: 			0;

	color: 				var(--ColorDarkGray);
	background-color: 	var(--ColorOffWhite);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--FontHeader);
  margin: 0 0 20px;
  line-height: 1;
}

p {
  margin: 0 0 20px;
}

a {
  text-decoration: none;
  transition: color var(--TransitionFast);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
	cursor: 			pointer;
	border: 			none;
	transition: 		all var(--TransitionBase);
	touch-action: 		manipulation;

	user-select:		none;
	-webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   Common
   -------------------------------------------------------------------------- */
.Button {
	background: 		linear-gradient(135deg, #5c16a3, var(--ColorPurpleDark));

	font-family:		var(--FontButton);
	font-weight:		bold;
	font-size:			18px;
	color:				var(--ColorOffWhite);

	border-radius:		30px;
	padding:			15px 30px;

	text-transform: 	uppercase;

	transition:			0.25s;
}

.Button:hover {
	background: 		linear-gradient(135deg, var(--ColorPurple), var(--ColorPurpleDark));
}

.Button:active {
	background: 		linear-gradient(135deg, #8D00F1, var(--ColorPink));
}

.ButtonAlt {
	background: 		linear-gradient(135deg, var(--ColorOffWhite), var(--ColorOffWhite));
	color:				var(--ColorPurple);
}

.ButtonAlt:hover {
	background: 		linear-gradient(135deg, var(--ColorOffWhite), var(--ColorOffWhite));
	color:				var(--ColorPurpleDark);
}

.ButtonAlt:active {
	background: 		linear-gradient(135deg, #8D00F1, var(--ColorPink));
	color:				var(--ColorOffWhite);
}

.CheckboxLabel {
	cursor: 			pointer;
	user-select: 		none;

	display:			inline-block;
}

.CheckboxLabelWrapper {
	display: 			flex;
	align-items: 		center;
	gap: 				12px;
}

.CheckboxInput {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--ColorLightGray);
	border-radius: 6px;
	margin: 0;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.CheckboxInput::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 10px;
	border-right: 2.5px solid white;
	border-bottom: 2.5px solid white;
	rotate: 45deg;
	translate: 0 -1px;
	opacity: 0;
	scale: 0.5;
	transition: opacity 0.2s ease, scale 0.2s ease;
}

.CheckboxInput:checked {
	background: 		var(--ColorPurple);
	border-color: 		var(--ColorPurple);
}

.CheckboxInput:checked::after {
	opacity: 			1;
	scale: 				1;
}

.CheckboxInput:hover {
	border-color: 		var(--ColorPurple);
}

.CheckboxInput:focus-visible {
	outline: 			2px solid var(--ColorPurple);
	outline-offset: 	2px;
}

.CheckboxLabelText {
	font-size: 			16px;
	color: 				var(--ColorDarkGray);
	text-align:			left;
}

/* --------------------------------------------------------------------------
   Environment
   -------------------------------------------------------------------------- */
.EnvironmentBar {
	position:			absolute;

	left:				50%;
	top:				0;

	width:				200px;

	transform: 			translateX(-50%);

	background-color:	var(--ColorRed);
	color:				white;

	font-size:			10px;
	font-weight:		bold;
	font-family:		var(--FontHeader);

	padding:			3px 0;
	border-radius:		0 0 3px 3px;

	text-align: 		center;

	z-index:			200;

	box-shadow:			0 5px 10px var(--ColorPurpleDark);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.Navigation {
	position:         	absolute;
	top:              	0;
	left:             	0;
	right:            	0;
	z-index:          	100;

	width:            	100%;

	background-color: 	rgba(80, 14, 121, 0.6);
	backdrop-filter:  	blur(2px);

	display:          	flex;
}

.NavList {
	margin: 			0 auto;
	display: 			flex;
}

.NavItem {
	font-family:		var(--FontNavigation);
}

.NavItemLink {
	color: 				var(--ColorOffWhite);
	font-weight: 		700;
	font-size: 			24px;

	padding: 			50px 20px 20px 20px;
	transition: 		all var(--TransitionFast);

	display: 			block;
}

.NavItemLink:focus,
.NavItemLink:hover {
	color: 				var(--ColorPurpleDark);
	background-color: 	var(--ColorOffWhite);
}

.NavItemLink:active {
  color: 				var(--ColorRed);
  background-color: 	var(--ColorOffWhite);
}

.NavMobileButton,
.NavCloseButton {
	display:			none;
}

/* --------------------------------------------------------------------------
   Homepage Hero
   -------------------------------------------------------------------------- */
.HomepageHero {
	background-image: 	url("/Assets/HomepageHeroImage.jpg");
	background-size: 	cover;
}

.HomepageHeroInner {
	position: 			relative;

	flex-direction: 	column;
	align-items:		center;

	padding:			120px 20px 10px 20px;
	text-align:			center;

	display:			flex;
}

.HomepageHeroLink {
	display: 			block;
	transition: 		transform var(--TransitionBase);
}

.HomepageHeroLink:hover {
	transform: 			scale(1.02);
}

.HomepageHeroLogo {
	max-width: 			700px;
	width: 				100%;
	height: 			auto;
}

.HomepageHeroText {
	font-family: 		var(--FontHeader);
	font-size:			clamp(70px, 4vw, 80px);
	font-weight:		900;

	color: 				var(--ColorPurpleLight);
}

/* --------------------------------------------------------------------------
   Homepage Featured Section
   -------------------------------------------------------------------------- */
.HomepageFeatured {
	background-color: 	var(--ColorPurpleDark);
	box-shadow:			0px 10px 20px var(--ColorPurpleLight);
}

.HomepageFeaturedInner {
	max-width: 			1000px;
	margin: 			0 auto;
	align-items: 		center;
	display: 			flex;
}

.HomepageFeaturedPreview {
	flex: 				0 0 500px;
	position: 			relative;
	padding:			0 50px;
	top:				50px;
}

.HomepageFeaturedPreviewTag {
	position: 			absolute;
	top: 				0;
	left: 				0;
	z-index: 			1;

	background-color: 	var(--ColorRed);
	color: 				var(--ColorOffWhite);

	font-weight: 		800;
	font-size: 			32px;
	font-family:		var(--FontHeader);

	padding: 			6px 10px;

	border-radius: 		4px;
	margin: 			0;
}

.HomepageFeaturedPreviewImage {
	width: 				100%;

	border-radius: 		25px;
	box-shadow: 		0 0 15px rgba(228, 217, 255, 0.8);

	transform: 			rotate(-8deg);

	transition: 		transform var(--TransitionBase);
}

.HomepageFeaturedPreviewImage:hover {
	transform: 			rotate(-5deg) scale(1.02);
}

.HomepageFeaturedBody {
	flex: 				1;
	color: 				var(--ColorOffWhite);
}

.HomepageFeaturedTitle {
	font-size: 			clamp(32px, 4vw, 48px);
	margin-bottom: 		10px;
}

.HomepageFeaturedDescription {
	font-family: 		var(--FontBody);
	font-size: 			24px;

	color:				var(--ColorPurpleLight);

	line-height: 		1.25;

	max-width: 			500px;
}

.HomepageFeaturedAvailability {
	font-family:		var(--FontHeader);
	font-weight: 		700;
	font-size: 			16px;

	margin-bottom:		20px;
}

/* --------------------------------------------------------------------------
   Homepage Rolls Section
   -------------------------------------------------------------------------- */
.HomepageRolls {
	padding:			100px 40px;
}

.HomepageRollsInner {
	max-width: 			800px;
	margin: 			0 auto;
	display: 			flex;
	flex-direction: 	column;
}

.HomepageRollsItem {
	display: 			flex;
	align-items: 		center;

	margin-bottom: 		40px;
	padding:			40px 0;

	border-bottom: 		1px solid var(--ColorPurpleLight);
}

.HomepageRollsItem:last-child {
	border-bottom: 		none;
	margin: 			0;
}

.HomepageRollsItemImageContainer {
	flex:				0 0 400px;
}

.HomepageRollsItemImage {
	width: 				100%;
}

.HomepageRollsItemContent {
	flex:				1;
}

.HomepageRollsItemTitle {
	font-size: 			clamp(32px, 4vw, 40px);
	color:				var(--ColorPurpleDark);
	margin-bottom: 		10px;
}

.HomepageRollsItemDescription {
	font-family: 		var(--FontBody);
	font-size: 			24px;

	color:				var(--ColorDarkGray);

	line-height: 		1.25;

	max-width: 			500px;
}

.HomepageRollsItemButton {
	box-shadow:			1px 2px 5px rgba(0,0,0,0.3);
}

/* --------------------------------------------------------------------------
   Email Sign-up
   -------------------------------------------------------------------------- */
.HomepageEmailSignup {
	padding:			50px 20px;
}

.HomepageEmailSignup > * {
	margin:				0 auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.Footer {
	background-image:		url("/Assets/FooterBackground.jpg");
	background-color:		var(--ColorPurple);
	background-size:		100px;
	background-position: 	0 60px;

	color:					var(--ColorOffWhite);
	padding: 				20px;
	text-align: 			center;

	box-shadow:				0 -10px 20px var(--ColorPurpleLight);
}

.FooterInner {
	max-width: 				var(--MaxWidth);
	margin: 				0 auto;

	display: 				flex;
	flex-direction: 		column;
	align-items: 			center;
}

.FooterLogoIcon {
	width: 					50px;
	margin-bottom:			10px;
}

.FooterTagline {
	font-family: 			var(--FontDisplay);
	font-size: 				clamp(16px, 4vw, 32px);
	margin-bottom:			30px;

	display:				block;
}

.FooterSocial {
	margin:					0 0 30px 0;
	gap:					15px;
	display: 				flex;
}

.FooterSocialItem {
	display: 				flex;
}

.FooterSocialLink {
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;

	transition: 			all var(--TransitionBase);
}

.FooterSocialLink:hover {
	transform: 				translateY(-1px);
}

.FooterSocialIcon {
	width: 					36px;
	height: 				36px;
}

.FooterNav {
	font-family:			var(--FontFooter);
	font-size:				14px;
	font-weight:			500;

	display: 				flex;
	gap: 					20px;
	margin: 				0 0 10px 0;
}

.FooterNavItem {
	display: 				flex;
}

.FooterNavLink {
	color:					var(--ColorOffWhite);
	transition: 			opacity var(--TransitionFast);
}

.FooterNavLink:hover {
	opacity: 				0.8;
}

.FooterCopyright {
	font-family:			var(--FontFooter);
	font-size: 				10px;
	color:					var(--ColorOffWhite);

	margin: 				0;
}

.FooterCopyrightLink {
	color: 					var(--ColorOffWhite);
	text-decoration: 		underline;
}

.FooterCopyrightLink:hover {
	opacity: 				0.8;
}


/* --------------------------------------------------------------------------
   Floating Cart Button
   -------------------------------------------------------------------------- */
.FloatingCart {
	position:			fixed;
	bottom:				30px;
	right:				30px;
	z-index:			40;

	width:				60px;
	height:				60px;

	background:			var(--ColorDarkGray);
	border-radius:		50%;

	display:			flex;
	align-items:		center;
	justify-content:	center;

	cursor:				pointer;
	text-decoration:	none;

	box-shadow:			0 2px 8px rgba(0, 0, 0, 0.3);
	transition:			transform var(--TransitionFast);
}

.FloatingCart:hover {
	transform:			scale(1.08);
}

.FloatingCartIcon {
	width:				28px;
	height:				28px;
}

.FloatingCartBadge {
	position:			absolute;
	top:				-4px;
	right:				-4px;

	background:			var(--ColorRed);
	color:				var(--ColorWhite);

	font-family:		var(--FontHeader);
	font-size:			13px;
	font-weight:		bold;

	min-width:			22px;
	height:				22px;
	padding:			0 5px;

	border-radius:		11px;

	display:			none;
	align-items:		center;
	justify-content:	center;
}

.FloatingCartBadgeVisible {
	display:			flex;
	animation:			FloatingCartBadgePop 0.3s ease;
}

@keyframes FloatingCartBadgePop {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

@media (max-width: 1000px) {

	.HomepageHeroLogo {
		max-width: 		500px;
	}

}

@media (max-width: 900px) {

	.NavItemLink {
		font-size: 		18px;
		padding: 		40px 15px 8px 15px;
	}

	.HomepageHeroText {
		font-size:		clamp(32px, 8vw, 70px);
	}

	.HomepageFeaturedInner {
		max-width:		500px;
		flex-direction: column;
		text-align: 	center;
	}

	.HomepageFeaturedPreview {
		flex:			1;
		order: 			1;
	}

	.HomepageFeaturedBody {
		padding:		100px 20px 40px 20px;
		order: 			2;
	}

	.HomepageRolls {
		padding:		50px 30px;
	}

	.HomepageRollsInner {
		max-width:		500px;
	}
  
	.HomepageRollsItem {
		flex-direction: column;
		text-align: 	center;
	}

	.HomepageRollsItemImageContainer {
		flex:			1 1 100%;
	}

	.HomepageRollsItemContent {
		max-width:		300px;
	}

}

@media (max-width: 768px) {

}

@media (max-width: 600px) {

	.Navigation {
		background: 	rgba(80, 14, 121, 0.9);
		position:		fixed;
		width:			100%;
		height:			100vh;
		display:		none;
		flex-direction:	column;
		text-align:		center;
	}

	.NavigationVisible {
		display:		block;
	}

	.NavList {
		flex-direction: column;
		text-align:		center;
	}

	.NavItem:first-child {
		margin-top: 	40px;
	}

	.NavItemLink {
		font-size:		24px;
		padding: 		30px 15px;

		display: 		inline-block;
	}

	.NavMobileButton {
		position:		absolute;

		top:			15px;
		right:			20px;

		width:			40px;
		height:			40px;

		border: 		2px var(--ColorPurpleDark) solid;
		border-radius: 	5px;

		padding:		4px;

		background: 	rgba(80, 14, 121, 0.5);

		display:		block;

		z-index:		10;
	}

	.NavMobileButton:hover {
		background: 	linear-gradient(135deg, var(--ColorPurple), var(--ColorPurpleDark));
	}

	.NavMobileButton:active {
		background: 	linear-gradient(135deg, #8D00F1, var(--ColorPink));
	}

	.NavMobileButtonImage,
	.NavCloseButtonImage {
		width:			100%;
	}

	.NavCloseButton {
		position:		fixed;

		top:			15px;
		right:        	20px;

		width:        	40px;
		height:       	40px;

		border-radius: 	20px;

		padding:       	4px;

		background:    	rgba(141, 0, 241, 0.5);

		display:      	none;

		z-index:       	101;
	}

	.NavCloseButtonVisible {
		display:		block;
	}

	.NavCloseButton:hover {
		background: 	linear-gradient(135deg, var(--ColorPurple), var(--ColorPurpleDark));
	}

	.NavCloseButton:active {
		background: 	linear-gradient(135deg, #8D00F1, var(--ColorPink));
	}

	.FloatingCart {
		width:			50px;
		height:			50px;
		bottom:			20px;
		right:			20px;
	}

	.FloatingCartIcon {
		width:			24px;
		height:			24px;
	}

	.HomepageHeroInner {
		padding: 		40px 20px 10px 20px;
	}

	.HomepageFeaturedPreviewTag {
		font-size: 		24px;
		left:			10px;
		top:			-10px;
	}

	.FooterNav {
		font-size:		20px;
		flex-direction: column;
		align-items:	center;

		margin:			0 0 30px 0;
	}

	.FooterCopyright {
		font-size:		12px;
	}

}