/* ============================================================
   STATIC PAGE / PUBLIC READING SHELL
   ============================================================

   Chrome + long-form reading typography for templates/core/_static_base.html
   (the public reading shell). Drives every value from the --scandi-* /
   --brand-* tokens in scandi_tokens.css (loaded before this file).

   Used by: static_page.html (Licenca/Pogoji/Zasebnost/Piškotki/O nas/FAQ/
   Kontakt), org_disabled.html, invitation_accept.html, email_unsubscribe.html.

   Design notes:
   - White reading surface (#fff) is a DELIBERATE exception for long-form
     legal text (the rest of the app uses --scandi-bg #f5f5f5).
   - Body reading size is 0.8rem (a valid scale value) for comfortable
     long-form reading, headings on the scale (h1 1.25rem/300, h2 0.9rem/500).
   - Desktop-only: no max-width @media; keep @media print.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.static-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--scandi-white);
    color: var(--scandi-black);
    font-size: 0.8rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ---- Header (minimal brand bar, NO app navbar) ---- */
.static-header {
    border-bottom: 1px solid var(--scandi-gray-100);
    padding: 1rem 1.5rem;
}

.static-header-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.static-logo {
    font-size: 0.8125rem;
    font-weight: var(--scandi-font-weight-medium);
    color: var(--scandi-black);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.static-logo span {
    font-weight: var(--scandi-font-weight-normal);
    color: var(--scandi-gray-500);
}

.static-back-link {
    font-size: 0.75rem;
    color: var(--scandi-gray-500);
    text-decoration: none;
    transition: color 0.15s;
}

.static-back-link:hover {
    color: var(--scandi-black);
}

/* ---- Page header (title / subtitle / meta) ---- */
.static-page-header {
    max-width: 680px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}

.static-page-header h1 {
    font-size: 1.25rem;
    font-weight: var(--scandi-font-weight-light);
    color: var(--scandi-black);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.static-subtitle {
    font-size: 0.8rem;
    color: var(--scandi-gray-500);
    font-weight: var(--scandi-font-weight-normal);
}

.static-meta {
    display: flex;
    gap: 1.25rem;
    margin-top: 1rem;
    font-size: 0.6875rem;
    color: var(--scandi-gray-300);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Main reading column ---- */
.static-main {
    flex: 1;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* ---- Long-form content typography ---- */
.content h2 {
    font-size: 0.9rem;
    font-weight: var(--scandi-font-weight-medium);
    color: var(--scandi-black);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.content h2:first-child {
    margin-top: 0;
}

.content h3 {
    font-size: 0.8rem;
    font-weight: var(--scandi-font-weight-medium);
    color: var(--scandi-gray-900);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.content h4 {
    font-size: 0.75rem;
    font-weight: var(--scandi-font-weight-medium);
    color: var(--scandi-gray-700);
    margin-top: 1.25rem;
    margin-bottom: 0.375rem;
}

.content p {
    font-size: 0.8rem;
    color: var(--scandi-gray-700);
    margin-bottom: 0.875rem;
    line-height: 1.7;
}

.content ul,
.content ol {
    margin-bottom: 0.875rem;
    padding-left: 1.25rem;
}

.content li {
    font-size: 0.8rem;
    color: var(--scandi-gray-700);
    margin-bottom: 0.375rem;
    line-height: 1.6;
}

.content blockquote {
    border-left: 2px solid var(--scandi-gray-100);
    padding-left: 1rem;
    margin: 1.25rem 0;
    color: var(--scandi-gray-500);
    font-style: italic;
}

.content blockquote p {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.content code {
    background: var(--scandi-bg);
    padding: 0.125rem 0.375rem;
    border-radius: var(--scandi-border-radius);
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.content pre {
    background: #fafafa;
    border: 1px solid var(--scandi-gray-100);
    padding: 1rem;
    border-radius: var(--scandi-border-radius);
    overflow-x: auto;
    margin-bottom: 1rem;
}

.content pre code {
    background: none;
    padding: 0;
    font-size: 0.75rem;
}

.content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
}

.content th,
.content td {
    border: 1px solid var(--scandi-gray-100);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.content th {
    background: #fafafa;
    font-weight: var(--scandi-font-weight-medium);
    color: var(--scandi-gray-900);
}

.content a {
    color: var(--scandi-black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.content a:hover {
    color: var(--scandi-gray-500);
}

.content hr {
    border: none;
    border-top: 1px solid var(--scandi-gray-100);
    margin: 2rem 0;
}

.content strong {
    font-weight: 600;
    color: var(--scandi-black);
}

.content em {
    color: var(--scandi-gray-500);
}

/* ---- Footer (minimal) ---- */
.static-footer {
    border-top: 1px solid var(--scandi-gray-100);
    padding: 1.5rem;
    margin-top: auto;
}

.static-footer-inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.static-footer-brand {
    font-size: 0.6875rem;
    color: var(--scandi-gray-300);
}

.static-footer-links {
    display: flex;
    gap: 1.25rem;
}

.static-footer-links a {
    font-size: 0.6875rem;
    color: var(--scandi-gray-300);
    text-decoration: none;
    transition: color 0.15s;
}

.static-footer-links a:hover {
    color: var(--scandi-black);
}

/* ---- Print ---- */
@media print {
    .static-header,
    .static-footer {
        display: none;
    }

    .static-main {
        padding: 0;
    }
}