/*
 * UWiKiCMS V2 — base structural styles.
 * Layout, spacing, typography. Color palette is defined per-theme
 * (the theme file is concatenated above this one at write time).
 * The :root block below is a fallback if a theme forgets a variable.
 */

:root {
    --max-width: 52rem;
    --spacing: 1.2rem;
    --frame-width: 6px;

    --bg-page:               #ffffff;
    --bg-content:            #ffffff;
    --bg-card:               #f5f5f5;
    --bg-nav:                #f5f5f5;
    --bg-foot:               #f5f5f5;
    --bg-header:             #cc0000;
    --bg-code:               #eeeeee;
    --bg-image-frame:        #f5f5f5;
    --border-soft:           #cccccc;
    --border-strong:         #999999;
    --border-accent:         #ffcc00;
    --frame-color:           transparent;
    --text-body:             #202122;
    --text-muted:            #54595d;
    --text-emphasis:         #000000;
    --text-on-header:        #ffffff;
    --text-on-accent:        #000000;
    --heading-h1:            #cc0000;
    --heading-h2:            #cc3333;
    --heading-h3:            #cc6633;
    --link:                  #0645ad;
    --link-visited:          #0b0080;
    --link-hover:            #002bb8;
    --link-muted:            #54595d;
    --accent-highlight:      #ffe45a;
    --accent-highlight-text: #202122;

    --font-body: Georgia, "Times New Roman", "Palatino Linotype", serif;
    --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    --font-mono: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-body);
    background: var(--bg-page);
}

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration: underline; }

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

#main {
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--bg-content);
    border-left: var(--frame-width) solid var(--frame-color);
    border-right: var(--frame-width) solid var(--frame-color);
}

.block { padding: var(--spacing); }

#block1 {
    background: var(--bg-header);
    color: var(--text-on-header);
    padding: var(--spacing) calc(var(--spacing) * 1.5);
    border-bottom: 4px solid var(--border-accent);
}

#block1 h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-on-header);
    letter-spacing: 0.02em;
}

#block2 {
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.6rem var(--spacing);
}

.breadcrumbs {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    font-family: var(--font-ui);
}
.breadcrumbs a { color: var(--text-body); }
.breadcrumbs a:hover { color: var(--link); }
.breadcrumbs span { color: var(--heading-h1); font-weight: 600; }

/* Lang chooser + RSS subscribe link share one row. The chooser sits
   at the natural left, the RSS shortcut floats to the far right. The
   container is shown even on single-language sites (no chooser, just
   the RSS pill on the right) so there's always one obvious way to
   subscribe. */
#langs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.langs {
    font-size: 0.85rem;
    font-family: var(--font-ui);
}

.rss-link {
    font-size: 0.75rem;
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    background: #ff6600;
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    text-decoration: none;
    margin-left: auto;
}
.rss-link:hover { background: #cc5200; color: #fff; }

.lang-current {
    font-weight: 700;
    color: var(--accent-highlight-text);
    background: var(--accent-highlight);
    padding: 0.1rem 0.35rem;
    border-radius: 0.2rem;
}

.lang-flag {
    width: 16px;
    height: 11px;
    vertical-align: middle;
    margin-right: 0.2rem;
}

#children ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.6rem;
}

#children li {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}

#children li.freshest {
    background: var(--accent-highlight);
    border-color: var(--border-strong);
}
#children li.freshest a { color: var(--accent-highlight-text); }

#children li:hover {
    border-color: var(--link);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: var(--bg-content);
}

#children li a,
#children li span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem;
    text-align: center;
    color: var(--text-body);
    font-size: 0.9rem;
    line-height: 1.3;
    font-family: var(--font-ui);
}
#children li a:hover { text-decoration: none; color: var(--link); }

.nav-icon { display: block; margin-bottom: 0.3rem; }

.nav-icon img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid var(--border-soft);
}

.breadcrumbs .nav-icon { display: inline; margin-bottom: 0; }
.breadcrumbs .nav-icon img {
    display: inline;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 0.2rem;
    border-radius: 2px;
    border: none;
}

#image-nav { font-size: 0.9rem; margin-top: 0.3rem; }

#block3 { padding: var(--spacing) calc(var(--spacing) * 1.5); }

#content h1 { font-size: 1.5rem; margin-top: 1.5em; color: var(--heading-h1); }
#content h2 { font-size: 1.3rem; margin-top: 1.3em; color: var(--heading-h2); }
#content h3 { font-size: 1.1rem; margin-top: 1.2em; color: var(--heading-h3); }

#content p { margin: 0.8em 0; }
#content ul, #content ol { padding-left: 1.5em; }

#content pre {
    background: var(--bg-code);
    border: 1px solid var(--border-soft);
    border-radius: 0.3rem;
    padding: 0.8rem;
    overflow-x: auto;
    font-size: 0.85rem;
    color: var(--text-emphasis);
    font-family: var(--font-mono);
}

#content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--text-emphasis);
}

#content pre code { background: none; padding: 0; }

figure.thumb {
    display: block;
    margin: 1rem auto;
    text-align: center;
}

figure.thumb img {
    border-radius: 0.3rem;
    transition: opacity 0.15s, border-color 0.15s;
    display: block;
    margin: 0 auto;
    border: 2px solid var(--border-soft);
    background: var(--bg-image-frame);
    padding: 4px;
}

figure.thumb a:hover img {
    opacity: 0.9;
    border-color: var(--accent-highlight);
}

figure.thumb figcaption {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    font-style: italic;
}

#content a > img { border-radius: 0.3rem; transition: opacity 0.15s; }
#content a > img:hover { opacity: 0.85; }

.image-full {
    text-align: center;
    margin: 1rem 0;
    background: var(--bg-image-frame);
    padding: 1rem;
    border-radius: 0.4rem;
    border: 1px solid var(--border-soft);
}

.image-full img {
    max-height: 70vh;
    border-radius: 0.3rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.image-meta { text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.image-caption { font-weight: 600; color: var(--heading-h1); font-size: 1.05rem; }
.image-desc {
    font-style: italic;
    color: var(--text-body);
    max-width: 36rem;
    margin: 0.5rem auto;
}
.image-info { font-size: 0.8rem; color: var(--text-muted); }
.image-link { font-size: 0.8rem; word-break: break-all; }

#block4 {
    background: var(--bg-foot);
    border-top: 1px solid var(--border-soft);
    padding: 0.6rem var(--spacing);
    font-family: var(--font-ui);
}

#siblings ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

#siblings li.current span {
    font-weight: 700;
    color: var(--text-emphasis);
}

#siblings .nav-icon img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 0.15rem;
}

#block5 {
    background: var(--bg-foot);
    border-top: 3px solid var(--link);
    padding: 0.8rem var(--spacing);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-ui);
}

#infos > div { display: inline; }
#infos > div + div::before { content: " · "; }
#infos a { color: var(--link-muted); }
#infos a:hover { color: var(--link); }

#footer-links {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
#footer-links a {
    color: var(--link);
}
#footer-links a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}
#footer-links .sep {
    color: var(--text-muted);
    /* No hover effect — sep is outside the <a> so the link's underline
       no longer sweeps over it. */
}

/* Pagefind UI — inherits the active palette via CSS variables.
   See https://pagefind.app/docs/ui/#styling for the full var list. */
#search {
    margin-bottom: 0.6rem;
}
.pagefind-ui {
    --pagefind-ui-primary:        var(--link);
    --pagefind-ui-text:           var(--text-body);
    --pagefind-ui-background:     var(--bg-content);
    --pagefind-ui-border:         var(--border-soft);
    --pagefind-ui-tag:            var(--bg-card);
    --pagefind-ui-border-width:   1px;
    --pagefind-ui-border-radius:  0.3rem;
    --pagefind-ui-image-border-radius: 0.3rem;
    --pagefind-ui-image-box-ratio: 3 / 2;
    --pagefind-ui-font:           var(--font-ui);
}
/* Explicit overrides — Pagefind's internal CSS doesn't always pick up
   the variables for form controls on dark palettes (browser default
   black-on-white input wins). Force the colors to match the palette. */
.pagefind-ui input,
.pagefind-ui input[type="text"],
.pagefind-ui input[type="search"],
.pagefind-ui select,
.pagefind-ui button,
.pagefind-ui .pagefind-ui__search-input,
.pagefind-ui .pagefind-ui__result-link,
.pagefind-ui .pagefind-ui__result-excerpt {
    color: var(--text-body);
    background-color: var(--bg-content);
}
.pagefind-ui input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
.pagefind-ui mark {
    background: var(--accent-highlight);
    color: var(--accent-highlight-text);
}

@media (max-width: 40rem) {
    :root { --spacing: 0.8rem; }

    #block1 h1 { font-size: 1.3rem; }

    #children ul {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
        gap: 0.4rem;
    }

    #children li a,
    #children li span {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    .nav-icon img { width: 40px; height: 40px; }

    #block3 { padding: var(--spacing); }

    #infos > div { display: block; }
    #infos > div + div::before { content: none; }
}

/*
 * code theme — 70s/80s phosphor terminal. Black background, green text,
 * monospace everywhere. Used by the main public site root, /software, /liquidwar.
 */
:root {
    --bg-page:               #000000;
    --bg-content:            #000000;
    --bg-card:               #001100;
    --bg-nav:                #001100;
    --bg-foot:               #001100;
    --bg-header:             #000000;
    --bg-code:               #001a00;
    --bg-image-frame:        #001100;
    --border-soft:           #0a4d0a;
    --border-strong:         #00ff66;
    --border-accent:         #00ff00;
    --frame-color:           #003300;
    --text-body:             #00ff66;
    --text-muted:            #0d8e3a;
    --text-emphasis:         #aaffaa;
    --text-on-header:        #00ff00;
    --text-on-accent:        #000000;
    --heading-h1:            #00ff00;
    --heading-h2:            #00cc33;
    --heading-h3:            #0aa84a;
    --link:                  #66ff66;
    --link-visited:          #99ffaa;
    --link-hover:            #ffffff;
    --link-muted:            #0d8e3a;
    --accent-highlight:      #00ff00;
    --accent-highlight-text: #000000;

    --font-body: "Courier New", "SF Mono", Menlo, Consolas, monospace;
    --font-ui:   "Courier New", "SF Mono", Menlo, Consolas, monospace;
    --font-mono: "Courier New", "SF Mono", Menlo, Consolas, monospace;
}

#block1 h1,
#content h1,
#content h2,
#content h3 {
    text-shadow: 0 0 6px currentColor;
}