/*
 * OK Engine — the default theme.
 *
 * Written to be read and overridden: custom properties on :root are the whole
 * theming surface, so a child theme can restyle the site with one file that
 * redefines a handful of them.
 *
 * Accessibility is not a section at the bottom of this file. Focus is always
 * visible, contrast is AA or better at every declared pair, nothing depends on
 * colour alone, and the layout survives 200% zoom because it is built from
 * flow and clamp() rather than fixed heights.
 */

:root {
    color-scheme: light dark;

    --accent: #1d4ed8;
    --accent-ink: #ffffff;
    --accent-quiet: #eff4ff;

    --ink: #16202b;
    --ink-quiet: #55636f;
    --paper: #ffffff;
    --paper-sunken: #f5f7f9;
    --line: #d9dfe5;

    --danger: #a4161a;
    --danger-quiet: #fdf0f0;
    --success: #0f5132;
    --success-quiet: #eaf5ee;

    --radius: 10px;
    --radius-sm: 6px;
    --gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
    --measure: 68ch;
    --wrap: 72rem;
    /* The reading column of an article: narrower than the page, so a line stays a line. */
    --article: 46rem;
    --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 16px rgb(16 24 40 / 0.06);

    --font: system-ui, -apple-system, "Segoe UI", "BPG Nino Mtavruli", "Noto Sans Georgian", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-accent="green"] { --accent: #0f766e; --accent-quiet: #e7f5f3; }
:root[data-accent="purple"] { --accent: #6d28d9; --accent-quiet: #f1ebfd; }

:root[data-width="narrow"] { --wrap: 48rem; }
:root[data-width="wide"] { --wrap: 90rem; }

/*
 * The theme follows the reader's own setting; nothing here has to be switched on.
 *
 * The accent overrides are repeated inside this block, and they have to be: a
 * media query adds no specificity, so `:root[data-accent="green"]` (0,2,0) out-
 * ranks a plain `:root` (0,1,0) wherever both apply. With the light accents left
 * standing in dark mode, `.alert--info` rendered near-white text on a near-white
 * panel — about 1:1 — and the links fell under 4.5:1.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --accent: #7aa2ff;
        --accent-ink: #0b1220;
        --accent-quiet: #17203a;

        --ink: #e6edf3;
        --ink-quiet: #a3b1bf;
        --paper: #0f1721;
        --paper-sunken: #151f2b;
        --line: #2a3644;

        --danger: #ff8a8a;
        --danger-quiet: #2a1618;
        --success: #82d6a6;
        --success-quiet: #10241a;

        --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
    }

    /* Lightened for the dark surfaces: both clear AA against --paper and carry dark ink. */
    :root[data-accent="green"] { --accent: #5fd3c4; --accent-ink: #06231f; --accent-quiet: #12312e; }
    :root[data-accent="purple"] { --accent: #c4a5ff; --accent-ink: #1b0f33; --accent-quiet: #241a3d; }
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 1rem/1.6 var(--font);
    /* Long Georgian words should wrap rather than push the page sideways. */
    overflow-wrap: break-word;
}

.wrap {
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
}

/* ---- landmarks ------------------------------------------------------------ */

.skip-link {
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-block-start: -4rem;
    z-index: 10;
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    transition: inset-block-start 120ms ease-out;
}

.skip-link:focus { inset-block-start: 0.5rem; }

.site-header {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gap);
    min-height: 4rem;
    padding-block: 0.75rem;
}

.site-name { margin: 0 auto 0 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.site-name a { color: inherit; text-decoration: none; }
.site-logo { display: block; max-height: 48px; max-width: 220px; width: auto; height: auto; }
.site-name a:hover { color: var(--accent); }

.site-header nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header nav li { max-width: none; }

.site-header nav a {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

.site-header nav a:hover { background: var(--paper-sunken); }

/* The current page is marked by weight and a rule, not only by colour. */
.site-header nav a[aria-current="page"] {
    background: var(--accent-quiet);
    box-shadow: inset 0 -2px 0 var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* The language switch: short, after the navigation; the current language is marked the same way as the current page. */
.languages ul { font-size: 0.875em; }
.languages a[aria-current="page"] { font-weight: 600; }

main { display: block; padding-block: var(--gap) calc(var(--gap) * 2); }

/*
 * The skip link moves focus here. A three-pixel box around the whole page would
 * say "all of this is selected", which is not what happened — so the arrival is
 * marked at the content's top edge instead. Removing the outline and putting
 * nothing in its place would leave the keyboard user with no sign that the link
 * did anything at all, which is the reason the skip link exists.
 */
main:focus { outline: none; }
main:focus-visible { box-shadow: inset 0 3px 0 0 var(--accent); }

/* A box-shadow is not painted in forced colours; there the outline is the mark. */
@media (forced-colors: active) {
    main:focus-visible { outline: 3px solid Highlight; outline-offset: -3px; }
}

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--paper-sunken);
    color: var(--ink-quiet);
    font-size: 0.9375rem;
}

.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem var(--gap);
    padding-block: calc(var(--gap) * 1.25);
}

.credit { margin: 0; }
.credit a { color: inherit; }

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu a { color: inherit; text-decoration: none; }
.footer-menu a:hover { color: var(--accent); text-decoration: underline; }
.footer-menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }

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

h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
h1 { margin-block: 0 0.5em; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
h2 { margin-block: 1.5em 0.4em; font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }

p, li { max-width: var(--measure); }
.lead { margin-block: 0 1.25rem; color: var(--ink-quiet); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; }
.muted, .empty { color: var(--ink-quiet); }
.empty { padding-block: var(--gap); }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* A search hit, an emphasised word: the accent's quiet tint, readable in both schemes (the browser's yellow is not). */
mark { padding: 0 0.15em; border-radius: 3px; background: var(--accent-quiet); color: var(--accent); font-weight: 600; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* Never remove an outline without putting a better one in its place. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- pieces ---------------------------------------------------------------- */

.card {
    margin-block: var(--gap);
    padding: var(--gap);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.card h2 { margin-block-start: 0; }
.card > :last-child { margin-block-end: 0; }

.alert {
    margin-block: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--ink-quiet);
    border-radius: var(--radius);
    background: var(--paper-sunken);
}

.alert__title { margin: 0 0 0.25rem; font-weight: 600; }
.alert > :last-child { margin-block-end: 0; }

.alert--info { border-inline-start-color: var(--accent); background: var(--accent-quiet); }
.alert--error { border-inline-start-color: var(--danger); background: var(--danger-quiet); color: var(--danger); }
.alert--success { border-inline-start-color: var(--success); background: var(--success-quiet); color: var(--success); }

/* ---- page parts --------------------------------------------------------------- */

.page-header { margin-block-end: var(--gap); }
.page-header h1 { margin-block-end: 0.25em; }

/* The front page's opening: the site's name and its description, on a band of its own. */
.hero {
    margin-block: calc(var(--gap) * -1) var(--gap);
    padding-block: clamp(2rem, 1.2rem + 4vw, 4.5rem);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--accent-quiet), var(--paper));
}

.hero__title { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -0.02em; }
.hero__lead { margin: 0.75rem 0 0; color: var(--ink-quiet); font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); }

/* A page that opens with a slider (a header template that carries one) has its opening already: the band is not repeated on
   screen. It stays for screen readers and search engines — its title is still the page's one h1. */
body:has(.tpl-region--header .okslider) .hero {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
body:has(.tpl-region--header .okslider) .hero + .wrap > .section-title:first-child { margin-block-start: 0; }

.section-title { margin-block: var(--gap) 1rem; font-size: 1.125rem; color: var(--ink-quiet); font-weight: 600; }

/* A list of posts: cards in a grid that becomes a column on a phone. */
.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--gap);
}

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
}

.post-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.post-card:focus-within { border-color: var(--accent); }
.post-card > * { margin: 0; max-width: none; }

.post-card__meta { color: var(--ink-quiet); font-size: 0.875rem; }
.post-card__title { font-size: 1.2rem; line-height: 1.35; }
.post-card__title a { color: inherit; text-decoration: none; }
/* The whole card answers a click; the title stays the one link a screen reader announces. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card__title a:focus-visible { outline: none; }
.post-card__title a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.post-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--ink-quiet);
}
.post-card__more { margin-top: auto; padding-top: 0.25rem; color: var(--accent); font-size: 0.9375rem; font-weight: 600; }

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-block: calc(var(--gap) * 1.5) 0;
}

.pagination a {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.pagination a:hover { border-color: var(--accent); background: var(--accent-quiet); }
.pagination [aria-current="page"] { color: var(--ink-quiet); }

/* ---- an article (a page, a post) ------------------------------------------------ */

.article { max-width: var(--article); margin-inline: auto; }
.article__header { margin-block-end: calc(var(--gap) * 1.25); }
.article__header h1 { margin-block-end: 0.35em; }
.article__meta { margin: 0 0 1rem; color: var(--ink-quiet); font-size: 0.9375rem; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.breadcrumbs li { color: var(--ink-quiet); }
.breadcrumbs li + li::before { content: "›"; margin-inline-end: 0.25rem; color: var(--ink-quiet); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }

/* What an editor writes (Markdown): headings, lists, quotes, code and tables, spaced for reading. */
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-block: 0 1.1em; }
/* The page title is the h1, so Markdown's "#" is an h2, "##" an h3 and so on: each step stays visibly a step. */
.prose h2 { margin-block: 1.8em 0.6em; font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.75rem); }
.prose h3 { margin-block: 1.7em 0.55em; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem); }
.prose h4 { margin-block: 1.5em 0.45em; font-size: 1.15rem; }
.prose h5 { margin-block: 1.4em 0.4em; font-size: 1.05rem; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li { margin-block: 0.3em; }
.prose li::marker { color: var(--ink-quiet); }
.prose blockquote {
    margin: 1.5em 0;
    padding: 0.85em 1.1em;
    border-inline-start: 4px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--accent-quiet);
    color: var(--ink);
}
.prose blockquote > :last-child { margin-block-end: 0; }
.prose :not(pre) > code {
    padding: 0.12em 0.4em;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper-sunken);
    font-size: 0.85em;
}
.prose pre {
    margin: 1.5em 0;
    padding: 1em 1.1em;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper-sunken);
    line-height: 1.55;
}
.prose hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); }
.prose img { border-radius: var(--radius-sm); }
.prose table {
    display: block;
    overflow-x: auto;
    width: max-content;
    max-width: 100%;
    margin-block: 1.5em;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.prose th { background: var(--paper-sunken); }
.prose tr:last-child td { border-bottom: 0; }
.prose th + th, .prose td + td { border-inline-start: 1px solid var(--line); }

.content-fields { display: grid; gap: 0.5rem; margin-block: var(--gap); padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.content-fields div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; }
.content-fields dt { color: var(--ink-quiet); }
.content-fields dd { margin: 0; }

.article__footer { display: grid; gap: 0.75rem; margin-block-start: calc(var(--gap) * 1.5); padding-block-start: var(--gap); border-top: 1px solid var(--line); }
.terms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.terms__label { color: var(--ink-quiet); font-size: 0.9375rem; }
.terms ul { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.chip {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-sunken);
    color: var(--ink);
    font-size: 0.875rem;
    text-decoration: none;
}
.chip:hover { border-color: var(--accent); background: var(--accent-quiet); color: var(--accent); }

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

.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-block-end: var(--gap);
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunken);
}
.search-form__field { display: grid; gap: 0.3rem; min-width: 10rem; }
.search-form__field--grow { flex: 1 1 16rem; }
.search-form label { font-size: 0.9375rem; font-weight: 600; }

.search-results { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.search-result { max-width: none; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.search-result__title { margin: 0 0 0.35rem; font-size: 1.15rem; }
.search-result__title a { text-decoration: none; }
.search-result__title a:hover { text-decoration: underline; }
.search-result__snippet { margin: 0; color: var(--ink-quiet); }

/* ---- forms ------------------------------------------------------------------ */

.form-page { max-width: 40rem; }
.form-intro { margin-block: 0 var(--gap); color: var(--ink-quiet); }

.field { margin-block: 1.1rem; max-width: 36rem; }

.field > label,
fieldset > legend {
    display: block;
    margin-block-end: 0.35rem;
    font-weight: 600;
}

/* Every text-like control looks the same, inside a .field or not (the search form, a module's own form). */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]), select, textarea) {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: inherit;
    /* 1rem, so iOS does not zoom the page when the field is focused. */
    font: inherit;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

:where(input, select, textarea):hover { border-color: color-mix(in srgb, var(--line), var(--ink) 25%); }
:where(input, select, textarea):focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-quiet); outline: 2px solid transparent; }
textarea { min-height: 8rem; resize: vertical; }
input[type="file"] { font: inherit; }

/* A box and its words on one line; the box takes the accent. */
.check { display: flex; align-items: flex-start; gap: 0.6rem; margin-block: 0.4rem; font-weight: 400; cursor: pointer; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--accent); }
.field > .check { font-weight: 500; }

fieldset { margin: 0; padding: 0; border: 0; }
.required { color: var(--danger); }

.field__hint { margin: 0.35rem 0 0; color: var(--ink-quiet); font-size: 0.9375rem; }

/* Invalid fields carry a border, an icon-free message and aria-invalid — three signals, one of them colour. */
.field--invalid :where(input, select, textarea) { border-color: var(--danger); border-width: 2px; }
.field__error { margin: 0.35rem 0 0; color: var(--danger); font-size: 0.9375rem; font-weight: 600; }

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 120ms ease-out;
}

button:hover, .button:hover { filter: brightness(1.08); }
form button[type="submit"] { margin-block-start: 0.5rem; }
.search-form button[type="submit"] { margin-block-start: 0; }

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

.table-scroll { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--gap);
}

th, td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--line);
    text-align: start;
    vertical-align: top;
}

th { font-weight: 600; }
caption { margin-block-end: 0.5rem; color: var(--ink-quiet); text-align: start; }

img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }

/* ---- motion -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- print ---------------------------------------------------------------------- */

@media print {
    .site-header nav, .skip-link, .site-footer, .search-form, .pagination, .post-card__more { display: none; }
    body { background: #fff; color: #000; }
    a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}