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

/* =========================================
   HERO · legal masthead
   ========================================= */
.rn-legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--renera-sand-300);
  padding: 60px 0 52px;
  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: 56px 0 80px;
}
.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);
  /* Grid-blowout fix (Issue #38 cookie table): `.rn-legal` is a direct grid
     item of `.rn-legal-grid`. Grid items default to `min-width: auto`, which
     resolves to their content's min-content size — and that calculation does
     NOT stop at `.rn-legal__table-wrap`'s `overflow-x: auto` a few levels
     down, so `.rn-cookie-table`'s `min-width: 640px` was leaking all the way
     up and forcing `.rn-legal` (and with it the whole grid track, and the
     page) wider than the viewport. On mobile this is why /privacy-policy/
     rendered its layout viewport at ~1116px instead of 390px and lost the
     `.rn-m` class entirely (responsive-chrome.js re-measures window.innerWidth
     and un-sets it once the page has already blown out). Explicit min-width:0
     lets the grid item shrink to its track size and hands the table's own
     overflow-x:auto the room to do its job. See
     https://css-tricks.com/preventing-a-grid-blowout/ for the general pattern.
     Harmless on desktop: .rn-legal already fits comfortably inside its 1fr
     track there. */
  min-width: 0;
}
/* Elementor's text-editor widget applies the kit body font (Roboto) to <p>/<li>
   with higher specificity than .rn-legal; force the brand sans 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: 44px 0 36px; }
.rn-m .rn-legal-body { padding: 28px 0 52px; }
.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; }

/* =========================================
   Cookie table (section 5 — Issue #38)
   CMS markup: .rn-legal__table-wrap > table.rn-cookie-table
   ========================================= */
.rn-legal .rn-legal__table-wrap {
  margin: 0 0 26px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--renera-clay-300);
  border-radius: var(--renera-r-md);
  background: var(--renera-sand-200);
}
.rn-legal .rn-cookie-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--renera-fs-sm);
  line-height: 1.5;
}
.rn-legal .rn-cookie-table th,
.rn-legal .rn-cookie-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--renera-clay-300);
}
.rn-legal .rn-cookie-table thead th {
  font-family: var(--renera-font-mono);
  font-weight: 400;
  font-size: var(--renera-fs-eyebrow);
  letter-spacing: var(--renera-track-eyebrow);
  text-transform: uppercase;
  color: var(--renera-mute);
  background: var(--renera-sand-300);
}
.rn-legal .rn-cookie-table tbody tr:last-child td { border-bottom: 0; }
.rn-legal .rn-cookie-table td:first-child {
  font-family: var(--renera-font-mono);
  font-size: 12.5px;
  color: var(--renera-olive-800);
  white-space: nowrap;
}
.rn-legal .rn-cookie-table .rn-cookie-table__cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--renera-r-pill);
  border: 1px solid var(--renera-clay-300);
  font-family: var(--renera-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--renera-olive-700);
}
.rn-m .rn-legal .rn-cookie-table { font-size: 13px; }
.rn-m .rn-legal .rn-cookie-table th,
.rn-m .rn-legal .rn-cookie-table td { padding: 10px 12px; }