/* =====================================================================
   SAPNA MALPANI — UNIVERSAL DESIGN SYSTEM (components.css)
   Single source for: tokens, header, footer, nav, dropdown, buttons,
   logo, neo cards, helpers. Safe to load on ANY page — contains NO
   page-layout rules (no .hero/.service-grid/etc) so it never collides
   with a page's own body CSS. Header/footer MARKUP comes from site.js.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&family=Dancing+Script:wght@600;700&display=swap');

:root{
  --primary:#4a3d8f; --primary-light:#6b5db5; --primary-dark:#362d6b; --primary-pastel:#e8e4f4;
  --accent:#d4a76a; --accent-light:#e6c48e; --accent-dark:#b8884a;
  --lavender:#f3f0fa; --white:#fff; --off-white:#faf9fd; --light-gray:#eee9f2;
  --mid-gray:#b5adc4; --dark-gray:#7a7290; --text:#3a3154; --text-light:#6b6182;
  --font-heading:'Playfair Display',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-signature:'Dancing Script',cursive;
  --radius-sm:8px; --radius-md:12px; --radius-full:9999px; --header-height:80px;
  --shadow-sm:0 1px 4px rgba(74,61,143,.06); --shadow-md:0 4px 14px rgba(74,61,143,.08);
  --shadow-lg:0 8px 30px rgba(74,61,143,.1); --transition:0.3s ease;
}

/* ---- Buttons (shared) ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-size:.95rem;font-weight:600;font-family:var(--font-body);border-radius:var(--radius-full);transition:all var(--transition);letter-spacing:.3px;white-space:nowrap;border:none;cursor:pointer;}
.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 4px 18px rgba(74,61,143,.25);}
.btn-primary:hover{background:var(--primary-light);transform:translateY(-2px);box-shadow:0 6px 24px rgba(74,61,143,.35);}

/* ---- Header ---- */
.site-header,.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-height);background:rgba(255,255,255,.98)!important;backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);font-family:var(--font-body);}
.header .container{height:100%;}
.header-content{display:flex;align-items:center;justify-content:space-between;height:100%;}
.header .nav{display:flex;align-items:center;gap:1rem;}
.logo{display:flex;align-items:center;gap:10px;z-index:1001;text-decoration:none;}
.logo-icon{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.logo-icon img{width:100%;height:100%;object-fit:contain;}
.logo-text{font-family:var(--font-signature)!important;font-size:1.55rem;font-weight:700;color:var(--primary);line-height:1.1;letter-spacing:.5px;}
.nav-links{display:flex;align-items:center;gap:1.4rem;}
.nav-links>a,.nav-dropdown-toggle{font-size:.85rem;font-weight:500;color:var(--primary);position:relative;padding:.25rem 0;text-decoration:none;}
.nav-links>a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--accent);transition:width var(--transition);}
.nav-links>a:hover::after,.nav-links>a.active::after{width:100%;}
.nav-cta{margin-left:1rem;}

/* ---- Tools dropdown (universal — was missing from style.css) ---- */
.nav-dropdown{position:relative;}
.nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(8px);min-width:250px;background:#fff;border-radius:14px;box-shadow:0 12px 36px rgba(74,61,143,.18);padding:8px;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:1100;}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{display:block;padding:10px 14px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--primary);white-space:nowrap;text-decoration:none;}
.nav-dropdown-menu a:hover{background:var(--primary-pastel);}

/* ---- Mobile menu button ---- */
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;z-index:1001;padding:4px;background:none;border:none;cursor:pointer;}
.mobile-menu-btn span{display:block;width:26px;height:2.5px;background:var(--primary);border-radius:2px;transition:all var(--transition);}
.mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.mobile-menu-btn.active span:nth-child(2){opacity:0;}
.mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ---- Footer ---- */
.footer{background:var(--white);color:var(--text-light);padding:4rem 0 0;border-top:1px solid var(--light-gray);font-family:var(--font-body);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;}
.footer-brand .logo{margin-bottom:1.5rem;}
.footer-brand p{font-size:.92rem;color:var(--text-light);line-height:1.8;}
.footer h4{color:var(--primary);font-family:var(--font-body);font-size:.95rem;font-weight:600;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:1px;}
.footer-links li{margin-bottom:1rem;list-style:none;}
.footer-links a{font-size:.9rem;color:var(--text-light);text-decoration:none;transition:color var(--transition);}
.footer-links a:hover{color:var(--primary);}
.footer-bottom{border-top:1px solid var(--light-gray);padding:1.5rem 0;display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:var(--dark-gray);}
.footer-links-bottom{display:flex;gap:1.5rem;}
.footer-links-bottom a{color:var(--dark-gray);font-size:.85rem;text-decoration:none;}
.footer-links-bottom a:hover{color:var(--primary);}
.footer ul{list-style:none;margin:0;padding:0;}

/* ---- Floating: WhatsApp + scroll-to-top ---- */
.whatsapp-btn{position:fixed;bottom:30px;left:30px;width:56px;height:56px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);z-index:999;transition:all var(--transition);}
.whatsapp-btn:hover{transform:scale(1.1);}
.whatsapp-btn svg{width:28px;height:28px;}
.scroll-to-top{position:fixed;bottom:30px;right:30px;width:46px;height:46px;background:var(--primary);color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition);z-index:999;cursor:pointer;}
.scroll-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}

/* ---- fade-up reveal ---- */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}

/* ---- Container helper (only if page lacks one) ---- */
.header .container,.footer .container{width:100%;max-width:1200px;margin:0 auto;padding:0 2rem;}

/* ---- Overrides to win over tool pages' bespoke inline chrome CSS ----
   Tool pages ship their own .header/.nav/.nav-dropdown-menu/footer rules
   (some with !important). These high-specificity rules ensure the universal
   brand chrome always wins, regardless of inline order. ---- */
.header .logo-text{font-family:var(--font-signature)!important;color:var(--primary)!important;font-size:1.55rem!important;}
.header .nav{gap:.8rem!important;}
.header .nav-links{gap:1.4rem!important;}
.header .nav-links a,.header .nav-dropdown-toggle{color:var(--primary)!important;background:none!important;font-size:.85rem!important;padding:.25rem 0!important;margin:0!important;white-space:nowrap!important;}
.header .nav-cta{margin-left:.6rem!important;}
.header .nav-cta .btn{padding:.6rem 1.2rem!important;font-size:.85rem!important;}
.header .nav-dropdown-menu{background:#fff!important;min-width:250px!important;box-shadow:0 12px 36px rgba(74,61,143,.18)!important;border-radius:14px!important;padding:8px!important;}
.header .nav-dropdown-menu a{color:var(--primary)!important;font-size:.9rem!important;padding:10px 14px!important;border-radius:9px!important;}
.header .nav-dropdown-menu a:hover{background:var(--primary-pastel)!important;color:var(--primary)!important;}
.header .nav-cta .btn,.header .nav-cta .btn-primary{background:var(--primary)!important;color:#fff!important;border-radius:var(--radius-full)!important;padding:.7rem 1.6rem!important;}
.header .nav-cta .btn:hover{background:var(--primary-light)!important;}
body>.footer,.footer{background:var(--white)!important;color:var(--text-light)!important;text-align:left!important;padding:4rem 0 0!important;}
.footer p{opacity:1!important;}
.footer .footer-bottom p{color:var(--dark-gray)!important;}

/* ---- Responsive ---- */
@media(max-width:768px){
  .mobile-menu-btn{display:flex;}
  .header .nav{position:fixed;top:0;right:-100%;width:80%;max-width:360px;height:100vh;background:var(--white);flex-direction:column;padding:calc(var(--header-height) + 1.5rem) 1.5rem 1.5rem;transition:right var(--transition);box-shadow:var(--shadow-lg);align-items:flex-start;gap:1.5rem;z-index:1000;}
  .header .nav.active{right:0;}
  .nav-links{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .nav-dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;min-width:0;padding:0 0 0 1rem;}
  .nav-cta{margin-left:0;margin-top:1rem;}
  .footer-grid{grid-template-columns:1fr;gap:2rem;}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center;}
}