/* ============================================================
   MCAL Global — Targeted Premium Polish  (v2 — no dark mode)
   Loaded after density.css + premium.css.
   Keeps original light/dark alternating section structure.
   Only overrides specific visual details for polish.
   ============================================================ */

/* ── 0. UTILITY BAR — HIDE ───────────────────────────────────
   The white phone/social strip above the main nav is hidden.
   Setting --nav-utility-h to 0px cascades automatically:
     · .mcal-header moves to top:0 (was top:32px)
     · hero padding-top re-calculates to calc(0+72px+2rem)=104px
     · body padding on non-hero pages re-calculates to 72px     */
#navUtility {
  display: none !important;
}
:root {
  --nav-utility-h: 0px;
}

/* ── 1. SMOOTH SCROLL & ANCHOR OFFSET ───────────────────────
   premium.css also sets scroll-behavior but scroll-margin-top
   needs to account for the 60px sticky-bar we add in JS.    */
[id] { scroll-margin-top: 72px; }

/* ── 2. NAVBAR — WHITE, ALWAYS ──────────────────────────────
   premium.css forces a dark glassmorphism header. Override it
   back to a clean white header that matches the original design.
   redesign.css loads last, so !important here wins.            */
body > header {
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
body > header::before,
body > header::after {
  display: none !important;
  background: none !important;
}

/* Slightly stronger shadow on scroll — still white */
body > header.nav-scrolled {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ── 2b. NAV LINK TEXT — RESTORE DARK ON WHITE HEADER ────────
   premium.css has a more-specific rule:
     nav > a, nav > div > button { color: rgba(255,255,255,0.78) }
   which makes links white — invisible on our white header.
   We use the SAME selectors here so redesign.css (loaded later)
   wins the cascade at equal specificity.                        */
body > header nav[aria-label="Primary navigation"] > a,
body > header nav[aria-label="Primary navigation"] > div > button {
  color: #475569 !important;
}

body > header nav[aria-label="Primary navigation"] > a:hover,
body > header nav[aria-label="Primary navigation"] > div > button:hover {
  color: #22D3EE !important;
}

/* ── 3. LOGO — COMPREHENSIVE BORDER / OUTLINE STRIP ──────────
   Duplicates premium.css fix with extra browser-specific
   properties to handle any stacking-context focus artefacts.  */
body > header > div > a:first-child,
body > header > div > a:first-child:link,
body > header > div > a:first-child:visited,
body > header > div > a:first-child:hover,
body > header > div > a:first-child:focus,
body > header > div > a:first-child:focus-visible,
body > header > div > a:first-child:focus-within,
body > header > div > a:first-child:active {
  border: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
}

body > header > div > a:first-child img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  display: block !important;
  -webkit-user-drag: none !important;
}

/* ── 4. SECTION LABELS — MUTED GREY ON LIGHT SECTIONS ────────
   premium.css renders these cyan with a cyan underline.
   User spec: #888, tracking 0.12em, 12px, uppercase.
   We scope to light sections only: anything that is NOT inside
   a known dark container (hero-bg, #enterprise, inline dark
   CTA).  The ::after underline stays but becomes cyan.        */
main section:not(#enterprise) p.text-sm.font-semibold.tracking-widest.uppercase,
main section:not([style]) p.text-sm.font-semibold.tracking-widest.uppercase {
  color: #888888 !important;
}

/* Keep the cyan accent underline even when text goes grey */
main section:not(#enterprise) p.tracking-widest.font-semibold.uppercase::after,
main section:not([style]) p.tracking-widest.font-semibold.uppercase::after {
  background: #22D3EE !important;
  opacity: 0.65 !important;
}

/* Labels in dark sections or hero keep cyan */
.hero-bg p.tracking-widest,
section#enterprise p.tracking-widest,
section[style] p.tracking-widest {
  color: rgba(34, 211, 238, 0.85) !important;
}

/* ── 5. HEADINGS — TIGHT LETTER-SPACING ─────────────────────
   premium.css already sets h1/h2/h3 { letter-spacing: -0.02em }
   This rule reinforces it specifically for main content so
   density.css cannot win via later cascade.                   */
main h1, main h2, main h3 {
  letter-spacing: -0.02em !important;
}

/* ── 6. STATS BAR — INLINE WITH DIVIDERS, NO CARD WRAPPER ───
   premium.css wraps #home-stats > div (the grid container) in
   a white card with cyan-top border. User wants: clean inline
   numbers, vertical dividers, no heavy card styling.          */
#home-stats {
  background: #f8fafc !important;  /* keep the subtle bg */
}

/* Remove the white card wrapper on the grid container */
#home-stats > div {
  background: transparent !important;
  border-radius: 0 !important;
  border-top: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#home-stats > div:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Vertical dividers between individual stat items */
@media (min-width: 768px) {
  #home-stats .grid > div + div {
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-left: 1.5rem !important;
  }
}

/* ── 7. HERO BUTTON BORDER-RADIUS ────────────────────────────
   User spec: CTA buttons should have border-radius: 6px
   (cleaner than the default rounded-2xl / rounded-3xl).
   Only targets <button> elements — links and spans untouched.  */
.hero-bg button {
  border-radius: 6px !important;
}

/* Keep the badge pill round — overrides the button rule above
   if a button also carries .rounded-full (unlikely but safe).  */
.hero-bg .rounded-full {
  border-radius: 9999px !important;
}

/* ── 8. CARD IMAGES — overflow clip + zoom ───────────────────
   premium.css already does .card-hover img { scale(1.05) }.
   Make sure the parent clips correctly.                        */
.card-hover {
  overflow: hidden !important;
}

/* ── 9. TECH TAGS — CONTEXT-AWARE COLOUR ────────────────────
   On light backgrounds: subtle dark pill.
   On dark backgrounds (hero): premium.css already styles via
   [class*="bg-white/10"]; we only fix the light-bg variant.   */

/* Light-bg tags: bg-cyan-50 text-cyan-700 (Technology section) */
main .bg-cyan-50.text-cyan-700 {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #555555 !important;
  border-radius: 20px !important;
}

/* ── 10. TESTIMONIALS — enhanced borders ─────────────────────
   premium.css already gives these a left cyan border.
   Add a stronger shadow for depth.                            */
.bg-slate-50.p-8.rounded-3xl.border {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
}

/* ── 11. COMPARISON TABLE — MCAL column rounded ─────────────
   premium.css handles alternating rows. Reinforce the positive
   column styling.                                              */
.overflow-x-auto table .bg-emerald-50\/50 {
  background: rgba(16, 185, 129, 0.06) !important;
}

/* ── 12. FOOTER — slight deepening ──────────────────────────
   Change from #0F172A (dark navy) to a slightly richer dark.  */
footer#contact,
footer {
  background: #07101f !important;
}

/* ── 13. STICKY BOTTOM CTA BAR ──────────────────────────────
   CSS for the bar injected by premium.js.                     */
#mcal-sticky-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9990 !important;
  height: 56px !important;
  background: #121820 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 0 2rem !important;
  transform: translateY(100%) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mcal-sticky-bar.bar-visible {
  transform: translateY(0) !important;
}

#mcal-sticky-bar .bar-text {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-weight: 500 !important;
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#mcal-sticky-bar .bar-cta {
  background: #22D3EE !important;
  color: #0a0f1e !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  padding: 0.5rem 1.375rem !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: opacity 0.18s ease !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

#mcal-sticky-bar .bar-cta:hover {
  opacity: 0.84 !important;
}

#mcal-sticky-bar .bar-close {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 1.375rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: color 0.18s ease !important;
  font-family: inherit !important;
}

#mcal-sticky-bar .bar-close:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

@media (max-width: 767px) {
  #mcal-sticky-bar {
    padding: 0 1rem !important;
    gap: 0.625rem !important;
  }
  #mcal-sticky-bar .bar-text { font-size: 0.75rem !important; }
  #mcal-sticky-bar .bar-cta {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.875rem !important;
  }
}

/* ── 16. SCROLL REVEAL — override premium.css values ─────────
   premium.css: translateY(22px), 0.42s ease
   User spec: translateY(20px), 0.5s, cubic-bezier           */
.mcal-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mcal-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for siblings */
.mcal-reveal:nth-child(2) { transition-delay: 0.1s; }
.mcal-reveal:nth-child(3) { transition-delay: 0.2s; }
.mcal-reveal:nth-child(4) { transition-delay: 0.3s; }
.mcal-reveal:nth-child(5) { transition-delay: 0.4s; }
.mcal-reveal:nth-child(6) { transition-delay: 0.5s; }

/* ── 15. PREMIUM LEAD MODAL ──────────────────────────────── */
@keyframes mcal-modal-in {
  from { opacity: 0; transform: scale(0.93) translateY(14px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
#leadModalBox {
  animation: mcal-modal-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
/* Mobile: slide up from bottom */
@media (max-width: 639px) {
  @keyframes mcal-modal-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #leadModalBox {
    animation: mcal-modal-in 0.3s cubic-bezier(0.25, 1, 0.5, 1) both;
    border-radius: 20px 20px 0 0 !important;
  }
}