/* ==========================================================================
   WARP.cz - Star Trek slovník a encyklopedie
   Nový layout bez rámců (frames) - replikuje původní vzhled.
   Šířky sloupců se nastavují v include/config.php (sekce 'layout').
   ========================================================================== */

:root {
    --col-left:     140px;   /* levý sloupec s tlačítky */
    --col-right:    372px;   /* pravý sloupec s rychlým seznamem */
    --menu-height:  70px;    /* výška horní lišty */
    --copyright-height: 200px; /* výška spodního bloku s copyrightem */
    --bg:           black;
    --text:         #FADFA5;
    --bar:          #5A425A;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: var(--text);
    background-color: var(--bg);
    overflow: hidden;
    scrollbar-color: #EFBD94 #5A425A;
}

/* --------------------------------------------------------------------------
   Hlavní mřížka: tlačítka | střed (menu+obsah) | pravý panel
   -------------------------------------------------------------------------- */
.site {
    display: grid;
    grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
    grid-template-rows: minmax(0, 1fr);   /* řádek = výška okna, ne obsahu */
    height: 100vh;
}

/* ----- levý sloupec s tlačítky ----- */
.col-buttons {
    padding: 5px 0 0 5px;
    overflow: hidden;
}
.col-buttons .panel-top {
    text-align: right;
    height: 60px;
    white-space: nowrap;
}
.col-buttons .panel-top img { vertical-align: top; }
.btn-group { margin-top: 38px; }
.btn-group + .btn-group { margin-top: 28px; }
a.btn, span.btn {
    display: block;
    width: 108px;
    height: 30px;
    margin: 5px auto 0 auto;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

/* ----- střední sloupec ----- */
.col-center {
    display: grid;
    grid-template-rows: var(--menu-height) minmax(0, 1fr);
    min-width: 0;
}
.menu {
    padding-top: 5px;
    overflow: hidden;
}
.menu .row1 {
    background: var(--bar);
    height: 35px;
    text-align: right;
}
.menu .row1 img { margin-top: 5px; }   /* obrazek je o 4px vyssi kvuli diakritice */
.menu .row2 {
    background: var(--bar);
    height: 25px;
    text-align: right;
    padding-top: 6px;
}
.menu .row2 img { border: 0; }
.menu .row2 a { text-decoration: none; }
.menu .row2 .serie-gap { display: inline-block; width: 8px; }
.menu .row2 .serie-gap-l { display: inline-block; width: 16px; }

main.main {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 4px 5px 0;
    min-width: 0;
}

/* ----- pravý sloupec: dekorace | quick/bar/copyright | dekorace ----- */
.col-right {
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) 43px;
    grid-template-rows: minmax(0, 1fr);   /* řádek = výška okna, ne obsahu */
    min-width: 0;
    overflow: hidden;
}
.dec {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dec img { display: block; }
.dec .stretch { flex: 1 1 auto; min-height: 0; }
.dec .pruzny  { flex: 1 1 auto; min-height: 0; }   /* pružný úsek dorovnávající výšku okna */
.dec .x11 { margin-left: 11px; }
.dec .x10 { margin-left: 10px; }
.dec-l { padding-top: 5px; }
.dec-r { padding-top: 5px; padding-right: 5px; }
.fill-purple { background: url("../images/purple_point.gif") repeat; }
.fill-orange { background: url("../images/orange_point.gif") repeat; }
.fill-brown  { background: url("../images/brown_point.gif") repeat; }
.w18 { width: 18px; }
.w28 { width: 28px; }

.right-mid {
    display: grid;
    /* seznam pojmů responzivní, bar 20px, copyright pevná výška */
    grid-template-rows: minmax(0, 1fr) 20px var(--copyright-height);
    min-width: 0;
}
.quick {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 14px;
}
.quick-head {
    flex: none;
    text-align: center;
    padding-bottom: 13px;     /* jeden řádek mezery pod písmenem */
}
.quick-head h3 { margin: 0; }
.quick-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;             /* nativní posuvník skryt - je v pravé liště */
}
.quick-list::-webkit-scrollbar { display: none; }

/* vlastní posuvník v pravé dekorační liště */
.scrolltrack {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-sipka {
    flex: none;
    margin: 3px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}
.scroll-draha {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 18px;
}
.scroll-thumb {
    position: absolute;
    left: 0;
    width: 18px;
    min-height: 20px;
    display: none;                      /* zobrazí ho JS, když je co scrollovat */
    background: url("../images/orange_point.gif") repeat;
    cursor: grab;
}
.scroll-thumb:active { cursor: grabbing; }
.quick a { display: inline; }
.bar-row { overflow: hidden; }
.bar-row img { display: block; width: 100%; height: 14px; }  /* bar.gif pres celou sirku sloupce */
.hyperlink {
    overflow: hidden;
    text-align: center;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
}
.hyperlink > div { flex: none; }
.soukromi-radek {
    margin-top: auto;       /* přitlačí odkaz na spodní hranu elementu */
    padding-bottom: 3px;
}

/* reklamní slot ve spodním bloku */
.reklama-slot {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    min-height: 250px;
}

/* spodní část dekoračních lišt - výška vázaná na blok s copyrightem */
.dec .dno { height: calc(var(--copyright-height) - 43px); }

/* --------------------------------------------------------------------------
   Původní typografie
   -------------------------------------------------------------------------- */
.norm  { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; color: #FADFA5; }
input.norm, textarea.norm { color: black; }
.title { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; font-style: italic; color: #FADFA5; }
.error { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; color: red; }
.indented { text-indent: 10px; color: #FADFA5; }
.bigger { font-family: verdana, arial, helvetica, sans-serif; font-size: 12px; color: #FADFA5; }

a { color: #9AA4B3; font-family: verdana, sans-serif; font-size: 11px; font-weight: bold; text-decoration: none; }
a:visited { color: #9AA4B3; }
a:active, a:hover { color: #ffffff; }

h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #C4862C;
    font-size: 25px;
    font-weight: bolder;
    letter-spacing: 1px;
    margin: 16px 0 8px 0;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #C4862C;
    font-size: 22px;
    font-weight: bolder;
    letter-spacing: 1px;
}
h2.smaller { font-size: 18px; }

.popis-head {
    background: var(--bar);
    padding: 2px 4px;
    font-style: italic;
    font-weight: bold;
    margin-top: 12px;
}
.popis-telo { text-align: justify; padding: 4px 2px; }
.vyskyt { text-align: center; padding: 4px 2px; }
.vyskyt-blok { white-space: nowrap; }   /* blok [serie: epizoda] se nezalamuje uvnitr */
table.pojem td { vertical-align: top; padding: 1px 4px 1px 0; }
.img-left   { float: left;  margin: 2px 8px 2px 0; }
.img-right  { float: right; margin: 2px 0 2px 8px; }
.img-center { display: block; text-align: center; }

/* --------------------------------------------------------------------------
   Responzivní chování pro užší okna
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    body { overflow: auto; }
    .site {
        display: block;
        height: auto;
    }
    .col-buttons {
        padding: 5px;
        text-align: center;
    }
    .col-buttons .panel-top { display: none; }
    .btn-group { display: inline-block; margin: 5px !important; vertical-align: top; }
    a.btn, span.btn { display: inline-block; margin: 2px; }
    .col-center { display: block; }
    main.main { overflow: visible; padding: 0 8px; }
    .col-right { display: block; }
    .dec { display: none; }
    .right-mid { display: block; }
    .quick { display: block; overflow: visible; padding: 8px; }
    .quick-list { overflow: visible; }
    .bar-row { display: none; }
}