/*
Theme Name: Keratin Skin & Hair Clinic
Theme URI: https://keratinclinic.com
Author: Keratin Clinic Digital Team
Author URI: https://keratinclinic.com
Description: Premium luxury medical theme for Keratin Skin & Hair Clinic (Dr. Vaibhav Barve). Fully customizable — colors, logo, phone, WhatsApp, address, and content can be changed anytime from Appearance > Customize. Built mobile-first with SEO, AEO and LLM-optimization structure baked in.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: keratin-clinic
Tags: medical, clinic, dermatology, hair-transplant, luxury, custom-colors, custom-logo, translation-ready
*/

/* =====================================================
   DESIGN TOKENS — change these to re-skin the whole site
   (Values below are DEFAULTS; live-editable values are
   printed inline in header.php from the Customizer so
   client can change colors without touching code)
   ===================================================== */
:root{
  --color-navy: #041C3E;
  --color-navy-light: #0B2C5C;
  --color-navy-dark: #020F22;
  --color-gold: #B98E32;
  --color-gold-light: #D4B571;
  --color-gold-dark: #8C6B22;
  --color-white: #FFFFFF;
  --color-offwhite: #FAF8F3;
  --color-text: #1A1A1A;
  --color-text-light: #5C5C5C;
  --color-border: #E7E1D3;
  --color-success: #1E7A46;

  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Jost', 'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 10px 40px rgba(4,28,62,0.08);
  --shadow-hover: 0 20px 60px rgba(4,28,62,0.16);
  --container: 1240px;
  --transition: all 0.35s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-white);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4,h5{font-family:var(--font-heading);color:var(--color-navy);line-height:1.2;font-weight:600;}
h1{font-size:clamp(2.2rem,5vw,3.6rem);}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);}
h3{font-size:clamp(1.3rem,2.5vw,1.6rem);}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
@media(max-width:768px){.section{padding:56px 0;}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--color-gold-dark);font-family:var(--font-body);
  letter-spacing:2px;text-transform:uppercase;font-size:13px;font-weight:600;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--color-gold);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 32px;border-radius:100px;font-weight:600;font-size:15px;
  transition:var(--transition);letter-spacing:.3px;
}
.btn-primary{background:var(--color-gold);color:var(--color-navy);}
.btn-primary:hover{background:var(--color-gold-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.btn-outline{border:1.5px solid var(--color-navy);color:var(--color-navy);}
.btn-outline:hover{background:var(--color-navy);color:var(--color-white);}
.btn-white{background:var(--color-white);color:var(--color-navy);}
.btn-white:hover{background:var(--color-gold);color:var(--color-navy);}

.card{
  background:var(--color-white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);transition:var(--transition);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* Staggered card-by-card reveal for grids/tracks (agency-level polish) */
.reveal.reveal-stagger{opacity:1;transform:none;}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);}

.screen-reader-text{position:absolute;left:-9999px;}
.skip-link{position:absolute;top:-100px;left:0;background:var(--color-navy);color:#fff;padding:12px 20px;z-index:9999;}
.skip-link:focus{top:0;}