/* ══════════════════════════════════════════════════════
   terms-privacy-legal.css — DocConverter
   Legal pages shared styles (terms, privacy, legal notice)
══════════════════════════════════════════════════════ */

/* ── Prevent horizontal overflow (global) ── */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Hero ── */
.legal-hero {
  background: linear-gradient(135deg, #eff6ff 0%, #f5f3ff 100%);
  padding: 3rem 0 2rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.legal-hero h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: .5rem; }
.legal-hero h1 span { background: linear-gradient(135deg, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.legal-hero p { color: var(--text-muted); font-size: .9rem; }

.legal-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #dbeafe; color: #1d4ed8;
  font-size: .72rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: 999px; margin-bottom: .75rem;
}

/* ── Layout ── */
.legal-wrap {
  max-width: 1260px; margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  align-items: start;
}

/* ── Sidebar nav ── */
.legal-nav {
  position: sticky; top: 2rem;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 14px; padding: 1.25rem;
}
.legal-nav-title {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: .75rem;
}
.legal-nav a {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; border-radius: 7px;
  font-size: .8rem; font-weight: 500; color: var(--text-muted);
  text-decoration: none; transition: all .15s; margin-bottom: .1rem;
}
.legal-nav a:hover { background: #eff6ff; color: #2563eb; }
.legal-nav a.active { background: #eff6ff; color: #2563eb; font-weight: 700; }
.legal-nav a i { font-size: .7rem; flex-shrink: 0; }

/* ── Content typography ── */
.legal-content h2 {
  font-size: 1.2rem; font-weight: 800;
  margin: 2.5rem 0 .75rem; padding-top: .5rem;
  border-top: 2px solid #eff6ff; color: var(--text);
  display: flex; align-items: center; gap: .6rem;
}
.legal-content h2:first-child { margin-top: 0; border-top: none; }
.legal-content h2 i { color: #2563eb; font-size: .95rem; }
.legal-content h3 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--text); }
.legal-content p  { font-size: .875rem; line-height: 1.8; color: #334155; margin-bottom: .85rem; }
.legal-content ul { font-size: .875rem; line-height: 1.8; color: #334155; padding-left: 1.5rem; margin-bottom: .85rem; }
.legal-content ul li { margin-bottom: .3rem; }

/* ── Callout blocks ── */
.legal-highlight {
  background: #eff6ff; border-left: 3px solid #2563eb;
  border-radius: 0 8px 8px 0; padding: .85rem 1.1rem;
  margin-bottom: 1rem; font-size: .85rem; color: #1e40af; line-height: 1.7;
}
.legal-green {
  background: #f0fdf4; border-left: 3px solid #16a34a;
  border-radius: 0 8px 8px 0; padding: .85rem 1.1rem;
  margin-bottom: 1rem; font-size: .85rem; color: #15803d; line-height: 1.7;
}
.legal-warn {
  background: #fff7ed; border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0; padding: .85rem 1.1rem;
  margin-bottom: 1rem; font-size: .85rem; color: #92400e; line-height: 1.7;
}

/* ── Date badge ── */
.date-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #f1f5f9; color: #64748b;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .65rem; border-radius: 999px; margin-bottom: 1.5rem;
}

/* ── Data grid (privacy page) ── */
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.data-card { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; }
.data-card-icon  { font-size: 1.2rem; margin-bottom: .4rem; }
.data-card-title { font-size: .82rem; font-weight: 700; margin-bottom: .25rem; }
.data-card-desc  { font-size: .75rem; color: var(--text-muted); line-height: 1.5; }

/* ── Rights grid (privacy page) ── */
.rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.right-item {
  display: flex; align-items: flex-start; gap: .6rem;
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 8px; padding: .7rem .9rem; font-size: .8rem;
}
.right-item i { color: #16a34a; margin-top: .15rem; flex-shrink: 0; }
.right-item strong { display: block; font-size: .78rem; margin-bottom: .15rem; }

/* ── Legal table ── */
.legal-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: 1rem; }
.legal-table th {
  background: #f8fafc; padding: .6rem .85rem;
  text-align: left; font-weight: 700;
  border: 1px solid var(--border); color: var(--text-muted);
}
.legal-table td { padding: .6rem .85rem; border: 1px solid var(--border); color: #334155; vertical-align: top; }
.legal-table tr:nth-child(even) td { background: #f8fafc; }

/* ── Info card (legal notice page) ── */
.info-card {
  background: #f8fafc; border: 1.5px solid var(--border);
  border-radius: 12px; overflow: hidden; margin-bottom: 1.25rem;
}
.info-card-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 700;
  padding: .75rem 1rem; background: #fff;
  border-bottom: 1px solid var(--border); color: var(--text);
}
.info-card-title i { color: #2563eb; font-size: .75rem; }
.info-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1rem; border-bottom: 1px solid var(--border); font-size: .82rem;
}
.info-row:last-child { border-bottom: none; }
.info-label { flex-shrink: 0; width: 160px; color: var(--text-muted); font-weight: 500; }
.info-value  { flex: 1; color: var(--text); font-weight: 500; word-break: break-word; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero */
  .legal-hero { padding: 2rem 0 1.5rem; }
  .legal-hero h1 { font-size: 1.4rem; }
  .legal-hero p  { font-size: .82rem; padding: 0 1rem; }

  /* Container */
  .container { padding-left: .75rem; padding-right: .75rem; max-width: 100%; }

  /* Layout: single column */
  .legal-wrap { max-width: 100%; padding: 1rem .75rem; gap: 0; grid-template-columns: 1fr; }

  /* Hide desktop sidebar */
  .legal-nav { display: none; }

  /* Mobile collapsible TOC */
  .legal-mobile-toc {
    display: block;
    background: #fff; border: 1.5px solid var(--border);
    border-radius: 12px; margin-bottom: 1.25rem;
    overflow: hidden; width: 100%;
  }
  .legal-mobile-toc summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1rem;
    font-size: .85rem; font-weight: 700; cursor: pointer;
    list-style: none; user-select: none; color: var(--text);
  }
  .legal-mobile-toc summary::-webkit-details-marker { display: none; }
  .legal-mobile-toc summary i.caret { transition: transform .2s; }
  .legal-mobile-toc[open] summary i.caret { transform: rotate(180deg); }
  .legal-mobile-toc-links { padding: .5rem .75rem .75rem; border-top: 1px solid var(--border); }
  .legal-mobile-toc-links a {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem .5rem; border-radius: 7px;
    font-size: .82rem; font-weight: 500; color: var(--text-muted);
    text-decoration: none; transition: all .15s;
  }
  .legal-mobile-toc-links a:hover { background: #eff6ff; color: #2563eb; }
  .legal-mobile-toc-links a i { font-size: .7rem; flex-shrink: 0; }

  /* Content */
  .legal-content { width: 100%; min-width: 0; overflow-x: hidden; }
  .legal-content h2 { font-size: 1rem; word-break: break-word; }
  .legal-content h3 { font-size: .9rem; }
  .legal-content p,
  .legal-content ul { font-size: .82rem; }
  .legal-highlight,
  .legal-warn,
  .legal-green { font-size: .8rem; word-break: break-word; }

  /* Grids: single column */
  .data-grid   { grid-template-columns: 1fr; }
  .rights-grid { grid-template-columns: 1fr; }

  /* Tables: scroll inside wrapper */
  .legal-table { font-size: .75rem; min-width: 380px; }
  .legal-table th,
  .legal-table td { padding: .45rem .55rem; }

  /* Info rows: stacked */
  .info-row { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .info-label { width: 100%; font-size: .75rem; }
  .info-value  { font-size: .82rem; }

  /* Bottom links: full width */
  .legal-bottom-links { flex-direction: column; }
  .legal-bottom-links .btn { width: 100%; justify-content: center; }
}

@media (min-width: 769px) {
  .legal-mobile-toc { display: none; }
}