/* ==========================================================================
   MEI VENTURES — Legal document pages (Terms, Privacy)

   Loads on top of style.css (tokens, reset) and contact.css (masthead, footer,
   glow, .aside-* helpers). This file only adds the document layout, so the
   legal pages stay visually identical to the contact page at the edges.
   ========================================================================== */

.legal-main { padding-top: 56px; }

.legal-intro { margin-bottom: 56px; }

.legal-updated {
  margin-top: 20px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* Contents rail on the left, document on the right -- mirrored from the
   contact page's form/aside split so the two pages feel like one set. */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   CONTENTS
   -------------------------------------------------------------------------- */
.legal-toc {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Long enough to scroll on its own on short screens. */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding-right: 6px;
}

.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-list a {
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
  padding: 7px 12px;
  border-radius: 9px;
  border-left: 2px solid transparent;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.toc-list a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* Set by legal.js as you scroll through the document. */
.toc-list a.is-active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--accent-red);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   DOCUMENT
   -------------------------------------------------------------------------- */
.legal-doc {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 22px;
  padding: 44px 48px 48px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Comfortable measure for long-form reading. */
  max-width: 780px;
}

.legal-callout {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
  background: rgba(255, 42, 0, 0.06);
  border: 1px solid rgba(255, 42, 0, 0.22);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 40px;
}

.legal-callout strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-section {
  /* Clears the sticky masthead area when jumped to from the contents. */
  scroll-margin-top: 32px;
}

.legal-section + .legal-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--bg-card-border);
}

.legal-doc h2 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.legal-doc p {
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--text-secondary);
}

.legal-doc p + p,
.legal-doc ul + p { margin-top: 14px; }

.legal-doc ul {
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.legal-doc ul li {
  position: relative;
  padding-left: 22px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.legal-doc ul li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-red);
}

.legal-doc a:not(.aside-email) {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

.legal-doc a:not(.aside-email):hover {
  color: var(--accent-crimson);
  text-decoration-color: var(--accent-crimson);
}

.legal-contact-card {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 20px 22px;
}

/* Marks the page you are already on in the footer. */
.contact-footer-links a.is-current {
  color: var(--text-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   ENTRANCE
   -------------------------------------------------------------------------- */
.legal-toc,
.legal-doc {
  animation: contactRise 0.9s var(--ease-out-expo) backwards;
}

.legal-toc { animation-delay: 0.28s; }
.legal-doc { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .legal-toc,
  .legal-doc { animation: none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: 1fr; gap: 36px; }

  /* Un-stick and collapse into a compact card above the document. */
  .legal-toc {
    position: static;
    max-height: none;
    overflow: visible;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bg-card-border);
    border-radius: 16px;
    padding: 20px 18px;
  }

  .toc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2px;
  }

  .legal-doc { max-width: none; }
}

@media (max-width: 720px) {
  .legal-main { padding-top: 40px; }
  .legal-intro { margin-bottom: 40px; }
  .legal-doc { padding: 28px 22px 32px; border-radius: 18px; }
  .legal-doc h2 { font-size: 1.16rem; }
  .toc-list { grid-template-columns: 1fr; }
  .legal-section + .legal-section { margin-top: 32px; padding-top: 32px; }
}

/* Addresses shown as plain text. The document rule underlines every link in
   the body copy, so these need to opt out of that as well as out of the hover
   colour -- they are not clickable and must not look like they are. */
.legal-doc .legal-email-static {
  color: var(--text-primary);
  text-decoration: none;
  cursor: default;
}

/* ==========================================================================
   MOBILE — touch targets only, desktop untouched
   ========================================================================== */
@media (max-width: 860px) {
  /* Contents entries were 34px tall. Taller rows are easier to hit and make
     the collapsed contents card read as a proper list. */
  .toc-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 14px;
  }

  .toc-list { gap: 4px; }
}

/* Narrowest phones. The address is held on one line by a viewport-linked font
   size (see .aside-email in contact.css), and at 320px that lands below the
   0.92rem body text underneath it -- so the card's most important line became
   its smallest. Trimming the card padding buys the address a couple of points
   back, and the body text steps down with it so the hierarchy still reads. */
@media (max-width: 360px) {
  .legal-contact-card { padding: 18px 16px; }

  /* Same ramp as the base rule, recalculated for the narrower padding:
     available width is now (viewport - 162px) instead of (viewport - 174px). */
  .legal-contact-card .aside-email {
    font-size: clamp(11px, calc(8.78vw - 14.57px), 1.18rem);
  }

  .legal-contact-card .aside-text { font-size: 0.8rem; }
}