/* np-style-illustrated-hybrid.css */
/* =========================================================
   NutraPlanet Scoped Theme: Illustrated Editorial Hybrid
   Scope Gate: .np-scope.np-style-illustrated-hybrid

   Design thesis:
   - Editorial readability + illustrated “zest” (stickers, doodle lines, soft color plates)
   - High contrast (black on light)
   - Unique signatures vs editorial-mag:
     1) “Sticker Tabs” on callouts + CTAs
     2) Doodle dividers + sketched underlines on headings
     3) Polaroid/print-photo image framing (subtle, premium, not childish)

   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-illustrated-hybrid{
  /* Surfaces */
  --np-bg: #fbfaf7;
  --np-surface: #ffffff;
  --np-surface-2: #f2efe8;

  /* Ink */
  --np-ink: #111111;
  --np-ink-2: #242424;
  --np-muted: #5a5a5a;

  /* Accent palette (JS will pick one per page for “signature” feel) */
  --np-accent: #1b5cff; /* default */
  --np-accent-2: #0e3aa8;

  /* Sticker/support colors */
  --np-sticker: #fff2a8;
  --np-sticker-2: #c9f7d2;
  --np-sticker-3: #ffd1e8;

  --np-border: rgba(17,17,17,.14);
  --np-border-2: rgba(17,17,17,.20);

  /* Typography (playful editorial, but still premium) */
  --np-font-display: "Fraunces","Recoleta","Georgia",serif;
  --np-font-head: "Fraunces","Georgia",serif;
  --np-font-body: "Charter","Source Serif 4","Georgia",serif;
  --np-font-ui: "Nunito Sans","DM Sans","Helvetica Neue",Arial,sans-serif;

  /* Type scale */
  --np-fs-body: clamp(1.02rem, 0.96rem + 0.35vw, 1.16rem);
  --np-lh-body: 1.72;
  --np-fs-h1: clamp(2.05rem, 1.35rem + 2.5vw, 3.15rem);
  --np-fs-h2: clamp(1.48rem, 1.14rem + 1.35vw, 2.05rem);
  --np-fs-h3: clamp(1.18rem, 1.04rem + 0.7vw, 1.48rem);

  /* Layout */
  --np-max: 74rem;
  --np-measure: 66ch;
  --np-gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem);
  --np-block: clamp(1rem, 0.65rem + 1.2vw, 1.9rem);

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

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

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

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

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

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

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

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

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

.np-scope.np-style-illustrated-hybrid hr{
  border: 0 !important;
  height: 18px !important;
  margin: calc(var(--np-block) * 1.2) 0 !important;
  background: transparent !important;
  position: relative !important;
}

/* Doodle divider (signature) */
.np-scope.np-style-illustrated-hybrid hr::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 3px !important;
  transform: translateY(-50%) !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(17,17,17,.0) 0 10px,
      rgba(17,17,17,.18) 10px 22px,
      rgba(17,17,17,.0) 22px 34px
    ) !important;
}

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

/* Hand-sketched underline accent (signature) */
.np-scope.np-style-illustrated-hybrid h1::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -0.18em !important;
  width: min(420px, 85%) !important;
  height: 0.55em !important;
  background: color-mix(in srgb, var(--np-accent) 18%, #fff 82%) !important;
  border-radius: 999px !important;
  transform: rotate(-1.2deg) !important;
  z-index: -1 !important;
}

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

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

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

/* =========================================================
   3) HERO (illustrated “plate” background)
========================================================= */
.np-scope.np-style-illustrated-hybrid .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.15rem, 1rem + 2vw, 2.35rem) !important;
  margin-bottom: calc(var(--np-block) * 1.1) !important;
}

/* Soft illustrated blobs behind hero */
.np-scope.np-style-illustrated-hybrid .hero::before{
  content: "" !important;
  position: absolute !important;
  inset: -40px !important;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--np-accent) 20%, #fff 80%) 0 38%, transparent 40%),
    radial-gradient(circle at 86% 24%, rgba(255, 209, 232, .55) 0 34%, transparent 36%),
    radial-gradient(circle at 48% 98%, rgba(201, 247, 210, .60) 0 40%, transparent 42%) !important;
  filter: blur(10px) !important;
  opacity: .9 !important;
  pointer-events: none !important;
}

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

.np-scope.np-style-illustrated-hybrid .hero .meta,
.np-scope.np-style-illustrated-hybrid .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;
  color: var(--np-muted) !important;
  font-weight: 800 !important;
}

.np-scope.np-style-illustrated-hybrid .pill,
.np-scope.np-style-illustrated-hybrid .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 var(--np-border) !important;
  background: rgba(255,255,255,.88) !important;
  font-family: var(--np-font-ui) !important;
  font-size: 0.9rem !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   4) GLASS GRID + GLASS CARDS (become “print cards”)
========================================================= */
.np-scope.np-style-illustrated-hybrid .glass-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(0.85rem, 0.6rem + 1.1vw, 1.15rem) !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  max-width: var(--np-max) !important;
}

.np-scope.np-style-illustrated-hybrid .glass-card{
  grid-column: span 6 !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  padding: 1rem 1.05rem !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.06) !important;
}

/* “Ink stamp” corner notch */
.np-scope.np-style-illustrated-hybrid .glass-card::before{
  content: "" !important;
  position: absolute !important;
  top: -30px !important;
  right: -30px !important;
  width: 92px !important;
  height: 92px !important;
  background: color-mix(in srgb, var(--np-accent) 18%, #fff 82%) !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 28px !important;
  transform: rotate(10deg) !important;
  opacity: .8 !important;
}

/* =========================================================
   5) CALLOUTS (Sticker Tab signature)
========================================================= */
.np-scope.np-style-illustrated-hybrid .callout{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  padding: 1.05rem 1.15rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid var(--np-border) !important;
  background: #fff !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Sticker tab at top-left */
.np-scope.np-style-illustrated-hybrid .callout::before{
  content: "KEY TAKEAWAY" !important;
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 0.34rem 0.6rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(17,17,17,.16) !important;
  background: var(--np-sticker) !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  color: var(--np-ink) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;
}

.np-scope.np-style-illustrated-hybrid .callout > :first-child{
  margin-top: 1.6rem !important; /* make room for tab */
}

/* optional title inside callout */
.np-scope.np-style-illustrated-hybrid .callout .callout-title{
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  margin: 0 0 0.4rem 0 !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   6) PULL QUOTE (sketch frame, not plate)
========================================================= */
.np-scope.np-style-illustrated-hybrid blockquote,
.np-scope.np-style-illustrated-hybrid .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: 2px dashed rgba(17,17,17,.22) !important;
  position: relative !important;
}

.np-scope.np-style-illustrated-hybrid blockquote::before,
.np-scope.np-style-illustrated-hybrid .pull-quote::before{
  content: "QUOTE" !important;
  position: absolute !important;
  top: -12px !important;
  left: 18px !important;
  padding: 0.28rem 0.55rem !important;
  border-radius: 999px !important;
  background: var(--np-sticker-3) !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

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

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

/* =========================================================
   7) STORY VIGNETTE (paper + highlight)
========================================================= */
.np-scope.np-style-illustrated-hybrid .story-vignette,
.np-scope.np-style-illustrated-hybrid .vignette{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.2) auto !important;
  padding: 1.15rem 1.2rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 1px solid var(--np-border) !important;
  background: linear-gradient(180deg, #fff 0%, var(--np-surface-2) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

.np-scope.np-style-illustrated-hybrid .story-vignette::before,
.np-scope.np-style-illustrated-hybrid .vignette::before{
  content: "STORY MOMENT" !important;
  display: inline-block !important;
  font-family: var(--np-font-ui) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--np-ink) !important;
  background: var(--np-sticker-2) !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  padding: 0.28rem 0.55rem !important;
  border-radius: 12px !important;
  margin: 0 0 0.65rem 0 !important;
}

/* =========================================================
   8) CTA MAJOR (becomes “feature card” w/ sticker corner)
========================================================= */
.np-scope.np-style-illustrated-hybrid .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 var(--np-border-2) !important;
  background: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 24px 46px rgba(0,0,0,.07) !important;
}

.np-scope.np-style-illustrated-hybrid .cta-major::before{
  content: "FREEBIE" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  padding: 0.34rem 0.62rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(17,17,17,.16) !important;
  background: var(--np-sticker) !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}

.np-scope.np-style-illustrated-hybrid .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-illustrated-hybrid .cta-major .cta-sub{
  color: var(--np-muted) !important;
  margin: 0 0 0.9rem 0 !important;
}

.np-scope.np-style-illustrated-hybrid .cta-major .cta-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.78rem 1.05rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,17,17,.14) !important;
  background: var(--np-ink) !important;
  color: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform 170ms var(--np-ease), background 170ms var(--np-ease) !important;
}

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

/* =========================================================
   9) ABOUT AUTHOR + RELATED
========================================================= */
.np-scope.np-style-illustrated-hybrid .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-illustrated-hybrid .about-author img{
  width: 76px !important;
  height: 76px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

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

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

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

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

.np-scope.np-style-illustrated-hybrid .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-illustrated-hybrid .related-posts .card:hover{
  transform: translateY(-2px) rotate(-0.2deg) !important;
}

.np-scope.np-style-illustrated-hybrid .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-illustrated-hybrid .related-posts .card .desc{
  padding: 0 0.9rem 0.9rem 0.9rem !important;
  color: var(--np-muted) !important;
  margin: 0 !important;
}

/* =========================================================
   10) POLAROID IMAGE FRAMING (signature)
   Apply to images inside .reading-box or cards without changing HTML.
========================================================= */
.np-scope.np-style-illustrated-hybrid .reading-box img,
.np-scope.np-style-illustrated-hybrid .glass-card img{
  background: #fff !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  box-shadow: 0 18px 30px rgba(0,0,0,.06) !important;
}

/* =========================================================
   11) REVEAL HOOKS (theme-specific pop-in)
========================================================= */
.np-scope.np-style-illustrated-hybrid .np-reveal{
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985) !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-illustrated-hybrid .np-reveal.is-visible{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

@media (prefers-reduced-motion: reduce){
  .np-scope.np-style-illustrated-hybrid .np-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .np-scope.np-style-illustrated-hybrid .hero::before{
    filter: none !important;
  }
}

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

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