/* =========================================================
 *  Responsive design for Mkino theme 
 *  ========================================================= */



/* ---------------------------------------------------------
 *  0.  Design tokeny + základ (bez vlivu na desktop layout)
 *  --------------------------------------------------------- */

:root {
    --mk-brand:       #8b1e2d;   /* hlavní červená webu */
    --mk-brand-dark:  #6e1621;   /* hover / stisk tlačítek */
    --mk-ink:         #222;
    --mk-line:        #c9c4b4;   /* šedobéžová linka ladící s tématem */
    --mk-bg-soft:     #f1f0e9;   /* světlý béžový podklad webu */
    --mk-radius:      8px;
    --mk-tap:         44px;      /* min. velikost dotykového cíle */
    --mk-accent:      #d49a28;
    --mk-text:        #262626;
    --mk-muted:       #686868;
    --mk-border:      #d8d8d8;
    --mk-shadow:      0 3px 12px rgba(0, 0, 0, .10);
}

html {
    -webkit-text-size-adjust: 100%; /* Android/iOS nesmí samovolně zvětšovat text */
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    box-sizing: border-box;
    overflow-x: hidden;
}

body, body.js {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--mk-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-tap-highlight-color: rgba(139, 30, 45, 0.12);
}

p,
li,
.textbox,
.entry-content {
    overflow-wrap: break-word;
}

/* Viditelný fokus pro ovládání z klávesnice (přístupnost) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mk-brand);
    outline-offset: 2px;
}

img,
video,
iframe,
object,
embed {
    display: block;
    max-width: 100%;
}

img {height: auto;}

.wrapper,
.site-wrapper,
#page,
#main,
#content {
    margin-right: auto;
    margin-left: auto;
}

.wrapper,
.site-wrapper {
    padding-right: 16px;
    padding-left: 16px;
}

.site-main,
#main,
#content,
#primary {
    min-width: 0;
}
#bonus-content.bonuses {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

/* ---------------------------------------------------------
 *  Desktop: maximální šířka webu
 *  --------------------------------------------------------- */
@media screen and (min-width: 1140px) {
    #video iframe.videoframe {width: 100%; height: 400px;}
    #bonus-content img.bonus-img {width: calc(715px / 5.2);}
}


@media screen and (min-width: 1001px) {
    #masthead,
    #site-navigation,
    #main,
    footer#colophon {
        width: 92%;
        max-width: 1100px;
        box-sizing: border-box;
    }
    #video {width: 65%; margin-bottom: 2rem;}
    #video .video-content {width: 100%;}
    #video iframe.videoframe {width: 100%; height: 365px;}
    #bonus-content, #video .video-bottom {width: 100%;}
    #bonus-content img.bonus-img {width: calc(660px / 5.2);}
}

/* ---------------------------------------------------------
 *   Tablety a menší notebooky
 *   --------------------------------------------------------- */

@media screen and (max-width: 1000px) {
    #masthead, #site-navigation, #main, footer#colophon {width: 92%; max-width: 900px;}
    /* single article */
    #video {float: none; width: 100%;}
    #video .video-content {width: 100%;}
    #video iframe.videoframe, #video #bonus-content, #video .video-bottom {width: 100%;}
    #video iframe.videoframe {display: block; height: auto; min-height: 275px; aspect-ratio: 16 / 9;}
    #bonus-content .bonus {width: 19%; margin: 0px 2px;}
    #bonus-content img.bonus-img, #bonus-content img.iOverlay {width: 100%; height: auto;}
    .video-bottom span.dtext {font-size: 15px;}
    .ngg-gallery-thumbnail img {width: 150px;}
    /* category*/
    #content-category img.wp-post-image {width: 100% !important;}
    #content-category article {width: 29%; padding: 0 2% 2%;}
    #content-category .image-shadow {width: 100%; overflow: hidden;}
    /* page */
    #main-video .more {min-height: 24px;}
    #primary {font-size: 18px;}
    #middlebar, #sidebar {font-size: 16px;}
    body.page #primary, body.page #middlebar {width: 45%;}
    body.page #sidebar {width: 95%; float: none; clear: both; padding: 0 20px;}
    body.page #sidebar img {float: left; margin-right: 14px;}
    body.page #sidebar .widget p {margin-bottom: 1.1rem; line-height: 1.3; font-size: 16px;}
    #main-video iframe.videoframe {width: 100%; min-height: 480px;}
    #more-video {display: flex; flex-wrap: wrap;}
    #more-video .videobox {width: 45%; padding: 0 2%;}
    #more-video .textbox {width: 100%; max-height: 78px; overflow: hidden;}
}


/* ---------------------------------------------------------
 Tablety                            *
 --------------------------------------------------------- */

@media screen and (max-width: 800px) {
    #primary {width: 100%;}
    #middlebar {width: 61%;}
    .video-bottom span.dtext {max-width: 75%;}
    #content-category article {width: 45%; padding: 0 2% 3%;}
    body.page #primary {width: 47%;}
    body.page #middlebar {width: 43%;}
    body.page-id-92 #primary {width: 90%; padding-left: 5%;}
    body.page-id-92 #sidebar2 {float: left; width: 90%; padding: 5% 0 5% 5%;}
    #main-video iframe.videoframe {min-height: 420px;}
    #more-video .videobox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        margin-bottom: 1.35rem;
    }
    #more-video img.wp-post-image {margin: 0 1rem 0 0;}
    #more-video h3.title, #more-video article p {text-align: left;}
    #middlebar aside.show h3 {color: #FF5C6F; text-decoration: underline;}
}

@media screen and (max-width: 740px) { 
    #main-video iframe.videoframe {min-height: 375px;} 
    #site-navigation {position: relative;}
    .main-navigation h3.menu-toggle {
        display: block;
        float: left;
        margin: 0;
        padding: 16px;
        color: #334;
        font-size: 20px;
        line-height: 24px;
        cursor: default;
    }
    .navbar-toggle {
        display: block;
        position: relative;
        float: right;
        width: 44px;
        height: 44px;
        margin: 6px 12px 6px 0;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: 4px;
        background-color: #333;
        cursor: pointer;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        margin: 4px 0;
        border-radius: 1px;
        background-color: #fff;
    }
    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background-color: #666;
    }
    
    #site-navigation ul.nav-menu {
    display: none !important;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
    }
    #site-navigation ul.toggled-on {display: block !important; text-align: left;}
    #site-navigation ul.toggled-on li.menu-item {width: 100%; margin: 0; padding: 0; border-top: 1px solid #ccc;}
    #site-navigation ul.toggled-on li.menu-item:hover,
    #site-navigation ul.toggled-on li.menu-item:focus-within {
    background-color: #edece5;
    }
    
    #site-navigation ul.toggled-on li.menu-item a {
    display: block;
    min-height: 36px;
    padding: 13px 16px;
    color: #222;
    font-size: 16px;
    line-height: 22px;
    text-decoration: none;
    }
    
    #site-navigation ul.toggled-on li.menu-item a:hover,
    #site-navigation ul.toggled-on li.menu-item a:focus {
    color: #8b1e2d;
    }
    body.page #primary,
    body.page #middlebar, 
    body.page #sidebar {width: 93%; padding-top: 15px; clear: both;}
    body.page #primary article {padding-bottom: 0;}
}
    
/* ---------------------------------------------------------
 *   Mobilní zařízení na šířku
 *   --------------------------------------------------------- */
    
@media screen and (max-width: 640px) {
    body.custom-font-enabled {font-family: Arial, Helvetica, sans-serif;}
    .main-navigation li.menu-item {margin: 0 8px;}
    #middlebar {width: 100%;}
    .video-bottom {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
    .video-bottom span.dtext {max-width: 73%; padding: 7px 3px; font-size: 12px; line-height: 1.35; }
    .video-bottom span.dtext {max-width: 73%; font-size: 14px; padding: 7px 3px;}
    #main-video iframe.videoframe {min-height: 325px;}
    #main-video .more span.film {display: none;}
    #more-video .videobox {padding: 0 1% 3%;}
    #more-video .textbox {height: 80px;}
    #more-video h3.title {margin-bottom: 0;}
    #more-video .videobox > a {margin-top: 5px;}
    #content-category article {width: 100%;}
}

/* ---------------------------------------------------------
 *  Mobil (≤ 565 px) – čitelnost
 *  --------------------------------------------------------- */

@media screen and (max-width: 565px) {
    body {font-size: 16px; line-height: 1.6;}
    
   .entry-content a {
        color: var(--mk-brand);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
    .video-bottom span.dtext { font-size: 15px; }
    #colophon .site-info { font-size: 15px; width: 100%; margin: 1rem 0; text-align: center; }
    
    .video-bottom span.darujte a,
    .darujte a,
    table.formdary input[type="submit"],
    table.formdary button {
        min-height: var(--mk-tap);
        padding: 12px 20px;
        border: 0;
        border-radius: var(--mk-radius);
        color: #fff;
        background: var(--mk-brand);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
        transition: background-color 0.15s ease,
        transform 0.1s ease,
        box-shadow 0.15s ease;
    }
    
    /* hmatatelná odezva na dotyk */
    .video-bottom span.darujte a:active,
    .darujte a:active,
    table.formdary input[type="submit"]:active,
    table.formdary button:active {
        background: var(--mk-brand-dark);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        transform: translateY(1px);
    }
    .navbar-toggle {border-radius: var(--mk-radius); transition: background-color 0.15s ease;}
    .navbar-toggle:active {background-color: #000;}
    
    /* Otevřené menu se jemně zasune shora */
    #site-navigation ul.toggled-on {
    animation: mk-menu-down 0.18s ease;
    }
    
    @keyframes mk-menu-down {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }
    
    /* Položky o chlup větší = lépe čitelné */
    #site-navigation ul.toggled-on li.menu-item a {
    font-size: 17px;
    }
    
    /* Aktuální stránka je v menu barevně vidět */
    #site-navigation ul.toggled-on li.current-menu-item > a,
    #site-navigation ul.toggled-on li.current_page_item > a {
    color: var(--mk-brand);
    font-weight: 700;
    }
    
    #more-video .videobox > a img,
    #main-video > a img,
    #content-category .image-shadow img {
        border-radius: var(--mk-radius);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    }
    
    /* vizuální odezva, že karta je klikací */
    #more-video .videobox > a,
    #main-video > a {
        transition: opacity 0.15s ease;
    }
    
    #more-video .videobox > a:active,
    #main-video > a:active {
        opacity: 0.82;
    }
    #video iframe.videoframe {min-height: auto;}
    #video .video-bottom {flex-wrap: nowrap;}
    .video-bottom span.darujte {background-color: none;}
    
    #social-ico {
        top: auto;
        bottom: -35px;
        left: 7rem;
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, 45px);
        height: auto;
    }
}

    
    table.formdary td {
        padding: 4px 0 10px;
    }
    
    /* Popisky polí vždy na vlastní řádce nad polem */
    table.formdary td label,
    table.formdary td strong {
        display: block;
        margin-bottom: 6px;
        color: var(--mk-ink);
        font-size: 15px;
        font-weight: 700;
    }
    
    table.formdary input[type="text"],
    table.formdary input[type="email"],
    table.formdary input[type="tel"],
    table.formdary input[type="number"],
    table.formdary select,
    table.formdary textarea {
        border: 1px solid var(--mk-line);
        border-radius: var(--mk-radius);
        background: #fff;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    
    /* Focus: barevný rámeček + jemná „svatozář“ místo
     *      výchozího modrého outline */
    table.formdary input[type="text"]:focus,
    table.formdary input[type="email"]:focus,
    table.formdary input[type="tel"]:focus,
    table.formdary input[type="number"]:focus,
    table.formdary select:focus,
    table.formdary textarea:focus {
        outline: none;
        border-color: var(--mk-brand);
        box-shadow: 0 0 0 3px rgba(139, 30, 45, 0.15);
    }
    
    /* Select s vlastní šipkou (iOS/Android jinak vykreslí
     *      různé nativní ovládání) */
    table.formdary select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 40px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%236e1621' stroke-width='2'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
    }
    
    /* Zaškrtávací pole ve stylu webu + dostatečně velká */
    table.formdary input[type="checkbox"],
    table.formdary input[type="radio"] {
        width: 22px;
        height: 22px;
        accent-color: var(--mk-brand);
    }
    
    /* -----------------------------------------------------
     *  7.  Patička – odkaz „Začátek stránky“ jako tlačítko
     *  ----------------------------------------------------- */
    
    #colophon a[href^="#"] {
    display: inline-block;
    min-height: var(--mk-tap);
    padding: 10px 18px;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mk-ink);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    }
    
    #colophon a[href^="#"]:active {
    background: var(--mk-bg-soft);
    color: var(--mk-brand);
    }
}


/* ---------------------------------------------------------
 *  Hover jen tam, kde hover existuje
 *  --------------------------------------------------------- */

@media screen and (hover: hover) and (max-width: 565px) {
    
    .video-bottom span.darujte a:hover,
    .darujte a:hover,
    table.formdary input[type="submit"]:hover,
    table.formdary button:hover {
        background: var(--mk-brand-dark);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
    }
    #social-ico a:hover {transform: translateY(-2px);}
    #colophon a[href^="#"]:hover {color: var(--mk-brand);}
}


/* ---------------------------------------------------------
 *  Respekt k nastavení „omezení pohybu“ (a11y)
 *  --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    
    html {scroll-behavior: auto;}
    
    *,
    *:before,
    *:after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }
}