/* Page base shared by the light public pages: the homepage (views/home.ejs), the auth and account
   pages (views/partials/auth-head.ejs), and the 404, privacy and terms pages that use that head.
   Served statically at /assets/css/site.css?v=cssVersion.
   Values follow getmysocial's docs/architecture/DESIGN_SYSTEM_MARKETING.md (1.2 background, 1.6 shadows). */

body {
  background:
    linear-gradient(180deg, #EDE8FE 0%, rgba(237, 232, 254, 0) 1200px) no-repeat,
    #FAFAFA;
  color: #18181b;
}

/* Even out headline line lengths so no word is left alone on the last line */
h1, h2, h3 { text-wrap: balance; }
/* Body copy (inherited): avoid a single word on the last line */
body { text-wrap: pretty; }

/* Subtle card shadow for depth, used on most card-style components */
.card-shadow {
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 4px 16px rgba(24, 24, 27, 0.05);
}
/* Stronger card shadow for elevated/featured surfaces */
.card-shadow-md {
  box-shadow:
    0 2px 4px rgba(24, 24, 27, 0.05),
    0 12px 28px -8px rgba(24, 24, 27, 0.09);
}

/* Long-form legal copy (privacy, terms; views/partials/legal-open.ejs): a left-aligned reading column.
   Plain h2, h3, p, ul, ol and a need no classes; Tailwind's preflight strips their margins and bullets. */
.legal { max-width: 34rem; font-size: 1rem; line-height: 1.75; color: #52525b; }
.legal > * + * { margin-top: 1.25em; }
.legal h2 { margin-top: 2em; font-size: 1.25rem; line-height: 1.4; font-weight: 600; color: #18181b; }
.legal h3 { margin-top: 1.75em; font-size: 1.0625rem; line-height: 1.5; font-weight: 600; color: #18181b; }
.legal h2 + *, .legal h3 + * { margin-top: 0.5em; }
.legal ul, .legal ol { padding-left: 1.5em; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li + li { margin-top: 0.5em; }
.legal a { color: #5B47E5; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal a:hover { color: #4A36D4; }

/* Creator authorization form (views/creator-authorization.ejs): blanks are fields on screen, ruled lines on paper.
   The long blanks are one-row textareas that grow with what is typed (field-sizing), so a long value wraps and
   prints in full; a browser without field-sizing lets the user drag them taller instead. */
.cf-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1.5rem; }
.cf { display: flex; flex-direction: column; flex: 1 1 14rem; gap: 0.25em; min-width: 0; }
.cf-date { flex: 0 1 10rem; }
.cf input, .cf textarea { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid #a1a1aa; background: transparent; padding: 0.125rem 0.25rem; color: #18181b; font: inherit; }
.cf textarea { field-sizing: content; resize: none; }
@supports not (field-sizing: content) { .cf textarea { resize: vertical; } }
.cf input:focus, .cf textarea:focus { outline: 2px solid #5B47E5; outline-offset: 1px; }
@media print {
  @page { margin: 0.6in; }
  body > a, body > .fixed, body > footer { display: none !important; }
  body { background: #fff !important; }
  main { padding: 0 !important; }
  article { max-width: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: none !important; }
  article h1 { font-size: 14pt !important; line-height: 1.2 !important; }
  .legal { max-width: none; margin-top: 0.6em; font-size: 10pt; line-height: 1.2; color: #000; }
  .legal > * + * { margin-top: 0.35em; }
  .legal h2 { margin-top: 0.6em; font-size: 11pt; font-weight: 700; color: #000; }
  .legal ul, .legal ol { padding-left: 1.4em; }
  .legal li + li { margin-top: 0.1em; }
  .legal p, .legal li { break-inside: avoid; }
  .legal a { color: #000; }
  .cf-row { gap: 0.35em 1.5em; }
  .cf { flex-direction: row; align-items: baseline; gap: 0.4em; }
  .cf input, .cf textarea { padding: 0 0.25em; border-bottom-color: #000 !important; outline: none !important; box-shadow: none !important; caret-color: transparent; }
}