/* np-style-editorial-mag.css */
/* =========================================================
   NutraPlanet Scoped Theme: Editorial Magazine
   Scope Gate: .np-scope.np-style-editorial-mag
   Notes:
   - No globals. No :root, body, html.
   - High contrast: dark text on light background.
   - Includes Elementor “nuclear” overrides with !important.
========================================================= */

/* =========================================================
   0) THEME VARIABLES (scoped only)
========================================================= */
.np-scope.np-style-editorial-mag{
  /* Color system (high-contrast light) */
  --np-bg: #fbfbf9;
  --np-surface: #ffffff;
  --np-surface-2: #f3f2ee;
  --np-ink: #121212;
  --np-ink-2: #2a2a2a;
  --np-muted: #5b5b5b;
  --np-border: rgba(18,18,18,.12);
  --np-border-2: rgba(18,18,18,.18);
  --np-accent: #0b57d0;            /* link / focus accent */
  --np-accent-2: #0a3a8a;          /* hover */
  --np-warn: #b42318;

  /* Typography */
  --np-font-display: "Noe Display","Canela","Georgia","Times New Roman",serif;
  --np-font-head: "Freight Display","Ivar Display","Georgia","Times New Roman",serif;
  --np-font-body: "Lyon Text","Tiempos Text","Iowan Old Style","Georgia",serif;
  --np-font-ui: "Suisse Int'l","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --np-font-mono: "IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  /* Type scale (fluid, minimal breakpoints) */
  --np-fs-body: clamp(1.02rem, 0.96rem + 0.35vw, 1.16rem);
  --np-lh-body: 1.75;
  --np-fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem);
  --np-fs-h2: clamp(1.5rem, 1.16rem + 1.4vw, 2.1rem);
  --np-fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --np-fs-kicker: 0.78rem;

  /* Layout */
  --np-radius: 18px;
  --np-radius-lg: 26px;
  --np-shadow-soft: 0 10px 30px rgba(0,0,0,.06);
  --np-max: 74rem;
  --np-measure: 66ch; /* comfortable reading width */
  --np-gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem);
  --np-block: clamp(1rem, 0.6rem + 1.2vw, 1.8rem);

  /* Motion */
  --np-ease: cubic-bezier(.2,.8,.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-editorial-mag,
.np-scope.np-style-editorial-mag *{
  box-sizing: border-box !important;
}

.np-scope.np-style-editorial-mag{
  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-editorial-mag *{
  font-family: inherit !important;
  color: inherit !important;
}

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

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

.np-scope.np-style-editorial-mag :focus{
  outline: none !important;
}

.np-scope.np-style-editorial-mag :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-editorial-mag img{
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
}

.np-scope.np-style-editorial-mag 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-editorial-mag strong{
  font-weight: 700 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-editorial-mag em{
  font-style: italic !important;
}

.np-scope.np-style-editorial-mag hr{
  border: 0 !important;
  border-top: 1px solid var(--np-border) !important;
  margin: calc(var(--np-block) * 1.2) 0 !important;
}

/* Headings (scoped element selectors are OK) */
.np-scope.np-style-editorial-mag h1{
  font-family: var(--np-font-display) !important;
  font-size: var(--np-fs-h1) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em !important;
  color: var(--np-ink) !important;
  margin: 0 0 0.45em 0 !important;
}

.np-scope.np-style-editorial-mag h2{
  font-family: var(--np-font-head) !important;
  font-size: var(--np-fs-h2) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: var(--np-ink) !important;
  margin: 1.35em 0 0.55em 0 !important;
}

.np-scope.np-style-editorial-mag h3{
  font-family: var(--np-font-ui) !important;
  font-size: var(--np-fs-h3) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  color: var(--np-ink) !important;
  margin: 1.05em 0 0.45em 0 !important;
}

.np-scope.np-style-editorial-mag ul,
.np-scope.np-style-editorial-mag 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-editorial-mag li{
  margin: 0.35em 0 !important;
}

/* =========================================================
   2) ARTICLE CONTAINER + READING MEASURE
========================================================= */
.np-scope.np-style-editorial-mag .np-article,
.np-scope.np-style-editorial-mag .article,
.np-scope.np-style-editorial-mag .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-editorial-mag .reading-box,
.np-scope.np-style-editorial-mag .reading{
  max-width: var(--np-measure) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   3) HERO (existing .hero class, restyled)
========================================================= */
.np-scope.np-style-editorial-mag .hero{
  position: relative !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbf9 100%) !important;
  box-shadow: var(--np-shadow-soft) !important;
  overflow: hidden !important;
  padding: clamp(1.2rem, 1rem + 2vw, 2.4rem) !important;
  margin-bottom: calc(var(--np-block) * 1.2) !important;
}

/* subtle editorial “paper grain” */
.np-scope.np-style-editorial-mag .hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(18,18,18,.06), transparent 42%),
    radial-gradient(circle at 80% 30%, rgba(11,87,208,.08), transparent 45%),
    radial-gradient(circle at 40% 90%, rgba(18,18,18,.05), transparent 50%) !important;
  opacity: .55 !important;
  pointer-events: none !important;
}

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

.np-scope.np-style-editorial-mag .hero .meta,
.np-scope.np-style-editorial-mag .hero .post-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  margin-bottom: 0.9rem !important;
  font-family: var(--np-font-ui) !important;
  color: var(--np-muted) !important;
  font-size: 0.95rem !important;
}

.np-scope.np-style-editorial-mag .pill,
.np-scope.np-style-editorial-mag .hero .read-time{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  border: 1px solid var(--np-border) !important;
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  font-family: var(--np-font-ui) !important;
  font-size: 0.85rem !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   4) GLASS GRID + GLASS CARDS (existing .glass-card)
========================================================= */
.np-scope.np-style-editorial-mag .glass-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(0.8rem, 0.6rem + 1vw, 1.1rem) !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  max-width: var(--np-max) !important;
}

.np-scope.np-style-editorial-mag .glass-card{
  grid-column: span 6 !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius) !important;
  background: var(--np-surface) !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.05) !important;
  padding: 1rem 1.05rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.np-scope.np-style-editorial-mag .glass-card::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(120deg, rgba(11,87,208,.08), transparent 40%),
    radial-gradient(circle at 75% 25%, rgba(18,18,18,.06), transparent 40%) !important;
  opacity: .35 !important;
  pointer-events: none !important;
}

.np-scope.np-style-editorial-mag .glass-card > *{
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   5) CALLOUTS + KEY TAKEAWAYS (existing .callout)
========================================================= */
.np-scope.np-style-editorial-mag .callout{
  border-left: 4px solid var(--np-accent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--np-accent) 7%, #fff 93%) !important;
  padding: 1rem 1.1rem !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  max-width: var(--np-measure) !important;
}

.np-scope.np-style-editorial-mag .callout .callout-title{
  font-family: var(--np-font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  color: var(--np-ink) !important;
  margin-bottom: 0.5rem !important;
}

.np-scope.np-style-editorial-mag .callout p{
  margin-bottom: 0 !important;
}

/* =========================================================
   6) PULL QUOTE PLATES (signature)
   Works with blockquote OR .pull-quote
========================================================= */
.np-scope.np-style-editorial-mag blockquote,
.np-scope.np-style-editorial-mag .pull-quote{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.25) auto !important;
  padding: clamp(1.1rem, 0.95rem + 1vw, 1.7rem) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  background: linear-gradient(180deg, #fff 0%, var(--np-surface-2) 100%) !important;
  box-shadow: 0 18px 30px rgba(0,0,0,.06) !important;
  position: relative !important;
  overflow: hidden !important;
}

.np-scope.np-style-editorial-mag blockquote::before,
.np-scope.np-style-editorial-mag .pull-quote::before{
  content: "“" !important;
  position: absolute !important;
  top: -18px !important;
  left: 16px !important;
  font-family: var(--np-font-display) !important;
  font-size: 5.2rem !important;
  color: rgba(18,18,18,.12) !important;
  line-height: 1 !important;
}

.np-scope.np-style-editorial-mag blockquote p,
.np-scope.np-style-editorial-mag .pull-quote p{
  font-family: var(--np-font-head) !important;
  font-size: clamp(1.15rem, 1.02rem + 0.7vw, 1.55rem) !important;
  line-height: 1.35 !important;
  color: var(--np-ink) !important;
  margin: 0 !important;
}

.np-scope.np-style-editorial-mag blockquote cite,
.np-scope.np-style-editorial-mag .pull-quote cite{
  display: block !important;
  margin-top: 0.75rem !important;
  font-family: var(--np-font-ui) !important;
  color: var(--np-muted) !important;
  font-size: 0.92rem !important;
}

/* =========================================================
   7) STORY VIGNETTE (signature)
   Use .story-vignette if you have it; otherwise .vignette
========================================================= */
.np-scope.np-style-editorial-mag .story-vignette,
.np-scope.np-style-editorial-mag .vignette{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.2) auto !important;
  padding: 1.15rem 1.2rem !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius-lg) !important;
  background: #fff !important;
  position: relative !important;
}

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

.np-scope.np-style-editorial-mag .story-vignette p,
.np-scope.np-style-editorial-mag .vignette p{
  font-family: var(--np-font-body) !important;
  color: var(--np-ink-2) !important;
}

/* =========================================================
   8) CTAs (minor + major)
========================================================= */
.np-scope.np-style-editorial-mag .cta-minor{
  display: inline !important;
  padding: 0.1rem 0.18rem !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--np-accent) 12%, #fff 88%) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--np-accent) 35%, #fff 65%) !important;
}

.np-scope.np-style-editorial-mag .cta-major{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto !important;
  padding: clamp(1.1rem, 0.95rem + 1.2vw, 1.9rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid var(--np-border-2) !important;
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--np-accent) 6%, #fff 94%) 100%) !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.07) !important;
}

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

.np-scope.np-style-editorial-mag .cta-major .cta-sub{
  font-family: var(--np-font-body) !important;
  color: var(--np-muted) !important;
  margin: 0 0 0.9rem 0 !important;
}

.np-scope.np-style-editorial-mag .cta-major .cta-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(18,18,18,.14) !important;
  background: var(--np-ink) !important;
  color: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 160ms var(--np-ease), background 160ms var(--np-ease) !important;
}

.np-scope.np-style-editorial-mag .cta-major .cta-button:hover{
  transform: translateY(-1px) !important;
  background: #000 !important;
}

/* =========================================================
   9) AUTHOR + RELATED POSTS
========================================================= */
.np-scope.np-style-editorial-mag .about-author{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: 1.1rem 1.1rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid var(--np-border) !important;
  background: #fff !important;
  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  gap: 1rem !important;
  align-items: start !important;
}

.np-scope.np-style-editorial-mag .about-author img{
  width: 76px !important;
  height: 76px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

.np-scope.np-style-editorial-mag .about-author .name{
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-ink) !important;
  margin: 0 0 0.15rem 0 !important;
}

.np-scope.np-style-editorial-mag .about-author .bio{
  color: var(--np-muted) !important;
  margin: 0 !important;
}

.np-scope.np-style-editorial-mag .related-posts{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.1) auto 0 auto !important;
}

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

.np-scope.np-style-editorial-mag .related-posts .card{
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.06) !important;
  transition: transform 220ms var(--np-ease) !important;
}

.np-scope.np-style-editorial-mag .related-posts .card:hover{
  transform: translateY(-2px) !important;
}

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

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

/* =========================================================
   10) SIGNATURE: “MARGIN NOTES” (desktop)
   Add a simple element inside your content with class .margin-note
========================================================= */
.np-scope.np-style-editorial-mag .margin-note{
  font-family: var(--np-font-ui) !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  color: var(--np-muted) !important;
  border-left: 2px solid var(--np-border) !important;
  padding-left: 0.8rem !important;
}

/* On wide screens, float margin notes into the side gutter */
@media (min-width: 1024px){
  .np-scope.np-style-editorial-mag .reading-box .margin-note{
    float: right !important;
    width: min(240px, 32%) !important;
    margin: 0.2rem 0 0.8rem 1.1rem !important;
  }
}

/* =========================================================
   11) REVEAL ANIMATION HOOKS (IntersectionObserver driven)
========================================================= */
.np-scope.np-style-editorial-mag .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-editorial-mag .np-reveal.is-visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

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

/* =========================================================
   12) PROGRESS LINE (JS injects .np-progress-wrap + .np-progress-bar)
========================================================= */
.np-scope.np-style-editorial-mag .np-progress-wrap{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  height: 10px !important;
  background: color-mix(in srgb, var(--np-ink) 6%, #fff 94%) !important;
  border-bottom: 1px solid var(--np-border) !important;
}

.np-scope.np-style-editorial-mag .np-progress-bar{
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, var(--np-accent), color-mix(in srgb, var(--np-accent) 55%, #000 45%)) !important;
  transform-origin: left center !important;
}

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

@media (max-width: 640px){
  .np-scope.np-style-editorial-mag .hero{
    padding: 1.1rem !important;
  }
  .np-scope.np-style-editorial-mag .about-author{
    grid-template-columns: 60px 1fr !important;
  }
  .np-scope.np-style-editorial-mag .about-author img{
    width: 60px !important;
    height: 60px !important;
  }
}