/* ============================================================
   MAURY CMO BRAND LAYER — Hello Elementor Child Theme
   Drop these CSS variables anywhere in Elementor Custom CSS
   or use the utility classes on any widget/section.
   ============================================================ */

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand colors */
  --mcmo-dark:       #0A1628;
  --mcmo-charcoal:   #1A1A2E;
  --mcmo-blue:       #1B3A8A;
  --mcmo-blue-mid:   #2D5FC4;
  --mcmo-blue-light: #4A7FE5;
  --mcmo-gold:       #C9A84C;
  --mcmo-gold-dim:   rgba(201,168,76,0.15);
  --mcmo-red:        #C0392B;
  --mcmo-red-dim:    rgba(192,57,43,0.15);
  --mcmo-off-white:  #F7F7F2;
  --mcmo-white:      #FFFFFF;

  /* C3 Gradient: charcoal → royal blue */
  --mcmo-grad:       linear-gradient(135deg, #0A1628 0%, #1A1A2E 40%, #1B3A8A 100%);
  --mcmo-grad-h:     linear-gradient(90deg,  #0A1628 0%, #1B3A8A 100%);
  --mcmo-grad-v:     linear-gradient(180deg, #0A1628 0%, #1B3A8A 100%);
  --mcmo-grad-accent:linear-gradient(90deg, #C9A84C 0%, #C0392B 100%);

  /* Radii */
  --mcmo-r-btn:    12px;
  --mcmo-r-card:   16px;
  --mcmo-r-panel:  20px;
  --mcmo-r-pill:   100px;
  --mcmo-r-input:  10px;

  /* Webflow 5-layer shadow */
  --mcmo-shadow:
    rgba(0,0,0,0)    0px 84px 24px,
    rgba(0,0,0,0.01) 0px 54px 22px,
    rgba(0,0,0,0.04) 0px 30px 18px,
    rgba(0,0,0,0.08) 0px 13px 13px,
    rgba(0,0,0,0.09) 0px  3px  7px;
  --mcmo-shadow-hover:
    rgba(0,0,0,0)    0px 96px 28px,
    rgba(0,0,0,0.02) 0px 62px 26px,
    rgba(0,0,0,0.06) 0px 36px 22px,
    rgba(0,0,0,0.12) 0px 16px 16px,
    rgba(0,0,0,0.14) 0px  4px 10px;
}

/* ── Global Body / Elementor Base ────────────────────────── */
body {
  font-family: 'Inter', 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Map Elementor's built-in global color CSS vars to brand tokens.
   After you set Global Colors in Elementor (see guide below),
   Elementor generates --e-global-color-XXXX vars. These rules
   make our tokens follow whatever you pick there. */
:root {
  --e-global-color-primary:    var(--mcmo-gold);
  --e-global-color-secondary:  var(--mcmo-blue);
  --e-global-color-text:       var(--mcmo-dark);
  --e-global-color-accent:     var(--mcmo-red);
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: -0.03em;
}
h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(36px, 5.5vw, 80px); font-weight: 800; }
h2, .elementor-heading-title.elementor-size-xl  { font-size: clamp(26px, 3.8vw, 56px); font-weight: 700; }
h3, .elementor-heading-title.elementor-size-large { font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; }

p, .elementor-text-editor, .elementor-widget-text-editor p {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

/* ── Elementor Button Overrides ──────────────────────────── */
/* Applies brand styles to ALL Elementor button widgets */
.elementor-button {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: var(--mcmo-r-btn) !important;
  transition: transform 0.25s cubic-bezier(0.19,1,0.22,1), box-shadow 0.25s, background 0.2s !important;
  box-shadow: var(--mcmo-shadow) !important;
  overflow: hidden;
  position: relative;
}
.elementor-button:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--mcmo-shadow-hover) !important;
}

/* Red CTA button — add CSS class "btn-red" on any Elementor button widget */
.elementor-button.btn-red,
.elementor-widget-button .elementor-button.btn-red {
  background: var(--mcmo-red) !important;
  color: var(--mcmo-white) !important;
  box-shadow: var(--mcmo-shadow), 0 0 28px rgba(192,57,43,0.28) !important;
}
.elementor-button.btn-red:hover {
  background: #a83225 !important;
  box-shadow: var(--mcmo-shadow-hover), 0 0 40px rgba(192,57,43,0.4) !important;
}

/* Gold ghost button — add CSS class "btn-gold" */
.elementor-button.btn-gold {
  background: transparent !important;
  color: var(--mcmo-gold) !important;
  border: 1.5px solid var(--mcmo-gold) !important;
  box-shadow: none !important;
}
.elementor-button.btn-gold:hover {
  background: var(--mcmo-gold-dim) !important;
  color: var(--mcmo-gold) !important;
}

/* Blue button — add CSS class "btn-blue" */
.elementor-button.btn-blue {
  background: var(--mcmo-blue) !important;
  color: var(--mcmo-white) !important;
}
.elementor-button.btn-blue:hover {
  background: var(--mcmo-blue-mid) !important;
}

/* Shimmer sweep on hover for red & blue buttons */
.elementor-button.btn-red::after,
.elementor-button.btn-blue::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.45s ease;
  pointer-events: none;
}
.elementor-button.btn-red:hover::after,
.elementor-button.btn-blue:hover::after { left: 160%; }

/* ── Section Background Utilities ────────────────────────── */
/* Add these CSS classes to Elementor sections via Advanced → CSS Classes */

/* Dark C3 gradient section */
.section-c3 {
  background: var(--mcmo-grad) !important;
}
/* Charcoal section */
.section-charcoal {
  background: var(--mcmo-charcoal) !important;
}
/* Off-white light section */
.section-light {
  background: var(--mcmo-off-white) !important;
}
/* Royal blue section */
.section-blue {
  background: var(--mcmo-blue) !important;
}

/* ── Overline / Label Utility ────────────────────────────── */
/* Add CSS class "overline" to a Heading widget (h6) */
.elementor-heading-title.overline,
.elementor-widget-heading .overline {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--mcmo-gold) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.elementor-heading-title.overline::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mcmo-gold);
  flex-shrink: 0;
}

/* ── Card Utilities ──────────────────────────────────────── */
/* Add CSS class "card-dark" to any Elementor column or section */
.card-dark {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--mcmo-r-card) !important;
  box-shadow: var(--mcmo-shadow) !important;
  transition: transform 0.3s cubic-bezier(0.19,1,0.22,1), box-shadow 0.3s, border-color 0.3s !important;
}
.card-dark:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--mcmo-shadow-hover) !important;
  border-color: rgba(201,168,76,0.3) !important;
}

/* "card-light" for use on off-white sections */
.card-light {
  background: var(--mcmo-white) !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: var(--mcmo-r-card) !important;
  box-shadow: var(--mcmo-shadow) !important;
  transition: transform 0.3s cubic-bezier(0.19,1,0.22,1), box-shadow 0.3s !important;
}
.card-light:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--mcmo-shadow-hover) !important;
}

/* Gold top-bar accent that animates in on hover — add "card-bar" */
.card-bar {
  position: relative !important;
  overflow: hidden !important;
}
.card-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mcmo-grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.19,1,0.22,1);
  z-index: 1;
}
.card-bar:hover::before { transform: scaleX(1); }

/* ── Gradient Divider Line ───────────────────────────────── */
/* Add class "gold-divider" to a Divider widget */
.elementor-widget-divider.gold-divider .elementor-divider-separator {
  border-image: linear-gradient(90deg, #C9A84C, #C0392B) 1 !important;
  border-top-width: 3px !important;
  width: 80px !important;
}

/* ── Gradient Text Utility ───────────────────────────────── */
/* Add class "grad-text" to any Heading widget */
.elementor-heading-title.grad-text {
  background: linear-gradient(90deg, var(--mcmo-gold), var(--mcmo-blue-light)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Stat Number Utility ─────────────────────────────────── */
/* Add class "stat-gold" to a Heading or Counter widget number */
.elementor-counter-number-wrapper.stat-gold,
.elementor-heading-title.stat-gold {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(40px, 5vw, 60px) !important;
  font-weight: 800 !important;
  color: var(--mcmo-gold) !important;
  letter-spacing: -2px !important;
}

/* ── Blurred Orb Decorations ─────────────────────────────── */
/* Add class "orb-gold", "orb-blue", "orb-red" to an HTML widget */
.orb-gold, .orb-blue, .orb-red {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}
.orb-gold { background: radial-gradient(circle, #C9A84C, transparent 70%); }
.orb-blue { background: radial-gradient(circle, #1B3A8A, transparent 70%); }
.orb-red  { background: radial-gradient(circle, #C0392B, transparent 70%); }

/* ── Dot Grid Background ─────────────────────────────────── */
/* Add class "dot-grid" to any section */
.dot-grid {
  position: relative;
}
.dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,168,76,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Icon List (Footer nav style) ───────────────────────── */
.elementor-icon-list-items .elementor-icon-list-item a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.elementor-icon-list-items .elementor-icon-list-item a:hover {
  color: var(--mcmo-gold) !important;
}

/* ── Input / Form Fields ─────────────────────────────────── */
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select {
  border-radius: var(--mcmo-r-input) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--mcmo-white) !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s !important;
}
.elementor-field-group input:focus,
.elementor-field-group textarea:focus {
  border-color: var(--mcmo-gold) !important;
  outline: none !important;
}

/* ── Pill Badge ──────────────────────────────────────────── */
/* Add class "badge-gold" or "badge-blue" to any text widget */
.badge-gold, .badge-blue, .badge-red {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--mcmo-r-pill);
}
.badge-gold { background: rgba(201,168,76,0.15); color: var(--mcmo-gold); border: 1px solid rgba(201,168,76,0.3); }
.badge-blue { background: rgba(27,58,138,0.2);   color: var(--mcmo-blue-light); border: 1px solid rgba(74,127,229,0.3); }
.badge-red  { background: rgba(192,57,43,0.15);  color: #e05a4e; border: 1px solid rgba(192,57,43,0.3); }