/* ===== MedNexus — design tokens (Forest Green scheme, locked) ===== */
:root {
  --dark: #0C2018;
  --ink: #15392B;
  --light: #F1F7F3;
  --accent: #2C9A6B;
  --accent-bright: #46C68C;
  --gold: #CBA14A;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dark);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }

/* anchor offset so fixed nav doesn't cover section tops */
header[id], section[id] { scroll-margin-top: 70px; }

@keyframes mnGridFloat {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px; }
}

/* ===== scroll-reveal ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ===== hover / interaction states ===== */
.nav-link { transition: color .2s; }
.nav-link:hover { color: #fff; }

.btn-cta-nav { transition: transform .2s, box-shadow .2s; }
.btn-cta-nav:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn-primary { transition: transform .2s, box-shadow .2s; }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 45%, transparent);
}

.btn-secondary { transition: background .2s; }
.btn-secondary:hover { background: rgba(255,255,255,0.07); }

.card-lift { transition: transform .25s, box-shadow .25s; }
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31,58,95,0.1);
}

.card-offer { transition: border-color .25s, transform .25s; }
.card-offer:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.link-light { transition: color .2s; }
.link-light:hover { color: #fff; }

/* =====================================================================
   RESPONSIVE / MOBILE
   Layouts are set with inline styles, so these overrides use attribute
   selectors + !important to beat the inline cascade. No HTML changes.
   ===================================================================== */

/* --- Tablet: collapse 3- and 4-column grids to 2 --- */
@media (max-width: 920px) {
  #mednexus-root [style*="repeat(4,1fr)"],
  #mednexus-root [style*="repeat(3,1fr)"],
  #mednexus-root [style*="0.85fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* --- Mobile nav: hide section links, keep logo + CTA --- */
@media (max-width: 768px) {
  #mednexus-root nav {
    padding: 12px 18px !important;
    gap: 12px !important;
    background: var(--dark) !important;       /* solid so hero never shows through */
  }
  #mednexus-root nav .nav-link { display: none !important; }
  /* shrink the CTA so it can't collide with the wordmark on narrow screens */
  #mednexus-root nav .btn-cta-nav {
    padding: 9px 15px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
}

/* --- Phone: single column, tighter spacing --- */
@media (max-width: 600px) {
  /* every grid stacks to one column */
  #mednexus-root [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* tighter section + container gutters */
  #mednexus-root [style*="padding:120px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  /* contact section keeps its footer flush at the bottom */
  #mednexus-root [style*="padding:120px 0 0"] {
    padding-top: 64px !important;
    padding-bottom: 0 !important;
  }
  #mednexus-root [style*="padding:0 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* hero: shorter top inset, narrower gutters */
  #mednexus-root [style*="padding:190px 40px 90px"] {
    padding: 120px 20px 64px !important;
  }

  /* hero stat row → clean single column */
  #mednexus-root [style*="margin-top:72px"] {
    flex-direction: column !important;
    gap: 22px !important;
    margin-top: 48px !important;
  }
  #mednexus-root [style*="margin-top:72px"] > div {
    min-width: 0 !important;
  }

  /* form: stack input + button full width */
  #mednexus-root #discovery-form {
    flex-direction: column !important;
  }
  #mednexus-root #discovery-form input,
  #mednexus-root #discovery-form button {
    width: 100% !important;
    min-width: 0 !important;
  }
}