/* ===================================================================
 style.css
Last revision --------------------------------------------- 21.10.2026
*/

/* Moje poznámky k CSS
Označení proměnné: --nazevpromenne
font-weight: 600 -> tučnost fontu. Vetšina písem má jen několik řezů:
    400 = Regular
    600 = SemiBold
    700 = Bold
    Když napíšu něco mezi, hodnota spadne k nejbližší hodnotě
Běžné hodnoty:
    100	Thin	velmi tenké
    200	Extra Light	jemné
    300	Light	subtilní
    400	Regular	normální text
    500	Medium	trochu silnější
    600	SemiBold	výraznější, ale ne tučné
    700	Bold	tučné
    800	Extra Bold	velmi tučné
    900	Black	extrémně tučné

Dokumentace:
https://developer.mozilla.org/en-US/docs/Web/HTML    
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties
---------------------------------------------- */

/* -------------------------------------------------------------------
01. Nejvyšší-kořenový element dokumentu 
------------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --bg-main: #FAFAFA;
    --bg-nav: #FAFAFA;
    --bg-table: #F0F0F0;

    /* Borders */
    --border-light: #D9D9D9;

    /* Text */
    --text-primary: #292828;
    --text-secondary: #555;
    --text-muted: #888;

    /* Links */
    --link: rgb(192, 80, 77);
    --link-hover: #A00028;

    /* UI */
    --radius: 6px;
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------
02. Připojení vlastních fontů
------------------------------------------------------------------- */

/* -- 2x LATINKA -- */
@font-face {
    font-family: "Noto Serif";
    src: url("/fonts/latin/NotoSerif-w400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif";
    src: url("/fonts/latin/NotoSerif-w600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

/* -- 2x HEBREJŠTINA -- */
@font-face {
    font-family: "Noto Serif";
    src: url("/fonts/hebrew/NotoSerifHebrew-w400.woff2") format("woff2");
    font-weight: 400;
    unicode-range: U+0590-05FF, U+FB1D-FB4F;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif";
    src: url("/fonts/hebrew/NotoSerifHebrew-w600.woff2") format("woff2");
    font-weight: 600;
    unicode-range: U+0590-05FF, U+FB1D-FB4F;
    font-display: swap;
}

/* -------------------------------------------------------------------
03. Základní typografie
------------------------------------------------------------------- */

/* -- Velikost základního fontu v celém prvku html -- */
html {
    font-size: 14px;
}

/* -- Nastavení prvku <body> -------------------------
Noto Serif je v uvozovkách, protože obsahuje mezeru 
Margin-top by měl být o výšku navigační lišty
*/

body {
    margin-top: 30px;
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: "Noto Serif", Georgia, serif;
    line-height: 1.5;
}

/* Hebrejština */
[lang="he"] {
    direction: rtl;
    unicode-bidi: bidi-override;
}

/* -------------------------------------------------------------------
Headings - nadpisy
------------------------------------------------------------------- */
.h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 600;
}

.h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 600;
}

.h3 {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 600;
}

/* ve CleverHebrewOffline je pro podnadpis použitý styl h3=1.17rem a vypadá to lépe */
.h4 {
    font-size: 1.17rem;
    line-height: 1.35;
    font-weight: 300;
}

.p {
    font-size: 1rem;
    line-height: 1.5;
}

.small {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* -- html odkazy ------------------------------------------------- */

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

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

/* -------------------------------------------------------------------
04. Členění dokumentu
------------------------------------------------------------------- */

/* -- Kontejner pro všechno kromě cntx_list -- */
.container {
    max-width: 1200px;
    /* Udržuje celou stránku v určité šířce */
    margin: 0 auto;
    /* vycentruje obsah */

    /* malý vnitřní okraj, aby text nelepil na okraj */
    padding: 0 20px;
    /* top and bottom | left and right */
}

/* -------------------------------------------------------------------
Kontejner kolem cntx-list který by měl umožnit horizontální scrolování
Pozor! mám ho uvnitř container
------------------------------------------------------------------- */
.context_list_container {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
}

/* Hebrejské texty psané v Alefbet */
.he_alefbet {
    direction: rtl;
    unicode-bidi: bidi-override;
    font-size: 1.2em;
    position: relative;
    top: -0.15em;
    /* zvedá HE font trochu výš aby na stejném účaří jakop latinky - můžeš doladit na -0.12em nebo -0.18em podle oka */
}

/* Tohle by mělo dávat mezery před entry_title, 
aby byl prostor pro navigační lištu, ale nějak to zatám nefunguje
.entry_title {
 
}
 */

/* drobečková nápověda */
.separator {
    user-select: none;
    /* Zabrání označení textu myší */
    pointer-events: none;
    /* Zabrání jakékoliv interakci myší (kliknutí, uchopení) */
}

/* Horizontální padding a pozadí pro obsahové sekce */
/* Při pozadí potřebuji odstup textu od okrajů */
.entry_content,
.root_content,
.basic_content,
.extended_content,
.preset_context {
    background: var(--bg-table);
    padding-inline: 12px;
    /* moderní shorthand pro left+right */
}

/* Názvy sekcí v latince pro data zarovnaná vlevo */
.sec_label_label {
    text-align: left;
}

/* Názvy sloupců v latince pro pro data zarovnaná vlevo */
.column_label {
    text-align: left;
}

/* Názvy sloupců v latince pro data zarovnaná vpravo */
.hecolumn_label {
    text-align: right;
}

/* Názvy řádků v latince */
.row_label {
    text-align: right;
}

/* vlastnosti sekce */
section {
    margin-bottom: 20px;
    /* mezera mezi sekcemi */
}

/* vlastnosti grid */
.grid {
    display: grid;
    gap: 10px;
}

/* page title */
.page_title {
    grid-template-columns: repeat(8, auto);
    justify-content: start;
}

/* -------------------------------------------------------------------
05. Všechny entry_content
------------------------------------------------------------------- */

.row {
    display: flex;
}

.box {
    width: auto;
    margin: 5px;
}

/* -------------------------------------------------------------------
06. root-content je všude stejný
Používá se ve:
    snipets.js | rootContent() 
    root_entry.js
Ponechat ve style.css
--------------------------------------------------------------------*/
.rootcon-3 {
    grid-template-columns: auto auto 1fr;
}

/* -------------------------------------------------------------------
07. Styl pro dvojřádek s daty -- 24.09.2026
ignoruje bohužel i okraje .. Zatím jsem ho asi nepoužil 
------------------------------------------------------------------- */
.variant_dblrow {
    display: contents;
    margin-bottom: 2px;
}

/* -------------------------------------------------------------------
08. Všechny extended-content
------------------------------------------------------------------- */
.grid-9x5 {
    grid-template-columns: repeat(5, auto);
}

/* Rozbalovací EXTENDED CONTENT */
/* Styluje summary prvku details která má přiřazenu class collapsible */
details.collapsible summary {
    cursor: pointer;
    font-weight: bold;
    padding: 8px;
    background: #eee;
    border-radius: 4px;
    margin-bottom: 20px;
    /* nebo 1rem, 2rem, podle vkusu */
}

/* Když detail má atribut open -> je rozbalené, tak dostane jiné pozadí */
details.collapsible[open] summary {
    background: #ddd;
}

/* -------------------------------------------------------------------
09. přepínací tlačítka v celém projektu 
------------------------------------------------------------------- */
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 20px;
}

.switcher button {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
}

.switcher button.active {
    /* background: #333; */
    background: #333333ad;
    color: white;
    /* border-color: #333; */
    border-color: #333333ad;
    pointer-events: none;
}

.switcher button:hover:not(.active) {
    background: #f0f0f0;
}

/* písmo by mělo mít stejnou barvu jako rámeček tlačítka */
.switcher button:disabled,
.switcher button:disabled:hover {
    background: var(--bg-main);
    color: #ccc;
    border-color: #ccc;
    pointer-events: none;
    cursor: default;
}

/* -------------------------------------------------------------------
10. stránkovací tlačítka v celém projektu 
------------------------------------------------------------------- */

.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pagination button {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    background: white;
}

.pagination button.active {
    /* background: #333; */
    background: #333333ad;
    color: white;
    border-color: #333;
    pointer-events: none;
    cursor: default;
}

.pagination button:hover:not(.active):not(.disabled) {
    background: #f0f0f0;
}

.pagination button:disabled,
.pagination button:disabled:hover {
    background: var(--bg-main);
    color: #666;
    border-color: #ccc;
    pointer-events: none;
    cursor: default;
}

/* -------------------------------------------------------------------
11. Třídící tlačítka v celém projektu 
------------------------------------------------------------------- */
.sortable {
    /* cursor: pointer; je to button a ten už pointer má ... */
    color: var(--link);
    user-select: none;
}

.sortable .up,
.sortable .down {
    opacity: 0.3;
    /* margin-left: 4px; */
}

.sortable .active {
    opacity: 1;
    font-weight: bold;
}

/* -------------------------------------------------------------------
12. třída pro celý řádek v seznamu. Je použita všude v list:
    nounpattern_list.js
    adjpattern_list.js
    advpattern_list.js
    cntx_list_simple.js
    cntx_list_advance.js
------------------------------------------------------------------- */
.list-row {
    cursor: pointer;
}

.list-row:hover {
    background-color: #f0f0f0;
}

/*--------------------------------------------------------------------
13. třída pro víceřádkové texty
převede znaky CRLF na skutečné řádkování 
------------------------------------------------------------------- */
.multiline {
    white-space: pre-wrap
}

/* -------------------------------------------------------------------
14. Navigační lišta v celém projektu
Když stanovím výšku, tak okraje se ještě přičtou. 
Mám prý vyrobit funci která změní odsazení body dynamicky -> později
Šířku chci stejnou jako container -> zadal jsem ji ručně 1200px
15.10.2026 
Mělo by se to jmenovat nav-top-container
------------------------------------------------------------------- */

.nav-top {
    position: fixed;
    top: 0;

    width: 100%;
    /* Na malých obrazovkách zabere celou šířku */
    max-width: 1200px;
    /* Na velkých obrazovkách bude mít přesně 1200 px */

    margin: 0 auto;
    /* left: 50%;
    /* Posune levý okraj lišty přesně na střed obrazovky */
    /* transform: translateX(-50%);
    /* Vrátí lištu o 50 % její vlastní šířky doleva -> tím se dokonale vycentruje */

    /* Okraje jsou tu proto, aby byl tento prvek stejný jako <container> */
    padding: 0 20px;
    /* top and bottom | left and right */

    z-index: 10000;
}

/* -- Poznámky -----
flex je hodnota pro property display
normální background: var(--bg-nav); ale hraji si s tím, potřebuji vidět kam až zasahuje
Při stejné barvě navigační lišty jako má pozadí stránky nechci mezery na bocích
----- */

.nav-top .inner {
    /* max-width: 1200px; */
    width: 100%;

    /* margin: 0 auto; /* Vycentruje lištu na střed, pokud je okno širší než 1200 px */

    display: flex;
    justify-content: space-between;
    /* Roztáhne obsah: levá část doleva, pravá doprava */
    align-items: center;
    /* Zarovná prvky vertikálně na střed */

    padding: 20px 0 10px 0;
    /* top, right, bottom, left */
    background: var(--bg-table);
    box-sizing: border-box;
    /* hodnota border-box znamená: properties include the content, padding, and border, but do not include the margin */
}

.nav-top-grid {
    display: grid;
    /* grid-template-columns: max-content 1fr max-content; */
    grid-template-columns: auto 1fr auto;
    padding: 20px 0 10px 0;
    /* top, right, bottom, left */
    background: var(--bg-table);
    box-sizing: border-box;
}

/* Levá část navigační lišty */
.nav-top .breadcrumbs {
    min-width: 0;
}

/* Pravá část navigační lišty */
.nav-top .actions {
    min-width: 0;
}

.nav-top .actions button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
}