/* Mobilní úprava webu Of Elven Star.
   Načítá se JEN na úzkých obrazovkách (link má media="screen and (max-width: 800px)"
   a všechna pravidla jsou navíc uvnitř @media), takže na počítači zůstává web přesně
   jako dřív. Původní Site.css se nemění. */
@media screen and (max-width: 800px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    body {
        background-attachment: scroll;
        background-size: 100% auto;
        background-position: center 150px;
        font-size: 16px;
        line-height: 1.4;
        margin: 0;
    }

    /* Původní pevná šířka 1040 px -> šířka displeje. */
    #root {
        width: auto;
        margin: 0;
        padding: 0 10px;
    }

    /* Hlavička je obrázek 1040x148 na pozadí - zmenšit poměrově. */
    #header {
        background-size: 100% auto;
        background-position: center top;
        height: auto;
        aspect-ratio: 1040 / 148;
        min-height: 40px;
    }

    /* Menu: položky se zalomí do více řádků, pruh na pozadí se roztáhne. */
    #menu {
        background-size: cover;
        background-position: center;
        border-radius: 6px;
        padding: 6px 4px;
        font-size: 15px;
        line-height: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 4px;
    }
    #menu a {
        padding: 2px 8px;
        white-space: nowrap;
    }

    /* Obrázky nikdy širší než displej; height="300" z HTML se přepočítá poměrově. */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Tabulky slouží jen k rozložení do sloupců (profil psa = fotka | text, rodokmen,
       výstavy = datum | výsledek). Na mobilu se buňky skládají pod sebe. */
    table, tbody, tr, td, th {
        display: block;
        width: auto !important;
        max-width: 100%;
    }
    td, th {
        padding: 2px 0;
    }

    /* Pevné odsazení z doby širokého layoutu (margin-left: 30/130 px, margin-right: 40/80 px). */
    div[style*="margin-left"], p[style*="margin-left"], img[style*="margin-left"] {
        margin-left: 4px !important;
    }
    p[style*="margin-right"], div[style*="margin-right"] {
        margin-right: 0 !important;
    }
    div[style*="margin-top: 300px"] {
        margin-top: 40px !important;
    }
    div[style*="margin-top: 100px"] {
        margin-top: 20px !important;
    }

    /* Dva sloupce vedle sebe (float, 50 %) -> pod sebou. */
    div[style*="width:50%"], div[style*="width: 50%"] {
        float: none !important;
        width: auto !important;
    }

    /* Rozcestník na stránkách Smečka / Deník (#index): dlaždice pod sebou. */
    #index {
        height: auto;
        margin-left: 0 !important;
        background-size: 100% auto;
    }
    #index #gira, #index #fiana {
        float: none;
        margin: 0 auto 12px;
        text-align: center;
    }
    #index #fiana a.directLink, #index #gira a.directLink {
        position: static;
        font-size: 24px;
    }

    ul {
        padding-left: 22px;
    }
    h1 {
        font-size: 20px;
    }
    .smileyEditor textarea {
        width: 100%;
    }
}