/* Main stylesheet for Dr Arathy's Children's Clinic and Family Health Centre */
/* Colors: Desert Storm background + Muted Teal sidebar + Pastel Gold accent */
:root{
  --bg: #f4f3ee; /* Desert Storm */
  --muted-teal: #3a7d8c;
  --accent: #ffde89;
  --text: #333333;
  --card: #ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Header */
header{
  width:100%;
  background:transparent;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.logo-area{display:flex;align-items:center;gap:14px}
.logo{height:64px;width:auto;border-radius:8px;background:transparent}
header h1{font-family:"Playfair Display", serif;font-size:1.25rem;color:var(--muted-teal);line-height:1.05;text-align:center}
header h1 span{display:block;font-size:0.9rem;color:#4b5563;font-weight:500}

/* Sidebar */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:240px;
  background:var(--muted-teal);
  color:white;
  padding-top:110px;
  transition:transform .36s ease, box-shadow .36s ease;
  z-index:1200;
  box-shadow: 6px 0 18px rgba(0,0,0,0.06);
}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{padding:14px 22px}
.sidebar a{color:white;text-decoration:none;font-weight:600;display:block}
.sidebar a:hover{background:rgba(255,255,255,0.06);border-radius:6px;color:var(--accent)}
.sidebar .dropdown-content{display:none;margin-top:6px;padding-left:10px}
.sidebar .dropdown:hover .dropdown-content{display:block}

/* Hidden state for subpages */
.sidebar.hidden{transform:translateX(-100%)}

/* When visible on hover near left edge - handled by JS */

/* Page container - to offset content when sidebar visible on Home */
.page-with-sidebar{margin-left:240px;transition:margin .36s ease;padding-bottom:60px}

/* Hero */
.hero{
  min-height:62vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px 20px;
  position:relative;
  background-size:cover;
  background-position:center;
  border-radius:12px;
  margin:20px auto;
  width:calc(100% - 40px);
  max-width:1200px;
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
  overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(58,125,140,0.18), rgba(58,125,140,0.12));pointer-events:none}
.hero-content{position:relative;z-index:2;padding:20px;background:rgba(255,255,255,0.6);backdrop-filter:blur(4px);border-radius:12px;animation:fadeInUp .9s ease both}
.hero h2{font-family:"Playfair Display", serif;font-size:2rem;color:var(--muted-teal);margin-bottom:8px}
.hero p{color:var(--text)}

/* Services grid */
.services-container{display:grid;gap:18px;padding:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:1200px;margin:20px auto}
.service-box{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06);transition:transform .28s ease, box-shadow .28s ease;position:relative;overflow:hidden}
.service-box h3{color:var(--muted-teal);margin-bottom:10px}
.service-box p{opacity:0;transform:translateY(6px);transition:opacity .36s ease, transform .36s ease;color:#42505a}
.service-box:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(16,24,40,0.08)}
.service-box:hover p{opacity:1;transform:translateY(0)}

/* About boxes */
.about-container{display:grid;gap:22px;padding:28px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:1000px;margin:20px auto}
.about-box{background:var(--card);padding:26px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06);opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
.about-box.visible{opacity:1;transform:none}
.about-box h3{font-family:"Playfair Display", serif;color:var(--muted-teal);margin-bottom:10px}

/* Forms */
form{max-width:700px;margin:26px auto;background:var(--card);padding:20px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
form label{display:block;font-weight:600;margin-bottom:6px;color:#34414a}
form input, form select, form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e6e6;margin-bottom:12px;font-size:0.95rem}
form button{background:var(--muted-teal);color:white;padding:10px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:700}
form button:hover{background:#2f6e6f}

/* Contact card */
.contact-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:1000px;margin:20px auto;padding:18px}

/* Floating WhatsApp button */
.whatsapp-float{position:fixed;right:18px;bottom:20px;z-index:1400;display:flex;align-items:center;justify-content:center;background: #25D366;border-radius:50%;width:64px;height:64px;box-shadow:0 8px 22px rgba(0,0,0,0.12);cursor:pointer;transition:transform .18s ease}
.whatsapp-float img{width:34px;height:34px}
.whatsapp-float:active{transform:scale(.96)}

/* Pulse animation */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-float.pulse{animation: pulse 2.8s infinite;}

/* mobile offset so it doesn't overlap nav */
@media (max-width:600px){
  .whatsapp-float{right:14px;bottom:84px;width:58px;height:58px}
  .logo{height:56px}
  header h1{font-size:1.05rem}
  .hero{margin:12px;width:calc(100% - 24px);border-radius:10px}
  .sidebar{width:200px;padding-top:90px}
  .page-with-sidebar{margin-left:200px}
}

/* small screens - hide fixed sidebar by default; JS will manage */
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .page-with-sidebar{margin-left:0}
}

/* animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}