/* ============================================================
   Mudale LP — Polish Layer v2
   Applies the Anthropic frontend-design skill's principles:
   - Typography pairing (display 800 vs body 400, same family)
   - Atmospheric noise grain overlay
   - Cohesive cyan accent system (dominant + sharp accent)
   - Single high-impact page-load reveal
   - Refined micro-ornaments
   No layout changes, no brand-color changes — pure refinement.
   ============================================================ */

/* --- 1. Accent system tokens --- */
:root {
  --brand-cyan: #2DC4D8;
  --brand-cyan-soft: rgba(45, 196, 216, 0.14);
  --brand-cyan-glow: 0 12px 32px -8px rgba(45, 196, 216, 0.38);
  --brand-purple-deep: #2D2475;
}

/* --- 2. Display typography pairing (Assistant 800 vs body 400) ---
   Uses !important to win the cascade against Elementor's per-element CSS
   in post-5.css (which sets weight 300 on specific element IDs).
   Note: Hebrew glyphs collide under negative letter-spacing — keep tracking
   at 0 for Hebrew/RTL content; only Latin gets the tighter -0.018em. */
body .elementor-widget-heading h1.elementor-heading-title,
body .elementor-widget-heading h2.elementor-heading-title,
body .elementor-widget-heading h3.elementor-heading-title {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

body .elementor-widget-heading h4.elementor-heading-title,
body .elementor-widget-heading h5.elementor-heading-title,
body .elementor-widget-heading h6.elementor-heading-title {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Negative tracking only for explicit Latin/LTR content */
html[lang^="en"] body .elementor-widget-heading .elementor-heading-title,
[dir="ltr"] .elementor-widget-heading .elementor-heading-title {
  letter-spacing: -0.018em !important;
}

/* Body copy stays at 400 with comfortable line-height — defined in v1 */
.elementor-widget-text-editor p,
.elementor-widget-text-editor {
  font-weight: 400;
}

/* --- 3. Atmospheric noise grain — fixed, blend-mode overlay --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* --- 4. Cyan accent system across interactive elements --- */

/* Link underlines */
a:where(:not(.wp-element-button):not(.elementor-button):not(.joinchat__button)) {
  text-decoration-color: var(--brand-cyan);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Swiper pagination active dot — cyan instead of black */
.swiper-pagination-bullet-active {
  background: var(--brand-cyan) !important;
}

/* Focus rings, form inputs */
.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus,
button:focus-visible,
a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--brand-cyan-soft),
              0 0 0 1px var(--brand-cyan) !important;
}

/* Primary CTA hover glow shifts to cyan-tinted */
.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover {
  box-shadow: var(--brand-cyan-glow), 0 6px 18px rgba(0, 0, 0, 0.10) !important;
}

/* Swiper nav arrow ring on hover */
.elementor-swiper-button:hover {
  box-shadow: 0 0 0 2px var(--brand-cyan), 0 10px 24px rgba(45, 196, 216, 0.25) !important;
  color: var(--brand-cyan) !important;
}

/* --- 5. Stat numbers — tighter tracking, subtle vertical rule beneath --- */
.elementor-widget-counter .elementor-counter-number-wrapper {
  letter-spacing: -0.04em;
  font-weight: 800;
}

.elementor-widget-counter .elementor-counter-title {
  position: relative;
  padding-top: 8px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* --- 6. Quiet ornaments instead of plain divider lines --- */
.elementor-widget-divider .elementor-divider-separator {
  opacity: 0.6;
  background-image: linear-gradient(
    to right,
    transparent 0,
    transparent calc(50% - 28px),
    currentColor calc(50% - 28px),
    currentColor calc(50% - 22px),
    transparent calc(50% - 22px),
    transparent calc(50% - 4px),
    currentColor calc(50% - 4px),
    currentColor calc(50% + 4px),
    transparent calc(50% + 4px),
    transparent calc(50% + 22px),
    currentColor calc(50% + 22px),
    currentColor calc(50% + 28px),
    transparent calc(50% + 28px),
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: center;
  background-color: transparent !important;
  border: none !important;
  height: 2px !important;
}

/* --- 7. Google reviews — quiet cyan left-edge accent on hover --- */
.ti-widget .ti-review-item,
.ti-reviews-container .ti-review-item {
  position: relative;
  border-inline-start: 3px solid transparent !important;
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ti-widget .ti-review-item:hover,
.ti-reviews-container .ti-review-item:hover {
  border-inline-start-color: var(--brand-cyan) !important;
}

/* --- 8. Testimonial carousel — tighter font, calmer quote mark --- */
.elementor-testimonial__text,
.elementor-testimonial__content p {
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
}

.elementor-testimonial__name {
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* --- 9. Single high-impact page-load reveal --- */
/* Stagger the immediate children of the first 2 sections */
@keyframes mudale-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.e-con.e-parent:nth-of-type(1) > * ,
.e-con.e-parent:nth-of-type(2) > * {
  animation: mudale-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.e-con.e-parent:nth-of-type(1) > *:nth-child(1) { animation-delay: 0.05s; }
.e-con.e-parent:nth-of-type(1) > *:nth-child(2) { animation-delay: 0.18s; }
.e-con.e-parent:nth-of-type(2) > *:nth-child(1) { animation-delay: 0.10s; }
.e-con.e-parent:nth-of-type(2) > *:nth-child(2) { animation-delay: 0.22s; }
.e-con.e-parent:nth-of-type(2) > *:nth-child(3) { animation-delay: 0.34s; }
.e-con.e-parent:nth-of-type(2) > *:nth-child(4) { animation-delay: 0.46s; }
.e-con.e-parent:nth-of-type(2) > *:nth-child(5) { animation-delay: 0.58s; }

/* --- 10. WhatsApp button — refined ring instead of harsh shadow --- */
.joinchat__button,
.joinchat .joinchat__button {
  box-shadow:
    0 0 0 4px rgba(37, 211, 102, 0.18),
    0 10px 28px rgba(37, 211, 102, 0.28) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.joinchat__button:hover,
.joinchat .joinchat__button:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 6px rgba(37, 211, 102, 0.22),
    0 14px 36px rgba(37, 211, 102, 0.40) !important;
}

/* --- 11. Buttons — slightly more confident hover lift --- */
.elementor-button:hover,
.elementor-button-link:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px) scale(1.01);
}

/* --- 12. Section transitions — gentle fade boundary between sections --- */
/* (Pure visual continuity; doesn't affect layout) */
.e-con.e-parent {
  position: relative;
}

/* --- 13. Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
  .e-con.e-parent:nth-of-type(1) > *,
  .e-con.e-parent:nth-of-type(2) > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- 14. Print-friendly --- */
@media print {
  body::before { display: none; }
}