/* Swadhyay Yoga - index.css
	 Clean, responsive styles for a calming yoga studio website
*/

:root{
	--bg:#f7faf8;
	--white:#ffffff;
	/* changed accent colors from teal/green to black as requested */
	--teal:#000000; /* formerly #2bb4a9 */
	--teal-600:#000000; /* formerly #22a69a */
	--muted:#6b7280;
	--card-radius:12px;
	--max-width:1200px;
	--glass: rgba(255,255,255,0.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	/* Karla for all non-heading text */
	font-family: 'Karla', 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial;
	color:#223;
	background:var(--bg);
	-webkit-font-smoothing:antialiased;
}

.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:var(--teal);position:fixed;top:0;left:0;right:0;z-index:60}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;text-decoration:none;color:#fff!important;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,0.06);font-family:'Playfair Display', serif}
.lotus{font-size:22px;margin-right:10px;color:#000!important}
.logo-text{letter-spacing:1px}

.nav{display:block}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav-list a{color:#fff;text-decoration:none;font-weight:600;padding:10px 6px;border-radius:6px;text-shadow:0 2px 6px rgba(0,0,0,0.45)}
.nav-list a:hover{background:rgba(255,255,255,0.06);color:#fff}

.btn{background:var(--teal);color:white;padding:10px 16px;border-radius:8px;text-decoration:none;display:inline-block;font-weight:700;transition:transform .18s ease,box-shadow .18s}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.btn.outline{background:transparent;color:#0f172a;border:2px solid rgba(15,23,42,0.06)}
.btn.register{background:#fff;color:#000;margin-left:16px;font-weight:700}
.btn.register:hover{background:#f3f3f3}

.nav-toggle{display:none;background:none;border:0;padding:8px}
.nav-toggle .hamburger{width:26px;height:2px;background:#223;display:block;position:relative}
.nav-toggle .hamburger::after,.nav-toggle .hamburger::before{content:'';position:absolute;left:0;right:0;height:2px;background:#223}
.nav-toggle .hamburger::before{top:-7px}
.nav-toggle .hamburger::after{bottom:-7px}

/* Hero */
.hero{position:relative;min-height:100vh;height:100vh;display:flex;align-items:center;justify-content:flex-start}
/* Put the photo in ::before so we can apply filters to the image itself */
.hero::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("./yoga\ homepage\ 2.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/* faded, soft appearance: increase brightness, reduce contrast, slightly desaturate */
	filter: brightness(1.25) contrast(0.72) saturate(0.85);
}
/* Pale cream overlay to wash the image into a gentle brownish-white tone */
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(245,240,230,0.58), rgba(245,240,230,0.58));}
.hero-content{position:relative;z-index:2;color:white;padding:48px 20px}
.eyebrow{letter-spacing:2px;color:rgba(255,255,255,0.9);font-weight:700}
.hero h1{font-size:clamp(28px,4vw,48px);margin:10px 0 8px}
.lead{max-width:720px;color:rgba(255,255,255,0.9);font-size:18px}
.hero-cta{margin-top:18px;display:flex;gap:12px}
.btn.outline{background:transparent;border:2px solid rgba(255,255,255,0.18);color:white}

/* About */
.about{background:white;padding:56px 0}
.about-grid{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center}
.photo-circle{width:200px;height:200px;border-radius:50%;background:linear-gradient(180deg,var(--glass),rgba(255,255,255,0.9));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);box-shadow:0 8px 20px rgba(30,40,40,0.06);overflow:hidden}
.photo-img{width:100%;height:100%;object-fit:cover;display:block}
.about h2{margin:0 0 12px}
.welcome{color:var(--muted);line-height:1.6}
.about-actions{margin-top:18px;display:flex;gap:12px}

/* Offerings */
.offerings{padding:56px 0}
.section-title{text-transform:uppercase;color:var(--muted);letter-spacing:1px;margin-bottom:18px}

/* New 3x3 offerings grid */
.offerings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.offerings-grid .offering-card{background:var(--white);padding:26px;border-radius:12px;box-shadow:0 8px 18px rgba(12,20,18,0.04);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:220px;transition:transform .3s ease,box-shadow .3s ease}
.offerings-grid .offering-icon{font-size:44px;color:#333;margin-bottom:12px;transition:transform .3s ease}
.offerings-grid .offering-icon i{font-size:44px;color:#000;display:inline-block}
.offerings-grid .offering-card h4{margin:8px 0 10px;font-weight:700}
.offerings-grid .offering-card p{color:#666;margin:0;line-height:1.45}

/* All offering cards use the same white background to match original design */
.offerings-grid .offering-card{background:var(--white)}

/* Entrance animation initial state */
.offerings-grid .offering-card{opacity:0;transform:translateY(30px) scale(0.95)}
.offerings-grid .offering-card.animate-in{opacity:1;transform:translateY(0) scale(1);transition:all .8s ease-out}

/* Staggered delays */
.offerings-grid .offering-card:nth-child(1){transition-delay:0ms}
.offerings-grid .offering-card:nth-child(2){transition-delay:100ms}
.offerings-grid .offering-card:nth-child(3){transition-delay:200ms}
.offerings-grid .offering-card:nth-child(4){transition-delay:300ms}
.offerings-grid .offering-card:nth-child(5){transition-delay:400ms}
.offerings-grid .offering-card:nth-child(6){transition-delay:500ms}
.offerings-grid .offering-card:nth-child(7){transition-delay:600ms}
.offerings-grid .offering-card:nth-child(8){transition-delay:700ms}
.offerings-grid .offering-card:nth-child(9){transition-delay:800ms}

/* Hover effect for desktop/tablet */
@media (hover:hover) and (min-width: 601px){
	.offerings-grid .offering-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,0.15)}
	.offerings-grid .offering-card:hover .offering-icon{transform:scale(1.15)}
}

/* Responsive: tablet 2 columns, mobile 1 column */
@media (max-width:1000px){
	.offerings-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
	.offerings-grid{grid-template-columns:1fr}
	.offerings-grid .offering-card{min-height:auto}
}

/* Testimonials */
.testimonials{padding:56px 0}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial{background:white;padding:18px;border-radius:12px;box-shadow:0 8px 20px rgba(10,20,20,0.04);display:flex;flex-direction:column;gap:12px}
.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#000,#222);color:white;display:flex;align-items:center;justify-content:center;font-weight:800}
.testimonial p{color:var(--muted);margin:0}
.testimonial cite{color:#475569;font-weight:700}

/* Testimonial slider */
.testimonial-slider{position:relative;overflow:hidden;padding:18px 0}
.slides-track{display:flex;transition:transform 1.2s ease-in-out}
.group-slide{flex:0 0 100%;display:flex;gap:18px;align-items:stretch;justify-content:space-between;padding:0 8px}
.group-slide .slide-col{flex:1 1 0;margin:0 6px}
.group-slide .testimonial{width:100%;background:white;padding:20px;border-radius:12px;box-shadow:0 8px 20px rgba(10,20,20,0.04)}
.testimonial-slider .avatar{margin-right:14px}

/* Make cards slightly smaller and balanced */
.group-slide .testimonial{min-height:160px;max-width:100%}

@media (max-width:1000px){
	.testimonial-slider .slide{width:320px}
	.testimonial-slider .testimonial{max-width:320px}
}

@media (max-width:700px){
	.slides-track{gap:12px}
	.testimonial-slider .slide{width:92%;}
	.testimonial-slider .testimonial{min-height:150px}
}

/* Footer */
.site-footer{background:#000;color:#fff;margin-top:24px;min-height:140px;position:relative}
.site-footer .footer-inner{padding:12px 0 36px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;max-width:none;position:relative}
.site-footer .footer-left{flex:1.6;padding-left:25px;padding-top:12px}
.site-footer .footer-center{flex:0.8;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
.site-footer .footer-right{flex:1.8;text-align:right;padding-right:12px;padding-top:6px;padding-bottom:40px;margin-right:0;width:auto}
.site-footer .footer-contact{font-size:22px;font-weight:700;color:#fff;letter-spacing:1px}
.site-footer .footer-copy{font-size:13px;color:#fff}
.site-footer .footer-email{font-size:15px;color:#fff;font-weight:700;margin:0 0 2px 0;letter-spacing:0.6px;line-height:1.3}
.site-footer .footer-email a{color:#fff;text-decoration:none}
.site-footer .footer-email a:hover{text-decoration:underline}
.site-footer .footer-location{font-size:15px;color:#fff;font-weight:700;letter-spacing:0.6px;line-height:1.3;margin:0 0 2px 0}

/* phone at bottom-right of footer-inner */
.site-footer .footer-phone-right{
	/* flow directly under the location/email line so phone sits immediately below */
	position:static; /* let it follow document flow inside .footer-right */
	display:inline-flex; /* icon + numbers on one horizontal line */
	align-items:center;
	gap:4px; /* small gap between icon and numbers */
	margin-top:0; /* remove extra vertical gap under location */
	font-size:15px;
	font-weight:700;
}
.site-footer .footer-phone-right svg{vertical-align:middle}

/* copyright fixed at very bottom center */
.site-footer .footer-copy{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:13px}

@media (max-width:800px){
	.site-footer .footer-inner{flex-direction:column;align-items:center;text-align:center;padding:24px}
	.site-footer .footer-left,.site-footer .footer-center,.site-footer .footer-right{flex:none;width:100%}
	.site-footer .footer-right{text-align:center}
	/* on mobile allow a bit of breathing room when stacked */
	.site-footer .footer-phone-right{position:static;right:auto;bottom:auto;margin-top:8px}
	.site-footer .footer-copy{position:static;left:auto;bottom:auto;transform:none;margin-top:12px}
}

/* Responsive */
@media (max-width:900px){
	.cards{grid-template-columns:repeat(2,1fr)}
	.test-grid{grid-template-columns:repeat(2,1fr)}
	.about-grid{grid-template-columns:140px 1fr}
}

@media (max-width:700px){
	.nav-toggle{display:block}
	.nav{position:absolute;top:64px;left:0;right:0;background:white;padding:12px 20px;box-shadow:0 8px 30px rgba(10,20,20,0.06);display:none;z-index:100}
	.nav.open{display:block}
	.nav-list{display:flex;flex-direction:column;gap:6px}
	.nav-list a{display:block;padding:10px 0;color:inherit}
	.container{padding:0 14px}
	.hero{height:56vh;min-height:380px}
	.cards{grid-template-columns:1fr}
	.test-grid{grid-template-columns:1fr}
	.about-grid{grid-template-columns:1fr}
	.photo-circle{margin:0 auto}
}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* small tweaks for touch devices */
@media (hover:none){
	.btn:hover{transform:none}
	.card:hover{transform:none}
}

/* Scroll animations: initial state and when in-view */
.animate-on-scroll{opacity:0;transform:none;transition:opacity 1.8s cubic-bezier(0.25,0.1,0.25,1), transform 1.8s cubic-bezier(0.25,0.1,0.25,1), filter 1.8s ease;will-change:opacity, transform}
.animate-on-scroll.scale{transform:scale(0.96)}
.animate-on-scroll.from-left{transform:translateX(-48px);}
.animate-on-scroll.from-right{transform:translateX(48px);}
.animate-on-scroll.from-bottom{transform:translateY(30px);}
.animate-on-scroll.fade{transform:none}
.animate-on-scroll.blur{filter:blur(6px)}
.animate-on-scroll.in-view{opacity:1;transform:none;filter:blur(0)}

/* About page specific styles */
.about-hero .photo-circle {
	transition: transform 0.3s ease;
}

.about-hero .photo-circle:hover {
	transform: scale(1.05);
}

.philosophy-card {
	cursor: pointer;
}

.credential-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.credential-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

/* Mobile responsive for About page */
@media (max-width: 768px) {
	.philosophy-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	
	.credentials-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	
	.story-card {
		padding: 25px !important;
	}
	
	.personal-card {
		padding: 25px !important;
	}
	
	.cta-section .btn {
		width: 100%;
		margin-bottom: 10px;
	}
}

/* Respect user prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .animate-on-scroll{transition:none!important;transform:none!important;opacity:1!important}
  .about-hero .photo-circle:hover{transform:none!important}
  .philosophy-card:hover{transform:none!important}
  .credential-card:hover{transform:none!important}
}






/* Additional mobile improvements - screens under 600px */
@media (max-width: 600px) {
  /* Navbar improvements */
  .nav-toggle { display: block; }
  .nav-toggle .hamburger { background: #fff; }
  .nav-toggle .hamburger::before, 
  .nav-toggle .hamburger::after { background: #fff; }
  
  /* Hero section mobile adjustments */
  .hero-content { padding: 24px 16px; }
  .hero h1 { font-size: 24px; }
  .lead { font-size: 16px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; text-align: center; }
  
  /* Buttons mobile sizing */
  .btn { padding: 12px 20px; font-size: 16px; }
  .btn.register { margin-left: 0; margin-top: 10px; }
  
  /* About section mobile */
  .about-actions { flex-direction: column; }
  .about-actions .btn { width: 100%; }
  
  /* Prevent horizontal scroll */
  body, html { overflow-x: hidden; }
  .container { padding: 0 16px; }
}

/* Very small phones */
@media (max-width: 375px) {
  .hero h1 { font-size: 22px; }
  .container { padding: 0 12px; }
}