/* =====================================================================
   DCCS HEADER — styles (v2)  [FULL REPLACEMENT]
   --dccs-font functions.php se inject hoti hai.
   ===================================================================== */

:root{
  --dccs-green:       #14A257;
  --dccs-green-dark:  #0b3d24;
  --dccs-yellow:      #FFDE59;
  --dccs-navy:        #111433;
  --dccs-nav-hover:   #14A257;

  /* Hero ke saath align karne ke liye. Elementor ka default content
     width 1140px hota hai. Agar align na ho to neeche wala console
     test chalayein aur is number ko adjust karein. */
  --dccs-maxw:        1160px;
  --dccs-pad:         10px;

  --dccs-social-size: 36px;
  --dccs-nav-gap:     38px;
}

/* ---- Skip link ---- */
.dccs-skip{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--dccs-green-dark);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.dccs-skip:focus{ left: 0; }

/* ---- Shell ---- */
.dccs-header{
  background: #fff;
  font-family: var(--dccs-font, system-ui, sans-serif);
}
.dccs-container{
  max-width: var(--dccs-maxw);
  margin: 0 auto;
  padding: 0 var(--dccs-pad);
  box-sizing: border-box;
}

/* =====================================================================
   ROW 1 — grid: left | center | right  (logo exactly beech mein)
   ===================================================================== */
.dccs-row-top{ padding: 14px 0 6px; }

.dccs-row-top-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.dccs-col-left{
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: start;
}
.dccs-col-center{ justify-self: center; }
.dccs-col-right{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* ---- Social icons — footer wali SVG files <img> se ---- */
.dccs-socials{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dccs-socials li{ margin: 0; padding: 0; line-height: 0; }
.dccs-socials a{
  display: block;
  line-height: 0;
  border-radius: 6px;
  transition: transform .15s ease, opacity .15s ease;
}
.dccs-socials a:hover{ transform: translateY(-2px); opacity: .85; }
.dccs-socials img{
  display: block;
  width: var(--dccs-social-size);
  height: var(--dccs-social-size);
  max-width: none;          /* Hello ka img{max-width:100%} flex mein sikorta tha */
  object-fit: contain;
}

.dccs-ndis{ height: auto; display: block; max-width: none; }

/* ---- Logo ---- */
.dccs-logo{ display: block; line-height: 0; }
.dccs-logo img{ height: auto; display: block; max-width: none; }
.dccs-logo-text{
  font-size: 22px;
  font-weight: 700;
  color: var(--dccs-navy);
  line-height: 1.2;
}

/* =====================================================================
   ROW 2 — nav
   ===================================================================== */
.dccs-row-nav{ padding: 4px 0 0; }

.dccs-nav-list{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--dccs-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dccs-nav-list li{ position: relative; margin: 0; }

.dccs-nav-list > li > a{
  display: block;
  padding: 10px 2px 14px;
  color: var(--dccs-navy);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.dccs-nav-list > li > a:hover,
.dccs-nav-list > li > a:focus-visible{
  color: var(--dccs-nav-hover);
  border-bottom-color: var(--dccs-green);
}
.dccs-nav-list > li.current-menu-item > a,
.dccs-nav-list > li.current-menu-ancestor > a,
.dccs-nav-list > li.current-menu-parent > a{
  color: var(--dccs-navy);
  border-bottom-color: var(--dccs-green);
}

.dccs-nav-list .sub-menu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 50;
}
.dccs-nav-list li:hover > .sub-menu,
.dccs-nav-list li:focus-within > .sub-menu{ opacity: 1; visibility: visible; }
.dccs-nav-list .sub-menu a{
  display: block;
  padding: 9px 18px;
  color: var(--dccs-navy);
  font-size: 14px;
  text-decoration: none;
}
.dccs-nav-list .sub-menu a:hover{ background: var(--dccs-yellow); color: var(--dccs-green-dark); }

/* =====================================================================
   HAMBURGER + DRAWER CLOSE
   Hello ki reset.css har <button> ko hover/focus pe #c36 (pink/purple)
   deti hai. Drawer khulte hi focus close (x) pe jata hai aur band hote
   hi hamburger pe — isi liye dono pink the. Har state band ki hai.
   ===================================================================== */
.dccs-header .dccs-burger,
.dccs-drawer .dccs-drawer-close{
  -webkit-tap-highlight-color: transparent;   /* mobile ka tap flash */
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 8px;
}

.dccs-header .dccs-burger,
.dccs-header .dccs-burger:hover,
.dccs-header .dccs-burger:focus,
.dccs-header .dccs-burger:active,
.dccs-header .dccs-burger[aria-expanded="true"]{
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dccs-navy) !important;
}

.dccs-burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 9px !important;
  cursor: pointer;
}
.dccs-burger span{
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--dccs-navy) !important;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.dccs-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.dccs-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.dccs-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* Keyboard focus phir bhi nazar aaye — sirf outline, rang nahi */
.dccs-header .dccs-burger:focus-visible,
.dccs-drawer .dccs-drawer-close:focus-visible{
  outline: 3px solid var(--dccs-green-dark) !important;
  outline-offset: 2px;
}
.dccs-header .dccs-burger:focus:not(:focus-visible),
.dccs-drawer .dccs-drawer-close:focus:not(:focus-visible){ outline: none; }

/* =====================================================================
   MOBILE DRAWER — right se slide
   ===================================================================== */
.dccs-overlay{
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s ease;
}
.dccs-overlay[hidden]{ display: none; }
.dccs-overlay.is-visible{ opacity: 1; }

.dccs-drawer{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99991;
  width: min(330px, 86vw);
  height: 100%;
  padding: 18px 20px 28px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: -6px 0 30px rgba(0,0,0,.16);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  font-family: var(--dccs-font, system-ui, sans-serif);
}
.dccs-drawer[hidden]{ display: none; }
.dccs-drawer.is-open{ transform: translateX(0); }

.dccs-drawer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid #ececec;
}
.dccs-drawer-title{
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--dccs-navy);
}

.dccs-drawer .dccs-drawer-close,
.dccs-drawer .dccs-drawer-close:focus,
.dccs-drawer .dccs-drawer-close:active{
  width: 40px;
  height: 40px;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--dccs-navy) !important;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dccs-drawer .dccs-drawer-close:hover{
  background: var(--dccs-yellow) !important;
  color: var(--dccs-green-dark) !important;
}

.dccs-drawer-list{ margin: 0; padding: 0; list-style: none; }
.dccs-drawer-list li{ margin: 0; border-bottom: 1px solid #f1f1f1; }
.dccs-drawer-list a{
  display: block;
  padding: 14px 4px;
  color: var(--dccs-navy);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-decoration: none;
}
.dccs-drawer-list a:hover,
.dccs-drawer-list a:focus-visible{ color: var(--dccs-green); }
.dccs-drawer-list .current-menu-item > a{ color: var(--dccs-green); }

.dccs-drawer-list .sub-menu{ margin: 0 0 6px; padding: 0 0 0 14px; list-style: none; }
.dccs-drawer-list .sub-menu li{ border-bottom: 0; }
.dccs-drawer-list .sub-menu a{
  padding: 9px 4px;
  font-size: 13.5px;
  font-weight: 500;
  text-transform: none;
  color: #555;
}

/* Drawer mein bhi ab icons (pehle "LinkedIn Instagram" text tha) */
.dccs-drawer .dccs-drawer-socials{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.dccs-drawer .dccs-drawer-socials li{ margin: 0; line-height: 0; border: 0; }
.dccs-drawer .dccs-drawer-socials a{ line-height: 0; }
.dccs-drawer .dccs-drawer-socials img{
  display: block;
  width: 34px;
  height: 34px;
  max-width: none;
  object-fit: contain;
}

body.dccs-locked{ overflow: hidden; }

.dccs-header a:focus-visible,
.dccs-drawer a:focus-visible{
  outline: 3px solid var(--dccs-green-dark);
  outline-offset: 2px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px){
  :root{ --dccs-nav-gap: 24px; }
  .dccs-nav-list > li > a{ font-size: 14px; }
}

@media (max-width: 1024px){
  :root{ --dccs-pad: 16px; }

  .dccs-row-nav{ display: none; }
  .dccs-burger{ display: flex; }

  .dccs-row-top{ padding: 10px 0; }
  .dccs-row-top-inner{
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .dccs-col-left{ display: none; }
  .dccs-col-center{ justify-self: start; grid-column: 1; }
  .dccs-col-right{ grid-column: 2; justify-self: end; gap: 8px; }

  /* Tablet/mobile pe logo chhota — header bohot uncha ho raha tha */
  .dccs-logo img{ width: 68px !important; }
}

@media (max-width: 560px){
  .dccs-col-right .tts-widget,
  .dccs-col-right .lt-widget{ display: none; }
  .dccs-logo img{ width: 58px !important; }
}