/*
   custom.css – dílčí úpravy webu skaven.cz mimo framework skaven.css
   Framework (elements/components/fonts.css) se nikdy needituje, přepsala by ho
   aktualizace balíčku skavencss. Všechno, co se od frameworku liší, patří sem.

   Importuje se jako poslední v system/themes/skaven-css.css.
*/

/* ---------- IBM Plex Mono (self-hosted, @fontsource 5.3.0) ---------- */

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-ext-400-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Přenastavení proměnných frameworku ---------- */

:root {
    /* IBM Plex Mono všude, stejný stack jako opencode.ai */
    --body-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", "Courier New", monospace;
    --heading-font: var(--body-font);
    --button-font: var(--body-font);
    --mono-font: var(--body-font);

    /* Plex Mono má nejvyšší řez 700, framework počítá s 900. */
    --heading-weight: 700;

    /* Řádkování 32px podle opencode.ai (změřeno v devtools na jejich webu).
       Při našem písmu 16px je to poměr 2,0 – vzdušnější než jejich
       dokumentace (14px/23,6px) i homepage (15px/27px), ale to je záměr.
       Jde o --baseline, ne jen line-height odstavce – celý framework z něj
       počítá mezery, odsazení i výšky tlačítek, aby text zůstal na mřížce. */
    --baseline: 32px;

    /* Původní bulma modrá odkazů (#485fc7) místo frameworkové --blue
       (#0076DB); hover je o odstín tmavší varianta téže barvy. */
    --link: hsl(229, 53%, 53%);
    --link-hover: hsl(229, 53%, 45%);
}

/* ---------- Odkazy ---------- */

/* Jemnější a níž posazené podtržení, než má framework ve výchozím stavu.
   Štítky (a.tag) si díky vyšší specificitě drží vlastní offset 2px. */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ---------- Bold ---------- */

/* Zelené podbarvení tučného textu jako ve starém bulma tématu
   system/themes/skaven.css ("Fancy podtržení strong textu"). */
@media (prefers-color-scheme: light) {
    strong {
        background: linear-gradient(
            180deg,
            transparent 60%,
            rgba(87, 251, 50, 0.32) 0
        );
    }
}

/* ---------- Nadpisy ---------- */

/* Framework dává velkým nadpisům řádkování 2× baseline, což je při 32px
   mřížce 64px a u dvouřádkového titulku to trhá. 1,5× = 48px drží
   půlkrok mřížky a nechá dost místa na háčky a čárky.
   Markdownové h2 v článku nemají .size2 (to nese jen h1 v layoutu),
   proto je v selektoru i h2. */
h1,
h2,
.size1,
.size2 {
    line-height: calc(var(--baseline) * 1.5);
}

/* ---------- Tlačítka ---------- */

/* Poloviční spodní mezera oproti frameworku. */
button,
.button {
    margin-bottom: calc(var(--baseline) / 2);
}

/* ---------- Obrázky ---------- */

/* Yellow vkládá obrázky s pevnými atributy width/height a mimo <figure>.
   Framework dává height: auto jen selektoru "figure img", takže samotné
   <img> si na úzkém displeji nechá původní výšku a deformuje se. */
img {
    height: auto;
}

/* Yellow [image … center] dá class na <img>, který je display:block,
   takže text-align na rodiči nestačí. */
img.center {
    margin-inline: auto;
}