/* ==========================================================================
   JVRD Ventures — Legal pages (Privacy, Terms, Cookies, Data Deletion)
   --------------------------------------------------------------------------
   Scoped entirely under .legal-doc so it cannot affect any existing page.
   Only privacy-policy.html, terms-of-use.html, cookie-policy.html and
   data-deletion.html load this file.

   Brand tokens taken from the existing theme:
     navy  #263062   sand #e0bb8e   blue-grey #647b96
     body  Lato      headings Archivo
   ========================================================================== */

.legal-doc {
  --legal-navy: #263062;
  --legal-sand: #e0bb8e;
  /* The brand sand is only 1.8:1 on white — fine as a border or on the navy
     card, unreadable as small text. This is the same hue darkened to 4.9:1,
     used wherever the accent carries actual text. */
  --legal-gold-text: #8f6a35;
  /* The theme blue-grey #647b96 is 4.36:1 on white — just under AA. Darkened a
     step to 4.8:1 for the small uppercase labels that use it. */
  --legal-grey: #5f748e;
  --legal-ink: #2c3340;
  --legal-muted: #5f6b7c;
  --legal-rule: #e2e6ec;
  --legal-tint: #f6f8fa;

  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 24px;
  font-family: Lato, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--legal-ink);
  -webkit-font-smoothing: antialiased;
}

/* --- Document intro ------------------------------------------------------ */

/* The theme caps `.field--body p` at 490px, which is right for the marketing
   pages but wraps these documents into a narrow column. Reset inside the doc. */
.legal-doc p {
  max-width: none;
}

.legal-doc__eyebrow {
  font-family: Archivo, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--legal-gold-text);
  margin: 0 0 14px;
}

.legal-doc__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--legal-muted);
  margin: 0 0 36px;
}

/* --- Meta strip (Entity / Version / Effective date / Governing law) ------- */

.legal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* borders live on the cells so a part-filled last row leaves no grey block */
  border-top: 1px solid var(--legal-rule);
  border-left: 1px solid var(--legal-rule);
  background: #fff;
  margin: 0 0 40px;
}

.legal-meta__item {
  padding: 18px 20px;
  border-right: 1px solid var(--legal-rule);
  border-bottom: 1px solid var(--legal-rule);
}

.legal-meta__label {
  font-family: Archivo, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--legal-grey);
  margin: 0 0 6px;
}

.legal-meta__value {
  font-family: Archivo, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--legal-navy);
  margin: 0;
}

/* --- Callout ("Read this first", "In short", "Please avoid") -------------- */

.legal-callout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  background: var(--legal-tint);
  border-left: 3px solid var(--legal-sand);
  padding: 26px 28px;
  margin: 0 0 44px;
}

.legal-callout__label {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legal-navy);
  line-height: 1.6;
  margin: 3px 0 0;
}

.legal-callout__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--legal-muted);
}

.legal-callout--inline {
  margin: 32px 0;
}

/* --- Table of contents --------------------------------------------------- */

.legal-toc {
  border-top: 1px solid var(--legal-rule);
  border-bottom: 1px solid var(--legal-rule);
  padding: 30px 0 34px;
  margin: 0 0 52px;
}

.legal-toc__title {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legal-grey);
  margin: 0 0 20px;
}

.legal-toc__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc__list li {
  margin: 0;
  padding: 0;
}

.legal-toc__list a {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--legal-ink);
  text-decoration: none;
  border-bottom: 0;
  transition: color 0.15s ease;
}

.legal-toc__list a:hover,
.legal-toc__list a:focus {
  color: var(--legal-navy);
}

.legal-toc__list a:hover .legal-toc__num {
  color: var(--legal-navy);
}

.legal-toc__num {
  flex: 0 0 22px;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--legal-gold-text);
  transition: color 0.15s ease;
}

/* --- Sections ------------------------------------------------------------ */

.legal-section {
  margin: 0 0 46px;
  scroll-margin-top: 120px;
}

.legal-section__heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: Archivo, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--legal-navy);
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--legal-rule);
}

.legal-section__num {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--legal-gold-text);
}

.legal-section p {
  margin: 0 0 16px;
}

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

.legal-doc strong {
  font-weight: 700;
  color: var(--legal-navy);
}

/* Sub-headings inside a section (e.g. IDENTITY & CONTACT) */
.legal-subhead {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--legal-grey);
  margin: 30px 0 12px;
}

.legal-subhead:first-child {
  margin-top: 0;
}

/* --- Lists (site CSS strips markers globally, so rebuild them here) ------- */

.legal-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.legal-list li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 26px;
  line-height: 1.7;
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--legal-gold-text);
}

.legal-list li:last-child {
  margin-bottom: 0;
}

/* --- Definition rows (Key terms, cookie durations) ----------------------- */

.legal-defs {
  margin: 0 0 18px;
  border-top: 1px solid var(--legal-rule);
}

.legal-defs__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--legal-rule);
}

.legal-defs__term {
  font-family: Archivo, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--legal-navy);
}

.legal-defs__desc {
  margin: 0;
  color: var(--legal-muted);
}

/* --- Numbered process steps --------------------------------------------- */

.legal-steps {
  list-style: none;
  counter-reset: legal-step;
  margin: 0 0 18px;
  padding: 0;
}

.legal-steps li {
  counter-increment: legal-step;
  position: relative;
  padding: 0 0 22px 56px;
  margin: 0;
}

.legal-steps li::before {
  content: "0" counter(legal-step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--legal-gold-text);
  line-height: 1.7;
}

.legal-steps li:last-child {
  padding-bottom: 0;
}

.legal-steps__title {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--legal-navy);
  margin: 0 0 4px;
}

/* --- Contact card -------------------------------------------------------- */

.legal-contact {
  background: var(--legal-navy);
  color: #fff;
  padding: 34px 36px;
  margin: 44px 0;
}

.legal-contact__label {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legal-sand);
  margin: 0 0 18px;
}

.legal-contact__name {
  font-family: Archivo, sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px;
}

.legal-contact__attn {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 16px;
}

.legal-contact p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.legal-contact p:last-child {
  margin-bottom: 0;
}

/* Scoped with .legal-doc so these win over the `.legal-section a` rule below —
   the contact card sits inside a section and would otherwise inherit navy text
   on its navy background. */
.legal-doc .legal-contact a {
  color: var(--legal-sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 187, 142, 0.4);
}

.legal-doc .legal-contact a:hover,
.legal-doc .legal-contact a:focus {
  color: #fff;
  border-bottom-color: #fff;
}

/* --- Body links ---------------------------------------------------------- */

.legal-section a,
.legal-callout a,
.legal-note a {
  color: var(--legal-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--legal-sand);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.legal-section a:hover,
.legal-section a:focus,
.legal-callout a:hover,
.legal-callout a:focus,
.legal-note a:hover,
.legal-note a:focus {
  color: var(--legal-grey);
  border-bottom-color: var(--legal-grey);
}

/* --- Related documents --------------------------------------------------- */

.legal-related {
  border-top: 1px solid var(--legal-rule);
  padding: 30px 0 0;
  margin: 44px 0 0;
}

.legal-related__title {
  font-family: Archivo, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legal-grey);
  margin: 0 0 16px;
}

.legal-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-related__list li {
  margin: 0;
  padding: 0;
}

.legal-related__list a {
  display: inline-block;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--legal-navy);
  text-decoration: none;
  border: 1px solid var(--legal-rule);
  padding: 9px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.legal-related__list a:hover,
.legal-related__list a:focus {
  border-color: var(--legal-sand);
  background: var(--legal-tint);
}

/* --- Closing note -------------------------------------------------------- */

.legal-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--legal-grey);
  border-top: 1px solid var(--legal-rule);
  padding: 26px 0 0;
  margin: 40px 0 0;
}

.legal-note p {
  margin: 0 0 10px;
}

.legal-note p:last-child {
  margin-bottom: 0;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .legal-doc {
    font-size: 16px;
  }

  .legal-callout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .legal-defs__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .legal-doc {
    padding: 0 20px 20px;
  }

  .legal-doc__lead {
    font-size: 18px;
  }

  .legal-section__heading {
    font-size: 19px;
    gap: 12px;
  }

  .legal-contact {
    padding: 26px 22px;
  }

  .legal-toc__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Footer legal links
   --------------------------------------------------------------------------
   The four legal links added to the existing footer meta bar
   (.page-footer__notes .menu--footer-meta) on every main-site page.

   The theme already sets that <ul> to display:flex, and at >=992px to
   flex-wrap:nowrap with padding-left:48.5% — which left the whole left half of
   the bar empty and has no room for five items. These rules move the legal
   links into that empty space and keep the original copyright line on the
   right. Nothing here changes any other component.
   ========================================================================== */

.page-footer__notes .menu--footer-meta > ul {
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
}

.page-footer__notes .menu--footer-meta > ul li.footer-legal {
  padding: 0.375rem 0;
}

.page-footer__notes .menu--footer-meta > ul li.footer-legal a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.page-footer__notes .menu--footer-meta > ul li.footer-legal a:hover,
.page-footer__notes .menu--footer-meta > ul li.footer-legal a:focus {
  color: #e0bb8e;
  border-bottom-color: #e0bb8e;
}

@media (min-width: 992px) {
  .page-footer__notes .menu--footer-meta > ul {
    padding-left: 0;
  }

  /* the original copyright <li> keeps to the right of the bar */
  .page-footer__notes .menu--footer-meta > ul li:not(.footer-legal) {
    margin-left: auto;
    padding-left: 1.5rem;
  }
}

@media (max-width: 992px) {
  .page-footer__notes .menu--footer-meta > ul li.footer-legal {
    margin-bottom: 0;
  }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .legal-doc {
    max-width: none;
    font-size: 11pt;
  }

  .legal-section {
    page-break-inside: avoid;
  }

  .legal-contact {
    background: none;
    color: #000;
    border: 1px solid #999;
  }

  .legal-contact p,
  .legal-contact__name,
  .legal-contact__attn,
  .legal-contact a {
    color: #000;
  }

  .legal-related {
    display: none;
  }
}