/*
 * ============================================================
 * drsujeeth.com — Stitch Refinement Overlay
 * ============================================================
 * Migrates the STRUCTURAL improvements from the Stitch
 * "Modern Minimalist Bento Identity" project (May 24, 2026)
 * into the live design system v3.0.x.
 *
 * What this overlays:
 *   - Typography scale (H1/H2/H3 + body line-height)
 *   - Spacing system (section / card / grid gap)
 *   - Pill-shaped CTAs with brand-aligned focus rings
 *   - 72px sticky navbar with shadow-sm
 *   - 150ms ease-out hover transitions
 *   - 16:9 aspect ratio for procedural thumbnails
 *   - Speak-with-Anaya + Chat-on-WhatsApp button components
 *
 * What this does NOT change:
 *   - Brand palette (keeps existing forest-green --ds-brand)
 *   - Page content, layout structure, or routing
 *   - Existing component library (extends, doesn't replace)
 *   - SEO meta, page titles, or H1/H2 text
 *
 * Loaded after: tokens.css, base.css, components.css.
 * Source of truth for Stitch tokens:
 *   Pro v3.1 response on 2026-05-24, project ID 9291216692130208490
 * ============================================================
 */

/* ============================================================
   1. TOKEN EXTENSIONS
   New tokens layered on top of existing --ds-* system.
   Keeps brand colors, adds Stitch's structural scales.
   ============================================================ */

:root {
  /* Type scale (Stitch: H1=4rem · H2=2.5rem · H3=1.5rem · body=1.625) */
  --drs-stitch-h1-size:      clamp(2.25rem, 6vw, 4rem);
  --drs-stitch-h2-size:      clamp(1.75rem, 4vw, 2.5rem);
  --drs-stitch-h3-size:      clamp(1.25rem, 2.5vw, 1.5rem);
  --drs-stitch-body-leading: 1.625;
  --drs-stitch-h-leading:    1.15;

  /* Spacing scale (8/16/24/32/48/64/96 — Stitch's locked rhythm) */
  --drs-stitch-space-1:      8px;
  --drs-stitch-space-2:      16px;
  --drs-stitch-space-3:      24px;
  --drs-stitch-space-4:      32px;
  --drs-stitch-space-5:      48px;
  --drs-stitch-space-6:      64px;
  --drs-stitch-space-7:      96px;

  /* Section / card padding (mobile auto-scales) */
  --drs-stitch-section-pad-y: clamp(48px, 8vw, 96px);
  --drs-stitch-section-pad-x: clamp(20px, 4vw, 64px);
  --drs-stitch-card-pad:      clamp(20px, 3vw, 32px);
  --drs-stitch-bento-gap:     clamp(16px, 2vw, 24px);

  /* Navbar */
  --drs-stitch-navbar-h:      72px;
  --drs-stitch-navbar-shadow: 0 1px 3px rgba(6, 26, 47, 0.08);

  /* Transitions (Stitch tightened 200ms → 150ms) */
  --drs-stitch-trans-fast:    150ms cubic-bezier(0.16, 1, 0.3, 1);
  --drs-stitch-trans-base:    200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus ring (brand-aligned, not browser blue) */
  --drs-stitch-focus-ring:    0 0 0 3px rgba(26, 75, 58, 0.35);

  /* Pill radius */
  --drs-stitch-pill-radius:   999px;

  /* CTA palette additions — Anaya (gold-outline) + WhatsApp (green) */
  --drs-cta-anaya-bg:         transparent;
  --drs-cta-anaya-border:     var(--ds-canvas-warm, #f4eedb);
  --drs-cta-anaya-text:       var(--ds-brand, #1a4b3a);
  --drs-cta-whatsapp-bg:      #25D366;
  --drs-cta-whatsapp-bg-hover:#1ebe57;
  --drs-cta-whatsapp-text:    #ffffff;

  /* Tap target minimum (≥44px per Pro mobile fix) */
  --drs-stitch-tap-min:       44px;
}

/* ============================================================
   2. TYPOGRAPHY
   Applies Stitch's type scale site-wide with brand colors.
   Uses fluid clamp so mobile doesn't overflow.
   ============================================================ */

html body h1,
html body .ekit-heading--title h1,
html body .elementor-heading-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: var(--drs-stitch-h1-size);
  line-height: var(--drs-stitch-h-leading);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

html body h2 {
  font-size: var(--drs-stitch-h2-size);
  line-height: var(--drs-stitch-h-leading);
  letter-spacing: -0.015em;
}

html body h3 {
  font-size: var(--drs-stitch-h3-size);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

html body,
html body p,
html body li,
html body .elementor-widget-text-editor p {
  line-height: var(--drs-stitch-body-leading);
}

/* ============================================================
   3. SECTION + CARD RHYTHM
   Standardizes vertical spacing across the site.
   Targets common Elementor section selectors.
   ============================================================ */

html body .elementor-section.elementor-top-section,
html body section.drs-stitch-section {
  padding-top:    var(--drs-stitch-section-pad-y);
  padding-bottom: var(--drs-stitch-section-pad-y);
}

html body .drs-stitch-card,
html body .elementor-widget-icon-box .elementor-icon-box-wrapper {
  padding: var(--drs-stitch-card-pad);
}

/* Bento grid pattern — opt-in via .drs-stitch-bento on container */
html body .drs-stitch-bento {
  display: grid;
  gap: var(--drs-stitch-bento-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

html body .drs-stitch-bento > * {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 16:9 procedural thumbnails (Stitch's locked aspect) */
html body .drs-stitch-thumb,
html body .drs-stitch-bento img[data-thumb="16-9"] {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ============================================================
   4. STICKY NAVBAR (72px + soft shadow)
   Targets iCare theme header common selectors.
   ============================================================ */

html body .site-header,
html body header.elementor-location-header,
html body .ekit-megamenu-wrapper,
html body header[class*="header"] {
  position: sticky;
  top: 0;
  z-index: 9000;
  min-height: var(--drs-stitch-navbar-h);
  background: var(--ds-canvas, #fcfaf4);
  box-shadow: var(--drs-stitch-navbar-shadow);
  transition: box-shadow var(--drs-stitch-trans-base);
}

/* Hide shadow at top of page; show on scroll (requires JS or use IntersectionObserver) */
html body .site-header[data-scrolled="false"] {
  box-shadow: none;
}

/* ============================================================
   5. PILL-SHAPED CTA SYSTEM
   Unifies all primary/secondary/tertiary buttons site-wide.
   Brand-aligned colors, ≥44px tap target, fast hover.
   ============================================================ */

html body .drs-stitch-btn,
html body .elementor-button-link,
html body a.drs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  min-height: var(--drs-stitch-tap-min);
  border-radius: var(--drs-stitch-pill-radius);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--drs-stitch-trans-fast),
    color var(--drs-stitch-trans-fast),
    transform var(--drs-stitch-trans-fast),
    box-shadow var(--drs-stitch-trans-fast);
}

/* Primary — brand green */
html body .drs-stitch-btn--primary,
html body .drs-btn--primary {
  background: var(--ds-brand, #1a4b3a);
  color: #ffffff;
}

html body .drs-stitch-btn--primary:hover,
html body .drs-btn--primary:hover {
  background: var(--ds-brand-deep, #0d3528);
  transform: translateY(-1px);
}

/* Secondary — warm cream outline */
html body .drs-stitch-btn--secondary,
html body .drs-btn--secondary {
  background: transparent;
  color: var(--ds-brand, #1a4b3a);
  border: 1.5px solid var(--ds-brand-100, #c4d2cb);
}

html body .drs-stitch-btn--secondary:hover,
html body .drs-btn--secondary:hover {
  background: var(--ds-canvas-warm, #f4eedb);
  border-color: var(--ds-brand, #1a4b3a);
}

/* Anaya CTA (gold-outline pill with AI sparkle) */
html body .drs-cta-anaya {
  background: var(--drs-cta-anaya-bg);
  color: var(--drs-cta-anaya-text);
  border: 1.5px solid var(--drs-cta-anaya-border);
}

html body .drs-cta-anaya:hover {
  background: var(--ds-canvas-warm, #f4eedb);
  border-color: var(--ds-brand, #1a4b3a);
}

html body .drs-cta-anaya::before {
  content: "✦";
  font-size: 0.85em;
  margin-right: 4px;
}

/* WhatsApp CTA (bright green pill) */
html body .drs-cta-whatsapp {
  background: var(--drs-cta-whatsapp-bg);
  color: var(--drs-cta-whatsapp-text);
}

html body .drs-cta-whatsapp:hover {
  background: var(--drs-cta-whatsapp-bg-hover);
  transform: translateY(-1px);
}

/* ============================================================
   6. FOCUS RINGS (WCAG 2.4.7 compliant, brand-aligned)
   Replaces browser default blue ring.
   ============================================================ */

html body :focus-visible,
html body button:focus-visible,
html body a:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: none;
  box-shadow: var(--drs-stitch-focus-ring);
  border-radius: 4px;
}

html body .drs-stitch-btn:focus-visible,
html body .drs-btn:focus-visible {
  box-shadow: var(--drs-stitch-focus-ring);
}

/* ============================================================
   7. CARD / IMAGE POLISH
   Subtle shadows + radii to match Stitch's editorial feel.
   ============================================================ */

html body .drs-stitch-card,
html body .drs-stitch-bento > .drs-stitch-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(6, 26, 47, 0.05);
  transition: transform var(--drs-stitch-trans-fast), box-shadow var(--drs-stitch-trans-fast);
}

html body .drs-stitch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 26, 47, 0.08);
}

/* ============================================================
   8. MOBILE FIXES (Pro's mobile pass — applied site-wide)
   Forces no horizontal overflow, fluid type, stack stats.
   ============================================================ */

@media (max-width: 480px) {
  html body {
    overflow-x: hidden;
  }

  html body .drs-stitch-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--drs-stitch-space-2);
  }

  html body .drs-stitch-stats .stat-item {
    text-align: left;
    padding: var(--drs-stitch-space-2) 0;
    border-bottom: 1px solid var(--ds-line-soft, #e1d9c1);
  }

  html body .drs-stitch-stats .stat-item:last-child {
    border-bottom: none;
  }

  /* Tighten section padding on mobile */
  html body .elementor-section.elementor-top-section {
    padding-left: var(--drs-stitch-space-3);
    padding-right: var(--drs-stitch-space-3);
  }
}

/* ============================================================
   9. ACCESSIBILITY — reduce motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html body * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* End of stitch-overlay.css */