/* =========================================================
   Elementor Overrides — Mamemyly Consulting Theme
   Comprehensive rules to prevent Elementor defaults from
   breaking theme styles, colors, border-radius, and typography.
   ========================================================= */

/* ==========================================================
   1. RESET ELEMENTOR DEFAULTS
   ========================================================== */

/* Zero out Elementor section/column default padding */
.elementor-section {
  padding: 0;
}
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container);
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0;
}
.elementor-inner-section {
  margin: 0;
  padding: 0;
}
.elementor-section-full_width {
  padding-left: 0;
  padding-right: 0;
}

/* Prevent Elementor from adding unwanted margins */
.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

/* Ensure full-width inside page content */
.elementor-page .page-content > .elementor {
  width: 100%;
}
.elementor-element .elementor-widget-container {
  overflow: visible;
}

/* Inherit fonts */
.elementor-widget-container {
  font-family: inherit;
}

/* Reset Elementor default link colors */
.elementor a {
  color: inherit;
}
.elementor a:hover {
  color: inherit;
}


/* ==========================================================
   2. TYPOGRAPHY — Headings & Body
   ========================================================== */

.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
  font-family: var(--font-display) !important;
  color: var(--navy-700);
  letter-spacing: -.02em;
}

.elementor p {
  font-family: var(--font-body, var(--font-sans));
}

/* Elementor heading widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display) !important;
  letter-spacing: -.02em;
}

/* Hero content heading inherits display font */
.elementor .hero-content h1,
.elementor .hero h1,
.elementor .hero-center h1,
.elementor .page-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: -.02em;
}


/* Section headings use display font */
.elementor .section-head h2 {
  font-family: var(--font-display) !important;
  font-weight: 500;
  letter-spacing: -.02em;
}


/* ==========================================================
   3. BUTTONS — Ensure proper styling everywhere
   ========================================================== */

/* Base button reset inside Elementor */
.elementor .btn {
  display: inline-flex !important;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.6rem !important;
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* SVG icons inside buttons */
.elementor .btn svg {
  width: 18px !important;
  height: 18px !important;
  transition: transform .35s var(--ease);
  flex-shrink: 0;
}
.elementor .btn:hover svg {
  transform: translateX(4px);
}

/* Primary button — white text on navy */
.elementor .btn-primary,
.elementor .btn-primary:link,
.elementor .btn-primary:visited,
.elementor .btn-primary:active,
.elementor .btn-primary:focus {
  background: var(--navy-700) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px -10px rgba(14,42,71,.6);
}
.elementor .btn-primary:hover {
  background: var(--navy-800) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(14,42,71,.7);
}

/* Accent button — white text on emerald */
.elementor .btn-accent,
.elementor .btn-accent:link,
.elementor .btn-accent:visited,
.elementor .btn-accent:active,
.elementor .btn-accent:focus {
  background: var(--emerald-600) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px -8px rgba(42,157,127,.55);
}
.elementor .btn-accent:hover {
  background: var(--emerald-700) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(42,157,127,.65);
}

/* Ghost button */
.elementor .btn-ghost,
.elementor .btn-ghost:link,
.elementor .btn-ghost:visited {
  background: transparent !important;
  color: var(--navy-700) !important;
  border: 1.5px solid var(--line) !important;
}
.elementor .btn-ghost:hover {
  background: var(--navy-700) !important;
  color: #fff !important;
  border-color: var(--navy-700) !important;
}

/* Light button (on dark backgrounds) */
.elementor .btn-light,
.elementor .btn-light:link,
.elementor .btn-light:visited {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px);
}
.elementor .btn-light:hover {
  background: #fff !important;
  color: var(--navy-700) !important;
}

/* Text button */
.elementor .btn-text {
  color: var(--navy-700) !important;
  font-weight: 600;
  padding: .5rem 0 !important;
  border-bottom: 1px solid var(--navy-700);
  border-radius: 0 !important;
}
.elementor .btn-text:hover {
  color: var(--emerald-600) !important;
  border-color: var(--emerald-600);
}


/* ==========================================================
   4. DARK SECTIONS — Force white text
   ========================================================== */

/* CTA Band */
.elementor .cta-band,
.elementor .cta-band *,
.elementor [class*="cta-band"] {
  color: #fff !important;
}
.elementor .cta-band p {
  color: rgba(255,255,255,.75) !important;
}
.elementor .cta-band h2 {
  color: #fff !important;
}
.elementor .cta-band .meta {
  color: rgba(255,255,255,.6) !important;
}
.elementor .cta-band .meta svg {
  color: var(--emerald-300) !important;
}

/* Trust strip */
.elementor .trust,
.elementor .trust * {
  color: #fff !important;
}
.elementor .trust .trust-lbl {
  color: var(--emerald-300) !important;
}
.elementor .trust .lbl {
  color: rgba(255,255,255,.6) !important;
}

/* Article hero (dark overlay) */
.elementor .article-hero,
.elementor .article-hero * {
  color: #fff !important;
}
.elementor .article-hero h1 {
  color: #fff !important;
}
.elementor .article-hero p {
  color: rgba(255,255,255,.8) !important;
}
.elementor .article-hero .eyebrow {
  color: var(--emerald-300) !important;
}

/* Footer */
.elementor footer,
.elementor footer * {
  color: rgba(255,255,255,.7);
}
.elementor footer h5 {
  color: #fff !important;
}
.elementor footer .foot-brand {
  color: #fff !important;
}

/* Method aside (dark panel) */
.elementor .method-aside h3 {
  color: #fff !important;
}
.elementor .method-aside p {
  color: rgba(255,255,255,.75) !important;
}
.elementor .method-aside .quote {
  color: #fff !important;
}

/* Audit aside info card */
.elementor .audit-aside .info-card h4 {
  color: #fff !important;
}
.elementor .audit-aside .info-card li {
  color: rgba(255,255,255,.8) !important;
}


/* ==========================================================
   5. CARDS — Preserve border-radius
   ========================================================== */

.elementor .pillar,
.elementor .svc,
.elementor .test-card,
.elementor .blog-card,
.elementor .contact-card,
.elementor .why-card,
.elementor .form-card,
.elementor .aud-card,
.elementor .method-step,
.elementor .method-aside,
.elementor .solution-row,
.elementor .expertise-visual,
.elementor .article-cta,
.elementor .audit-aside .info-card,
.elementor .audit-aside .help-card {
  border-radius: var(--radius-lg) !important;
}

/* Smaller radius elements */
.elementor .why-feat,
.elementor .compare-col,
.elementor .choice {
  border-radius: var(--radius) !important;
}

/* Keep hover shadows working */
.elementor .pillar:hover,
.elementor .svc:hover,
.elementor .test-card:hover,
.elementor .blog-card:hover,
.elementor .contact-card:hover,
.elementor .aud-card:hover,
.elementor .solution-row:hover {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}


/* ==========================================================
   6. NAVIGATION — No bullets, no list-style
   ========================================================== */

.elementor .nav-links,
.elementor .nav-links a,
.elementor .mobile-menu,
.elementor .mobile-menu a,
.elementor .foot-links,
.elementor .foot-links a,
.elementor .foot-links li,
.elementor .nav-links li,
.elementor footer ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
}

.elementor .nav-links a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  position: relative;
  padding: .4rem 0;
  transition: color .25s var(--ease);
}

.elementor .mobile-menu a:not(.btn) {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: rgba(255,255,255,.85);
}

.elementor .foot-links a {
  color: rgba(255,255,255,.65);
  font-size: .92rem;
}


/* ==========================================================
   7. EYEBROW LABEL
   ========================================================== */

.elementor .eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--emerald-600);
}
.elementor .eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--emerald-600);
}
.elementor .eyebrow.light {
  color: var(--emerald-300) !important;
}
.elementor .eyebrow.light::before {
  background: var(--emerald-300);
}


/* ==========================================================
   8. CONTAINER & FULL-WIDTH LAYOUT
   ========================================================== */

/* Ensure containers match theme widths */
.elementor .container {
  width: min(100% - 2.4rem, var(--container)) !important;
  margin-inline: auto !important;
}
.elementor .container-tight {
  width: min(100% - 2.4rem, var(--container-tight)) !important;
  margin-inline: auto !important;
}

/* Full-width Elementor sections */
.elementor-section-full_width > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* Boxed sections */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container);
}


/* ==========================================================
   9. PILLAR GRID — Keep theme columns
   ========================================================== */

.elementor .pillars {
  display: grid !important;
  gap: 1.4rem;
}
@media (max-width: 1100px) {
  .elementor .pillars[style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 880px) {
  .elementor .pillars {
    grid-template-columns: 1fr !important;
  }
}

/* Why Us + Compare grid */
.elementor .why-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 980px) {
  .elementor .why-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem;
  }
}
.elementor .why-features {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}
@media (max-width: 560px) {
  .elementor .why-features {
    grid-template-columns: 1fr !important;
  }
}


/* Expertise section */
.elementor .expertise-section {
  padding: 5rem 0;
}
.elementor .expertise-blocks {
  display: flex !important;
  flex-direction: column;
  gap: 6rem;
}
.elementor .expertise-block {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.elementor .expertise-block.reverse {
  direction: rtl;
}
.elementor .expertise-block.reverse > * {
  direction: ltr;
}
@media (max-width: 980px) {
  .elementor .expertise-block {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
    direction: ltr !important;
  }
}
.elementor .expertise-text .eyebrow {
  margin-bottom: 1.2rem;
}
.elementor .expertise-text h2 {
  margin-bottom: 1.4rem;
}
.elementor .expertise-text ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 1.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.elementor .expertise-text ul li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .97rem;
  color: var(--ink-2);
}
.elementor .expertise-text ul li svg {
  width: 20px;
  color: var(--emerald-600);
  flex: 0 0 20px;
  margin-top: .15rem;
}
.elementor .expertise-visual {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border-radius: var(--radius-lg) !important;
  padding: 2.5rem;
  border: 1px solid var(--line);
  aspect-ratio: 1.1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 680px) {
  .elementor .expertise-visual {
    aspect-ratio: auto;
    padding: 1.8rem;
    min-height: auto;
  }
  .elementor .expertise-visual > div {
    max-width: 100% !important;
  }
}

/* Process bar */
.elementor .process-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}
@media (max-width: 680px) {
  .elementor .process-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.2rem;
  }
}
@media (max-width: 480px) {
  .elementor .process-bar {
    grid-template-columns: 1fr !important;
  }
}
.elementor .process-step {
  text-align: center;
}
.elementor .process-step .num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: .8rem;
}
.elementor .process-step h4 {
  font-size: 1rem;
  margin-bottom: .4rem;
}
.elementor .process-step p {
  font-size: .85rem;
  color: var(--muted);
}

/* ==========================================================
   10. SERVICE GRID
   ========================================================== */

.elementor .svc-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
}
@media (max-width: 980px) {
  .elementor .svc-grid .svc {
    grid-column: span 12 !important;
  }
}


/* ==========================================================
   11. TESTIMONIALS
   ========================================================== */

.elementor .test-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 880px) {
  .elementor .test-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================
   12. BLOG GRID
   ========================================================== */

.elementor .blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 980px) {
  .elementor .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .elementor .blog-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================
   13. FORM ELEMENTS
   ========================================================== */

.elementor .field input,
.elementor .field select,
.elementor .field textarea {
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px !important;
  background: #fff;
  font-size: .95rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.elementor .field input:focus,
.elementor .field select:focus,
.elementor .field textarea:focus {
  outline: none;
  border-color: var(--emerald-600) !important;
  box-shadow: 0 0 0 4px rgba(42,157,127,.12) !important;
}


/* ==========================================================
   14. REVEAL ANIMATIONS (keep working in Elementor)
   ========================================================== */

.elementor .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.elementor .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.elementor .reveal.d1 { transition-delay: .1s; }
.elementor .reveal.d2 { transition-delay: .2s; }
.elementor .reveal.d3 { transition-delay: .3s; }
.elementor .reveal.d4 { transition-delay: .4s; }
.elementor .reveal.d5 { transition-delay: .5s; }


/* ==========================================================
   15. MISC ELEMENTOR FIXES
   ========================================================== */

/* Elementor icon widget inside theme buttons */
.elementor .elementor-icon svg {
  width: inherit;
  height: inherit;
}

/* Prevent Elementor color picker from overriding dark section text */
.elementor .cta-band .elementor-widget-container,
.elementor .trust .elementor-widget-container,
.elementor .article-hero .elementor-widget-container,
.elementor footer .elementor-widget-container {
  color: inherit !important;
}

/* Elementor button widget — ensure it does not conflict */
.elementor .elementor-button {
  border-radius: 999px !important;
}

/* Fix potential Elementor widget spacing in sections */
.elementor-widget-wrap > .elementor-widget {
  width: 100%;
}

/* WhatsApp fab z-index on Elementor pages */
.elementor-page .wa-fab {
  z-index: 9999;
}


/* ==========================================================
   16. HERO — Centered with Background Image
   ========================================================== */

.elementor .hero.hero--bg {
  padding: 12rem 0 7rem !important;
  background: var(--navy-900) !important;
  position: relative;
  overflow: hidden;
}
.elementor .hero.hero--bg::before {
  display: none !important;
}
.elementor .hero-bg-img {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}
.elementor .hero-bg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(6px) brightness(.45);
}
.elementor .hero-center {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.elementor .hero.hero--bg h1 {
  color: #fff !important;
}
.elementor .hero.hero--bg h1 span.accent {
  background: linear-gradient(120deg, var(--emerald-500) 0%, var(--emerald-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-style: italic;
}
.elementor .hero.hero--bg .hero-lede {
  color: rgba(255,255,255,.8) !important;
  margin: 1.8rem auto 2.2rem;
  max-width: 620px;
}
.elementor .hero.hero--bg .hero-cta {
  justify-content: center;
}
.elementor .hero.hero--bg .hero-meta {
  justify-content: center;
  border-top-color: rgba(255,255,255,.15);
}
.elementor .hero.hero--bg .hero-meta .num {
  color: #fff !important;
}
.elementor .hero.hero--bg .hero-meta .lbl {
  color: rgba(255,255,255,.55) !important;
}
.elementor .hero.hero--bg .eyebrow.light {
  color: var(--emerald-300) !important;
}
.elementor .hero.hero--bg .eyebrow.light::before {
  background: var(--emerald-300) !important;
}
@media (max-width: 760px) {
  .elementor .hero.hero--bg {
    padding: 9rem 0 5rem !important;
  }
}


/* ==========================================================
   17. SOLUTIONS GRID — Proper layout
   ========================================================== */

.elementor .solutions-grid {
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem;
}
.elementor .solution-row {
  display: grid !important;
  grid-template-columns: 90px 1fr 1.2fr !important;
  gap: 3rem !important;
  align-items: center;
  padding: 2.4rem !important;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) !important;
  transition: all .4s var(--ease);
}
.elementor .solution-row:hover {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  transform: translateY(-3px);
}
@media (max-width: 880px) {
  .elementor .solution-row {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}
.elementor .solution-num {
  font-family: var(--font-display) !important;
  font-size: 3.5rem !important;
  color: var(--emerald-600) !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
.elementor .solution-main h3 {
  margin-bottom: .6rem;
}
.elementor .solution-main p {
  margin: 0;
  font-size: .95rem;
}
.elementor .solution-main .eyebrow {
  margin-bottom: .5rem;
}
.elementor .solution-deliv {
  display: flex !important;
  flex-direction: column;
  gap: .6rem;
  border-left: 2px solid var(--emerald-600) !important;
  padding-left: 1.4rem !important;
}
.elementor .solution-deliv .lbl {
  font-size: .7rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emerald-700) !important;
  font-weight: 700;
  margin-bottom: .2rem;
}
.elementor .solution-deliv ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.elementor .solution-deliv li {
  font-size: .88rem;
  color: var(--ink-2);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.elementor .solution-deliv li::before {
  content: "\203A";
  color: var(--emerald-600);
  font-weight: 700;
}
.elementor .sol-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.elementor .sol-features li {
  font-size: .85rem;
  padding: .35rem .8rem;
  background: var(--surface);
  border-radius: 999px;
  color: var(--ink-2);
}