/* h.ua — public site stylesheet. Minimal, monochrome, typography-led.
   No images, no build step, no JS, nothing loaded off-site. */

/* 1. Palette (light default) + dark override via prefers-color-scheme,
   with an explicit data-theme escape hatch for a future toggle. */
:root {
    --color-bg: #faf9f7;
    --color-fg: #1a1a18;
    --color-fg-muted: #5c5a55;
    --color-border: #ddd9d2;
    --color-accent: #8a3324;
    --color-accent-hover: #6e2819;

    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans", "Noto Sans Cyrillic", Arial, sans-serif;
    --font-serif: Georgia, "Noto Serif", "PT Serif", "Times New Roman",
        "Noto Serif Cyrillic", serif;

    --content-width: 36rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #161513;
        --color-fg: #e9e7e1;
        --color-fg-muted: #a19d93;
        --color-border: #34322c;
        --color-accent: #e08a6e;
        --color-accent-hover: #eba98e;
    }
}

:root[data-theme="dark"] {
    --color-bg: #161513;
    --color-fg: #e9e7e1;
    --color-fg-muted: #a19d93;
    --color-border: #34322c;
    --color-accent: #e08a6e;
    --color-accent-hover: #eba98e;
}

/* 2. Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-accent-hover); }

/* 3. Focus & skip link */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-2);
    z-index: 100;
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    transition: top 0.1s ease-in-out;
}
.skip-link:focus { top: var(--space-2); }

/* 4. Page chrome: header, nav, footer, single content column */
.site-header, .site-footer, main#main {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
.site-header { border-bottom: 1px solid var(--color-border); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; margin: 0; }
.site-name a { color: var(--color-fg); text-decoration: none; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; font-size: 0.9rem; }
.language-switcher { list-style: none; display: inline-flex; gap: var(--space-2); margin: 0; padding: 0; font-size: 0.85rem; }
.language-switcher li + li::before { content: "\00b7"; margin-right: var(--space-2); color: var(--color-fg-muted); }
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    padding-bottom: var(--space-4);
    color: var(--color-fg-muted);
    font-size: 0.85rem;
}
main#main { padding-top: var(--space-4); padding-bottom: var(--space-5); min-height: 50vh; }

/* 5. Edition (daily front page) */
.edition-date { font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-fg-muted); margin: 0 0 var(--space-4); }
.empty-edition { color: var(--color-fg-muted); font-style: italic; padding: var(--space-4) 0; }

/* 6. Story list (homepage / archive day) */
.story-list { list-style: none; margin: 0; padding: 0; }
.story-item { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.story-item:first-child { padding-top: 0; }
.story-number { flex: none; font-family: var(--font-serif); font-size: 0.9rem; color: var(--color-fg-muted); min-width: 1.6em; }
.story-headline { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; margin: 0 0 var(--space-1); }
.story-headline a { color: var(--color-fg); text-decoration: none; }
.story-headline a:hover { color: var(--color-accent); }
.story-summary { margin: 0 0 var(--space-2); color: var(--color-fg-muted); }
.story-meta { font-size: 0.8rem; color: var(--color-fg-muted); }

/* 7. Story detail sections */
.story-section { margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.story-section h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-muted); }
.story-section p, .story-section li { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.65; }
.source-list, .topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.source-item, .topic-list li { font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: 0.25rem; padding: var(--space-1) var(--space-2); }

/* 8. Archive */
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }

/* 9. Search */
.search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.search-form input[type="search"] {
    flex: 1;
    font: inherit;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    background: var(--color-bg);
    color: var(--color-fg);
}
.search-form button {
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-fg);
    border-radius: 0.25rem;
    background: var(--color-fg);
    color: var(--color-bg);
    cursor: pointer;
}
.search-form button:hover { background: var(--color-accent); border-color: var(--color-accent); }

/* 10. Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
}

/* 11. Accessibility utility: visually hidden but available to screen readers
   (the search form's <label>, kept off-screen since the input's placeholder
   already carries the visible hint). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}