/* np-style-calm-tech.css */
/* =========================================================
   NutraPlanet Scoped Theme: Calm Tech / Product Editorial
   Scope Gate: .np-scope.np-style-calm-tech

   Design thesis:
   - Clean product editorial clarity, scannable, conversion-friendly
   - High-contrast (dark text on light surfaces)
   - Each highlighted block has a DISTINCT background color so it stands out:
     • Key Takeaway Callouts (.callout)
     • Inline CTA Minor (.cta-minor)
     • Visual Break / Divider (hr)
     • Mid-Article CTA Major (.cta-major)
     • Related Posts (.related-posts)
     • Footer CTA (.footer-cta)
     • Internal Link Card (.internal-link-card)
     • Lead Magnet Download Card (.lead-magnet-card)

   Unique “fun value-adds” for THIS theme:
   1) “Smart TOC” styling hooks + active section highlight (JS)
   2) Tiny “spec chips” (pills) for meta, feels like a product page
   3) Subtle gridline background inside special blocks (tech feel)

   Constraints:
   - No globals. No :root/body/html.
   - Every selector begins with scope.
   - Includes Elementor nuclear overrides.
========================================================= */

/* =========================================================
   0) THEME VARIABLES (scoped only)
========================================================= */
.np-scope.np-style-calm-tech{
  /* Base surfaces (high contrast light) */
  --np-bg: #f6f7fb;
  --np-surface: #ffffff;
  --np-surface-2: #0b0f1a; /* reserved for dark chips if needed */
  --np-ink: #0b1220;
  --np-ink-2: #1b2334;
  --np-muted: #5a6478;

  --np-border: rgba(11,18,32,.14);
  --np-border-2: rgba(11,18,32,.20);

  /* Accent */
  --np-accent: #175cff;      /* CTA/link */
  --np-accent-2: #0b3bb6;    /* hover */
  --np-good: #0b7a5a;

  /* Block highlight surfaces (distinct, intentional) */
  --np-sf-takeaway: #eef5ff;     /* callout */
  --np-sf-inline: #fff6d6;       /* inline CTA */
  --np-sf-divider: #f2f0ff;      /* divider band */
  --np-sf-major: #ecfff7;        /* mid CTA */
  --np-sf-related: #fff0f6;      /* related section */
  --np-sf-footer: #111827;       /* footer CTA (dark) */
  --np-sf-internal: #f5f3ff;     /* internal link card */
  --np-sf-lead: #fff8e8;         /* lead magnet card */

  /* Typography (clean, product editorial) */
  --np-font-display: "Söhne","Suisse Int'l","Neue Haas Grotesk Text Pro","Helvetica Neue",Arial,sans-serif;
  --np-font-head: "Söhne","Suisse Int'l","Helvetica Neue",Arial,sans-serif;
  --np-font-body: "IBM Plex Serif","Source Serif 4","Georgia",serif;
  --np-font-ui: "Söhne","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --np-font-mono: "IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  /* Type scale (fluid) */
  --np-fs-body: clamp(1.02rem, 0.95rem + 0.35vw, 1.14rem);
  --np-lh-body: 1.72;
  --np-fs-h1: clamp(2.0rem, 1.3rem + 2.3vw, 3.05rem);
  --np-fs-h2: clamp(1.45rem, 1.12rem + 1.25vw, 1.95rem);
  --np-fs-h3: clamp(1.14rem, 1.02rem + 0.65vw, 1.4rem);

  /* Layout */
  --np-max: 76rem;
  --np-measure: 68ch;
  --np-gutter: clamp(1rem, 0.7rem + 1.6vw, 2.1rem);
  --np-block: clamp(1rem, 0.65rem + 1.25vw, 1.95rem);

  --np-radius: 18px;
  --np-radius-lg: 26px;

  /* Motion */
  --np-ease: cubic-bezier(.2,.85,.2,1);
  --np-dur: 520ms;

  background: var(--np-bg) !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   1) ELEMENTOR OVERRIDE “NUCLEAR” RESET (scoped + !important)
========================================================= */
.np-scope.np-style-calm-tech,
.np-scope.np-style-calm-tech *{
  box-sizing: border-box !important;
}

.np-scope.np-style-calm-tech{
  font-family: var(--np-font-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.np-scope.np-style-calm-tech *{
  font-family: inherit !important;
  color: inherit !important;
}

.np-scope.np-style-calm-tech a,
.np-scope.np-style-calm-tech a *{
  color: var(--np-accent) !important;
  text-decoration: none !important;
}

.np-scope.np-style-calm-tech a:hover{
  color: var(--np-accent-2) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.np-scope.np-style-calm-tech :focus{ outline: none !important; }

.np-scope.np-style-calm-tech :focus-visible{
  outline: 3px solid color-mix(in srgb, var(--np-accent) 55%, #fff 45%) !important;
  outline-offset: 3px !important;
  border-radius: 10px !important;
}

.np-scope.np-style-calm-tech img{
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
}

.np-scope.np-style-calm-tech p{
  font-size: var(--np-fs-body) !important;
  line-height: var(--np-lh-body) !important;
  color: var(--np-ink-2) !important;
  margin: 0 0 1.05em 0 !important;
}

.np-scope.np-style-calm-tech strong{
  font-weight: 800 !important;
  color: var(--np-ink) !important;
}

/* Headings */
.np-scope.np-style-calm-tech h1{
  font-family: var(--np-font-display) !important;
  font-size: var(--np-fs-h1) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.5em 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-calm-tech h2{
  font-family: var(--np-font-head) !important;
  font-size: var(--np-fs-h2) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em !important;
  margin: 1.35em 0 0.55em 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-calm-tech h3{
  font-family: var(--np-font-ui) !important;
  font-size: var(--np-fs-h3) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  margin: 1.05em 0 0.45em 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-calm-tech ul,
.np-scope.np-style-calm-tech ol{
  margin: 0 0 1.1em 1.1em !important;
  padding: 0 !important;
  font-size: var(--np-fs-body) !important;
  line-height: var(--np-lh-body) !important;
  color: var(--np-ink-2) !important;
}

.np-scope.np-style-calm-tech li{ margin: 0.35em 0 !important; }

/* =========================================================
   2) ARTICLE CONTAINER + MEASURE
========================================================= */
.np-scope.np-style-calm-tech .np-article,
.np-scope.np-style-calm-tech .article,
.np-scope.np-style-calm-tech .post-content{
  max-width: var(--np-max) !important;
  margin: 0 auto !important;
  padding: calc(var(--np-gutter) * 1.2) var(--np-gutter) !important;
}

.np-scope.np-style-calm-tech .reading-box,
.np-scope.np-style-calm-tech .reading{
  max-width: var(--np-measure) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   3) HERO (product editorial)
========================================================= */
.np-scope.np-style-calm-tech .hero{
  position: relative !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  background: var(--np-surface) !important;
  overflow: hidden !important;
  padding: clamp(1.2rem, 1rem + 2vw, 2.35rem) !important;
  margin-bottom: calc(var(--np-block) * 1.1) !important;
  box-shadow: 0 18px 40px rgba(11,18,32,.06) !important;
}

/* subtle gridline tech texture */
.np-scope.np-style-calm-tech .hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(11,18,32,.06) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(0deg, rgba(11,18,32,.06) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(circle at 18% 16%, rgba(23,92,255,.14), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(11,122,90,.10), transparent 45%) !important;
  opacity: .32 !important;
  pointer-events: none !important;
}

.np-scope.np-style-calm-tech .hero > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-calm-tech .hero .meta,
.np-scope.np-style-calm-tech .hero .post-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  align-items: center !important;
  margin-bottom: 0.9rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-muted) !important;
}

/* “Spec chips” (signature) */
.np-scope.np-style-calm-tech .pill,
.np-scope.np-style-calm-tech .hero .read-time{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(11,18,32,.14) !important;
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-size: 0.88rem !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   4) KEY TAKEAWAY CALLOUTS (distinct surface)
========================================================= */
.np-scope.np-style-calm-tech .callout{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.05) auto !important;
  padding: 1.05rem 1.15rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid color-mix(in srgb, var(--np-accent) 18%, var(--np-border) 82%) !important;
  background: var(--np-sf-takeaway) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* tiny tech grid inside callout */
.np-scope.np-style-calm-tech .callout::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(23,92,255,.10) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(23,92,255,.10) 1px, transparent 1px) 0 0 / 44px 44px !important;
  opacity: .18 !important;
  pointer-events: none !important;
}

.np-scope.np-style-calm-tech .callout > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-calm-tech .callout .callout-title{
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  color: var(--np-ink) !important;
  margin: 0 0 0.55rem 0 !important;
}

.np-scope.np-style-calm-tech .callout p{ margin: 0 !important; }

/* =========================================================
   5) INLINE CTA (Minor) (distinct surface)
========================================================= */
.np-scope.np-style-calm-tech .cta-minor{
  display: inline !important;
  padding: 0.14rem 0.22rem !important;
  border-radius: 10px !important;
  background: var(--np-sf-inline) !important;
  border: 1px solid rgba(11,18,32,.14) !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* =========================================================
   6) VISUAL BREAK / DIVIDER (distinct surface band)
========================================================= */
.np-scope.np-style-calm-tech hr{
  border: 0 !important;
  height: 22px !important;
  margin: calc(var(--np-block) * 1.15) 0 !important;
  background: transparent !important;
  position: relative !important;
}

.np-scope.np-style-calm-tech hr::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: var(--np-sf-divider) !important;
  border: 1px solid rgba(11,18,32,.10) !important;
}

.np-scope.np-style-calm-tech hr::after{
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: rgba(11,18,32,.18) !important;
}

/* =========================================================
   7) INTERNAL LINK CARD (distinct surface)
========================================================= */
.np-scope.np-style-calm-tech .internal-link-card{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.05) auto !important;
  border-radius: var(--np-radius-lg) !important;
  background: var(--np-sf-internal) !important;
  border: 1px solid rgba(11,18,32,.14) !important;
  box-shadow: 0 18px 40px rgba(11,18,32,.06) !important;
  padding: 1.05rem 1.1rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* subtle “link arrow” highlight on hover */
.np-scope.np-style-calm-tech .internal-link-card:hover{
  border-color: rgba(23,92,255,.28) !important;
  box-shadow: 0 22px 50px rgba(11,18,32,.08) !important;
}

.np-scope.np-style-calm-tech .internal-link-card .title{
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  margin: 0 0 0.2rem 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-calm-tech .internal-link-card .desc{
  margin: 0 0 0.7rem 0 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   8) LEAD MAGNET DOWNLOAD CARD (distinct surface)
========================================================= */
.np-scope.np-style-calm-tech .lead-magnet-card{
  background: var(--np-sf-lead) !important;
  border-color: rgba(11,18,32,.16) !important;
}

/* =========================================================
   9) GLASS GRID + CARDS (clean product cards)
========================================================= */
.np-scope.np-style-calm-tech .glass-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(0.85rem, 0.6rem + 1.15vw, 1.2rem) !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  max-width: var(--np-max) !important;
}

.np-scope.np-style-calm-tech .glass-card{
  grid-column: span 6 !important;
  border: 1px solid rgba(11,18,32,.12) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  padding: 1rem 1.05rem !important;
  box-shadow: 0 18px 40px rgba(11,18,32,.06) !important;
}

/* =========================================================
   10) CTA MAJOR (distinct surface)
========================================================= */
.np-scope.np-style-calm-tech .cta-major{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto !important;
  padding: clamp(1.15rem, 0.95rem + 1.25vw, 2rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid rgba(11,18,32,.14) !important;
  background: var(--np-sf-major) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 26px 52px rgba(11,18,32,.07) !important;
}

/* tech grid */
.np-scope.np-style-calm-tech .cta-major::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(11,122,90,.12) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(0deg, rgba(11,122,90,.12) 1px, transparent 1px) 0 0 / 52px 52px !important;
  opacity: .14 !important;
  pointer-events: none !important;
}

.np-scope.np-style-calm-tech .cta-major > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-calm-tech .cta-major .cta-title{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.65rem) !important;
  color: var(--np-ink) !important;
  margin: 0 0 0.35rem 0 !important;
}

.np-scope.np-style-calm-tech .cta-major .cta-sub{
  color: var(--np-muted) !important;
  margin: 0 0 0.95rem 0 !important;
}

.np-scope.np-style-calm-tech .cta-major .cta-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.8rem 1.05rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(11,18,32,.16) !important;
  background: var(--np-accent) !important;
  color: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  transition: transform 160ms var(--np-ease), background 160ms var(--np-ease) !important;
}

.np-scope.np-style-calm-tech .cta-major .cta-button:hover{
  transform: translateY(-1px) !important;
  background: var(--np-accent-2) !important;
}

/* =========================================================
   11) PULL QUOTE + VIGNETTE (clean, product editorial)
========================================================= */
.np-scope.np-style-calm-tech blockquote,
.np-scope.np-style-calm-tech .pull-quote{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.25) auto !important;
  padding: 1.1rem 1.2rem !important;
  border-radius: var(--np-radius-lg) !important;
  background: #fff !important;
  border: 1px solid rgba(11,18,32,.12) !important;
  box-shadow: 0 18px 40px rgba(11,18,32,.06) !important;
}

.np-scope.np-style-calm-tech blockquote p,
.np-scope.np-style-calm-tech .pull-quote p{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  font-size: clamp(1.14rem, 1.02rem + 0.65vw, 1.5rem) !important;
  line-height: 1.35 !important;
  color: var(--np-ink) !important;
  margin: 0 !important;
}

.np-scope.np-style-calm-tech blockquote cite,
.np-scope.np-style-calm-tech .pull-quote cite{
  display: block !important;
  margin-top: 0.75rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-muted) !important;
}

.np-scope.np-style-calm-tech .story-vignette,
.np-scope.np-style-calm-tech .vignette{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.2) auto !important;
  padding: 1.1rem 1.2rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid rgba(11,18,32,.12) !important;
  background: #fff !important;
}

.np-scope.np-style-calm-tech .story-vignette::before,
.np-scope.np-style-calm-tech .vignette::before{
  content: "STORY" !important;
  display: inline-block !important;
  font-family: var(--np-font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--np-muted) !important;
  margin-bottom: 0.65rem !important;
}

/* =========================================================
   12) RELATED POSTS (distinct surface band)
========================================================= */
.np-scope.np-style-calm-tech .related-posts{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: clamp(1rem, 0.9rem + 1vw, 1.4rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid rgba(11,18,32,.12) !important;
  background: var(--np-sf-related) !important;
}

.np-scope.np-style-calm-tech .related-posts .cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.np-scope.np-style-calm-tech .related-posts .card{
  border: 1px solid rgba(11,18,32,.12) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(11,18,32,.06) !important;
  transition: transform 210ms var(--np-ease), box-shadow 210ms var(--np-ease) !important;
}

.np-scope.np-style-calm-tech .related-posts .card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 52px rgba(11,18,32,.08) !important;
}

.np-scope.np-style-calm-tech .related-posts .card .title{
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  padding: 0.85rem 0.9rem 0.2rem 0.9rem !important;
  margin: 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-calm-tech .related-posts .card .desc{
  padding: 0 0.9rem 0.95rem 0.9rem !important;
  margin: 0 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   13) FOOTER CTA (distinct dark endcap)
========================================================= */
.np-scope.np-style-calm-tech .footer-cta{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: clamp(1.15rem, 0.95rem + 1.25vw, 2rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: var(--np-sf-footer) !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
}

.np-scope.np-style-calm-tech .footer-cta *{
  color: #ffffff !important;
}

.np-scope.np-style-calm-tech .footer-cta::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 30%, rgba(23,92,255,.28), transparent 42%),
    radial-gradient(circle at 82% 35%, rgba(11,122,90,.22), transparent 48%),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 64px 64px !important;
  opacity: .62 !important;
  pointer-events: none !important;
}

.np-scope.np-style-calm-tech .footer-cta > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-calm-tech .footer-cta .cta-title{
  font-family: var(--np-font-display) !important;
  font-weight: 950 !important;
  margin: 0 0 0.35rem 0 !important;
}

.np-scope.np-style-calm-tech .footer-cta .cta-sub{
  color: rgba(255,255,255,.78) !important;
}

.np-scope.np-style-calm-tech .footer-cta .cta-button{
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.np-scope.np-style-calm-tech .footer-cta .cta-button:hover{
  background: rgba(255,255,255,.92) !important;
}

/* =========================================================
   14) REVEAL HOOKS (IO)
========================================================= */
.np-scope.np-style-calm-tech .np-reveal{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity var(--np-dur) var(--np-ease), transform var(--np-dur) var(--np-ease) !important;
  will-change: opacity, transform !important;
}

.np-scope.np-style-calm-tech .np-reveal.is-visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce){
  .np-scope.np-style-calm-tech .np-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   15) RESPONSIVE (mobile/tablet/small desktop)
========================================================= */
@media (max-width: 900px){
  .np-scope.np-style-calm-tech .glass-card{ grid-column: span 12 !important; }
  .np-scope.np-style-calm-tech .related-posts .cards{ grid-template-columns: 1fr !important; }
}

@media (max-width: 640px){
  .np-scope.np-style-calm-tech .hero{ padding: 1.15rem !important; }
}