/* StudyMind – text pages (Privacy Policy, Terms of Use, Support, Delete your account).
   Uses the fonts and colours from styles.css; this file only adds the reading layout. */

body.legal { --tz: 1; margin: 0; background: var(--bg); color: var(--g12); font-family: var(--f-display); }
body.legal * { box-sizing: border-box; }

.lg-header { position: sticky; top: 0; z-index: 50; padding: 28px max(64px, calc((100% - 1600px) / 2 + 64px));
  background: transparent; transition: background-color .25s, box-shadow .25s; }
.lg-header.is-stuck { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px rgba(20,20,20,.08); }
html:has(body.legal) { scroll-padding-top: 110px; }
.lg-logo { display: inline-block; }
.lg-logo img { width: 177px; height: auto; display: block; }

.lg-main { padding: 12px 24px 0; }
.lg-card {
  max-width: 880px; margin: 0 auto; background: var(--soft); border-radius: 20px;
  padding: 64px 72px 72px; box-shadow: 0 2px 2px rgba(0,0,0,.08);
  font-size: 16px; line-height: 1.6; overflow-wrap: anywhere;
}

/* headings */
.lg-card h1 { font-family: var(--f-text); font-weight: 200; font-size: 48px; line-height: 1.15; color: var(--violet); margin: 0 0 12px; overflow-wrap: normal; }
.lg-card h2 { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--violet); margin: 44px 0 12px; }
.lg-card h3 { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--button); margin: 28px 0 8px; }
.lg-card h4 { font-weight: 600; font-size: 16px; margin: 20px 0 6px; color: var(--violet); }
.lg-updated { font-size: 14px; line-height: 1.5; color: #595959; margin: 0 0 36px; padding-bottom: 24px; border-bottom: 1px solid #dcdcdc; }

/* text */
.lg-card p { margin: 0 0 14px; }
.lg-card strong, .lg-card b { font-weight: 600; color: var(--g11); }
.lg-card ul, .lg-card ol { margin: 0 0 16px; padding-left: 24px; }
.lg-card li { margin: 0 0 6px; }
.lg-card li > p { margin: 0 0 6px; }
.lg-card a { color: var(--button); text-decoration: underline; text-underline-offset: 2px; }
.lg-card a:hover { color: var(--orange4); }
.lg-card hr { border: 0; border-top: 1px solid #dcdcdc; margin: 32px 0; }

/* tables: scroll sideways inside their own box on small screens */
.sm-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 20px;
  border: 1px solid #dcdcdc; border-radius: 12px; background: #fff; }
.sm-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 1.5; }
.sm-table th, .sm-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid #e6e6e6; overflow-wrap: normal; word-break: normal; }
.sm-table th { background: #ECE9FE; color: var(--violet); font-weight: 600; }
.sm-table tr:last-child td { border-bottom: 0; }

/* deletion form */
.sm-form-wrap { margin: 8px 0 22px; padding: 22px 22px 18px; background: #fff; border: 1px solid #dcdcdc; border-radius: 14px; }
.sm-label { display: block; font-weight: 600; color: var(--violet); margin-bottom: 8px; }
.sm-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sm-input { flex: 1 1 260px; min-width: 0; height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--g12);
  border: 1px solid #bdbdbd; border-radius: 10px; background: #fff; }
.sm-input:focus { outline: 2px solid var(--button); outline-offset: 1px; border-color: var(--button); }
.sm-input[aria-invalid="true"] { border-color: #c4503e; }
.sm-btn { height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 16px;
  color: #fff; background: var(--store-grad); }
.sm-btn:hover { filter: brightness(1.15); }
.sm-btn:disabled { opacity: .6; cursor: wait; }
.sm-error { margin: 10px 0 0; color: #a44031; font-size: 14px; font-weight: 600; }
.sm-thanks { margin: 0; color: var(--violet); font-weight: 600; outline: none; }
.sm-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* footer: same look as the homepage footer, fluid width */
.legal .footer.lg-footer { width: auto; max-width: 1600px; height: auto; margin: 64px 64px 64px; padding: 56px 24px;
  border-radius: 20px; background: radial-gradient(97% 50% at 50% 50%, var(--violet-2) 0%, var(--violet) 100%); display: flex; justify-content: center; }
@media (min-width: 1728px) { .legal .footer.lg-footer { margin: 64px auto; } }
.legal .footer-inner { transform: none; }
.legal .footer-links a[aria-current="page"] { text-decoration: underline; }

@media (max-width: 899px) {
  .lg-header { padding: 14px 20px; }
  html:has(body.legal) { scroll-padding-top: 80px; }
  .lg-logo img { width: 150px; }
  .lg-main { padding: 6px 12px 0; }
  .lg-card { padding: 32px 20px 36px; border-radius: 16px; font-size: 16px; }
  .lg-card h1 { font-size: 34px; }
  .lg-card h2 { font-size: 20px; margin-top: 36px; }
  .lg-card h3 { font-size: 17px; }
  .legal .footer.lg-footer { margin: 40px 20px 20px; padding: 44px 20px; }
}