/* --- CUSTOM THEMING FOR LIGHT DRISHTI LANDING (Hindi Eye Health) --- */

:root {
  /* Dynamic visual color variables matching theme & topic */
  --drishti-bg: #FAFAF9;           /* Creamy Warm White background */
  --drishti-surface: #F5F5F4;      /* Soft warm-grey surface */
  --drishti-accent: #065F46;       /* Deep Emerald forest green (Accessible on light bg) */
  --drishti-accent-hover: #047857; /* Saturated emerald-forest for interactions */
  --drishti-accent-light: #ECFDF5; /* Subtle emerald tint */
  --drishti-charcoal: #1C1917;     /* High-contrast stone charcoal for text */
  --drishti-gold: #D97706;         /* Accent gold for review stars */
  --drishti-gradient: linear-gradient(135deg, #ECFDF5 0%, #FEF3C7 100%); /* Emerald to glowing-gold gradient glow */
  
  /* Preferred typography variables */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
}

/* Custom Reset and Scroll-driven animation properties */
html {
  scroll-behavior: smooth;
}

/* --- SCROLL TIMELINE IN HEADER --- */
@keyframes drishti-scroll-width {
  from { width: 0%; }
  to { width: 100%; }
}

.drishti-scroll-tracker {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  z-index: 1001;
  animation: drishti-scroll-width linear;
  animation-timeline: scroll();
}

/* Header style & hamburger config */
.drishti-header-shelf {
  position: sticky;
  top: 0;
  transition: background-color 0.3s ease;
}

.drishti-nav-link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.drishti-nav-link:hover {
  color: var(--drishti-accent) !important;
}

/* Responsive CSS only Hamburger Menu Logic */
#drishti-hamburger:checked ~ .drishti-menu-panel {
  display: flex !important;
}

@media (max-width: 1023px) {
  .drishti-menu-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--drishti-bg);
    border-bottom: 2px solid var(--drishti-accent-light);
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
}

/* Action button configurations */
.drishti-action-button {
  font-family: var(--font-body);
  border-radius: 16px; /* Soft structure variable preset */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* Raised depth shadow */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drishti-action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -2px rgba(0,0,0,0.05);
  background-color: var(--drishti-accent-hover) !important;
}

/* --- PRESET C SPECIFIC CONTENT STYLINGS --- */

/* Content section 1: Image left with decorative offset */
.drishti-media-box {
  margin-left: -2rem; /* Decorative overlap structure negative offset */
}

@media (max-width: 1023px) {
  .drishti-media-box {
    margin-left: 0;
  }
}

/* Features list horizontal row block */
.drishti-row-brick {
  transition: background-color 0.2s ease-in-out;
}

.drishti-row-brick:hover {
  background-color: rgba(6, 95, 70, 0.03);
}

/* Testimonials: Masonry grid layout config */
.drishti-masonry-gallery {
  column-count: 3;
  column-gap: 1.5rem;
}

@media (max-width: 1023px) {
  .drishti-masonry-gallery {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .drishti-masonry-gallery {
    column-count: 1;
  }
}

/* Quote styling */
.drishti-clean-quote {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.drishti-clean-quote:hover {
  transform: translateY(-3px);
}

/* Contact Form Input configurations */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--drishti-accent) !important;
  box-shadow: 0 0 0 3px var(--drishti-accent-light);
}

/* Ensure smooth view-based page roll animations */
@keyframes drishti-viewport-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Run pure CSS fade animations where supported */
@media (prefers-reduced-motion: no-preference) {
  .drishti-row-brick, .drishti-clean-quote, .drishti-circular-art {
    animation: drishti-viewport-fade linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }
}