/* Moje poznámky k CSS
Označení proměnné: --nazevpromenne
font-weight: 600 -> tučnost fontu. Vetšina písem má jen několim ř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é
---------------------------------------------- */

/* Nejvyšší-kořenový element dokumentu */
:root {
    /* Backgrounds */
    --bg-main: #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);
}

/* 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;
}

/* 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;
}

/* Základní typografie */
html {
    font-size: 14px;
}

/* Noto Serif je v uvozovkách, protože obsahuje mezeru */
body {
    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 */
.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;
}

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

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

/* 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 */
}

/* Členění dokumentu ----------------------------- */
.container {
    /* Udržuje celou stránku v určité šířce */
    max-width: 1200px;
    margin: 0 auto;
    /* vycentruje obsah */
    padding: 0 20px;
    /* malý vnitřní okraj, aby text nelepil na okraj */
}

/* Kontejner kolem cntx-list který umožnuje horizontální scrolování */
.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 */
}

/* 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;
}

/* Všechny entry_content --------------------------------------- */

.row {
  display: flex;
}

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

/* 01 noun_entry entry_content */
.nounent_entcon-4x6 {
    grid-template-columns: auto auto auto 1fr auto auto;
}
.nounent_entcon-5 {
    grid-template-columns:max-content max-content max-content max-content auto;
    margin-bottom: 10px;
}
.nounent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 02 adjective_entry entry_content */
.adjent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 03 pronoun_entry entry_content */
.pronent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 04 verb_entry entry_content */
.verbent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 05 adverb_entry entry_content */
.advent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 06 numeral_entry entry_content */
.nument_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 07 preposition_entry entry_content */
.prepent_entcon-2 {
    grid-template-columns: auto 1fr
}

/* 08 conjunction_entry entry_content */
.cnjent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* 09 particles_entry entry_content */
.partent_entcon-2 {
    grid-template-columns: auto 1fr;
}

/* root_entry entry_content */
.rootent_entcon-3 {
    grid-template-columns: auto 1fr auto
}

/* nounpatern_entry entry_content */
.nounpatentcon-1x6 {
    grid-template-columns: auto auto auto auto 1fr auto
}

/* adjpatern_entry entry_content */
.adjpat_entcon-5 {
    grid-template-columns: auto auto auto 1fr auto
}

/* advpatern_entry entry_content */
.advpat_entcon-5 {
    grid-template-columns: auto auto auto 1fr auto
}

/* stem_entry entry_content */
.stemeec-1x2 {
    grid-template-columns: auto auto;
    justify-content: start;
    /* celý grid vlevo */
}

/* root-content je stejný všude --------------------------------- */
.rootcon-3 {
    grid-template-columns: auto auto 1fr;
}
/* přechod na ROOTy vedle sebe zatím v noun_entry*/
.rootcon-5 {
    grid-template-columns: max-content max-content auto max-content max-content ;
}

/* Všechny basic-content --------------------------------- */
/* 01 noun_entry basic_content */
.nounent-bascon-4 {
    grid-template-columns: repeat(4, auto);
}

.nounent_bascon-9x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(9, auto);
}

.adjent-bascon-4 {
    grid-template-columns: repeat(4, auto);
}

/* 04 verb_entry basic_content */
.inf-5 {
    grid-template-columns: repeat(5, 1fr);
}

.tense-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* 05 numeral_entry basic_content */
.nument_bascon-5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, auto);
}

.prepent_bascon-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* root_entry basic_content */
.rootbascon-3 {
    grid-template-columns: 1fr auto auto;
}

/* nounpattern_entry basic_content */
.nounpatebc-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

/* WordClass basic_content */
.wordclas_bascon-3 {
    grid-template-columns: auto 1fr auto;
}

/* numtype basic_content */
.numtypebascon-3x2 {
    grid-template-columns: auto auto;
    justify-content: start;
    /* celý grid vlevo */
}

/* Všechny extended-content --------------------------------- */

/* noun_entry extended_content */
.fstperson-4x5 {
    grid-template-columns: repeat(5, auto);
}

.sndperson-5x5 {
    grid-template-columns: repeat(5, auto);
}

.trdperson-4x5 {
    grid-template-columns: repeat(5, auto);
}

.pronform-4 {
    grid-template-columns: repeat(4, auto);
}

.pronform-5 {
    grid-template-columns: repeat(5, auto);
}

/* numeral_entry extended_content */
.numfst-6x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, auto);
}

.numsnd-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

.numtrd-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

/* adjpattern_entry extended_content */
.adjpat_extcon-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* preposition_entry extended_content */
.prepfst-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

.prepsnd-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

.preptrd-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

/* nounpatter_entry extended_content */
.nounpatfst-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

.nounpatsnd-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

.nounpattrd-7x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, auto);
}

/* adjpattern_entry extended_content */
.adjpatextcon-5x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, auto);
}

.grid-9x5 {
    grid-template-columns: repeat(5, auto);
}

/* Používá se v noun_entry preset_content */
.precntx-2 {
    grid-template-columns: auto 1fr;
}

/* Používá se v noun_entry preset_content */
.precntx-6x2 {
    /* display: grid; */
    grid-template-columns: auto 1fr;
}

/* Používá se v pronoun_entry preset_content */
.precntx-10x2 {
    /* display: grid; */
    grid-template-columns: auto 1fr;
}

/* 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;
}

/* ROOT-ROOT CONTEXT LIST */
/* Používá se v noun_entry, adjective_entry, pronoun_entry atd.  */



.context-list{
    overflow-x: scroll; 
    overflow-y: hidden; 
    /* width: 100%; */
    -webkit-overflow-scrolling: touch; /* plynulé scrollování na mobilech */
}
.context-7 {
    grid-template-columns:
    max-content
    max-content
    max-content
    minmax(auto, 1fr)   /* ← tenhle se smí zlomit */
    /* max-content */
    minmax(auto, 1fr)   /* ← tenhle se smí zlomit */
    /* max-content */
    max-content
    max-content;
    /* justify-content: start; */
}

.nounlist-5 {
    grid-template-columns: repeat(5, 1fr);
}

.pronlist-5 {
    grid-template-columns:
       max-content
        auto
        auto
        minmax(auto, 1fr)   /* ← tenhle se smí zlomit */
        max-content;
}

.nounpatlist-3 {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
}

.adjpatlist-2 {
    grid-template-columns: auto auto;
    justify-content: start;
    /* celý grid vlevo */
}

.advpatlist-2 {
    grid-template-columns: auto auto;
    justify-content: start;
    /* celý grid vlevo */
}
 
.numlist-5 {
    grid-template-columns:
        max-content
        max-content
        max-content
        max-content
        1fr;
}

.cnjlist-5 {
    grid-template-columns:
        max-content
        max-content
        max-content
        max-content
        1fr;
}

.preplist-5 {
    grid-template-columns:
        max-content
        max-content
        max-content
        max-content
        1fr;
}

.partlist-5 {
    grid-template-columns:
       max-content
        max-content
        max-content
        max-content
        1fr;
}

.result-he-7 {
    grid-template-columns:
    max-content
    max-content
    max-content
    max-content
    max-content
    max-content
    1fr;
}

.result-cz-6 {
    grid-template-columns:
    max-content
    max-content
    max-content
    max-content
    max-content
    1fr;
}

/* třída pro celý řádek v seznamu. Je použita všude v list */
.list-row {
    cursor: pointer;
}
.list-row:hover {
    background-color: #f0f0f0;
}

.goback-5 {
    grid-template-columns: repeat(5, auto);
    justify-content: start;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* Lišta tlačítek -> teď už je to asi switcher .... */


/* --- Tlačítka pro volbu ROOT ------------------------------------ */
.rootsel-grid {
    display: grid;
    grid-template-columns: max-content max-content 200px;
    gap: 16px; /* tohle neovlivňije rádkování ve sloupci 3 */
}

.rootsel-grid .col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.rootsel-grid button {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background: white;
    width: auto;
}

.rootsel-grid a {
    display: block;
    /* aby šel použít margin */
    margin-top: 8px;
    /* mezera mezi odkazy */
}

/* tlačítko FSTCON */
#fstcon_list button.active {
    background: #444;
    color: white;
}

/* tlačítko FSTCON-SNDCON */
#fst2con_list button.active {
    background: #444;
    color: white;
}
/* výsledky při rootSelection */
.rootItems-container {
    /* background: var(--bg-table);  */
    padding: 8px;  
    border-radius: 4px; /* volitelné, vypadá to líp */
}

#rootItems {
    gap: 2px; /* malé mezery mezi položkami */
}

#rootItems .row-item {
    display: block;
    padding: 6px 8px;      /* horizontální padding + trochu vertikálního */
    min-height: 40px;      /* klíčové pro mobilní ergonomii */
    line-height: 1.2;      /* kompaktní text */
    display: flex;         /* aby text byl vertikálně centrovaný */
    align-items: center;
}


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

/* Základní styl pro všechna vyhledávací políčka */
.input-base {
    line-height: 1.2;
    padding: 6px 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 280px;
    margin: 4px 0 12px 0;
    box-sizing: border-box;
}

input {
    font-family: inherit;
    font-size: inherit;
}

/* Tohle vypíná podbarvování vstupního políčka prohlížečem při doplnění hodnoty políčka z paměti prohlížeče */
input:-webkit-autofill {
    background-color: transparent !important;
    box-shadow: 0 0 0px 1000px white inset !important;
}

/* Hebrejský vstup Alefbet */
/* Chci ho mít stejný jako he_alefbet */
.input-hebrew {
    direction: rtl;
    unicode-bidi: bidi-override;
    font-family: "Noto Serif", serif;
    font-size: 1.2em;
    line-height: 1.1; 
    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 */
    text-align: right;
}

/* Hebrejský vstup Latinka */
.input-latin {
    font-family: "Noto Serif", serif;
}

/* Čeština */
.input-cz {
    font-family: "Noto Serif", serif;
}

/* Hover / focus efekty */
.input-base:focus {
    border-color: #333;
    outline: none;
}

/* tohle lupa od copilota */
.btn-search {
    padding: 6px 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search:hover {
    background: #e8e8e8;
}

/* obal spojující input box s tlačítkem lupa */
.search-row {
    display: flex;
    align-items: center; /* vertikální zarovnání */
    gap: 8px;            /* mezera mezi inputem a tlačítkem */
    margin-bottom: 0px; /* mezera pod řádkem */
}

/* ===== hlavní strana projektu =================================== */

.hero {
    margin-top: 40px;
    margin-bottom: 40px;
}

.hero .h1 {
    margin-bottom: 6px;
}

.hero .h3 {
    margin-bottom: 4px;
}

.hero .h4 {
    margin-top: 0;
    color: var(--text-muted);
}

/* ===== CTA (vedle sebe, stabilní pozadí) ===== */
.cta {
    display: flex;
    gap: 20px;              /* mezera mezi tlačítky */
    margin-top: 20px;
    margin-bottom: 20px;
}

.cta div a {
    display: block;
    padding: 10px 16px;
    background: var(--bg-table);   /* tvoje projektová barva */
    border-radius: 4px;
    text-decoration: none;
    color: var(--link);       /* stejná barva jako ostatní odkazy */
}

/* Hover NEMĚNÍ pozadí, jen text může lehce ztmavnout */
.cta div a:hover {
    color: var(--link-hover); /* stejný hover jako ostatní odkazy */
    text-decoration: underline;
}

/* ===== BENEFITS SECTION ===== */

.benefits {
    margin-top: 40px;
    margin-bottom: 40px;
}

.benefits h2 {
    margin-bottom: 12px;
    font-size: 1.4rem;
    font-weight: 600;
}

/* ===== BENEFIT LIST (dvousloupec) ===== */

.benefit_list {
    display: flex;
    gap: 40px;
    align-items: stretch;      /* stejné chování jako feature_list */
}

.benefit_list .column {
    flex: 1;
    min-width: 250px;
    background: var(--bg-table);   /* stejné podbarvení jako feature_list */
    padding: 16px;
    border-radius: 4px;
}

.benefit_list ul {
    margin: 0;
    padding-left: 20px;
}

.benefit_list li {
    margin-bottom: 6px;
    line-height: 1.4;
}

/* ===== FEATURE LIST (dvousloupec) ===== */

/*
.features {

}
*/

.feature_list {
    display: flex;
    gap: 40px;              /* mezera mezi sloupci */
    /* align-items: flex-start; */
    align-items: stretch;
    margin-top: 0px;
}


/* Každý sloupec */
.feature_list .column {
    background: var(--bg-table);
    flex: 1;
    padding: 16px;
    min-width: 300px;       /* aby se to nerozbíjelo na menších monitorech */
    border-radius: 4px;                /* jen jemné zaoblení, můžeš odstranit */
}

/* Nadpisy sekcí */
.feature_list h2 {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 600;
}

.feature_list .column h2:first-of-type {
    margin-top: 0;
}

/* Seznamy */
.feature_list ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.feature_list li {
    margin-bottom: 4px;
    line-height: 1.4;
}

/* ===== RESPONSIVE =============================================== */
@media (max-width: 800px) {
    .feature_list {
        flex-direction: column;
        gap: 20px;
    }
        .benefit_list {
        flex-direction: column;
        gap: 20px;
    }
}

/* CONTACT FORM ================================================= */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px; /* mezery mezi prvky */
    max-width: 400px; /* volitelné – aby to nebylo přes celou šířku */
}

.contact-form label {
    font-weight: 600;
}

.contact-form input {
    width: 100%;
    padding: 8px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.contact-form textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 150px; /* nebo 200px, podle chuti */
    resize: vertical; /* uživatel může výšku měnit */
}


.contact-form button {
    padding: 10px 16px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
}

.contact-form button:hover {
    background: #f0f0f0;
}