/*
Theme Name: Dr Javed Derma Clinic
Theme URI: https://drjaved.clinic
Author: Admagnate Technologies
Description: Custom hand-coded WordPress theme for Dr. Javed's Lucknow Derma & Aesthetic Clinic
Version: 1.0
Text Domain: drjaved
*/

/* ===== DESIGN TOKENS ===== */
:root{
  --blue:#1E4C9A;
  --blue-dark:#123167;
  --navy-deep:#0B1F42;
  --blue-light:#EAF0FB;
  --red:#D32E2E;
  --red-dark:#A61F1F;
  --gold:#F2B705;
  --gold-dark:#C99400;
  --ink:#16213A;
  --white:#FFFFFF;
  --grey:#66707F;
  --grey-light:#F5F7FA;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 8px 30px rgba(18,49,103,0.10);
  --shadow-hover:0 16px 40px rgba(18,49,103,0.18);
  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  margin:0;
  background:var(--white);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--blue-dark);
  line-height:1.2;
  margin:0 0 .5em;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:12px;
  line-height:1.5;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  padding:15px 30px;
  border-radius:10px;
  font-weight:600;
  font-family:var(--font-body);
  font-size:.95rem;
  cursor:pointer;
  border:2px solid transparent;
  transition:.25s ease;
  white-space:nowrap;
}
.btn::after{ content:'→'; font-size:1rem; transition:transform .25s ease; }
.btn:hover::after{ transform:translateX(3px); }
.btn-primary{ background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color:var(--white); box-shadow:0 8px 20px rgba(211,46,46,0.28); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(211,46,46,0.36); }
.btn-outline{ background:#fff; border-color:var(--blue); color:var(--blue); }
.btn-outline:hover{ background:var(--blue); color:var(--white); transform:translateY(-2px); }
.btn-gold{ background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color:var(--ink); box-shadow:0 8px 20px rgba(242,183,5,0.3); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(242,183,5,0.4); }

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

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}