/* ==========================================
   VENTURIS MEDICAL · GLOBAL BASE
   (loaded on every page, used by Elementor + WooCommerce)
   ========================================== */
/* Background field */
.bg-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, rgba(26, 145, 168, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 145, 168, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.bg-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}
.bg-glow-1 { background: radial-gradient(circle, var(--teal-200), transparent 60%); top: -20vw; right: -10vw; }
.bg-glow-2 { background: radial-gradient(circle, #d4ecf1, transparent 60%); top: 60vh; left: -25vw; opacity: .35; }
.bg-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: .35;
  mix-blend-mode: multiply;
}

:root {
  /* brand */
  --teal-900: #062b35;
  --teal-800: #0a3a48;
  --teal-700: #0f5566;
  --teal-600: #1a7a8e;
  --teal-500: #1a91a8;   /* primary teal from logo */
  --teal-400: #3aa6ba;
  --teal-300: #5fb4c5;
  --teal-200: #98d1db;
  --teal-100: #d4ecf1;
  --teal-50:  #eef7f9;

  /* neutrals */
  --ink-900: #0d1418;
  --ink-800: #1a232a;
  --ink-700: #2a363f;
  --ink-500: #5a6770;
  --ink-400: #7d8489;     /* gray from logo */
  --ink-300: #a9b1b6;
  --ink-200: #d8dde0;
  --ink-100: #ecf0f2;

  /* surface */
  --bg:        #f5f4f0;   /* warm off-white */
  --bg-warm:   #efece5;
  --paper:     #ffffff;
  --bg-dark:   #061b22;
  --bg-darker: #04141a;

  /* type */
  --display: 'Instrument Serif', 'Newsreader', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* layout */
  --container: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Basic reset for links */
a {
  color: var(--teal-600);
  text-decoration: none;
}
a:hover {
  color: var(--teal-500);
}

/* Container that matches your section layouts */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Smooth motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ensure all content sits above the fixed background */
.wp-site-blocks,   /* Astra's wrapper */
#page,
main,
.entry-content {
    position: relative;
    z-index: 1;
}

/* 1. Transparent background */
.ast-site-header-wrap,
#masthead,
.ast-primary-header-bar,
.ast-below-header-bar,
.ast-above-header-bar {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 1. Add top padding to the main content wrapper */
body:not(.page-template-page-venturis-home) #content,
body:not(.page-template-page-venturis-home) .site-content {
    padding-top: 80px !important;   /* ← change to your header’s actual height */
}

/* 2. Fallback: if #primary is the direct container, target that too */
body:not(.page-template-page-venturis-home) #primary {
    margin-top: 80px !important;
}

/* 3. WooCommerce pages use the same layout */
.woocommerce-page #primary,
.woocommerce #primary {
    margin-top: 80px !important;
}