/* Renéra · Privacy Policy — editorial legal long-form page.
   Composed on top of homepage.css + the design system. Tokens only.
   --------------------------------------------------------------------- */

/* =========================================
   HERO · legal masthead
   ========================================= */
.rn-legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--renera-sand-300);
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-legal-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.rn-legal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rn-legal-hero__eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--renera-olive-500);
}
.rn-legal-hero__title {
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--renera-olive-800);
  margin: 32px 0 24px;
}
.rn-legal-hero__title em {
  font-style: italic;
  color: var(--renera-olive-500);
}
.rn-legal-hero__lead {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.5;
  max-width: 600px;
  color: var(--renera-olive-700);
}
/* Hairline meta row: updated · read time · section count (mono, tracked) */
.rn-legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--renera-clay-300);
  max-width: 600px;
}
.rn-legal-hero__meta-item {
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--renera-mute);
}
.rn-legal-hero__meta-sep {
  font-family: var(--renera-font-mono);
  font-size: 11px;
  color: var(--renera-clay-300);
}

/* =========================================
   BODY · two-column (TOC + prose)
   ========================================= */
.rn-legal-body {
  background: var(--renera-sand-300);
  padding: 80px 0 112px;
}
.rn-legal-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 72px;
  align-items: start;
}

/* =========================================
   Table of contents — sticky sidebar
   ========================================= */
.rn-toc__sticky {
  position: sticky;
  top: 32px;
}
.rn-toc__label {
  display: block;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rn-toc__link {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  text-decoration: none;
  color: var(--renera-mute);
  font-size: 14px;
  line-height: 1.4;
  transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-toc__n {
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--renera-clay-700);
}
.rn-toc__t {
  font-size: 13.5px;
  line-height: 1.4;
}
.rn-toc__link:hover {
  color: var(--renera-olive-700);
}
.rn-toc__link.is-active {
  color: var(--renera-olive-800);
  font-weight: 600;
}
.rn-toc__link.is-active .rn-toc__n { color: var(--renera-olive-500); }

/* =========================================
   Prose · .rn-legal — styles the CMS content
   ========================================= */
.rn-legal {
  max-width: 760px;
  font-family: var(--renera-font-sans);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--renera-ink);
}
/* Elementor's text-editor widget applies the kit body font (Roboto) to <p>/<li>
   with higher specificity than .rn-legal; force Rooftop back onto the prose.
   Headings keep Recoleta via .rn-legal__h, so they're intentionally excluded. */
.rn-legal .elementor-widget-text-editor p,
.rn-legal .elementor-widget-text-editor li,
.rn-legal .elementor-widget-text-editor a,
.rn-legal .elementor-widget-text-editor strong,
.rn-legal .elementor-widget-text-editor em {
  font-family: var(--renera-font-sans);
}
/* The page's Elementor content leads with a post-title widget ("Privacy Policy")
   and a post-info widget ("Last updated on …") — both are now provided by the
   editorial masthead above. Suppress those widgets and collapse their (now empty)
   flexbox containers so they don't duplicate the title. The plain widget selectors
   hide the content everywhere; the :has() rules remove the leftover container gap
   on browsers that support it. */
.rn-legal .elementor-widget-theme-post-title,
.rn-legal .elementor-widget-post-info,
.rn-legal .e-child:has(.elementor-widget-theme-post-title),
.rn-legal .e-child:has(.elementor-widget-post-info) {
  display: none !important;
}
.rn-legal__h {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--renera-font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--renera-olive-800);
  margin: 56px 0 16px;
  /* Clear the sticky announcement bar + header (≈134px) AND leave comfortable
     breathing room so a clicked Contents link doesn't land the heading jammed
     under the chrome. */
  scroll-margin-top: 180px;
}
.rn-legal__h:first-child,
.rn-legal > .rn-legal__h:first-of-type,
.rn-legal .elementor-widget-container > .rn-legal__h:first-of-type {
  margin-top: 0;
}
.rn-legal__h strong { font-weight: inherit; }
.rn-legal__num {
  font-family: var(--renera-font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--renera-olive-500);
}
.rn-legal__h-text { display: block; }
.rn-legal__h-sub {
  font-style: italic;
  font-weight: inherit;
  color: var(--renera-olive-500);
}
.rn-legal p {
  margin: 0 0 18px;
  color: var(--renera-ink);
}
.rn-legal strong { color: var(--renera-olive-800); font-weight: 500; }
.rn-legal a {
  color: var(--renera-olive-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--renera-clay-300);
  transition: text-decoration-color var(--renera-dur-fast) var(--renera-ease);
  word-break: break-word;
}
.rn-legal a:hover { text-decoration-color: var(--renera-olive-500); }
.rn-legal ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.rn-legal ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--renera-ink);
}
.rn-legal ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 8px;
  height: 1px;
  background: var(--renera-clay-700);
}
.rn-legal ul li p { margin: 0; }

/* Closing contact card — compact "Email us / Say Hello" row (per the design) */
.rn-legal__contact {
  margin-top: 72px;
  padding: 28px 32px;
  background: var(--renera-sand-200);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rn-legal__contact-label {
  display: block;
  font-family: var(--renera-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--renera-mute);
  margin-bottom: 8px;
}
/* Scoped under .rn-legal so these beat the broad ".rn-legal a" prose link rule
   (which would otherwise tint the email and turn the Say Hello text olive — i.e.
   invisible on the olive button — and force an underline on both). */
.rn-legal .rn-legal__contact-mail {
  font-family: var(--renera-font-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.1;
  color: var(--renera-olive-800);
  text-decoration: none;
  transition: color var(--renera-dur-fast) var(--renera-ease);
}
.rn-legal .rn-legal__contact-mail:hover { color: var(--renera-olive-500); }
.rn-legal .rn-legal__contact-cta {
  flex: none;
  height: auto;
  padding: 14px 22px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--renera-sand-200);
  text-decoration: none;
}

/* =========================================
   Mobile reflow (.rn-m)
   ========================================= */
.rn-m .rn-legal-hero { padding: 64px 0 48px; }
.rn-m .rn-legal-body { padding: 40px 0 72px; }
.rn-m .rn-legal-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}
.rn-m .rn-toc__sticky { position: static; }
.rn-m .rn-toc__label { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* Mobile TOC = a bordered disclosure card */
.rn-m .rn-toc {
  background: var(--renera-sand-200);
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-lg);
  padding: 20px;
}
.rn-toc__details { margin-top: 14px; }
.rn-toc__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--renera-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--renera-olive-700);
}
.rn-toc__summary::-webkit-details-marker { display: none; }
.rn-toc__details[open] .rn-toc__summary svg { transform: rotate(180deg); }
.rn-toc__summary svg { transition: transform var(--renera-dur-base) var(--renera-ease); }
.rn-toc__details .rn-toc__list { margin-top: 16px; }
.rn-m .rn-legal { max-width: 100%; font-size: 15.5px; }
.rn-m .rn-legal__h { margin-top: 40px; font-size: var(--renera-fs-lg); gap: 10px; scroll-margin-top: 100px; }
.rn-m .rn-legal__contact {
  padding: 24px;
  margin-top: 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.rn-m .rn-legal__contact-mail { font-size: 19px; word-break: break-word; }
.rn-m .rn-legal__contact-cta { width: 100%; text-align: center; }