/*
 * ============================================================================
 * FAMERLO.COM — LEGAL DOCUMENTS SHARED STYLESHEET
 * ============================================================================
 *
 * Shared visual styling for the public legal documents served at
 * famerlo.com/terms and famerlo.com/privacy. Extracted from the two
 * pages on 2026-05-12 (#141 prerequisite) so that:
 *
 *   1. Visual / typographic tweaks no longer change the HTML bytes that
 *      the backend hashes as the document of record. The hash covers
 *      the legal text plus its structural markup only. The look-and-feel
 *      is the website's responsibility, not the consent registry's.
 *
 *   2. Both legal pages stay visually in sync without manual copy-paste.
 *
 * Design language matches the Famerlo landing page (light-mode
 * Scandinavian palette). Tested against terms.html and privacy.html.
 *
 * If you edit this file — VISUAL EDITS ONLY:
 *   - Typography, palette, spacing, responsive breakpoints, hover
 *     states, and other purely-cosmetic adjustments do NOT require a
 *     document version bump or a backend ContentHash update.
 *
 * If you edit this file in ways that change WHAT TEXT THE USER SEES:
 *   - The hash mechanism covers the HTML bytes only, not the rendered
 *     output. CSS can therefore subvert the legal-text guarantee in
 *     several ways. Treat any of the following as a TEXT CHANGE that
 *     DOES require bumping the document version, updating the backend
 *     ContentHash, AND re-prompting users:
 *       - `display: none` or `visibility: hidden` on legal-text elements
 *         (hides part of the agreement from the rendered view)
 *       - `content: "..."` via `::before` / `::after` (injects visible
 *         text the user did not see in prior versions)
 *       - `order:` (in flex/grid containers) that reorders clauses
 *       - any CSS that hides, replaces, or rearranges the body of a
 *         legal clause
 *     These are forcing-function violations of the "every-bump-requires-
 *     acceptance" rule (#140). If you reach for one of these properties
 *     on the legal pages, stop and treat it like an HTML edit instead.
 *
 * If you edit terms.html or privacy.html:
 *   - You DO need to bump the document version and update the backend's
 *     LegalDocumentRegistry expected hash. See #141 for the rule.
 *
 * ============================================================================
 */

/* ================================================================
   COLOR PALETTE
   Matches the Famerlo landing page and app light mode.
   ================================================================ */
:root {
    --bg-primary: #FFFBF5;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #FFF8F0;
    --text-primary: #27272A;
    --text-secondary: #3F3F46;
    --text-tertiary: #71717A;
    --border-color: #E4E4E7;
    --accent-orange: #FB923C;
    --accent-orange-hover: #F97316;
    --accent-orange-light: #FED7AA;
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-secondary);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ================================================================
   LAYOUT
   ================================================================ */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

/* ================================================================
   HEADER
   ================================================================ */
header {
    padding: 2rem 0 1rem;
    text-align: center;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--text-primary);
    text-decoration: none;
}

.logo-link:hover {
    color: var(--text-primary);
}

.logo-svg {
    width: 24px;
    height: 24px;
}

/* ================================================================
   CONTENT
   ================================================================ */
.page-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 2rem;
    color: var(--text-primary);
    text-align: center;
    margin: 2rem 0 0.5rem;
}

.last-updated {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
}

.content h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 2rem 0 0.75rem;
}

/* h3 is used by the privacy policy for sub-sections inside h2
   groupings. Harmless on the terms page (no h3 elements there). */
.content h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
}

.content p {
    margin-bottom: 0.75rem;
}

.content ul, .content ol {
    margin: 0.5rem 0 1rem 1.5rem;
}

.content li {
    margin-bottom: 0.4rem;
}

.content a {
    color: var(--accent-orange);
    text-decoration: none;
}

.content a:hover {
    color: var(--accent-orange-hover);
}

/* ================================================================
   NOTICE BOX
   Highlight box for important callouts inside the document body.
   Two variants:
     .notice                 → neutral, gray-bordered (default). Used by
                               the privacy policy's "external calendar"
                               jurisdictional advisory.
     .notice.notice-warning  → orange-tinted, more attention-drawing.
                               Used by the terms page's "pilot/beta"
                               heads-up box.
   ================================================================ */
.notice {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.notice.notice-warning {
    background: var(--bg-tertiary);
    border-color: var(--accent-orange-light);
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
    margin-top: auto;
    padding: 2rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    border-top: 1px solid var(--border-color);
}

footer a {
    color: var(--accent-orange);
    text-decoration: none;
}

footer a:hover {
    color: var(--accent-orange-hover);
}

/* Adjacent paragraph spacing in the footer (multiple short lines
   stacked tightly without extra vertical breathing room). */
footer p + p {
    margin-top: 0.25rem;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 640px) {
    .page-title {
        font-size: 1.6rem;
    }

    .content h2 {
        font-size: 1.15rem;
    }
}