/*
Theme Name: Moje Vlastní Šablona
Theme URI: https://vasadomena.cz/
Author: Vaše Jméno
Author URI: https://vasadomena.cz/
Description: Responzivní šablona vytvořená na míru. Obsahuje přizpůsobitelnou hlavičku, patičku a sekci pro snadnou úpravu barev.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive-layout, custom-colors, custom-logo, custom-menu, header-contacts
Text Domain: moje-vlastni-sablona
*/

/*
================================================================
== SEKCE PRO JEDNODUCHÉ BARVENÍ ŠABLONY ==
== Zde si můžete snadno změnit barvy hlavních prvků webu. ==
================================================================
*/
:root {
    --barva-pozadi-webu: #fdfdfd;
    --barva-textu: #333333;
    --barva-odkazu: #d6336c;
    --barva-headeru-a-footeru: #ffffff;
    --barva-ohraniceni: #e9ecef;
    --barva-pozadi-menu: #343a40;
    --barva-textu-menu: #ffffff;
    --barva-pozadi-hledani: #f1f3f5;
    --barva-tlacitka-hledani: #d6336c;
}
/* ============================================================== */


/* --- Základní styly --- */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.7;
    background-color: var(--barva-pozadi-webu);
    color: var(--barva-textu);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

a {
    color: var(--barva-odkazu);
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Hlavička (Header) --- */
.site-header {
    background-color: var(--barva-headeru-a-footeru);
    border-bottom: 1px solid var(--barva-ohraniceni);
    padding: 10px 0;
}

.header-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--barva-ohraniceni);
    margin-bottom: 10px;
}

.header-contact {
    font-size: 0.9em;
    color: #6c757d;
}

.header-contact a {
    color: inherit;
    margin-left: 20px;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.site-branding .custom-logo {
    max-height: 70px; /* Maximální výška loga */
    width: auto;
}
.site-branding h1 { /* Fallback, pokud není logo */
    margin: 0;
    font-size: 1.8em;
}
.site-branding h1 a {
    color: inherit;
}

.header-search .search-form {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--barva-ohraniceni);
}
.header-search .search-field {
    padding: 10px;
    border: none;
    background-color: var(--barva-pozadi-hledani);
    min-width: 200px;
}
.header-search .search-submit {
    padding: 10px 15px;
    border: none;
    background-color: var(--barva-tlacitka-hledani);
    color: white;
    cursor: pointer;
}

/* --- Navigační menu --- */
.main-navigation {
    background-color: var(--barva-pozadi-menu);
    width: 100%;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.main-navigation ul li a {
    display: block;
    padding: 15px 20px;
    color: var(--barva-textu-menu);
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s;
}
.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a {
    background-color: var(--barva-odkazu);
}

/* --- Hlavní obsah --- */
.site-content {
    padding: 40px 0;
}
.entry-title {
    margin-top: 0;
}

/* Podpora pro galerii v editoru */
.wp-block-gallery.has-nested-images {
    display: grid;
    grid-gap: 10px;
}

/* --- Patička (Footer) --- */
.site-footer {
    background-color: var(--barva-headeru-a-footeru);
    padding: 30px 0;
    margin-top: 40px;
    text-align: center;
    font-size: 0.9em;
    color: #6c757d;
    border-top: 1px solid var(--barva-ohraniceni);
}

/* --- Responzivita --- */
@media (max-width: 768px) {
    .header-main {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .header-top {
        justify-content: center;
    }
    
    .header-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .header-contact a {
        margin-left: 0;
    }

    .main-navigation ul {
        flex-direction: column;
        text-align: center;
    }
}