/**
 * Responzivny layout verejnej casti webu (admin ma vlastne styly).
 * Nacitava sa ako posledny, desktop ostava podla screen.css.
 */

.site {
    width: auto;
    max-width: 63.5em;
}

#menu-toggle,
#main-menu .submenu-toggle,
#main-menu .nav-panel-head {
    display: none;
}

#main {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#main img {
    max-width: 100%;
    height: auto;
}

#main iframe,
#main video,
#main object,
#main embed {
    max-width: 100%;
}

#restricted-border {
    width: 95%;
    max-width: 900px;
}

/* ------------------------------------------------------------------ */
/* Uzsi desktop - vtacik uz nema miesto vlavo od stranky              */
/* ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    body {
        padding: 0 1em;
        box-sizing: border-box;
    }

    #header .bird {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Tablet - hlavicka v beznom toku dokumentu                          */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    #header {
        height: auto;
        padding: 1.5em 1.5em 0;
    }

    #logo {
        position: static;
        font-size: 1em;
    }

    #logo a {
        width: 100%;
        max-width: 466px;
        height: 0;
        padding-bottom: 12.45%; /* 58 / 466 */
        background-size: contain;
    }

    #quickSearchForm {
        position: static;
        display: flex;
        max-width: 24em;
        margin: 1.2em 0 0;
    }

    #quickSearchForm input.text {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    #header .thick-line {
        position: static;
        width: 100%;
        margin-top: 1.2em;
    }

    #main-menu {
        position: relative;
        left: 0;
        width: 100%;
    }

    #main-menu ul li a {
        padding: .4em 1.2em .3em .6em;
    }

    #main-menu ul.dropdown li {
        margin-left: 0;
    }

    #content {
        padding: 1em 1.5em;
    }
}

/* ------------------------------------------------------------------ */
/* Mobil                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 700px) {
    body {
        padding: 0;
    }

    #wrapper {
        margin-top: 0;
        border-left: none;
        border-right: none;
    }

    #header {
        padding: 1em 1em 0;
    }

    #quickSearchForm {
        max-width: none;
    }

    /* Hlavicka - logo vlavo, hamburger vpravo */
    #logo a {
        max-width: calc(100% - 56px);
    }

    #main-menu {
        position: static;
        border-bottom: none;
    }

    #rss {
        display: none;
    }

    /* Hamburger ikona (podla poehm.com) */
    .nav-icon {
        display: block;
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    .nav-icon span {
        display: block;
        position: absolute;
        left: 10px;
        width: 25px;
        height: 2px;
        background: #000;
        border-radius: 9px;
        transform-origin: left center;
        transition: .25s ease-in-out;
    }

    .nav-icon span:nth-child(1) { top: 14px; }
    .nav-icon span:nth-child(2) { top: 21px; }
    .nav-icon span:nth-child(3) { top: 28px; }

    .nav-icon.open span:nth-child(1) {
        transform: rotate(45deg);
        top: 13px;
        left: 13px;
    }

    .nav-icon.open span:nth-child(2) {
        width: 0;
        opacity: 0;
    }

    .nav-icon.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 31px;
        left: 13px;
    }

    #menu-toggle {
        display: block;
        position: absolute;
        top: .6em;
        right: .4em;
    }

    /* Panel cez cely viewport */
    body.menu-open {
        overflow: hidden;
    }

    #main-menu-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        z-index: 1000;
        font-family: Arial, sans-serif;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }

    #main-menu.open #main-menu-panel {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s ease, visibility 0s linear 0s;
    }

    #main-menu .nav-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6em .4em .6em 1em;
        border-bottom: 2px solid #ebebeb;
    }

    .nav-panel-logo {
        display: block;
        width: 220px;
        max-width: calc(100% - 56px);
        height: 0;
        padding-bottom: 27px;
        background: url(images/logo.png) no-repeat left center;
        background-size: contain;
    }

    .nav-panel-logo span {
        display: none;
    }

    #main-menu ul.dropdown {
        text-transform: none;
    }

    #main-menu ul.dropdown li,
    #main-menu ul.dropdown li:hover {
        float: none;
        position: relative;
        margin: 0;
        text-align: left;
        font-size: 1em;
        background: none;
        border-bottom: 1px solid #ebebeb;
    }

    #main-menu ul.dropdown li a,
    #main-menu ul.dropdown li a:hover,
    #main-menu ul.dropdown li.hover a {
        display: block;
        padding: 0 60px 0 15px;
        line-height: 50px;
        font-size: 1.05em;
        font-weight: bold;
        color: #000;
        background: none;
    }

    #main-menu ul.dropdown li.last {
        display: none;
    }

    /* Podmenu */
    #main-menu ul.dropdown ul,
    #main-menu ul.dropdown ul ul {
        position: static;
        display: none;
        visibility: visible !important;
        width: auto;
        border-top: none;
        padding-bottom: 15px;
    }

    #main-menu ul.dropdown ul li,
    #main-menu ul.dropdown ul li:hover {
        border-bottom: none;
        background: none;
    }

    #main-menu ul.dropdown ul li a,
    #main-menu ul.dropdown ul li a:hover {
        width: auto;
        padding: 10px 30px 10px 30px;
        line-height: 20px;
        font-size: 1em;
        font-weight: normal;
        color: #000;
    }

    #main-menu ul.dropdown ul ul li a {
        padding-left: 45px;
    }

    #main-menu .submenu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
    }

    #main-menu .submenu-toggle:after {
        content: "";
        position: absolute;
        top: 19px;
        left: 20px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    #main-menu li.sub-open > .submenu-toggle:after {
        top: 23px;
        transform: rotate(-135deg);
    }

    #main-menu ul.dropdown ul .submenu-toggle {
        height: 40px;
    }

    #main-menu ul.dropdown ul .submenu-toggle:after {
        top: 14px;
    }

    #main-menu ul.dropdown ul li.sub-open > .submenu-toggle:after {
        top: 18px;
    }

    /* Obsah */
    #content {
        padding: .5em 1em 1em;
    }

    #main {
        padding: 0 0 1em;
    }

    #main table:not(.form):not(#storynav):not(.objection-banners) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Blog */
    .entry {
        padding: .5em 0;
    }

    .entry header h3 {
        padding-right: 0;
    }

    .entry header .date {
        position: static;
        margin-top: .2em;
        font-size: .9em;
    }

    .entry a.image {
        float: none;
        display: block;
        width: auto;
        max-width: 480px;
        margin: .3em 0 .8em;
    }

    .entry-delimiter .t span {
        margin-left: 0;
    }

    #blog-entry-footer a.prev,
    #blog-entry-footer a.next {
        float: none;
        display: block;
        width: auto;
        text-align: center;
    }

    div.listItem .content {
        width: auto;
        float: none;
    }

    /* Pribehy, namietky, odkazy - inline floaty zo sablon */
    #main .pager,
    #main .rating > div {
        float: none !important;
        text-align: left !important;
        margin-bottom: .5em;
    }

    #storynav td,
    .objection-banners td {
        display: block;
        text-align: center !important;
        padding: .4em 0;
    }

    #main div[style*="width:425px"] {
        width: auto !important;
        max-width: 425px;
    }

    /* Formulare */
    table.form,
    table.form tbody,
    table.form tr,
    table.form th,
    table.form td {
        display: block;
        width: auto !important;
        text-align: left !important;
    }

    #main input[type="text"],
    #main input[type="email"],
    #main input.text,
    #main textarea,
    #main select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Komentare */
    #comments .comment {
        margin-left: 1em;
    }

    #comments .comment > a.reply {
        margin-left: 0;
    }

    #comments .comment-body {
        padding-left: 0;
    }

    /* Paticka */
    #footer {
        margin-bottom: 1.5em;
    }

    #social {
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

    /* Restricted popup - obsah z CMS je tabulka s pevnymi rozmermi */
    #restricted-bg,
    #restricted-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #restricted-container {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #restricted-border {
        width: auto;
        max-width: none;
        top: 0;
        margin: .5em;
    }

    #restricted {
        padding: 3em 0 1em;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    #restricted table,
    #restricted tbody,
    #restricted tr,
    #restricted td {
        display: block;
        width: auto !important;
    }

    #restricted td {
        padding: 0 1em !important;
    }

    #restricted img {
        display: block;
        max-width: 100%;
        height: auto !important;
        margin: 0 auto;
    }

    #restricted h3 {
        margin: 0;
        padding-bottom: 1.2em;
    }

    /* Text nad tlacidlami, tlacidla a nadpis pod nimi na stred */
    #restricted tr:last-child td > :nth-child(-n+4) {
        text-align: center !important;
    }

    #restricted [style*="font-size:26px"],
    #restricted [style*="font-size:28px"] {
        font-size: 22px !important;
    }

    #restricted .logRegForm {
        white-space: normal;
    }

    #restricted .logRegForm button {
        margin: 0 .5em .5em 0;
    }

    #restricted .close a {
        top: 1px;
        right: 1px;
        width: 44px;
        height: 44px;
    }

    /* Web popup (newsletter) */
    div.web-popup div.body {
        padding: 15px;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    div.web-popup [style*="font-size: 36px"] {
        font-size: 26px !important;
    }
}