/* ==========================================================================
   Module home-contact-terms — homepage, /contact, /terms
   Loaded only on these pages (via $pageCss). Design tokens come from app.css.
   ========================================================================== */

/* Page body padding (layout uses <main class="site-main">) */
.site-main { padding: 28px 0 56px; }
@media (min-width: 600px) {
  .site-main { padding-top: 40px; }
}

/* --------------------------------------------------------------------------
   Homepage
   -------------------------------------------------------------------------- */

/* Wide layout for the homepage only (layout hardcodes .container, 720px) */
body.page-home .site-main > .container { max-width: 1100px; }

.home-section { margin-top: 56px; }

.home-how h2 { margin-bottom: 24px; }

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

body.page-contact .contact-form { margin-top: 24px; }

body.page-contact .alert { margin-top: 24px; }

/* --------------------------------------------------------------------------
   Terms & Privacy
   -------------------------------------------------------------------------- */

/* Readable measure for long legal text */
.legal { max-width: 46em; }

.legal-toc {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  padding: 16px 20px;
  margin-bottom: 32px;
}
.legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.legal-toc a {
  font-family: var(--font-button);
  font-weight: 500;
  text-decoration: none;
}
.legal-toc a:hover { text-decoration: underline; }

.legal-doc { margin-top: 40px; }

/* Anchor jumps should not hide the heading under the viewport edge */
#terms, #privacy { scroll-margin-top: 24px; }

.legal-doc h2 {
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 10px;
}

.legal-doc h3 {
  margin-top: 1.6em;
  font-size: 19px;
}
@media (min-width: 900px) {
  .legal-doc h3 { font-size: 21px; }
}

.legal-effective {
  color: var(--text-muted);
  margin-bottom: 1.6em;
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 1em;
  padding-left: 24px;
}
.legal-doc li { margin-bottom: .5em; }
.legal-doc li:last-child { margin-bottom: 0; }