/*
Theme Name: Twenty Twenty-Four - Faerský průvodce
Template: twentytwentyfour
Version: 1.0
*/

/* Import parent theme styles */
@import url("../twentytwentyfour/style.css");

/* ===== FAERSKÉ BARVY ===== */
:root {
    --faroe-ocean: #1e5f74;
    --faroe-sky: #4a90a4;
    --faroe-grass: #3d5a3d;
    --faroe-rock: #5c5c5c;
    --faroe-mist: #e8eef1;
    --cta-orange: #ff6b35;
}

/* ===== ZÁKLADNÍ LAYOUT OPRAVY ===== */

/* Odstranění horní mezery */
.wp-block-group.is-layout-flow:first-child {
    padding-top: 0 !important;
}

/* Maximální šířka obsahu */
.wp-site-blocks {
    padding-left: 20px;
    padding-right: 20px;
}

.wp-block-post-content > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post-content > .alignwide {
    max-width: 1200px;
}

.wp-block-post-content > .alignfull {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ===== KOMPONENTY ===== */

/* Hero sekce - pokud budete používat obrázek na pozadí */
.faroe-hero {
    background: linear-gradient(rgba(30,95,116,0.8), rgba(30,95,116,0.8)), 
                url('assets/images/hero-faroe.jpg');
    background-size: cover;
    background-position: center;
}

/* Benefit karty */
.faroe-benefit-card {
    background: var(--faroe-mist);
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faroe-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* ===== TLAČÍTKA ===== */

/* CTA tlačítka */
.wp-block-button__link {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Primární CTA */
.wp-block-button.is-style-cta .wp-block-button__link,
.has-cta-orange-background-color {
    background-color: var(--cta-orange) !important;
}

.has-cta-orange-background-color:hover {
    background-color: #e55525 !important;
}

/* ===== TYPOGRAFIE ===== */

/* Nadpisy */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
}

/* Citace */
.wp-block-quote {
    border-left: 4px solid var(--faroe-ocean);
    padding-left: 1.5rem;
    font-style: italic;
}

/* ===== UTILITY CLASSES ===== */

/* Trust badges */
.trust-badges {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0.9;
}

/* Barvy pozadí */
.has-faroe-ocean-background-color { background-color: var(--faroe-ocean) !important; }
.has-faroe-mist-background-color { background-color: var(--faroe-mist) !important; }
.has-faroe-grass-background-color { background-color: var(--faroe-grass) !important; }

/* Barvy textu */
.has-faroe-ocean-color { color: var(--faroe-ocean) !important; }
.has-white-color { color: #ffffff !important; }

/* ===== RESPONZIVNÍ DESIGN ===== */

@media (max-width: 768px) {
    /* Mobilní padding */
    .wp-site-blocks {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Menší karty na mobilu */
    .faroe-benefit-card {
        padding: 1.5rem;
    }
    
    /* Trust badges vertikálně */
    .trust-badges {
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Menší tlačítka */
    .wp-block-button__link {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* FAQ sekce */

/* ===== FAQ SEKCE ===== */

/* FAQ container */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

/* FAQ položka */
.faq-item {
    background: var(--faroe-mist);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 1rem;
    border: 1px solid rgba(30, 95, 116, 0.1);
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--faroe-ocean);
    box-shadow: 0 2px 8px rgba(30, 95, 116, 0.1);
}

/* FAQ summary (otázka) */
.faq-item summary {
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 3rem;
    color: var(--faroe-ocean);
}

/* Odstraníme defaultní šipku */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Vlastní šipka */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--cta-orange);
    transition: transform 0.3s ease;
}

/* Šipka když je otevřeno */
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

/* FAQ obsah (odpověď) */
.faq-item > *:not(summary) {
    padding: 0 1.5rem 1.25rem;
    animation: fadeIn 0.3s ease;
}

/* Animace */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Oddělovač mezi otázkou a odpovědí */
.faq-item[open] summary {
    border-bottom: 1px solid rgba(30, 95, 116, 0.1);
    margin-bottom: 1rem;
}

/* ===== ALTERNATIVNÍ STYL (MINIMALISTICKÝ) ===== */

/* Pokud chcete jednodušší vzhled, použijte třídu .faq-minimal */
.faq-minimal .faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--faroe-mist);
    border-radius: 0;
}

.faq-minimal .faq-item:last-child {
    border-bottom: none;
}

.faq-minimal .faq-item summary {
    padding-left: 0;
    color: var(--faroe-ocean);
}

.faq-minimal .faq-item summary::after {
    content: '→';
    transform: translateY(-50%) rotate(0deg);
}

.faq-minimal .faq-item[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

/* ===== RESPONZIVNÍ DESIGN ===== */

@media (max-width: 768px) {
    .faq-item summary {
        font-size: 1rem;
        padding: 1rem 1.25rem;
        padding-right: 2.5rem;
    }
    
    .faq-item summary::after {
        right: 1rem;
        font-size: 1.25rem;
    }
    
    .faq-item > *:not(summary) {
        padding: 0 1.25rem 1rem;
    }
}

/* Odstranění mezery nad CTA sekcí */
.has-faroe-ocean-background-color.alignfull {
    margin-top: 0 !important;
}

/* Nebo specificky pro CTA sekci s textem */
.wp-block-group.alignfull:has(h2:contains("Připravte se na cestu života")) {
    margin-top: 0 !important;
}

/* Pokud je mezera mezi testimonials a CTA */
.has-faroe-mist-background-color + .has-faroe-ocean-background-color {
    margin-top: 0 !important;
}

/* Obecně mezi sekcemi s pozadím */
.wp-block-group[class*="background-color"] + .wp-block-group[class*="background-color"] {
    margin-top: 0 !important;
}

/* ===== HERO SEKCE S OBRÁZKEM ===== */

/* Obrázek obálky knihy */
.book-cover-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-cover-image:hover img {
    transform: translateY(-5px) rotate(-2deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* 3D efekt pro knihu */
.book-cover-image {
    perspective: 1000px;
    position: relative;
}

.book-cover-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    width: 5%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(0,0,0,0.2) 0%, 
        rgba(0,0,0,0.1) 50%, 
        transparent 100%);
    transform: rotateY(90deg);
    transform-origin: right;
}

/* Responzivní úpravy */
@media (max-width: 768px) {
    /* Na mobilu text a obrázek pod sebou */
    .wp-block-columns.are-vertically-aligned-center {
        flex-direction: column !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    
    /* Centrovat text na mobilu */
    .wp-block-column:first-child .wp-block-heading,
    .wp-block-column:first-child p {
        text-align: center !important;
    }
    
    .wp-block-column:first-child .wp-block-buttons {
        justify-content: center !important;
    }
    
    /* Menší obrázek na mobilu */
    .book-cover-image {
        max-width: 300px;
        margin: 2rem auto 0;
    }
}

/* Animace při načtení */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-block-column:first-child > * {
    animation: fadeInUp 0.8s ease-out backwards;
}

.wp-block-column:first-child > *:nth-child(1) { animation-delay: 0.1s; }
.wp-block-column:first-child > *:nth-child(2) { animation-delay: 0.2s; }
.wp-block-column:first-child > *:nth-child(3) { animation-delay: 0.3s; }
.wp-block-column:first-child > *:nth-child(4) { animation-delay: 0.4s; }

.book-cover-image {
    animation: fadeInUp 0.8s ease-out 0.5s backwards;
}

/* Trust badges styling */
.wp-block-group p[style*="0.9rem"] {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    opacity: 0.9;
}

/* Alternativní varianta - obrázek vlevo */
.hero-image-left .wp-block-columns {
    flex-direction: row-reverse;
}

/* Varianta s mockup (tablet/phone) */
.book-cover-mockup {
    position: relative;
    display: inline-block;
}

.book-cover-mockup::after {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 40%;
    height: 60%;
    background: url('assets/images/tablet-mockup.png') no-repeat center;
    background-size: contain;
    z-index: -1;
}