/*
Theme Name: Dr. Sanjat Chiwane
Author: Amit Singh
Description: A custom WordPress theme for Dr. Sanjat Chiwane – Senior Interventional Cardiologist, Gurgaon. Built with clean HTML5, responsive CSS and no external dependencies beyond Google Fonts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Private / All rights reserved
Text Domain: dr-sanjat
*/

/* ─── CSS Variables ─── */
:root{
  --navy:#061B3A;--navy-2:#0B2B5C;--blue:#1B63FF;--cyan:#39D7FF;--teal:#00B7A8;
  --white:#fff;--soft:#F8FBFF;--light:#EEF7FC;--text:#13233D;--muted:#63748A;
  --border:rgba(10,35,75,.10);--shadow:0 22px 65px rgba(6,27,58,.14);
  --shadow-soft:0 14px 35px rgba(6,27,58,.08);--container:1220px
}

/* ─── Reset ─── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#fff;color:var(--text);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ─── Layout ─── */
.container{width:min(var(--container),calc(100% - 40px));margin:auto}

/* ─── Navigation ─── */
.topbar{position:sticky;top:0;z-index:999;background:rgba(255,255,255,.86);border-bottom:1px solid rgba(10,35,75,.08);backdrop-filter:blur(18px)}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{color:var(--navy);font-size:18px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.menu{display:flex;align-items:center;gap:30px;color:#30445F;font-size:15px;font-weight:650}
.menu a{position:relative;transition:.25s}
.menu a:after{content:"";position:absolute;left:0;bottom:-9px;width:0;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--teal));transition:.25s}
.menu a:hover,.menu a.active{color:var(--blue)}
.menu a:hover:after,.menu a.active:after{width:100%}
.actions{display:flex;align-items:center;gap:12px}
.call-link{padding:12px 16px;border-radius:999px;background:#EDF6FF;color:var(--navy);font-size:14px;font-weight:800;white-space:nowrap;transition:.25s}
.call-link:hover{background:#E3F2FF;transform:translateY(-2px)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 23px;border-radius:999px;border:1px solid transparent;font-size:15px;font-weight:850;cursor:pointer;white-space:nowrap;transition:.25s;font-family:inherit}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--teal));box-shadow:0 16px 34px rgba(27,99,255,.22)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(27,99,255,.28)}
.btn-glass{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);backdrop-filter:blur(14px)}
.btn-glass:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}

/* ─── Hero / Page Hero ─── */
.hero,.page-hero{position:relative;overflow:hidden;color:#fff;padding:82px 0 88px;background:radial-gradient(circle at 18% 20%,rgba(57,215,255,.24),transparent 30%),radial-gradient(circle at 86% 16%,rgba(0,183,168,.22),transparent 28%),linear-gradient(135deg,#061B3A 0%,#0A2A58 48%,#0D3B78 100%)}
.hero:before,.page-hero:before{content:"";position:absolute;width:320px;height:320px;left:-100px;top:100px;border-radius:999px;filter:blur(70px);background:rgba(57,215,255,.18)}
.hero:after,.page-hero:after{content:"";position:absolute;width:290px;height:290px;right:-80px;bottom:20px;border-radius:999px;filter:blur(70px);background:rgba(0,183,168,.18)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.badge,.section-label{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.badge{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);color:#D8FBFF;margin-bottom:22px;backdrop-filter:blur(12px)}
.badge:before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--teal));box-shadow:0 0 18px rgba(57,215,255,.7)}
.hero h1,.page-hero h1{max-width:760px;font-size:clamp(42px,6vw,72px);line-height:1.01;letter-spacing:-.055em;margin-bottom:18px}
.hero h2{color:#DDF9FF;font-size:clamp(21px,2.4vw,30px);line-height:1.22;font-weight:800;margin-bottom:16px}
.hero p,.page-hero p{max-width:760px;color:#D4E2F2;font-size:18px;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ─── Doctor Card ─── */
.doctor-card,.glass-card{position:relative;padding:14px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.16);box-shadow:0 32px 90px rgba(0,0,0,.30);backdrop-filter:blur(14px);transition:.35s}
.doctor-card:hover,.glass-card:hover{transform:translateY(-6px)}
.doctor-image{min-height:570px;border-radius:25px;overflow:hidden;background:linear-gradient(180deg,#fff,#F1F8FF)}
.doctor-image img{width:100%;height:100%;min-height:570px;object-fit:cover;object-position:center top}
.floating-card{position:absolute;max-width:260px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.94);color:var(--navy);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7)}
.floating-card.top{top:28px;left:-26px}
.floating-card.bottom{right:-20px;bottom:30px}
.floating-card strong{display:block;font-size:16px;line-height:1.18;margin-bottom:6px}
.floating-card span{color:var(--muted);font-size:13px;font-weight:650}

/* ─── Sections ─── */
.section{padding:96px 0 104px;background:linear-gradient(180deg,#F8FBFF 0%,#EEF7FC 100%)}
.section.white{background:#fff}
.section-head{max-width:800px;margin:0 auto 46px;text-align:center}
.section-label{display:inline-block;margin-bottom:12px;color:var(--blue);background:#E8F7FF}
.section-head h2{color:var(--navy);font-size:clamp(32px,4vw,51px);line-height:1.07;letter-spacing:-.045em;margin-bottom:14px}
.section-head p{color:var(--muted);font-size:17px}

/* ─── Trust Box & Grids ─── */
.trust-box,.grid-4,.grid-3,.grid-2{display:grid;gap:22px}
.trust-box{grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border-radius:28px;background:rgba(255,255,255,.96);border:1px solid rgba(10,35,75,.08);box-shadow:var(--shadow);margin-top:-24px;position:relative;z-index:2}
.trust-item,.card{padding:28px 24px;border-radius:25px;background:rgba(255,255,255,.96);border:1px solid rgba(10,35,75,.08);box-shadow:var(--shadow-soft);transition:.3s}
.trust-item:hover,.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.trust-item{text-align:center}
.trust-item strong{display:block;color:var(--navy);font-size:28px;line-height:1.1;letter-spacing:-.03em;margin-bottom:8px}
.trust-item span,.card p{color:var(--muted);font-size:15px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card h3{color:var(--navy);font-size:22px;line-height:1.2;letter-spacing:-.02em;margin-bottom:12px}
.icon-box{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;color:var(--blue);background:linear-gradient(135deg,rgba(27,99,255,.13),rgba(0,183,168,.14));margin-bottom:21px;font-size:16px;font-weight:900}

/* ─── Timeline ─── */
.timeline{display:grid;gap:16px}
.timeline-item{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:start;padding:18px;border-radius:20px;background:linear-gradient(180deg,#fff,#F7FBFF);border:1px solid rgba(10,35,75,.08);transition:.25s}
.timeline-item:hover{transform:translateX(4px)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--teal));font-size:13px;font-weight:900;padding:0 12px}

/* ─── List ─── */
.list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.list-item{padding:18px;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fcff);border:1px solid rgba(10,35,75,.07);transition:.25s}
.list-item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(6,27,58,.08)}
.list-item strong{display:block;color:var(--navy);margin-bottom:6px}

/* ─── CTA Dark ─── */
.cta-dark{padding:76px 0;color:#fff;background:radial-gradient(circle at 18% 18%,rgba(57,215,255,.18),transparent 26%),linear-gradient(135deg,#061B3A 0%,#0B2B5C 100%)}
.cta-box{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:38px;border-radius:30px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px)}
.cta-box h2{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.045em;margin-bottom:10px}
.cta-box p{color:#D4E2F2;font-size:17px;max-width:760px}

/* ─── Reviews ─── */
.review-grid{columns:3 280px;column-gap:22px}
.review-card{break-inside:avoid;display:inline-block;width:100%;margin:0 0 22px}
.stars{color:#F7B500;font-size:18px;letter-spacing:.07em;margin-bottom:18px}
.quote-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;color:var(--blue);background:linear-gradient(135deg,rgba(27,99,255,.12),rgba(0,183,168,.14));margin-bottom:18px;font-size:30px;font-weight:900}

/* ─── Location / Contact ─── */
.location-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field.full{grid-column:1/-1}
.field{display:grid;gap:7px}
label{color:var(--navy);font-size:14px;font-weight:800}
input,textarea,select{width:100%;min-height:52px;border:1px solid rgba(10,35,75,.12);border-radius:16px;padding:14px 16px;font:inherit;font-size:15px;color:var(--text);background:#F8FBFF;outline:none;transition:.25s}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:rgba(27,99,255,.38);background:#fff;box-shadow:0 0 0 4px rgba(27,99,255,.08)}

/* ─── WhatsApp Float ─── */
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:1001;width:64px;height:64px;border-radius:999px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#25D366,#00B7A8);box-shadow:0 18px 40px rgba(0,183,168,.35);transition:.25s}
.whatsapp-float:hover{transform:translateY(-5px) scale(1.03)}
.whatsapp-float svg{width:31px;height:31px;fill:currentColor}

/* ─── Footer ─── */
.site-footer{background:linear-gradient(135deg,#061B3A 0%,#0B2B5C 100%);color:#fff;padding:64px 0 26px;position:relative;overflow:hidden}
.site-footer:before{content:"";position:absolute;right:-90px;top:-120px;width:300px;height:300px;border-radius:50%;background:rgba(57,215,255,.14);filter:blur(70px)}
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;gap:34px}
.footer-brand{font-size:20px;font-weight:900;letter-spacing:.02em;margin-bottom:14px}
.footer-text{color:#D4E2F2;font-size:15px;max-width:420px}
.footer-title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#D8FBFF;margin-bottom:16px}
.footer-links{display:grid;gap:11px}
.footer-links a,.footer-contact a,.footer-contact span{color:#D4E2F2;font-size:14px;font-weight:650;transition:.25s;display:block}
.footer-links a:hover,.footer-contact a:hover{color:#39D7FF;transform:translateX(3px)}
.footer-contact{display:grid;gap:11px}
.footer-bottom{position:relative;z-index:1;margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#BFD1E8;font-size:13px;font-weight:650}
.footer-cta{display:inline-flex;margin-top:18px}

/* ─── Placeholders (Contact page) ─── */
.map-placeholder,.booking-placeholder,.image-placeholder{min-height:160px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--navy);border-radius:22px;background:linear-gradient(135deg,#EAF6FF,#F9FDFF);border:1px solid rgba(10,35,75,.08)}
.map-placeholder strong,.booking-placeholder strong,.image-placeholder strong{display:block;font-size:20px;margin-bottom:6px}
.map-placeholder span,.booking-placeholder span,.image-placeholder span{color:var(--muted);font-size:14px;font-weight:650}
.location-card{overflow:hidden}
.embed-box{margin-top:18px}

/* ─── WordPress-specific helpers ─── */
.wp-block-image img{border-radius:16px}
.aligncenter{text-align:center}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;white-space:nowrap;overflow:hidden;height:1px;width:1px}

/* ─── Responsive ─── */
@media(max-width:1100px){
  .hero-grid,.grid-2,.location-grid,.cta-box{grid-template-columns:1fr}
  .grid-4,.trust-box,.grid-3{grid-template-columns:repeat(2,1fr)}
  .floating-card.top{left:16px}
  .floating-card.bottom{right:16px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav{flex-wrap:wrap;padding:16px 0}
  .brand,.menu,.actions{width:100%;justify-content:center;text-align:center}
  .menu{flex-wrap:wrap;gap:16px}
  .hero,.page-hero{padding-top:52px}
  .hero-actions .btn,.cta-box .btn{width:100%}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,var(--container))}
  .hero h1,.page-hero h1{font-size:38px}
  .hero p,.page-hero p,.cta-box p{font-size:16px}
  .doctor-image,.doctor-image img{min-height:430px}
  .floating-card{position:static;max-width:100%;margin-top:14px}
  .grid-4,.grid-3,.trust-box,.list,.form-grid{grid-template-columns:1fr}
  .card,.cta-box{padding:24px 20px}
  .timeline-item{grid-template-columns:1fr}
  .call-link,.btn{width:100%}
  .whatsapp-float{right:16px;bottom:16px;width:58px;height:58px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{display:grid}
}
/* ─── Hamburger Button (hidden on desktop) ─── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  z-index: 100;
}

.menu-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #003366; /* match your brand color */
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animate to X when open */
.menu-toggle.is-active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ─── Mobile Styles ─── */
@media (max-width: 768px) {

  .nav {
    flex-wrap: wrap;
    align-items: center;
    position: relative;
  }

  /* Show hamburger on mobile */
  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  /* Hide nav by default on mobile */
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    padding: 12px 0;
    border-top: 1px solid #e5e5e5;
    order: 3; /* pushes below brand + button row */
  }

  /* Show when toggled */
  .menu.is-open {
    display: flex;
  }

  /* Stack nav links vertically */
  .menu a {
    display: block;
    padding: 12px 20px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #003366;
    text-decoration: none;
  }

  .menu a:hover,
  .menu a.active {
    background: #f5f9ff;
    color: #0055cc;
  }

  /* Stack actions below nav */
  .actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    padding: 12px 16px;
    order: 4;
  }

  .call-link {
    font-size: 14px;
    text-align: center;
  }

  .btn-primary {
    text-align: center;
    width: 100%;
  }
}