/*
 * Shared content layer for the v3 candidates.
 *
 * Page bodies come out of the database as HTML the wiki parser produced, with
 * a fixed vocabulary of classes: images-container and its modifiers, interview
 * blocks, running heads, table-of-contents rows, footnotes, tables. Their
 * structure is the same whatever the site looks like, so it lives here once —
 * three copies of these rules would mean three chances to break real articles.
 *
 * Everything visual is expressed through custom properties. A theme sets the
 * tokens and owns the shell (header, menu, footer, page frame); this file
 * arranges what the tokens colour.
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    /* Themes override all of these; the values here only keep the file
       readable on its own. */
    --ink: #1a1a1a;
    --ink-muted: #666;
    --ink-faint: #999;
    --accent: #000080;
    --accent-2: #dc143c;
    --surface: #fff;
    --surface-sunken: #f0f0f0;
    --rule: #cfcfcf;
    --rule-strong: #333;

    --font-body: "Noto Sans", sans-serif;
    --font-head: "Noto Sans", sans-serif;

    --text-size: 17px;
    --line-height: 1.6;
    --measure: 46rem;          /* comfortable column width for running text */
    --para-indent: 1.2em;
    --caption-size: 0.85em;

    --space: 1rem;
    --radius: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-size);
    line-height: var(--line-height);
    color: var(--ink);
    background: var(--surface);
}

body[lang="he"] {
    font-family: "Noto Sans Hebrew", var(--font-body);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--accent);
}

hr {
    border-top: 1px solid var(--rule);
    margin: 2em 0;
}

blockquote {
    display: flow-root;
    padding-inline-start: 1em;
    border-inline-start: 2px solid var(--rule);
    color: var(--ink-muted);
}

/* ---------------------------------------------------------------- headings */

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
    font-family: var(--font-head);
    line-height: 1.25;
    text-wrap: balance;
}

.main-content h1 {
    font-size: 1.9em;
    margin: 0 0 0.8em;
}

.main-content h2 {
    font-size: 1.5em;
    margin: 1.8em 0 0.6em;
}

.main-content h3 {
    font-size: 1.25em;
    margin: 1.8em 0 0.5em;
}

.main-content h4 {
    font-size: 1.1em;
    margin: 1.6em 0 0.5em;
}

.main-content h5,
.main-content h6 {
    font-size: 1em;
    margin: 1.5em 0 0.5em;
}

.main-content h2:first-child,
.main-content h3:first-child,
.main-content h4:first-child {
    margin-top: 0;
}

.main-content h3.subheading,
.main-content h4.subheading {
    font-weight: 400;
    color: var(--ink-muted);
}

.main-content h4.start {
    text-align: start;
}

/* ------------------------------------------------------------------- text */

.main-content p {
    margin: 1em 0;
    text-indent: var(--para-indent);
}

/* Only Russian typography indents paragraphs */
body[lang="en"] .main-content p,
body[lang="he"] .main-content p {
    text-indent: 0;
}

.main-content ul,
.main-content ol {
    margin: 1em 0;
    padding-inline-start: 1.6em;
}

.main-content li {
    margin: 0.3em 0;
}

.italic,
.i {
    font-style: italic;
}

.bold,
.b {
    font-weight: 700;
}

.annotation {
    color: var(--accent);
}

.red {
    color: var(--accent-2) !important;
}

.no-indent {
    text-indent: 0 !important;
}

.center {
    text-align: center !important;
    text-indent: 0 !important;
}

.right {
    text-align: right !important;
}

.left {
    text-align: left !important;
}

.start {
    text-align: start !important;
}

.end {
    text-align: end !important;
}

.full-indent {
    padding-inline-start: 1.2em;
    text-indent: 0 !important;
}

.clear-both {
    clear: both;
}

.card {
    background: rgba(255, 240, 192, 0.5);
    padding: 0.6em 1.2em;
    border-radius: var(--radius);
}

.grey-card {
    background: var(--surface-sunken);
    padding: 1.25em;
    border-radius: var(--radius);
}

/* -------------------------------------------------------------- footnotes */

.footnotes {
    clear: both;
    margin: 3em 0;
    padding: 1.5em 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 0.9em;
    color: var(--ink-muted);
}

.footnotes h3:first-child {
    margin-top: 0;
}

/* ----------------------------------------------------------------- images */

.main-content img {
    max-width: 450px;
    height: auto;
}

.main-content img.full-width,
.main-content .albums-grid img,
.main-content .albums-grid-inline img,
.main-content #album-grid img {
    max-width: none;
}

.main-content .image-caption {
    display: block;
    text-align: center;
    font-size: var(--caption-size);
    font-style: italic;
    line-height: 1.4;
    color: var(--ink-muted);
    margin-top: 0.5em;
    white-space: normal;
}

img.black-border {
    border: 8px solid var(--ink);
    padding: 5px;
}

h2.black-border {
    width: fit-content;
    margin: 0 auto 1em;
    padding: 0.4em 0.6em;
    border: 4px solid currentColor;
}

/* Rows of images the parser emits, with its four modifiers */

.images-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin-block: 1.5em 2em;
}

.images-container.no-gap {
    gap: 0;
}

.images-container > div[style*="display: flex"] {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.images-container.no-gap > div[style*="display: flex"] {
    gap: 0;
}

/* Shared caption ("|") stacks the caption under the row */
.images-container.two-images-shared-caption {
    flex-direction: column;
}

.images-container.two-images-shared-caption > div[style*="display: flex"] {
    width: 100%;
}

.images-container.align-edges .images-item:first-child {
    align-items: flex-end;
}

.images-container.align-edges .images-item:last-child {
    align-items: flex-start;
}

.images-container.align-edges.no-gap .images-item:first-child {
    align-items: flex-end;
    justify-content: flex-end;
}

.images-container.align-edges.no-gap .images-item:last-child {
    align-items: flex-start;
    justify-content: flex-start;
}

.images-item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.images-item img,
.images-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

.images-container .image-caption {
    width: 100%;
    text-align: center;
    font-size: var(--caption-size);
    font-style: italic;
    margin-top: 0.5em;
}

/* Floats. The <p> variants are display:table so the caption can size itself
   to the image rather than to the column. */

img.float-start,
img.float-left {
    float: inline-start;
    margin-inline-end: 20px;
    margin-block: 0 20px;
}

img.float-end,
img.float-right {
    float: inline-end;
    margin-inline-start: 20px;
    margin-block: 0 20px;
}

p.float-start,
p.float-left,
p.float-end,
p.float-right {
    display: table;
    width: 1px;
    margin-block: 0 20px;
}

p.float-start,
p.float-left {
    float: inline-start;
    margin-inline-end: 20px;
}

p.float-end,
p.float-right {
    float: inline-end;
    margin-inline-start: 20px;
}

p.float-start img,
p.float-left img,
p.float-end img,
p.float-right img {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}

p.float-start .image-caption,
p.float-left .image-caption,
p.float-end .image-caption,
p.float-right .image-caption {
    display: table-caption;
    caption-side: bottom;
    width: 0;
    min-width: 100%;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------- interview */

.interview-block {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 2em;
    margin: 1em 0 2em;
}

.interview-image {
    grid-column: 1;
    grid-row: 1;
}

.interview-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-style: italic;
}

.interview-text.annotation {
    color: var(--accent);
}

.interview-text p {
    margin: 0.5em 0;
    text-indent: 0;
}

.interview-caption {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.5em;
    font-size: var(--caption-size);
    color: var(--ink-muted);
}

.interview-block:not(:has(.interview-image)) .interview-text {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------- columns */

.columns-container {
    display: flex;
    gap: 2em;
    margin: 1em 0;
}

.columns-container .column {
    flex: 1;
}

/* ------------------------------------------------------------------ tables */

.main-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5em 0;
}

.main-content table td,
.main-content table th {
    border: 1px solid var(--rule-strong);
    padding: 0.5em 0.7em;
    text-align: left;
    vertical-align: top;
}

.main-content table th {
    font-weight: 700;
    background: var(--surface-sunken);
}

.main-content table.no-border,
.main-content table.no-border td,
.main-content table.no-border th {
    border: none;
    background: none;
}

.main-content table.column-spacing td:not(:first-child),
.main-content table.column-spacing th:not(:first-child) {
    padding-left: 4em;
}

.main-content table.vertical-spacing td,
.main-content table.vertical-spacing th {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* ------------------------------------------- running heads and TOC entries */

.running-head {
    text-indent: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35em 0;
    margin: 0.75em 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

.running-head-start,
.running-head-end {
    flex: 1 1 0;
    min-width: 0;
}

.running-head-start {
    text-align: start;
}

.running-head-center {
    flex: 0 1 auto;
    max-width: 50%;
    text-align: center;
}

.running-head-end {
    text-align: end;
}

.toc-entry {
    text-indent: 0 !important;
    display: flex;
    align-items: flex-end;
}

.toc-entry .toc-left-dots {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    padding-right: 0.3em;
}

.toc-entry .toc-left-dots > *:first-child {
    flex-shrink: 1;
    min-width: 0;
}

.toc-entry .toc-dots {
    flex: 1;
    min-width: 1em;
    height: 1em;
    margin-left: 0.3em;
    border-bottom: 1px dashed currentColor;
    flex-shrink: 0;
}

.toc-entry .toc-right {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 0.3em;
}

/* --------------------------------------------------------------- page nav */

.page-nav {
    display: flex;
    justify-content: space-between;
    clear: both;
    margin: 2.5em 0 0;
    padding-top: 1em;
    border-top: 1px solid var(--rule);
}

.page-nav.nav-single {
    justify-content: center;
}

/* ------------------------------------------------------------ POZ entries */

.poz-entries-grid {
    display: grid;
    gap: 2em;
}

.poz-entry-cell {
    padding-bottom: 2em;
    border-bottom: 1px solid var(--rule);
}

.poz-entry-cell:last-child {
    border-bottom: none;
}

.poz-entry-inner {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}

.poz-entry-images-container {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    flex-shrink: 0;
}

.poz-entry-image-container {
    display: flex;
    flex-direction: column;
}

.poz-entry-image {
    display: block;
    max-width: 200px;
    height: auto;
}

.poz-entry-caption {
    font-size: var(--caption-size);
    color: var(--ink-muted);
    margin-top: 0.35em;
    max-width: 200px;
}

.poz-entry-text {
    flex: 1;
    min-width: 0;
}

.poz-entry-text p {
    margin: 0.6em 0;
}

.poz-entry-text p:first-child {
    margin-top: 0;
}

.poz-entry-text p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------- album grids */

.albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5em;
    margin: 1.5em 0;
}

.album-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.album-card a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-sunken);
}

.album-card a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.25s ease;
}

.album-card a:hover img {
    transform: scale(1.03);
}

.album-title {
    margin-top: 0.6em;
    text-align: center;
    font-size: 0.95em;
}

/* Album pages and inline photo blocks use a justified row layout instead:
   fixed row height, width follows the image ratio (see js/justified-grid.js) */

#album-grid.albums-grid,
.albums-grid-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

#album-grid .album-card,
.albums-grid-inline .album-card {
    align-items: stretch;
}

#album-grid .album-card a,
.albums-grid-inline .album-card a,
.albums-grid-inline .album-card .album-thumb-no-click {
    display: block;
    height: var(--jg-row-height, 220px);
    width: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
}

#album-grid .album-card a img,
.albums-grid-inline .album-card a img,
.albums-grid-inline .album-card .album-thumb-no-click img {
    height: 100%;
    max-width: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

#album-grid .album-title,
.albums-grid-inline .album-title {
    display: none;
}

.album-thumb-no-click {
    overflow: hidden;
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------- search results */

.search-results {
    margin: 1em 0;
}

.search-result-item {
    margin: 1.5em 0;
    padding-inline-start: 1em;
    border-inline-start: 2px solid var(--rule);
}

.search-result-section {
    font-size: 0.85em;
    color: var(--ink-muted);
}

.search-result-item a {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--accent);
}

.search-result-item .snippet {
    margin-top: 0.4em;
    color: var(--ink-muted);
    line-height: 1.5;
}

.search-result-item mark {
    background: rgba(255, 220, 100, 0.55);
    color: inherit;
}

.search-results .empty {
    margin: 1em 0;
    font-style: italic;
    color: var(--ink-muted);
}

/* -------------------------------------------------------- cookie consent */

.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    background: #24211d;
    color: #f2efe9;
    font-size: 0.9rem;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}

.cookie-consent[hidden] {
    display: none !important;
}

.cookie-consent-text {
    margin: 0;
    max-width: 42rem;
    line-height: 1.45;
}

.cookie-consent-btn {
    flex-shrink: 0;
    padding: 0.45rem 1.25rem;
    border-radius: var(--radius);
    background: var(--accent-2);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cookie-consent-btn:hover {
    filter: brightness(1.1);
}