/* =========================================================
   PEPPERLABZ SHARED LEGAL PAGE SYSTEM
   Paste as its own Customizer/WPCode CSS snippet, restricted via WPCode
   Smart Conditional Logic to these six page slugs only:
     research-use-only-disclaimer, privacy-policy, terms-conditions,
     shipping-policy, refund-policy, affiliate-terms

   This is a DELIBERATE, INDEPENDENT reproduction of the visual system
   already proven on the PepperLabz Disclaimer page
   (assets/css/pepperlabz-disclaimer.css, .plz-disclaimer-* classes).
   It intentionally duplicates those values under its own .plz-legal-*
   classes rather than sharing/importing that file, so the live,
   working Disclaimer page (and its snippet) can never be affected by
   anything added here, and this file can evolve independently.

   Everything is scoped under .plz-legal-page (each new shortcode's
   wrapper) so this can never affect any other page even if the
   snippet's URL restriction is ever misconfigured.
========================================================= */

.plz-legal-page {
  --plz-legal-bg: #fafafa;
  --plz-legal-text: #111111;
  --plz-legal-muted: #5a6069;
  --plz-legal-line: rgba(17, 17, 17, 0.08);
  --plz-legal-card: #ffffff;

  position: relative !important;
  overflow: hidden !important;
  background: var(--plz-legal-bg) !important;
  padding: 72px 24px 96px !important;
  color: var(--plz-legal-text) !important;
}

/* ---------------------------------------------------------
   BACKGROUND — same two chrome-liquid assets used on the Disclaimer
   page, purely decorative. pointer-events: none on every layer so
   they can never block links, text selection, or mobile scrolling.
--------------------------------------------------------- */

.plz-legal-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.plz-legal-chrome {
  position: absolute !important;
  display: block !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: blur(1px) !important;
}

/* Asset 1 — anchored bottom-left, allowed to bleed past the edge. */
.plz-legal-chrome-1 {
  left: -12vw !important;
  bottom: -10vh !important;
  width: 55vw !important;
  max-width: 820px !important;
  opacity: 0.4 !important;
  transform: rotate(-6deg) !important;
}

/* Asset 2 — anchored top-right, mirrored so the two read as one
   liquid form traveling across the page. */
.plz-legal-chrome-2 {
  right: -14vw !important;
  top: -8vh !important;
  width: 50vw !important;
  max-width: 760px !important;
  opacity: 0.35 !important;
  transform: rotate(8deg) scaleX(-1) !important;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.plz-legal-hero {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
  margin: 0 auto 64px !important;
  text-align: center !important;
}

.plz-legal-logo {
  width: 84px !important;
  height: auto !important;
  margin: 0 auto 28px !important;
  display: block !important;
}

.plz-legal-eyebrow {
  margin: 0 0 14px !important;
  color: var(--plz-legal-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.plz-legal-title {
  margin: 0 !important;
  font-size: clamp(48px, 8vw, 88px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;

  /* Same chrome/liquid-metal gradient as .plz-disclaimer-title —
     reproduced verbatim, not a new gradient, so every legal page
     reads as one family. Solid fallback color first so the heading
     stays fully readable if background-clip: text isn't supported. */
  color: #6e737b !important;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #e7e9ec 18%,
    #aeb2b9 38%,
    #f5f6f8 52%,
    #7d828a 70%,
    #c9ccd2 86%,
    #5b5f66 100%
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Small "Effective Date" / "Last Updated" line — new addition, not
   present on the Disclaimer page (it doesn't carry a date line). */
.plz-legal-meta {
  margin: 18px 0 0 !important;
  color: var(--plz-legal-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.plz-legal-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}

.plz-legal-section {
  padding: 30px 0 !important;
  border-bottom: 1px solid var(--plz-legal-line) !important;
}

.plz-legal-section:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.plz-legal-section h2 {
  margin: 0 0 12px !important;
  color: var(--plz-legal-text) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* New addition: sub-headings within a section (e.g. Privacy Policy's
   "A. Information you provide to us") — not needed on the Disclaimer
   page, which has no nested sub-headings. */
.plz-legal-section h3 {
  margin: 22px 0 10px !important;
  color: var(--plz-legal-text) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
}

.plz-legal-section h3:first-child {
  margin-top: 0 !important;
}

.plz-legal-section p {
  margin: 0 0 14px !important;
  color: var(--plz-legal-muted) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

.plz-legal-section p:last-child {
  margin-bottom: 0 !important;
}

/* New addition: bulleted/numbered lists — several of the new pages
   use lists to break up long clauses; the Disclaimer page has none. */
.plz-legal-section ul,
.plz-legal-section ol {
  margin: 0 0 14px !important;
  padding-left: 22px !important;
  color: var(--plz-legal-muted) !important;
}

.plz-legal-section ul:last-child,
.plz-legal-section ol:last-child {
  margin-bottom: 0 !important;
}

.plz-legal-section li {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.plz-legal-section li:last-child {
  margin-bottom: 0 !important;
}

.plz-legal-section li > ul,
.plz-legal-section li > ol {
  margin-top: 8px !important;
}

.plz-legal-section strong {
  color: var(--plz-legal-text) !important;
  font-weight: 800 !important;
}

.plz-legal-section a {
  color: var(--plz-legal-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Light emphasis card — same treatment as .plz-disclaimer-notice, for
   the one opening/summary section on a page that benefits from being
   set apart (e.g. a "Research Use Only" or "All Sales Final" notice). */
.plz-legal-notice {
  background: var(--plz-legal-card) !important;
  border: 1px solid var(--plz-legal-line) !important;
  border-radius: 20px !important;
  padding: 28px 30px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05) !important;
}

.plz-legal-notice h2 {
  font-size: 22px !important;
}

/* Contact section — marker class only (matches .plz-disclaimer-contact,
   which also carries no unique rules of its own beyond .plz-legal-section
   and its own <a> styling). */

/* ---------------------------------------------------------
   MOBILE — reposition, don't just shrink. Smaller, more blurred,
   tucked into corners so they read as atmosphere, not objects.
--------------------------------------------------------- */

@media (max-width: 767px) {
  .plz-legal-page {
    padding: 56px 18px 64px !important;
  }

  .plz-legal-chrome {
    filter: blur(2px) !important;
  }

  .plz-legal-chrome-1 {
    left: -22vw !important;
    bottom: -6vh !important;
    width: 80vw !important;
    opacity: 0.28 !important;
  }

  .plz-legal-chrome-2 {
    right: -26vw !important;
    top: -4vh !important;
    width: 72vw !important;
    opacity: 0.24 !important;
  }

  .plz-legal-hero {
    margin-bottom: 44px !important;
  }

  .plz-legal-logo {
    width: 64px !important;
    margin-bottom: 20px !important;
  }

  .plz-legal-title {
    font-size: clamp(36px, 13vw, 52px) !important;
  }

  .plz-legal-section {
    padding: 24px 0 !important;
  }

  .plz-legal-section h2 {
    font-size: 18px !important;
  }

  .plz-legal-section h3 {
    font-size: 15px !important;
  }

  .plz-legal-section p,
  .plz-legal-section li {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .plz-legal-notice {
    padding: 22px 20px !important;
  }
}

/* Respect reduced-motion preferences even though this design is
   already static — guards against any future hover/parallax addition. */
@media (prefers-reduced-motion: reduce) {
  .plz-legal-page * {
    animation: none !important;
    transition: none !important;
  }
}