/* =============================================================
   mUni Campus public sales UI foundation
   Opt-in only: add body.mc-sales-page on public marketing pages.
   This keeps the design layer away from Moodle, auth, CRM, and form
   submission surfaces while giving solution pages one shared baseline.
   ============================================================= */

:root {
  --mc-sales-navy: #0a294f;
  --mc-sales-ink: #1a2433;
  --mc-sales-muted: #5a6470;
  --mc-sales-red: #a72d38;
  --mc-sales-gold: #f5b73c;
  --mc-sales-surface: #ffffff;
  --mc-sales-soft: #f6f8fb;
  --mc-sales-border: #e4e8ef;
  --mc-sales-radius: 8px;
  --mc-sales-shadow: 0 10px 28px rgba(10, 41, 79, 0.12);
}

body.mc-sales-page {
  color: var(--mc-sales-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
}

.mc-sales-page .flexslider {
  position: relative;
  /* 2026-05-25 hotfix: legacy inline style hardcodes height:580px on the
     .flexslider section. The new .mc-sales-h1 (clamp 32-54px) wraps to
     3-4 lines on long titles and overflows DOWN, bleeding the white hero
     text into the page content below. overflow:hidden contains the
     overflow inside the hero rectangle; the font-size clamp below is
     tightened so it usually fits without clipping anyway. */
  overflow: hidden;
}

.mc-sales-page .flexslider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 41, 79, 0.74), rgba(10, 41, 79, 0.24) 58%, rgba(10, 41, 79, 0.08));
  pointer-events: none;
}

.mc-sales-page .flexslider > .container {
  position: relative;
  z-index: 1;
}

.mc-sales-h1 {
  max-width: 720px;
  margin: 0 0 14px;
  color: #fff;
  /* Was clamp(32px, 4vw, 54px) — too tall for the legacy 580px hero box
     when the title is long. Reduced upper bound to 40px and viewport
     scale to 3vw so 4-word titles fit in 2 lines and 9-word titles fit
     in 3 (still inside 580px even with the hero copy paragraph below). */
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 800;
}

.mc-sales-hero-copy {
  max-width: 680px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
}

.mc-sales-page .btn,
.mc-sales-page button {
  min-height: 44px;
}

.mc-sales-page .btn-accent,
.mc-sales-page .btn-warning,
.mc-sales-page .btn-primary,
.mc-sales-page .buttonStyle {
  border-radius: var(--mc-sales-radius);
}

.mc-sales-page .sticky_form .slide-toggle {
  background: var(--mc-sales-navy) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: var(--mc-sales-shadow);
}

.mc-sales-page .section-heading h2,
.mc-sales-page .section-heading h3,
.mc-sales-page h2.bold,
.mc-sales-page h3.bold {
  color: var(--mc-sales-navy);
  letter-spacing: 0;
}

.mc-sales-page .card,
.mc-sales-page .shadow.rounded {
  border: 1px solid var(--mc-sales-border);
  border-radius: var(--mc-sales-radius);
  box-shadow: var(--mc-sales-shadow) !important;
}

.mc-sales-page .lead {
  color: var(--mc-sales-muted);
  line-height: 1.6;
}

.mc-sales-page a:focus,
.mc-sales-page button:focus,
.mc-sales-page input:focus,
.mc-sales-page select:focus {
  outline: 3px solid rgba(245, 183, 60, 0.5);
  outline-offset: 2px;
}

.mc-sales-proof-strip {
  background: var(--mc-sales-soft);
  border-top: 1px solid var(--mc-sales-border);
  border-bottom: 1px solid var(--mc-sales-border);
}

.mc-sales-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mc-sales-proof-tile {
  background: var(--mc-sales-surface);
  border: 1px solid var(--mc-sales-border);
  border-radius: var(--mc-sales-radius);
  padding: 22px;
}

.mc-sales-proof-tile strong {
  display: block;
  color: var(--mc-sales-navy);
  font-size: 26px;
  line-height: 1.15;
}

.mc-sales-proof-tile span {
  display: block;
  margin-top: 6px;
  color: var(--mc-sales-muted);
  font-size: 14px;
}

@media (max-width: 767.98px) {
  .mc-sales-page .flexslider {
    min-height: 420px;
    height: auto !important;
  }

  .mc-sales-page .headerText,
  .mc-sales-page .container1 .row {
    margin-top: 0 !important;
    padding-top: 120px !important;
  }

  .mc-sales-h1 {
    font-size: 32px;
  }

  .mc-sales-hero-copy {
    font-size: 16px;
  }

  .mc-sales-proof-grid {
    grid-template-columns: 1fr;
  }
}