/*
Theme Name: Chandra Trio
Theme URI: https://chandratrio.com
Author: Chandra Trio Services Pvt. Ltd.
Description: Custom premium WordPress theme for Chandra Trio Services Pvt. Ltd. — a business growth partner agency based in Jaipur, Rajasthan. Built mobile-first, Gutenberg-ready, no page builder dependency.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chandratrio
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --ct-primary:#1A3C5E;
  --ct-accent:#E8622A;
  --ct-bg:#0B0F19;
  --ct-surface:#131A27;
  --ct-white:#FFFFFF;
  --ct-text-secondary:#B7C2D0;

  --ct-font-heading:'Space Grotesk', 'General Sans', sans-serif;
  --ct-font-body:'Inter', sans-serif;

  --ct-radius-sm:10px;
  --ct-radius-md:18px;
  --ct-radius-lg:28px;

  --ct-container:1240px;
  --ct-gutter:clamp(20px, 4vw, 64px);

  --ct-ease:cubic-bezier(.16,.84,.44,1);
}

/* =========================================================
   DIGITAL BACKGROUND — subtle grid + drifting glow, sitewide.
   Pure CSS: a masked grid pattern plus three blurred colour orbs
   that slowly drift via transform (cheap — no layout/paint thrash).
   Sits behind all normal-flow content via negative z-index; solid
   .surface sections simply paint over it, giving natural rhythm.
   ========================================================= */
.ct-bg-fx{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
.ct-bg-grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(183,194,208,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,194,208,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 0%, black 35%, transparent 85%);
  mask-image:radial-gradient(ellipse 75% 55% at 50% 0%, black 35%, transparent 85%);
}
.ct-bg-glow{
  position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;
}
.ct-bg-glow--1{
  width:560px;height:560px;top:-140px;left:-120px;
  background:radial-gradient(circle, var(--ct-primary) 0%, transparent 70%);
  opacity:.55;animation:ct-drift-1 26s ease-in-out infinite;
}
.ct-bg-glow--2{
  width:480px;height:480px;top:6%;right:-160px;
  background:radial-gradient(circle, var(--ct-accent) 0%, transparent 70%);
  opacity:.28;animation:ct-drift-2 32s ease-in-out infinite;
}
.ct-bg-glow--3{
  width:420px;height:420px;bottom:-140px;left:32%;
  background:radial-gradient(circle, var(--ct-primary) 0%, transparent 70%);
  opacity:.32;animation:ct-drift-3 36s ease-in-out infinite;
}
@keyframes ct-drift-1{0%,100%{transform:translate(0,0);}50%{transform:translate(50px,70px);}}
@keyframes ct-drift-2{0%,100%{transform:translate(0,0);}50%{transform:translate(-60px,50px);}}
@keyframes ct-drift-3{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,-50px);}}

/* Respect reduced-motion preferences — freeze the drift, keep the glow */
@media (prefers-reduced-motion: reduce){
  .ct-bg-glow{animation:none;}
}

/* Smaller, lighter glow on phones — less GPU/blur cost, still ambient */
@media (max-width:640px){
  .ct-bg-glow--1{width:340px;height:340px;}
  .ct-bg-glow--2{width:300px;height:300px;}
  .ct-bg-glow--3{width:260px;height:260px;}
  .ct-bg-grid{background-size:36px 36px;}
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ct-bg);
  color:var(--ct-white);
  font-family:var(--ct-font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

h1,h2,h3,h4,h5{
  font-family:var(--ct-font-heading);
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.5em;
  letter-spacing:-0.02em;
}
h1{font-size:clamp(2.6rem,6vw,5rem);}
h2{font-size:clamp(2rem,4.2vw,3.2rem);}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem);}
p{color:var(--ct-text-secondary);margin:0 0 1.2em;}

.container{
  max-width:var(--ct-container);
  margin:0 auto;
  padding:0 var(--ct-gutter);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--ct-font-body);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ct-accent);
  margin-bottom:20px;
}
.eyebrow::before{
  content:'';
  width:24px;height:1px;
  background:var(--ct-accent);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  border-radius:100px;
  font-size:0.95rem;
  font-weight:600;
  transition:transform .35s var(--ct-ease), background .35s var(--ct-ease), color .35s var(--ct-ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--ct-accent);
  color:var(--ct-white);
}
.btn-primary:hover{transform:translateY(-2px);background:#ff7238;}
.btn-outline{
  border:1px solid rgba(255,255,255,.25);
  color:var(--ct-white);
}
.btn-outline:hover{border-color:var(--ct-accent);color:var(--ct-accent);}

/* =========================================================
   SECTIONS / SURFACES
   ========================================================= */
section{padding:clamp(60px,10vw,140px) 0;position:relative;}
.surface{background:var(--ct-surface);border-radius:var(--ct-radius-lg);}
.card{
  background:var(--ct-surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--ct-radius-md);
  padding:36px;
  transition:transform .4s var(--ct-ease), border-color .4s var(--ct-ease);
}
.card:hover{transform:translateY(-6px);border-color:rgba(232,98,42,.4);}

.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* Glassmorphism panel — used sparingly, on hero overlays / floating stat cards */
.glass{
  background:rgba(19,26,39,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
}

/* Reveal-on-scroll base state (JS toggles .is-visible) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ct-ease), transform .8s var(--ct-ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  padding:20px var(--ct-gutter);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s var(--ct-ease), padding .4s var(--ct-ease);
}
.site-header.is-scrolled{
  background:rgba(11,15,25,.85);
  backdrop-filter:blur(14px);
  padding-top:14px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-logo{font-family:var(--ct-font-heading);font-weight:700;font-size:1.3rem;}
.site-logo span{color:var(--ct-accent);}
.site-logo--image img{max-height:44px;width:auto;display:block;}
.footer-logo img{max-height:36px;width:auto;filter:brightness(0) invert(1);}
.footer-logo{margin-bottom:4px;}

.main-navigation ul{display:flex;gap:36px;align-items:center;}
.main-navigation a{font-size:0.95rem;font-weight:500;position:relative;}
.main-navigation a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;
  background:var(--ct-accent);transition:width .3s var(--ct-ease);
}
.main-navigation a:hover::after{width:100%;}

.menu-toggle,.search-toggle{background:none;border:none;color:var(--ct-white);cursor:pointer;}
.menu-toggle{display:none;} /* shown only on mobile — see media query below */
.header-actions{display:flex;align-items:center;gap:20px;}

/* Mega menu */
.has-mega-menu{position:relative;}
.mega-menu{
  position:fixed;top:0;left:0;right:0;
  background:var(--ct-surface);
  padding:120px var(--ct-gutter) 60px;
  display:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.has-mega-menu:hover .mega-menu{display:block;}
.mega-menu .grid-4{max-width:var(--ct-container);margin:0 auto;}
.mega-menu-col h4{font-size:0.85rem;color:var(--ct-accent);text-transform:uppercase;letter-spacing:.1em;}
.mega-menu-col a{display:block;padding:8px 0;color:var(--ct-text-secondary);}
.mega-menu-col a:hover{color:var(--ct-white);}

/* Search overlay */
.search-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(11,15,25,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ct-ease);
}
.search-overlay.is-active{opacity:1;pointer-events:all;}
.search-overlay form{width:min(720px,90vw);}
.search-overlay input{
  width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.2);
  font-size:clamp(1.6rem,4vw,2.6rem);font-family:var(--ct-font-heading);color:var(--ct-white);
  padding:16px 0;outline:none;
}
.search-close{position:absolute;top:32px;right:var(--ct-gutter);}

/* Tablet: ease grids to 2 columns before the nav switches to mobile mode */
@media (max-width:1200px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}

/* Small-laptop safety margin: tighten spacing before anything has to wrap */
@media (max-width:1400px) and (min-width:1141px){
  .main-navigation ul{gap:24px;}
  .main-navigation a{font-size:0.9rem;}
  .btn-primary{padding:14px 24px;font-size:0.9rem;}
}

/* Mobile nav — widened from a typical 980px breakpoint because this header
   carries a full 7-item menu + logo + search icon + CTA button, which needs
   more room than a lean header would before switching to the off-canvas panel */
@media (max-width:1140px){
  .main-navigation{
    position:fixed;top:0;right:0;height:100vh;width:min(360px,85vw);
    background:var(--ct-surface);padding:100px 32px 40px;
    transform:translateX(100%);transition:transform .5s var(--ct-ease);z-index:1000;
  }
  .main-navigation.is-open{transform:translateX(0);}
  .main-navigation ul{flex-direction:column;align-items:flex-start;gap:22px;}
  .mega-menu{position:static;padding:0;margin-top:16px;}
  .has-mega-menu:hover .mega-menu{display:none;}
  .has-mega-menu.is-open .mega-menu{display:block;}
  .menu-toggle{display:inline-flex;} /* only the mobile/tablet panel needs a toggle */
}

/* On very small headers, drop the CTA button text down to just the icon-free
   essentials so "Start a Project" doesn't fight the logo for space */
@media (max-width:400px){
  .header-actions .btn-primary{padding:12px 16px;font-size:0.82rem;}
}

/* Phones: collapse every grid to a single column */
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  h1{font-size:clamp(2.2rem,9vw,3rem);}
  section{padding:48px 0;}
  .footer-cta{flex-direction:column;align-items:flex-start;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--ct-surface);
  padding:90px 0 32px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-cta{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:70px;margin-bottom:70px;border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;gap:24px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;}
.footer-grid h4{font-size:0.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ct-accent);margin-bottom:20px;}
.footer-grid a{display:block;padding:6px 0;color:var(--ct-text-secondary);}
.footer-grid a:hover{color:var(--ct-white);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  font-size:0.85rem;color:var(--ct-text-secondary);flex-wrap:wrap;gap:12px;
}
.social-menu{display:flex;gap:16px;}

@media (max-width:780px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
}

/* =========================================================
   COUNTERS / STATS
   ========================================================= */
.stat-number{
  font-family:var(--ct-font-heading);
  font-size:clamp(2.4rem,5vw,4rem);
  color:var(--ct-white);
  font-weight:700;
}
.stat-label{color:var(--ct-text-secondary);font-size:0.9rem;}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-accent{color:var(--ct-accent);}
.text-secondary{color:var(--ct-text-secondary);}
.mt-0{margin-top:0;}
.center{text-align:center;}
.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-16{gap:16px;}
.gap-24{gap:24px;}