/*
 * Responsive Styles
 * 
 * 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;
    }

    /* Fix the site-title to stack logo and slogan vertically */
    .site-title {
        font-size: 1.6rem;
        justify-content: center;
        margin-bottom: 0;
        display: flex !important;
        flex-direction: column !important; /* Stack logo and slogan vertically */
        align-items: center !important;
        text-align: center !important;
    }
    
    .site-title a {
        display: flex !important;
        flex-direction: column !important; /* Stack logo and slogan vertically */
        align-items: center !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    
    .site-title img { 
        width: 28px; 
        height: 28px; 
        margin-right: 0 !important; /* Remove right margin */
        margin-bottom: 8px !important; /* Add bottom margin */
        display: block !important;
    }

    /* Style the slogan span within the site-title */
    .site-title span {
        display: block !important;
        font-size: 0.7rem !important; /* Smaller font size */
        margin-top: 5px !important;
        color: #666 !important;
        font-weight: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }

    /* ===== 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: 0 0; }
    .site-branding { width: 100%; text-align: center; }
    
    .site-title { 
        font-size: 1.4rem; 
        justify-content: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .site-title a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    
    .site-title img { 
        width: 24px; 
        height: 24px; 
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* Style the slogan span for extra small devices */
    .site-title span {
        display: block !important;
        font-size: 0.65rem !important; /* Even smaller font size */
        margin-top: 5px !important;
        color: #666 !important;
        font-weight: normal !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    
    /* 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; }
}


/* Hero Section Responsive Adjustments */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .hero-section {
        margin-bottom: 30px;
    }
    
    .hero-banner {
        min-height: 500px;
    }
    
    .hero-content {
        padding: 40px 25px;
    }
    
    .hero-title {
        font-size: 2.8rem;
        margin-bottom: 18px;
    }
    
    .hero-description {
        font-size: 1.2rem;
        margin-bottom: 25px;
    }
    
    .cta-button {
        padding: 12px 28px;
        font-size: 1rem;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .hero-section {
        margin-bottom: 25px;
    }
    
    .hero-banner {
        min-height: 420px;
    }
    
    .hero-content {
        padding: 35px 20px;
        text-align: center;
        justify-content: center;
    }
    
    .hero-text {
        text-align: center;
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 2.4rem;
        margin-bottom: 16px;
        text-align: center;
    }
    
    .hero-description {
        font-size: 1.1rem;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
        display: inline-block;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .hero-section {
        margin-bottom: 20px;
    }
    
    .hero-banner {
        min-height: 350px;
    }
    
    .hero-content {
        padding: 30px 15px;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.4;
    }
    
    .cta-button {
        padding: 10px 20px;
        font-size: 0.95rem;
        letter-spacing: 0.3px;
    }
}

/* Very small devices (less than 400px) */
@media (max-width: 399.98px) {
    .hero-banner {
        min-height: 320px;
    }
    
    .hero-content {
        padding: 25px 10px;
    }
    
    .hero-title {
        font-size: 1.7rem;
        margin-bottom: 12px;
    }
    
    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 18px;
    }
    
    .cta-button {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}


/* Book Detail Page Responsive Styles */

/* Tablets and smaller desktops */
@media (max-width: 991.98px) {
    .book-detail-redesigned {
        padding: 30px 0;
    }
    
    .book-detail-content {
        gap: 30px;
    }
    
    .book-left-column {
        flex: 0 0 300px;
        padding: 30px;
    }
    
    .book-right-column {
        padding: 30px;
    }
    
    .book-title {
        font-size: 2.4rem;
    }
    
    .book-subtitle {
        font-size: 1.2rem;
    }
    
    .summary-title {
        font-size: 1.3rem;
    }
    
    .book-summary-content {
        font-size: 1.05rem;
    }
    
    .book-cover-image {
        max-width: 240px;
    }
}

/* Mobile Layout - Switch to single column */
@media (max-width: 767.98px) {
    .book-detail-redesigned {
        padding: 20px 0;
    }
    
    .book-detail-content {
        flex-direction: column;
        gap: 0;
        margin: 0 15px;
    }
    
    /* Hide desktop left column on mobile */
    .book-left-column {
        display: none;
    }
    
    /* Show mobile book cover */
    .book-cover-mobile {
        display: block;
    }
    
    /* Show mobile details section */
    .book-details-mobile {
        display: block;
    }
    
    .book-right-column {
        padding: 30px;
        flex: none;
    }
    
    .book-title {
        font-size: 2rem;
        margin-bottom: 12px;
        text-align: center;
    }
    
    .book-subtitle {
        font-size: 1.1rem;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .book-author {
        font-size: 1rem;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .summary-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .book-summary-content {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .details-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .detail-item {
        gap: 3px;
        padding-bottom: 10px;
    }
    
    .detail-label {
        font-size: 0.9rem;
    }
    
    .detail-value {
        font-size: 0.95rem;
    }
    
    .book-admin-notes {
        margin: 0 15px 20px;
        padding: 20px;
    }
    
    .book-admin-actions {
        margin: 0 15px;
        padding: 15px;
    }
    
    .back-to-books {
        margin: 0 15px 20px;
    }
}

/* Small mobile devices */
@media (max-width: 575.98px) {
    .book-detail-content {
        margin: 0 10px;
    }
    
    .book-right-column {
        padding: 20px;
    }
    
    .book-title {
        font-size: 1.7rem;
    }
    
    .book-subtitle {
        font-size: 1rem;
    }
    
    .book-author {
        font-size: 0.95rem;
    }
    
    .book-summary-content {
        font-size: 0.95rem;
    }
    
    .book-cover-mobile .book-cover-image {
        max-width: 200px;
    }
    
    .book-details-mobile {
        padding: 20px;
    }
    
    .details-title {
        font-size: 1.1rem;
    }
    
    .detail-label {
        font-size: 0.85rem;
    }
    
    .detail-value {
        font-size: 0.9rem;
    }
    
    .book-admin-notes {
        margin: 0 10px 15px;
        padding: 15px;
    }
    
    .book-admin-actions {
        margin: 0 10px;
        padding: 12px;
    }
    
    .back-to-books {
        margin: 0 10px 15px;
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* Extra small devices */
@media (max-width: 399.98px) {
    .book-title {
        font-size: 1.5rem;
    }
    
    .book-subtitle {
        font-size: 0.95rem;
    }
    
    .book-author {
        font-size: 0.9rem;
    }
    
    .book-summary-content {
        font-size: 0.9rem;
    }
    
    .book-cover-mobile .book-cover-image {
        max-width: 180px;
    }
}