/*
 * Responsive Styles
 * AZ Přijímačky
 * OPRAVA MOBILNÍHO MENU (zachovává desktopové menu)
 */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .container { max-width: 960px; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .container { max-width: 720px; }
    .site-main { flex-direction: column; }
    .main-content-column { width: 100%; padding: 0 15px; margin-bottom: 30px; order: 1; }
    .side-bar { width: 100%; padding: 0 15px; order: 2; }
    .posts-list { width: 100%; margin-bottom: 0; }
    .sidebar { width: 100%; order: 2; }
    .footer-content { flex-direction: column; }
    .footer-info, .footer-menu, .footer-categories { width: 100%; max-width: 100%; flex-basis: auto; }
    .bottom-bar { flex-direction: column; }
    .bottom-bar .widget { width: 100%; margin-bottom: 20px; }
    .bottom-bar .widget:last-child { margin-bottom: 0; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .container { max-width: 100%; padding: 0 15px; }
    .site-header { padding: 10px 0; }
    .site-header .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }

    .site-branding {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .site-title {
        font-size: 1.6rem;
        justify-content: center;
    }
    .site-title img { 
        width: 28px; 
        height: 28px; 
    }

    /* ===== MOBILNÍ MENU (pouze pro mobilní zařízení) ===== */
    
    /* Tlačítko pro mobilní menu - zobrazí se pouze na mobilech */
    .mobile-menu-button {
        display: block;
        width: 100%;
        max-width: 200px;
        margin: 10px auto;
        padding: 10px;
        background-color: #3F72AF;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }
    
    /* Aktivní stav tlačítka */
    .mobile-menu-button.active {
        background-color: #112D4E;
    }
    
    /* Změna zobrazení hlavní navigace na mobilech */
    .main-navigation {
        display: none; /* Skryté ve výchozím stavu na mobilech */
        width: 100%;
        order: 10;
    }
    
    /* Zobrazení navigace po aktivaci */
    .main-navigation.active {
        display: block;
    }
    
    /* Styl pro menu na mobilech */
    .menu {
        flex-direction: column; /* Změna na sloupec */
        background-color: #3F72AF;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        overflow: hidden;
    }
    
    /* Položky menu na mobilech */
    .menu li {
        display: block;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .menu li:last-child {
        border-bottom: none;
    }
    
    /* Odkazy v menu na mobilech */
    .menu a {
        display: block;
        padding: 12px 15px;
        color: #ffffff !important; /* Vynucená bílá barva na mobilech */
        text-align: center;
        font-size: 16px;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }
    
    /* Hover efekt pro odkazy */
    .menu a:hover {
        background-color: rgba(255,255,255,0.1);
        color: #ffffff !important;
        text-decoration: none;
    }
    
    /* Odstranění underline efektu na mobilech */
    .menu a::after {
        display: none;
    }
    
    /* Admin bar */
    .admin-bar {
        order: 20; /* Posunuto až za menu */
        flex-basis: 100%;
        margin-top: 15px;
        padding: 10px;
        text-align: center;
    }
    .admin-bar ul {
        justify-content: center;
    }
    .admin-bar li { 
        margin: 5px; 
    }

    /* Ostatní responsive styly */
    .post-item { flex-direction: column; margin-bottom: 25px; }
    .post-thumbnail { flex-basis: auto; width: 100%; max-height: 200px; margin-bottom: 15px; }
    .post-content-container { padding: 15px; }
    .post-title { font-size: 1.3rem; }
    
    .single-post, .page { padding: 20px; }
    .single-post .post-title, .page .page-title { font-size: 1.6rem; }
    .archive-title { font-size: 1.6rem; }
    
    .pagination li { margin: 0 2px; }
    .pagination a, .pagination span { padding: 5px 10px; font-size: 0.9rem; }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container { padding: 0 10px; }
    .site-content { padding: 20px 0; }
    .site-branding { width: 100%; text-align: center; }
    .site-title { font-size: 1.4rem; justify-content: center; }
    .site-title img { width: 24px; height: 24px; }
    
    /* Upravené styly menu pro velmi malé obrazovky */
    .mobile-menu-button {
        max-width: 180px;
        font-size: 14px;
        padding: 8px;
    }
    
    .menu a {
        padding: 10px;
        font-size: 14px;
    }
    
    /* Další responsivní úpravy */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    .section-title-latest { font-size: 1.4rem; }
    .post-item { margin-bottom: 20px; }
    .post-content-container { padding: 15px; }
    .post-title { font-size: 1.2rem; }
    .single-post, .page { padding: 15px; }
    .single-post .post-title, .page .page-title { font-size: 1.4rem; }
    .widget { padding: 15px; margin-bottom: 20px; }
    .site-footer { padding: 30px 0 15px; }
    .footer-info, .footer-menu ul, .footer-categories ul { font-size: 0.95rem; }
    .footer-bottom { font-size: 0.85rem; }
    .pagination a, .pagination span { padding: 4px 8px; }
}