/* Kuenza PHP styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

:root{
	--background:hsl(0 0% 100%);
	--foreground:hsl(30 6% 25%);
	--stone-dark:hsl(30 6% 15%);
	--stone-darker:hsl(20 14% 4.1%);
	--stone-light:hsl(30 20% 92%);
	--warm-orange:hsl(15 85% 55%);
	--warm-orange-dark:hsl(15 85% 45%);
}

/* Base styles */
body{background:var(--background);color:var(--foreground);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'DM Serif Display',Georgia,Times,"Times New Roman",serif}
h1{line-height:1.3}
p{font-size:1rem}

/* OUR STORY heading override */
.text-lg.font-normal.text-foreground.mb-4.uppercase.tracking-wide {
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Background utilities */
.bg-background{background-color:var(--background)}
.bg-green-100{background-color:#dcfce7}
.bg-stone-light{background-color:var(--stone-light)}
.text-foreground{color:var(--foreground)}
.text-white{color:#ffffff}
.text-green-800{color:#166534}
.text-gray-600{color:#4b5563}
.text-gray-300{color:#d1d5db}
.text-gray-200{color:#e5e7eb}
.text-red-600{color:#dc2626}
.text-sm{font-size:0.875rem}
.text-lg{font-size:0.97rem;line-height: 1.3rem;}
.text-xl{font-size:1.25rem}
.text-4xl{font-size:2.25rem;line-height:1.3}
.text-3xl{font-size:1.875rem}

/* Layout utilities */
.container{max-width:1140px;margin:0 auto;padding:0 1.5rem}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:60rem}
.max-w-800{max-width:50rem}
.max-w-1140{max-width:71.25rem}
.min-h-screen{min-height:100vh}
.h-screen{height:100vh}
.h-12{height:3rem}
.h-6{height:1.5rem}
.h-5{width:1.25rem;height:1.25rem}
.w-full{width:100%}
.w-auto{width:auto}
.w-6{width:1.5rem}
.w-5{width:1.25rem}

/* Flexbox utilities */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-start{justify-content:flex-start}
.ml-auto{margin-left:auto}

/* Grid utilities */
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Spacing utilities */
.p-4{padding:1rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.pt-24{padding-top:6rem}
.pb-4{padding-bottom:1rem}
.mb-1{margin-bottom:0.25rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mt-1{margin-top:0.25rem}
.mt-4{margin-top:1rem}
.mt-16{margin-top:4rem}
.ml-5{margin-left:1.25rem}
.ml-8{margin-left:2rem}

/* Position utilities */
.relative{position:relative}
.fixed{position:fixed}
.absolute{position:absolute}
.top-0{top:0}
.top-4{top:1rem}
.right-4{right:1rem}
.left-4{left:1rem}
.inset-0{top:0;right:0;bottom:0;left:0}
.z-10{z-index:10}
.z-50{z-index:50}
.z-9999{z-index:9999}

/* Typography utilities */
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}
.font-normal{font-weight:400}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:0.025em}
.leading-relaxed{line-height:1.625}
.text-center{text-align:center}
.list-disc{list-style-type:disc}

/* Border utilities */
.border{border-width:1px;border-color:#d1d5db}
.rounded-md{border-radius:0.375rem}
.rounded-lg{border-radius:0.5rem}
.rounded-full{border-radius:9999px}

/* Background utilities */
.bg-cover{background-size:cover}
.bg-center{background-position:center}
.bg-no-repeat{background-repeat:no-repeat}

/* Shadow utilities */
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}

/* Spacing utilities */
.space-x-2>*+*{margin-left:0.5rem}
.space-x-3>*+*{margin-left:0.75rem}
.space-x-6>*+*{margin-left:1.5rem}
.space-x-8>*+*{margin-left:2rem}
.space-y-0>*+*{margin-top:0}
.space-y-2>*+*{margin-top:0.5rem}
.space-y-4>*+*{margin-top:1rem}
.gap-4{gap:1rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}

/* Display utilities */
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}

/* Overflow utilities */
.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}

/* Transform utilities */
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.-translate-y-1\/2{transform:translateY(-50%)}

/* Transition utilities */
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}

/* Custom component styles */
.hero-bg{background-image:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../public/images/hero-hot-stone-bath.jpg')}
.hot-stone-bg{background-image:linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), url('../public/images/stone-preparation.jpg')}
.contact-bg{background-image:linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../public/images/rejuvenation-background.jpg')}
.map-iframe{border:0}

/* Custom button styles */
.btn-primary{display:inline-block;background-color:hsl(15,85%,55%);color:#ffffff;padding:0.75rem 2rem;font-size:1rem;border-radius:9999px;text-decoration:none;transition:background-color 150ms;border:none;cursor:pointer;font-weight:500}
.btn-primary:hover{background-color:hsl(15,85%,45%)}

/* Large button variant */
.btn-primary.text-xl.px-10.py-4{font-size:1rem;padding:1rem 2.5rem}

/* Animation keyframes */
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Hero animations */
.hero-title {
	animation: fadeInUp 1.2s ease-out 0.3s both;
}

.hero-button {
	animation: fadeInScale 1s ease-out 0.8s both;
}

/* Square Gallery Grid */
.masonry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 800px;
	margin: 0 auto;
}

.masonry-item {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	border: 3px solid #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
}

.masonry-item::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
	border-radius: 8px;
	z-index: -1;
	transition: all 0.3s ease;
}

.masonry-item:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.masonry-item:hover::before {
	background: linear-gradient(45deg, hsl(15,85%,55%), hsl(15,85%,45%));
}

.masonry-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	border-radius: 5px;
}

.masonry-item:hover img {
	transform: scale(1.1);
}

@media (max-width: 768px) {
	.masonry-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		max-width: 500px;
	}
}

@media (max-width: 480px) {
	.masonry-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		max-width: 300px;
	}
}

/* Enhanced Lightbox styles with Complete Blackening */
#lightbox {
	z-index: 9999;
	/* Complete blackout background */
	background: rgba(0, 0, 0, 0.98) !important;
	/* Add subtle texture/pattern for depth */
	background-image: 
		radial-gradient(circle at 25% 25%, rgba(0,0,0,0.1) 0%, transparent 50%),
		radial-gradient(circle at 75% 75%, rgba(0,0,0,0.1) 0%, transparent 50%);
	/* Smooth backdrop blur for modern effect */
	backdrop-filter: blur(10px) brightness(0.3);
	-webkit-backdrop-filter: blur(10px) brightness(0.3);
}

#lightboxImage {
	border: none !important;
	outline: none !important;
	/* Enhanced shadow for dramatic effect against black background */
	box-shadow: 
		0 0 0 1px rgba(255,255,255,0.1),
		0 8px 32px rgba(0, 0, 0, 0.8),
		0 16px 64px rgba(0, 0, 0, 0.6),
		0 0 100px rgba(0, 0, 0, 0.4);
	/* Subtle glow effect */
	filter: drop-shadow(0 0 20px rgba(255,255,255,0.1));
}

#lightboxClose, #prevBtn, #nextBtn {
	/* Enhanced dark styling for buttons against black background */
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	cursor: pointer;
	/* Subtle glow effect */
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.5),
		0 0 20px rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

#lightboxClose:hover, #prevBtn:hover, #nextBtn:hover {
	/* Enhanced hover effects for better visibility */
	background: rgba(0, 0, 0, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.1);
	box-shadow: 
		0 6px 16px rgba(0, 0, 0, 0.6),
		0 0 25px rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 1);
}

#lightboxClose {
	top: 20px;
	right: 20px;
}

/* Custom link styles */
.nav-link{color:#ffffff;transition:color 0.3s ease;text-decoration:none;margin-right:1.5rem}
.nav-link:hover{color:hsl(15,85%,55%)}
.nav-link:last-child{margin-right:0}

.footer-nav-link{color:hsl(15,85%,55%);transition:color 0.3s ease;text-decoration:none;display:block;margin-bottom:0.5rem;font-size:1rem;text-transform:none}
.footer-nav-link:hover{color:#333333}
.footer-nav-link:last-child{margin-bottom:0}

.social-icon{color:#0d0b0a;transition:color 0.3s ease;text-decoration:none;display:inline-block;margin-bottom:0.5rem}
.social-icon:hover{color:#333333}
.social-icon:last-child{margin-bottom:0}

/* Location heading alignment */
.location-heading{position:relative;top:-10px}

/* Gallery grid styles */
#galleryGrid button{aspect-ratio:1;overflow:hidden;border-radius:0.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);transition:transform 0.3s ease;border:none;background:none;cursor:pointer}

/* Custom background gradients */
.bg-gradient-header{background:linear-gradient(to bottom,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.5) 50%,transparent 100%)}
.bg-black-95{background-color:rgba(0,0,0,0.95)}
.bg-black-90{background-color:rgba(0,0,0,0.9)}
.backdrop-blur-sm{backdrop-filter:blur(4px)}

/* Aspect ratio utilities */
.aspect-square{position:relative}
.aspect-square:before{content:"";display:block;padding-bottom:100%}
.aspect-square>*{position:absolute;inset:0}

/* Object fit utilities */
.object-cover{object-fit:cover}

/* Custom colors */
.bg-custom-beige{background-color:#bdb59f}
.bg-custom-dark{background-color:#0d0b0a}
.text-custom-brown{color:#3e342b}
.text-warm-orange{color:hsl(15,85%,55%)}

/* Media queries for responsive design */
@media (min-width: 768px){
	.md\:text-5xl{font-size:3rem;line-height:1.3}
	.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
	.md\:flex{display:flex}
	.md\:flex-row{flex-direction:row}
	.md\:hidden{display:none}
	.md\:inline-block{display:inline-block}
	.md\:space-x-0>*+*{margin-left:0}
	.md\:space-y-0>*+*{margin-top:0}
	.md\:space-x-8>*+*{margin-left:2rem}
}

/* Form styles */
input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

/* Grid gap utilities */
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Space utilities */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Responsive grid */
@media (min-width: 768px) {
    .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\\:w-auto { width: auto; }
}

/* Focus ring styles */
.focus\\:ring-2:focus { box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2); }
.focus\\:ring-warm-orange:focus { box-shadow: 0 0 0 2px var(--warm-orange); }
.focus\\:border-transparent:focus { border-color: transparent; }

/* Additional form field styles */
.border-gray-300 { border-color: #d1d5db; }
.text-gray-700 { color: #374151; }
.text-yellow-800 { color: #92400e; }
.bg-yellow-100 { background-color: #fef3c7; }
.bg-red-100 { background-color: #fee2e2; }
.bg-green-200 { background-color: #bbf7d0; }

/* Honeypot styles */
.honeypot {
    display: none;
}

/* Gallery button styles */
.gallery-book-btn {
    font-size: 1rem;
}