/* =========================================================
   DGFari Studio  |  Legal pages (Terms, Privacy)
   Reuses the design tokens from styles.css
   ========================================================= */

.legal{
  background:var(--cream-50);
  padding-top:clamp(7rem,9vw,9rem);
  padding-bottom:clamp(4rem,8vw,7rem);
}
.legal__container{ width:100%; max-width:1160px; margin-inline:auto; padding-inline:var(--gutter); }

.legal__back{
  font-family:var(--sans); font-weight:500; font-size:.9rem; color:var(--terra-600);
  display:inline-flex; align-items:center; gap:.45em; margin-bottom:1.4rem; transition:gap .3s var(--ease-out), color .3s;
}
.legal__back:hover{ color:var(--terra); gap:.7em; }

.legal__head{ border-bottom:1px solid var(--line); padding-bottom:2rem; margin-bottom:2.6rem; }
.legal__kicker{ font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terra-600); }
.legal__head h1{ font-family:var(--sans); font-weight:800; font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.05; letter-spacing:-.02em; color:var(--navy); margin-top:.7rem; }
.legal__meta{ font-family:var(--sans); font-size:.95rem; color:var(--muted); margin-top:1rem; }
.legal__meta span{ color:var(--charcoal); }

.legal__layout{ display:grid; grid-template-columns:264px 1fr; gap:clamp(2rem,4vw,4.5rem); align-items:start; }

/* Table of contents / side panel */
.legal__toc{ position:sticky; top:6.5rem; max-height:calc(100vh - 8.5rem); overflow:auto; transition:top .5s var(--ease-out), max-height .5s var(--ease-out); }
/* When the nav hides on scroll-down, slide the panel up and grow it to fill the space it leaves */
#nav.is-hidden ~ main .legal__toc{ top:1.65rem; max-height:calc(100vh - 3.65rem); }
.legal__toc-title{ font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-600); margin-bottom:1rem; }
.legal__toc nav{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
.legal__toc a{
  font-family:var(--sans); font-size:.85rem; line-height:1.4; color:var(--muted);
  padding:.5rem 0 .5rem 1rem; margin-left:-1px;
  border-left:2px solid transparent; transition:color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.legal__toc a:hover{ color:var(--navy); }
.legal__toc a.is-active{ color:var(--terra-600); border-left-color:var(--terra); font-weight:600; }

/* Body */
.legal__body h2{
  font-family:var(--sans); font-weight:700; font-size:clamp(1.3rem,2.1vw,1.65rem);
  color:var(--navy); letter-spacing:-.01em; line-height:1.2;
  margin-top:2.8rem; padding-top:1.2rem; border-top:1px solid var(--line); scroll-margin-top:6.5rem;
}
.legal__body h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.legal__body h3{ font-family:var(--sans); font-weight:600; font-size:1.08rem; color:var(--navy); margin-top:1.9rem; scroll-margin-top:6.5rem; }
.legal__body p{ font-family:var(--serif); font-size:1.02rem; line-height:1.72; color:var(--charcoal); margin-top:.9rem; max-width:72ch; }
.legal__body ul{ margin-top:.85rem; padding-left:0; max-width:72ch; display:flex; flex-direction:column; gap:.5rem; }
.legal__body li{ position:relative; padding-left:1.5rem; font-family:var(--serif); font-size:1.02rem; line-height:1.62; color:var(--charcoal); }
.legal__body li::before{ content:''; position:absolute; left:.25rem; top:.62em; width:.42rem; height:.42rem; border-radius:50%; background:var(--terra); }
.legal__company{ font-family:var(--sans); font-weight:700; color:var(--navy); }
.legal__copyright{ margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); }

@media (max-width:900px){
  .legal__layout{ grid-template-columns:1fr; }
  .legal__toc{ position:static; max-height:300px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.5rem; margin-bottom:2.4rem; box-shadow:var(--sh-sm); }
  .legal__toc nav{ border-left:none; }
  .legal__toc a{ border-left:none; padding-left:0; margin-left:0; }
  .legal__toc a.is-active{ border-left:none; padding-left:.6rem; border-left:2px solid var(--terra); }
}