/* ============================================================
   Mumbai Global Shapers — polish.css
   Non-destructive overrides on top of the WordPress/Elementor base.
   Targets: typography, buttons, cards, nav, spacing, mobile.
   ============================================================ */

/* ── Google Fonts: Outfit for headings, keep system-ui for body ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&display=swap');

/* ── CSS tokens ── */
:root {
  --brand:        #090f34;   /* existing navy, keep brand */
  --brand-mid:    #1a2560;
  --brand-light:  #e8eaf6;
  --cta:          #2952e3;   /* brighter blue for CTAs */
  --cta-hover:    #1a3bbf;
  --text:         #1a1a2e;
  --muted:        #5c6380;
  --border:       #e2e5f0;
  --surface:      #f8f9ff;
  --radius-btn:   40px;
  --radius-card:  12px;
  --transition:   0.18s ease;
}

/* ── Headings: Outfit font + tighter tracking ── */
h1, h2, h3, h4,
.elementor-heading-title {
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Hero heading specifically */
.elementor-heading-title[class*="elementor-size-xxl"],
.elementor-heading-title[class*="elementor-size-xl"],
h1.elementor-heading-title {
  letter-spacing: -0.03em;
}

/* ── Body text: better line-height and color ── */
body, p, li, .elementor-text-editor {
  color: var(--text);
  line-height: 1.7;
}

/* ── Buttons: pill shape, smooth hover ── */
.elementor-button,
.elementor-button-link,
a.elementor-button {
  border-radius: var(--radius-btn) !important;
  background-color: var(--cta) !important;
  color: #fff !important;
  padding: 12px 28px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  border: none !important;
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(41, 82, 227, 0.25);
}

.elementor-button:hover,
.elementor-button-link:hover,
a.elementor-button:hover {
  background-color: var(--cta-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(41, 82, 227, 0.35) !important;
  color: #fff !important;
}

.elementor-button:active,
a.elementor-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(41, 82, 227, 0.2) !important;
}

/* ── Navigation ── */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color var(--transition) !important;
  letter-spacing: 0.01em;
}

.elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover {
  color: var(--cta) !important;
  text-decoration: none !important;
}

/* ── Site header: subtle shadow, sticky feel ── */
.elementor-location-header {
  box-shadow: 0 1px 0 var(--border), 0 2px 12px rgba(9,15,52,0.06);
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Section backgrounds: alternate softly ── */
.e-con:nth-child(even) > .e-con-inner > .elementor-section {
  background-color: var(--surface);
}

/* ── Cards: shaper cards, project cards ── */
.premium-person-container,
.elementor-widget-image figure,
[class*="elementor-post__card"] {
  border-radius: var(--radius-card) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  box-shadow: 0 1px 4px rgba(9,15,52,0.08);
}

.premium-person-container:hover,
.elementor-widget-image figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(9,15,52,0.14) !important;
}

/* Shaper name typography */
.premium-person-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
}

.premium-person-title {
  font-size: 13px !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}

/* ── Stats section: bolder numbers ── */
.elementor-counter-number,
.elementor-counter-number-wrapper {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: var(--brand) !important;
}

/* ── Links: consistent hover ── */
a:not(.elementor-button):not(.elementor-item) {
  transition: color var(--transition), opacity var(--transition);
}

a:not(.elementor-button):not(.elementor-item):hover {
  opacity: 0.8;
}

/* ── Focus ring: accessibility ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Form inputs ── */
input[type="text"],
input[type="email"],
textarea,
.elementor-field-textual {
  border-radius: 8px !important;
  border: 1.5px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: border-color var(--transition) !important;
  background: #fff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.elementor-field-textual:focus {
  border-color: var(--cta) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(41,82,227,0.12) !important;
}

/* ── Dividers: softer ── */
.elementor-divider-separator {
  border-color: var(--border) !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Mobile tweaks ── */
@media (max-width: 767px) {
  .elementor-heading-title {
    letter-spacing: -0.02em;
  }

  .elementor-button,
  a.elementor-button {
    padding: 13px 24px !important;
    font-size: 14px !important;
    width: auto !important;
  }

  .premium-person-container {
    margin-bottom: 12px;
  }

  /* Prevent tiny tap targets */
  .elementor-nav-menu a,
  .elementor-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
}