/* =========================================================================
   UKS Solar Company (PVT) Ltd — "Premium & Precise" rebuild
   Shared stylesheet. Load AFTER Tailwind CDN + daisyUI CSS on every page.

   Design tokens (kept here, not buried in markup, so you can re-brand by
   editing this one block):
   --ink        #0B0F19   primary text
   --surface    #FFFFFF   page/card background
   --muted-bg   #F6F7F9   section background, subtle contrast
   --border     #E5E7EB   hairline borders (shadcn-style, 1px, no shadow)
   --muted-fg   #64748B   secondary text
   --primary    #1E3A8A   deep indigo-navy — engineering, trust
   --primary-fg #FFFFFF
   --accent     #0EA5A4   teal — used sparingly for one highlight per section
   ========================================================================= */

:root{
  --ink:        #0B0F19;
  --surface:    #FFFFFF;
  --muted-bg:   #F6F7F9;
  --border:     #E5E7EB;
  --muted-fg:   #64748B;
  --primary:    #1E3A8A;
  --primary-fg: #FFFFFF;
  --accent:     #0EA5A4;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background-color:var(--surface);
  font-feature-settings:'cv11','ss01';
}

.font-mono-data{ font-family:'JetBrains Mono', ui-monospace, monospace; }

/* Visible keyboard focus everywhere — accessibility floor, not optional */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

/* Respect reduced motion regardless of what AOS is asked to do */
@media (prefers-reduced-motion: reduce){
  [data-aos]{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ---------------------------------------------------------------------
   Precision Stepper — signature element, used on index.html and reused
   in miniature on services.html. A hairline-bordered sequence of numbered
   checkpoints; only the final node carries colour. Deliberately restrained
   to match the shadcn-style "quiet surface, one accent" language rather
   than the heavier blueprint/circuit treatment of a typical solar site.
   Markup:
   <div class="stepper">
     <div class="stepper-node"> ... </div>  (repeat)
   </div>
   --------------------------------------------------------------------- */
.stepper{
  display:flex;
  align-items:flex-start;
  position:relative;
}
.stepper::before{
  content:"";
  position:absolute;
  left:1.5rem; right:1.5rem; top:1.25rem;
  border-top:1px solid var(--border);
  z-index:0;
}
.stepper-node{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 0.5rem;
}
.stepper-node .dot{
  width:2.5rem; height:2.5rem;
  border-radius:9999px;
  background:var(--surface);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  border:1px solid var(--border);
  box-shadow:0 0 0 4px var(--surface);
}
.stepper-node.is-final .dot{
  background:var(--primary);
  color:var(--primary-fg);
  border-color:var(--primary);
}

@media (max-width:767px){
  .stepper{ flex-direction:column; align-items:stretch; gap:1.5rem; }
  .stepper::before{
    left:1.25rem; top:0.5rem; bottom:0.5rem; right:auto;
    border-top:none;
    border-left:1px solid var(--border);
  }
  .stepper-node{ flex-direction:row; text-align:left; gap:1rem; }
}

/* Placeholder tile for Recent Projects / testimonial avatars until real
   photography is supplied — clearly marked, never presented as final art. */
.placeholder-tile{
  background:
    repeating-linear-gradient(45deg, var(--muted-bg), var(--muted-bg) 8px, var(--surface) 8px, var(--surface) 16px);
  border:1px dashed var(--border);
}

/* FAQ <details>/<summary> — hide the native disclosure marker so the
   Lucide chevron (rotated via Tailwind's group-open: variant) is the only
   affordance; Firefox honours list-style:none, WebKit needs the pseudo. */
summary{ list-style:none; }
summary::-webkit-details-marker{ display:none; }

/* Client logos marquee — only applied when JS finds enough logos to loop
   seamlessly (see assets/js/main.js, LOOP_THRESHOLD). The wrapper fades the
   edges so logos don't feel like they're cutting off mid-scroll. */
#client-logos-track-wrap{
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.animate-marquee{
  animation: marquee 32s linear infinite;
}
.animate-marquee:hover{
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
  .animate-marquee{ animation: none; }
}