/*
 * responsive.css — mobile-friendly přidání pro šablonu adult_online
 * Načítá se za hlavním style.css a přepisuje fixed-width pravidla.
 * Původní style.css se nemění — tuto vrstvu stačí smazat pro rollback.
 */

/* =====================================================
   GLOBÁLNÍ ZÁKLAD — platí pro všechna zařízení
   ===================================================== */

/* Obrázky a vložené objekty se nikdy nepřetečou kontejneru */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Tabulky se přizpůsobí šířce */
table {
    max-width: 100%;
    word-break: break-word;
}

/* =====================================================
   TABLET  —  max 1024px
   ===================================================== */
@media screen and (max-width: 1024px) {

    /* Obálka stránky */
    .art-sheet,
    div.art-header,
    div.art-header-jpeg,
    .art-nav .r,
    #art-page-background-simple-gradient,
    #art-page-background-gradient,
    #art-page-background-glare {
        width: 100% !important;
        min-width: 0 !important;
        clip: auto !important;
    }

    /* Layout tabulka → blok */
    .art-content-layout {
        display: block !important;
        width: 100% !important;
    }

    .art-content-layout-row {
        display: block !important;
        width: 100% !important;
    }

    /* Buňky layoutu přes celou šířku */
    div.art-content-layout div.art-layout-cell,
    div.art-content-layout div.art-layout-cell div.art-content-layout div.art-layout-cell {
        display: block !important;
        width: 100% !important;
    }

    /* Obsah a postranní panely */
    .art-content-layout .art-content,
    .art-content-layout .art-content-sidebar1,
    .art-content-layout .art-content-sidebar2,
    .art-content-layout .art-content-wide,
    .art-content-layout .art-sidebar1,
    .art-content-layout .art-sidebar2 {
        width: 100% !important;
        display: block !important;
    }

    /* Zrušení fixed šířky loga */
    .art-logo {
        position: relative !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
    }

    div.art-header {
        height: auto !important;
        min-height: 60px;
    }

    /* Horizontální menu — tablet: wrap */
    .art-menu li {
        float: none;
        display: inline-block;
    }

    div.art-nav-center {
        float: none;
        left: auto;
        right: auto;
        text-align: center;
    }

    ul.art-menu {
        float: none;
        left: auto;
        position: relative;
        text-align: center;
    }

    /* Buňky v patičce */
    div.art-layout-cell-size2,
    div.art-layout-cell-size3,
    div.art-layout-cell-size4 {
        width: 50% !important;
        display: inline-block !important;
        vertical-align: top;
    }
}

/* =====================================================
   MOBIL  —  max 768px
   ===================================================== */
@media screen and (max-width: 768px) {

    /* ---- Nav bar jako poziční kotva pro hamburger ---- */
    .art-nav {
        height: auto !important;
        min-height: 34px;
        position: relative !important;
        overflow: visible !important;
    }

    div.art-nav-center {
        float: none !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
    }

    /* ---- Hamburger tlačítko ---- */
    #art-mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px 12px;
        position: fixed;
        top: 7px;
        right: 10px;
        transform: none;
        z-index: 9999;
        line-height: 0;
    }

    #art-mobile-menu-toggle span,
    #art-mobile-menu-toggle span::before,
    #art-mobile-menu-toggle span::after {
        display: block;
        width: 24px;
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
        position: relative;
        transition: all 0.25s ease;
    }

    #art-mobile-menu-toggle span::before,
    #art-mobile-menu-toggle span::after {
        content: '';
        position: absolute;
        left: 0;
    }

    #art-mobile-menu-toggle span::before { top: -8px; }
    #art-mobile-menu-toggle span::after  { top:  8px; }

    /* Otevřený stav — křížek */
    #art-mobile-menu-toggle.is-open span          { background: transparent; }
    #art-mobile-menu-toggle.is-open span::before  { transform: rotate(45deg);  top: 0; }
    #art-mobile-menu-toggle.is-open span::after   { transform: rotate(-45deg); top: 0; }

    /* ---- Menu — schováno, otevírá JS ---- */
    ul.art-menu {
        display: none !important;
        float: none !important;
        left: auto !important;
        position: static !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(30,20,10,0.95) !important;
        z-index: 250;
    }

    ul.art-menu.is-open {
        display: block !important;
    }

    /* Všechny položky pod sebou */
    .art-menu li,
    .art-menu li li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        position: static !important;
    }

    /* Submenu schováno — otevírá JS */
    .art-menu ul {
        display: none !important;
        position: static !important;
        background: rgba(30,20,10,0.95) !important;
        padding-left: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
    }

    /* is-open přebíjí :hover — musí stát AŽ ZA :hover pravidlem */
    .art-menu li:hover > ul {
        display: none !important;
    }

    .art-menu li.is-open > ul,
    .art-menu li.is-open:hover > ul {
        display: block !important;
    }

    /* Odkaz v menu — přes celou šířku, dostatečně klikatelný */
    .art-menu a {
        display: block !important;
        padding: 11px 15px !important;
        height: auto !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        position: relative !important;
    }

    /* .l a .r jsou dekorativní pozadí — schoveme */
    .art-menu a .l,
    .art-menu a .r {
        display: none !important;
    }

    /* ---- Separator — na mobilu nulová výška ---- */
    .art-menu .art-menu-li-separator {
        display: none !important;
    }

    /* ---- Hlavní položky — čitelný text ---- */
    .art-menu > li > a,
    ul.art-menu > li > a {
        color: #f0e8d0 !important;
    }

    /* ---- Hover na hlavních položkách ---- */
    .art-menu > li > a:hover,
    ul.art-menu > li > a:hover {
        background-color: rgba(255,255,255,0.1) !important;
        color: #ffffff !important;
    }

    /* ---- Aktivní položka hlavního menu ---- */
    .art-menu > li.active > a,
    ul.art-menu > li.active > a,
    .art-menu > li > a.active,
    ul.art-menu > li > a.active {
        background-color: rgba(255,255,255,0.15) !important;
        border-left: 3px solid #c8a96e !important;
        color: #ffffff !important;
    }

    .art-menu > li.active > a .t,
    ul.art-menu > li.active > a .t,
    .art-menu > li > a.active .t {
        color: #ffffff !important;
    }

    .art-menu a .t {
        display: inline !important;
        position: static !important;
        overflow: visible !important;
        clip: auto !important;
        height: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #f0e8d0 !important;
        line-height: inherit !important;
        text-align: left !important;
    }

    /* ---- Submenu — sjednotit styl s hlavním menu ---- */
    .art-menu ul,
    .art-menu ul li,
    .art-menu ul a,
    .art-menu ul a:link,
    .art-menu ul a:visited,
    .art-menu ul a:active {
        background-image: none !important;
        background-color: transparent !important;
        width: auto !important;
        height: auto !important;
        white-space: normal !important;
        overflow: visible !important;
        text-indent: 0 !important;
        color: #f0e8d0 !important;
        line-height: 1.4 !important;
    }

    .art-menu ul a {
        display: block !important;
        padding: 10px 15px 10px 25px !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    }

    .art-menu ul a .t {
        color: #f0e8d0 !important;
    }

    /* Hover na položkách submenu */
    .art-menu ul li a:hover,
    .art-menu ul li:hover > a {
        background-color: rgba(255,255,255,0.1) !important;
        color: #ffffff !important;
    }

    /* Aktivní položka v submenu */
    .art-menu ul li.active > a,
    .art-menu ul li > a.active {
        background-color: rgba(255,255,255,0.15) !important;
        border-left: 3px solid #c8a96e !important;
        color: #ffffff !important;
        padding-left: 22px !important;
    }

    .art-menu ul li.active > a .t,
    .art-menu ul li > a.active .t {
        color: #ffffff !important;
    }

    /* ---- Hlavička ---- */
    div.art-header {
        height: auto !important;
        min-height: 50px;
        padding-bottom: 10px;
    }

    div.art-header-jpeg {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    .art-logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        text-align: center;
        padding: 10px 0;
    }

    h1.art-logo-name {
        font-size: 1.4em !important;
    }

    .art-logo-text {
        font-size: 0.9em !important;
    }

    /* ---- Sheet / wrapper ---- */
    .art-sheet {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* ---- Layout buňky ---- */
    .art-content-layout,
    .art-content-layout .art-content,
    .art-content-layout .art-content-sidebar1,
    .art-content-layout .art-content-sidebar2,
    .art-content-layout .art-content-wide,
    .art-content-layout .art-sidebar1,
    .art-content-layout .art-sidebar2,
    div.art-content-layout div.art-layout-cell {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    /* ---- Postranní panely pod obsah ---- */
    .art-sidebar1,
    .art-sidebar2 {
        border-top: 2px solid rgba(0,0,0,0.1);
        margin-top: 10px;
        padding-top: 10px;
    }

    /* ---- Bloky a widgety ---- */
    .art-block,
    .art-vmenublock {
        margin: 5px 0 !important;
    }

    /* ---- Příspěvky ---- */
    .art-post img,
    .art-article img,
    img.wp-post-image {
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        margin: 0 0 10px 0 !important;
        display: block;
    }

    /* ---- Komentáře ---- */
    .commentlist li li {
        margin-left: 10px;
    }

    #commentform input[type="text"],
    #commentform input[type="email"],
    #commentform input[type="url"],
    #commentform textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ---- Formuláře / search ---- */
    input[type="text"],
    input[type="search"],
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ---- Patička ---- */
    div.art-layout-cell-size2,
    div.art-layout-cell-size3,
    div.art-layout-cell-size4 {
        width: 100% !important;
        display: block !important;
    }

    div.art-footer div.art-content-layout {
        width: 100% !important;
    }

    /* ---- Blokheader decorations ---- */
    .art-blockheader .r {
        width: 100% !important;
        clip: auto !important;
    }

    /* ---- Pagination ---- */
    .navigation,
    .art-post-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    /* ---- Tabulky v obsahu ---- */
    .art-post table,
    .art-article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================
   MALÝ MOBIL  —  max 480px
   ===================================================== */
@media screen and (max-width: 480px) {

    h1.art-logo-name {
        font-size: 1.1em !important;
    }

    .art-menu a {
        font-size: 0.95em !important;
    }

    /* Vyhledávací formulář */
    #searchform input[type="text"] {
        width: 70% !important;
    }

    /* Menší odsazení bloků */
    .art-block-body,
    .art-blockcontent-body {
        padding: 8px !important;
    }

    /* Komentáře bez vnoření na nejmenších */
    .commentlist li li {
        margin-left: 5px;
    }
}