/* ===================================================================
   SWASTHA AYURVEDA — DESIGN SYSTEM
   Palette drawn from the clinic's own logo & signage:
   deep teal + leaf green + warm gold, on a soft herbal cream.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&family=Noto+Sans+Sinhala:wght@400;500;600&display=swap');

:root{
  --teal-deep:   #0d3d34;
  --teal-mid:    #14544a;
  --leaf:        #4f9a56;
  --leaf-light:  #8ec98f;
  --sage:        #d9e8cf;
  --gold:        #e2a63b;
  --gold-deep:   #c8862a;
  --cream:       #f8f4ea;
  --cream-deep:  #efe8d6;
  --ink:         #202b23;
  --ink-soft:    #55625a;
  --line:        #d8cfb8;

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-si: 'Noto Sans Sinhala', sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(13,61,52,0.25);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.si{ font-family: var(--font-si); }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--teal-deep);
  line-height:1.15;
  font-weight:600;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight:700; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
h3{ font-size: 1.3rem; }
p{ color: var(--ink-soft); }

.container{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(248,244,234,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px;
  max-width: 1140px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand img{ height:58px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; justify-content:center; line-height:1.2; }
.brand-text .en{ font-family:var(--font-display); font-weight:700; color:var(--teal-deep); font-size:1.4rem; }

.nav-links{
  display:flex; gap:6px; align-items:center;
  list-style:none;
}
.nav-links a{
  font-size:0.95rem; font-weight:500; padding:8px 14px; border-radius:20px;
  transition:.2s;
}
.nav-links a:hover, .nav-links a.active{
  background: var(--teal-deep); color: var(--cream);
}
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; color:var(--teal-deep); cursor:pointer; }

.nav-cta-item{ margin-left:8px; display:flex; align-items:center; }
.nav-links .nav-cta{ padding:10px 20px; font-size:0.9rem; white-space:nowrap; }
.nav-links .nav-cta:hover{ background:var(--gold-deep); color:var(--teal-deep); }

@media (max-width: 780px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--cream); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:460px; }
  .nav-links a{ border-radius:0; padding:14px 24px; border-bottom:1px solid var(--cream-deep); }
  .nav-toggle{ display:block; }
  .nav-cta-item{ margin-left:0; padding:14px 24px; }
  .nav-links .nav-cta{ display:block; text-align:center; border-radius:30px; padding:12px 20px; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:30px;
  font-weight:600; font-size:0.95rem;
  border: 2px solid transparent;
  cursor:pointer; transition:.2s;
}
.btn-primary{ background:var(--gold); color:var(--teal-deep); }
.btn-primary:hover{ background:var(--gold-deep); transform:translateY(-1px); }
.btn-outline{ border-color: var(--teal-deep); color:var(--teal-deep); }
.btn-outline:hover{ background:var(--teal-deep); color:var(--cream); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(120% 140% at 15% 0%, var(--teal-mid) 0%, var(--teal-deep) 55%, #092a24 100%);
  color: var(--cream);
  padding: 90px 0 110px;
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center;
}
.hero-eyebrow{
  font-family: var(--font-si);
  color: var(--leaf-light); font-size:1.05rem; margin-bottom:14px; letter-spacing:.02em;
}
.hero h1{ color:#fff; }
.hero h1 span{ color: var(--gold); }
.hero p.lede{ color:#d9e6de; font-size:1.1rem; max-width:46ch; margin:18px 0 30px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.hero-art .medallion{
  width: min(100%, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #ffffff 62%, rgba(255,255,255,0) 63%);
  display:flex; align-items:center; justify-content:center;
  padding: 14px;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.35));
}
.hero-art .medallion img{
  width:78%;
  object-fit: contain;
}
.hero::after{
  content:""; position:absolute; inset:auto -10% -40% -10%;
  height:220px;
  background: var(--cream);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero-ctas{ justify-content:center; }
  .hero p.lede{ margin-left:auto; margin-right:auto; }
}

/* ---------- Leaf-vein divider (signature element) ---------- */
.leaf-divider{
  display:flex; align-items:center; justify-content:center;
  margin: 6px 0 46px;
  opacity:.85;
}
.leaf-divider svg{ width:120px; height:auto; }

/* ---------- Sections ---------- */
.section{ padding: 84px 0; }
.section-alt{ background: var(--cream-deep); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head .eyebrow{
  font-family:var(--font-si); color:var(--leaf); font-weight:600; letter-spacing:.03em;
  display:block; margin-bottom:10px; font-size:1.17rem;
}
.page-hero .si{ font-size:1.17rem; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition:.25s;
}
.card:hover{ transform:translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.icon-badge{
  width:52px; height:52px; border-radius:50%;
  background: var(--sage); color: var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; font-size:1.4rem;
  flex-shrink:0;
}
.icon-badge svg{ width:24px; height:24px; }
.card .icon-badge{ }

/* Service list */
.service-category{ margin-bottom: 44px; }
.service-category h3{ margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.service-category h3::before{
  content:""; width:8px; height:8px; border-radius:50%; background: var(--gold); display:inline-block;
}
.service-items{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px 28px; list-style:none; }
@media (max-width:700px){ .service-items{ grid-template-columns:1fr; } }
.service-items li{
  display:flex; flex-direction:column; gap:2px;
  padding: 14px 18px; background:#fff; border-radius:10px; border:1px solid var(--line);
}
.service-items li .si{ font-size:1.17rem; color:var(--teal-deep); font-weight:500; }
.service-items li .en{ font-size:0.88rem; color:var(--ink-soft); }

/* Doctor cards */
.doctor-card{ display:flex; gap:20px; align-items:flex-start; }
.doctor-avatar{
  flex-shrink:0; width:76px; height:76px; border-radius:50%;
  background: linear-gradient(145deg, var(--leaf-light), var(--leaf));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-size:1.6rem; font-weight:700;
}
.doctor-info .reg{ font-size:0.82rem; color:var(--gold-deep); font-weight:600; margin:4px 0; }

/* Empty state (products/articles) */
.empty-state{
  text-align:center; padding: 60px 30px; background:#fff;
  border:1px dashed var(--line); border-radius: var(--radius);
}
.empty-state .icon-badge{ margin:0 auto 18px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.contact-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-list .icon-badge{ margin-bottom:0; }
.contact-list a{ color:var(--teal-deep); font-weight:600; }
.contact-list a:hover{ color: var(--gold-deep); }

.map-frame{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  min-height:280px; background:#fff;
}

/* Board gallery (real signage photos) */
.board-gallery{ display:grid; gap:20px; }
.board-gallery img{ border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow); }

/* Footer */
footer{
  background: var(--teal-deep); color: var(--sage);
  padding: 50px 0 26px;
}
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:36px; margin-bottom:36px; }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; } }
footer h4{ color:#fff; font-family:var(--font-body); font-size:0.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
footer a{ color: var(--sage); opacity:.9; }
footer a:hover{ opacity:1; color:var(--gold); }
.footer-links{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:20px;
  font-size:0.85rem; color:#a9c2b8; text-align:center;
}

/* Page hero (inner pages) */
.page-hero{
  background: var(--teal-deep); color:#fff; padding: 56px 0 70px; text-align:center;
}
.page-hero h1{ color:#fff; }
.page-hero p{ color:#cfe0d8; max-width:52ch; margin:12px auto 0; }

/* Product cards */
.product-image{
  width:100%; aspect-ratio: 4/3; border-radius:10px; overflow:hidden;
  margin-bottom:16px; background: var(--sage);
}
.product-image img{ width:100%; height:100%; object-fit:cover; }
.product-image-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: var(--teal-deep); opacity:0.5;
}
.product-image-placeholder svg{ width:40px; height:40px; }
.product-price{ color:var(--gold-deep); font-weight:600; margin-top:10px; }

/* Article body content (paragraphs + bullet lists) */
#article-body ul li{ margin-bottom:8px; color:var(--ink-soft); }
#article-body ul li::marker{ color:var(--gold-deep); }

/* Article card */
.article-card{ display:flex; flex-direction:column; gap:6px; }
.article-thumb{ width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; margin-bottom:12px; }
.article-thumb img{ width:100%; height:100%; object-fit:cover; }
.article-card .date{ font-size:0.8rem; color:var(--gold-deep); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.article-card h3{ transition:.2s; }
.article-card:hover h3{ color: var(--gold-deep); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card{ transition:none; }
}

/* ---------- Booking form ---------- */
.form-row{ margin-bottom:20px; display:flex; flex-direction:column; gap:6px; }
.form-row-group{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .form-row-group{ grid-template-columns:1fr; } }
.form-row label{ font-weight:600; font-size:0.92rem; color:var(--teal-deep); }
.form-row input, .form-row textarea{
  font-family: var(--font-body);
  font-size:1rem;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color: var(--leaf); box-shadow:0 0 0 3px rgba(79,154,86,0.15);
}
.booking-status{
  margin-top:18px; padding:14px 16px; border-radius:10px; font-size:0.95rem; display:none;
}
.booking-status.success{ display:block; background:var(--sage); color:var(--teal-deep); }
.booking-status.error{ display:block; background:#f7dede; color:#8a2c2c; }

/* Focus visibility */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--gold); outline-offset:2px;
}